s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

cr fixes

Browse Source
This commit is contained in:
Mateusz Tylka 2023-02-21 13:21:36 +01:00
parent 77b85173b0
commit e50666d01b
8 changed files with 142 additions and 476 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/specific_challenge/HowTo/HowTo.js
View File

@ -1,13 +1,7 @@
import React from 'react';
import { FlexColumn } from '../../../utils/containers';
import { IS_MOBILE } from '../../../utils/globals';
// import Media from 'react-media';
import GetChallengeRepo from './sections/GetChallengeRepo';
import WorkOnYourSolution from './sections/WorkOnYourSolution';
import PushYourSolution from './sections/PushYourSolution';
// import SubmissionMetadataSmallDesktop from './sections/SubmissionMetadataSmallDesktop';
// import SubmissionMetadataLargeDesktop from './sections/SubmissionMetadataLargeDesktop';
import SubmitSolutionToGonito from './sections/SubmitSolutionToGonito';
import HowToContent from './sections/HowToContent';
const HowTo = (props) => {
return (
@ -19,22 +13,10 @@ const HowTo = (props) => {
maxWidth={IS_MOBILE() ? '668px' : 'none'}
>
<FlexColumn maxWidth="680px" alignmentX="flex-start" gap="48px">
<GetChallengeRepo
<HowToContent
user={props.user ? props.user : 'yourID'}
challengeName={props.challengeName}
/>
<WorkOnYourSolution />
<PushYourSolution challengeName={props.challengeName} />
<SubmitSolutionToGonito />
</FlexColumn>
<FlexColumn as="article">
{/* <SubmitSolutionToGonito /> */}
{/* <Media query='(max-width: 1224px)'>
<SubmissionMetadataSmallDesktop/>
</Media>
<Media query='(min-width: 1225px)'>
<SubmissionMetadataLargeDesktop/>
</Media> */}
</FlexColumn>
</FlexColumn>
);

75
src/components/specific_challenge/HowTo/sections/GetChallengeRepo.js
View File

@ -1,75 +0,0 @@
import React from 'react';
import { IS_MOBILE } from '../../../../utils/globals';
import { Body, H2, Medium } from '../../../../utils/fonts';
import { FlexColumn, Grid } from '../../../../utils/containers';
import CircleNumber from '../../../generic/CircleNumber';
import CodeShell from '../../../generic/CodeShell';
const GetChallengeRepo = (props) => {
const pullCodeLineRender = () => {
if (
props.challengeName === 'cnlps-caiccaic' ||
props.challengeName === 'cnlps-ticrc'
) {
return `git pull git@github.com:kubapok/${props.challengeName}.git`;
} else {
return `git pull git://gonito.net/${props.challengeName}.git`;
}
};
return (
<FlexColumn
as="article"
width="100%"
gap={IS_MOBILE() ? '16px' : '24px'}
alignmentX="flex-start"
>
<H2 as="h2" margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
Get challenge repo
</H2>
<Grid
width="100%"
gridTemplateColumns="auto 1fr"
gridGap={IS_MOBILE() ? '8px' : '16px'}
>
<CircleNumber number="1" />
<Body as="p" margin="auto 0">
Create a private git repository with the name
<Medium as="span">&nbsp;{props.challengeName}</Medium>
.&nbsp;The name of the repository must match!
</Body>
</Grid>
<Grid
width="100%"
gridTemplateColumns="auto 1fr"
gridGap={IS_MOBILE() ? '8px' : '16px'}
>
<CircleNumber number="2" />
<Body as="p" margin="auto 0">
Add the following ssh key <Medium as="span">REPO_KEY_HERE</Medium> to
your deploy keys in your git repository settings.
</Body>
</Grid>
<Grid
width="100%"
gridTemplateColumns="auto 1fr"
gridGap={IS_MOBILE() ? '8px' : '16px'}
>
<CircleNumber number="3" />
<Body as="p" margin="auto 0">
Clone your repository and pull from the challenge mother repository
</Body>
</Grid>
<CodeShell
codeBlockIndex={1}
commands={[
`git clone your-git/${props.challengeName}`,
`cd ${props.challengeName}`,
pullCodeLineRender(),
]}
/>
</FlexColumn>
);
};
export default GetChallengeRepo;

140
src/components/specific_challenge/HowTo/sections/HowToContent.js Normal file
View File

@ -0,0 +1,140 @@
import React from 'react';
import { IS_MOBILE } from '../../../../utils/globals';
import { Body, H2, Medium } from '../../../../utils/fonts';
import { FlexColumn, Grid } from '../../../../utils/containers';
import CircleNumber from '../../../generic/CircleNumber';
import CodeShell from '../../../generic/CodeShell';
const HowToContent = (props) => {
const pullCodeLineRender = () => {
if (
props.challengeName === 'cnlps-caiccaic' ||
props.challengeName === 'cnlps-ticrc'
) {
return `git pull git@github.com:kubapok/${props.challengeName}.git`;
} else {
return `git pull git://gonito.net/${props.challengeName}.git`;
}
};
return (
<FlexColumn
as="article"
width="100%"
gap={IS_MOBILE() ? '16px' : '24px'}
alignmentX="flex-start"
>
<H2 as="h2" margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
How to
</H2>
<Grid
width="100%"
gridTemplateColumns="auto 1fr"
gridGap={IS_MOBILE() ? '8px' : '16px'}
>
<CircleNumber number="1" />
<Body as="p" margin="auto 0">
Create a private git repository with the name
<Medium as="span">&nbsp;{props.challengeName}</Medium>
.&nbsp;The name of the repository must match!
</Body>
</Grid>
<Grid
width="100%"
gridTemplateColumns="auto 1fr"
gridGap={IS_MOBILE() ? '8px' : '16px'}
>
<CircleNumber number="2" />
<Body as="p" margin="auto 0">
Add the following ssh key <Medium as="span">REPO_KEY_HERE</Medium> to
your deploy keys in your git repository settings.
</Body>
</Grid>
<Grid
width="100%"
gridTemplateColumns="auto 1fr"
gridGap={IS_MOBILE() ? '8px' : '16px'}
>
<CircleNumber number="3" />
<Body as="p" margin="auto 0">
Clone your repository and pull from the challenge mother repository
</Body>
</Grid>
<CodeShell
codeBlockIndex={1}
commands={[
`git clone your-git-repository/${props.challengeName}`,
`cd ${props.challengeName}`,
pullCodeLineRender(),
]}
/>
<Grid
width="100%"
gridTemplateColumns="auto 1fr"
gridGap={IS_MOBILE() ? '8px' : '16px'}
>
<CircleNumber number="4" />
<Body as="p" margin="auto 0">
Commit and push at least <Medium>*/out.tsv</Medium> files to your
repo. It is also recommended to push your source code files.
</Body>
</Grid>
<Grid
width="100%"
gridTemplateColumns="auto 1fr"
gridGap={IS_MOBILE() ? '8px' : '16px'}
>
<CircleNumber number="5" />
<Body as="p" margin="auto 0">
You need to generate your solution for the test set as{' '}
<Medium as="span">test-A/out.tsv</Medium>. You may also create the
output for the dev set <Medium as="span">dev-0/out.tsv</Medium>.
</Body>
</Grid>
<Grid
width="100%"
gridTemplateColumns="auto 1fr"
gridGap={IS_MOBILE() ? '8px' : '16px'}
>
<CircleNumber number="6" />
<Body as="p" margin="auto 0">
(This step is optional.) You can evaluate results for the dev set
locally by <Medium as="span">geval</Medium>.
</Body>
</Grid>
<CodeShell
codeBlockIndex={3}
commands={[
'wget https://gonito.net/get/bin/geval',
'chmod u+x geval',
'./geval --help',
'./geval -t dev-0',
]}
/>
<Grid
width="100%"
gridTemplateColumns="auto 1fr"
gridGap={IS_MOBILE() ? '8px' : '16px'}
>
<CircleNumber number="7" />
<Body as="p" margin="auto 0">
Commit and push at least <Medium>*/out.tsv</Medium> files to your
repo. It is also recommended to push your source code files.
</Body>
</Grid>
<Grid
width="100%"
gridTemplateColumns="auto 1fr"
gridGap={IS_MOBILE() ? '8px' : '16px'}
>
<CircleNumber number="8" />
<Body as="p" margin="auto 0">
Submit your solution to Gonito using <Medium>SUBMIT</Medium> on the
panel on the left.
</Body>
</Grid>
</FlexColumn>
);
};
export default HowToContent;

25
src/components/specific_challenge/HowTo/sections/PushYourSolution.js
View File

@ -1,25 +0,0 @@
import React from 'react';
import { IS_MOBILE } from '../../../../utils/globals';
import { Body, H2, Medium } from '../../../../utils/fonts';
import { FlexColumn } from '../../../../utils/containers';
const PushYourSolution = () => {
return (
<FlexColumn
as="article"
gap={IS_MOBILE() ? '16px' : '24px'}
width="100%"
alignmentX="flex-start"
>
<H2 as="h2" margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
Push your solution
</H2>
<Body>
Commit and push at least <Medium>*/out.tsv</Medium> files to your repo.
It is also recommended to push your source code files.
</Body>
</FlexColumn>
);
};
export default PushYourSolution;

152
src/components/specific_challenge/HowTo/sections/SubmissionMetadataLargeDesktop.js
View File

@ -1,152 +0,0 @@
import React from 'react';
import {FlexColumn, FlexRow, Grid, Svg} from '../../../../utils/containers';
import {IS_MOBILE} from '../../../../utils/globals';
import {Body, H3, Medium} from '../../../../utils/fonts';
import CircleNumber from '../../../generic/CircleNumber';
import cubeIcon from '../../../../assets/cube_ico.svg';
import theme from '../../../../utils/theme';
import CodeShell from '../../../generic/CodeShell';
const SubmissionMetadataLargeDesktop = () => {
return (
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} width='100%'>
<FlexColumn alignmentX='flex-start' maxWidth='680px' gap='32px' margin='24px 0'>
<H3 as='h2'>
Submission metadata
</H3>
<Body as='p'>
Gonito can take the metadata (description, tags, parameters) of a submission from a
number
of
sources (in order of precedence):
</Body>
</FlexColumn>
<FlexRow gap='24px'>
<FlexColumn alignmentX='flex-start' maxWidth='422px' gap='20px'>
<Grid width='100%' gridTemplateColumns='auto 1fr'
gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='1'/>
<Body as='p' margin='auto 0'>
The YAML files specified in the param-files field of the gonito.yaml file
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
only applicable for parameters
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
<Medium as='span'>gonito.yaml</Medium> will be always skipped even if matches a
mask given
in
the
param-files field,
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
parameters blacklisted in the unwanted-params field of the gonito.yaml file will
be
discarded,
</Body>
</FlexRow>
<Grid width='100%' gridTemplateColumns='auto 1fr'
gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='2'/>
<Body as='p' margin='auto 0'>
<Medium as='span'>Gonito.yaml</Medium> file committed to the repository,
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
description given in the description field,
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
tags given in tags field,
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
parameters given in params field,
</Body>
</FlexRow>
<Grid width='100%' gridTemplateColumns='auto 1fr'
gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='3'/>
<Body as='p' margin='auto 0'>
Names of output files (only for parameters)
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
e.g. if the output file
is <Medium as='span'>out-epochs=10</Medium>, <Medium
as='span'>learning-rate=0.01</Medium>, then
parameters
<Medium as='span'>epochs=10</Medium> and <Medium
as='span'>learning-rare=0.01</Medium> will be
extracted;
</Body>
</FlexRow>
<Grid width='100%' gridTemplateColumns='auto 1fr'
gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='4'/>
<Body as='p' margin='auto 0'>
Submission form (when submitting manually)
</Body>
</Grid>
<Grid width='100%' gridTemplateColumns='auto 1fr'
gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='5'/>
<Body as='p' margin='auto 0'>
Git commit message
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
description taken from the first paragraph
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
tags taken from a line starting with <Medium as='span'>tags:</Medium>
</Body>
</FlexRow>
</FlexColumn>
<CodeShell codeBlockIndex={5} disablePrompt maxWidth='446px'
commands={['description: This my brilliant solution',
'tags:', '\t- neutral-network', '\t- left-to-right',
'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
'unwanted-params:', '\t- model-file', '\t- vocab-file',
'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
'links:', '\t- title: "Some external link"',
'\t\\s\\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
'\t\\s\\shttps://example.com/foo-bar-baz-123"',
'\t- url: "https://example.net/bare-link-without-text']}/>
</FlexRow>
</FlexColumn>
);
};
export default SubmissionMetadataLargeDesktop;

137
src/components/specific_challenge/HowTo/sections/SubmissionMetadataSmallDesktop.js
View File

@ -1,137 +0,0 @@
import React from 'react';
import {FlexColumn, FlexRow, Grid, Svg} from '../../../../utils/containers';
import {IS_MOBILE} from '../../../../utils/globals';
import {Body, H3, Medium} from '../../../../utils/fonts';
import CircleNumber from '../../../generic/CircleNumber';
import cubeIcon from '../../../../assets/cube_ico.svg';
import theme from '../../../../utils/theme';
import CodeShell from '../../../generic/CodeShell';
const SubmissionMetadataSmallDesktop = () => {
return (
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'
maxWidth='680px' width='100%'>
<H3 as='h2' margin='24px 0 0 0'>
Submission metadata
</H3>
<Body as='p'>
Gonito can take the metadata (description, tags, parameters) of a submission from a
number
of
sources (in order of precedence):
</Body>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='1'/>
<Body as='p' margin='auto 0'>
The YAML files specified in the param-files field of the gonito.yaml file
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
only applicable for parameters
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
<Medium as='span'>gonito.yaml</Medium> will be always skipped even if matches a mask
given in the
param-files field,
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
parameters blacklisted in the unwanted-params field of the gonito.yaml file will be
discarded,
</Body>
</FlexRow>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='2'/>
<Body as='p' margin='auto 0'>
<Medium as='span'>Gonito.yaml</Medium> file committed to the repository,
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
description given in the description field,
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
tags given in tags field,
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
parameters given in params field,
</Body>
</FlexRow>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='3'/>
<Body as='p' margin='auto 0'>
Names of output files (only for parameters)
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
e.g. if the output file
is <Medium as='span'>out-epochs=10</Medium>, <Medium
as='span'>learning-rate=0.01</Medium>, then parameters
<Medium as='span'>epochs=10</Medium> and <Medium
as='span'>learning-rare=0.01</Medium> will be extracted;
</Body>
</FlexRow>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='4'/>
<Body as='p' margin='auto 0'>
Submission form (when submitting manually)
</Body>
</Grid>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='5'/>
<Body as='p' margin='auto 0'>
Git commit message
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
description taken from the first paragraph
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
tags taken from a line starting with <Medium as='span'>tags:</Medium>
</Body>
</FlexRow>
<CodeShell codeBlockIndex={5} disablePrompt
commands={['description: This my brilliant solution',
'tags:', '\t- neutral-network', '\t- left-to-right',
'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
'unwanted-params:', '\t- model-file', '\t- vocab-file',
'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
'links:', '\\t- title: "Some external link"',
'\\t\\s\\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
'\\t\\s\\shttps://example.com/foo-bar-baz-123"',
'\\t- url: "https://example.net/bare-link-without-text']}/>
</FlexColumn>
);
};
export default SubmissionMetadataSmallDesktop;

24
src/components/specific_challenge/HowTo/sections/SubmitSolutionToGonito.js
View File

@ -1,24 +0,0 @@
import React from 'react';
import { IS_MOBILE } from '../../../../utils/globals';
import { H2, Body } from '../../../../utils/fonts';
import { FlexColumn } from '../../../../utils/containers';
const SubmitSolutionToGonito = () => {
return (
<FlexColumn
alignmentX="flex-start"
maxWidth="680px"
width="100%"
gap={IS_MOBILE() ? '16px' : '24px'}
>
<H2 as="h2" margin="0 0 8px 0">
Submit solution to Gonito
</H2>
<Body>
Submit your solution to Gonito using SUBMIT on the panel on the left.
</Body>
</FlexColumn>
);
};
export default SubmitSolutionToGonito;

43
src/components/specific_challenge/HowTo/sections/WorkOnYourSolution.js
View File

@ -1,43 +0,0 @@
import React from 'react';
import { IS_MOBILE } from '../../../../utils/globals';
import { Body, H2, H3, Medium } from '../../../../utils/fonts';
import { FlexColumn } from '../../../../utils/containers';
import CodeShell from '../../../generic/CodeShell';
const WorkOnYourSolution = () => {
return (
<FlexColumn
as="article"
gap={IS_MOBILE() ? '16px' : '24px'}
width="100%"
alignmentX="flex-start"
>
<H2 as="h2" margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
Work on your solution
</H2>
<Body as="p">
You need to generate your solution for the test set as{' '}
<Medium as="span">test-A/out.tsv</Medium>. You may also create the
output for the dev set <Medium as="span">dev-0/out.tsv</Medium>.
</Body>
<Body as="p">
(This step is optional.) You can evaluate results for the dev set
locally by <Medium as="span">geval</Medium>.
</Body>
<FlexColumn as="article" gap="24px" alignmentX="flex-start" width="100%">
<H3 as="h3">Install geval</H3>
<CodeShell
codeBlockIndex={3}
commands={[
'wget https://gonito.net/get/bin/geval',
'chmod u+x geval',
'./geval --help',
'./geval -t dev-0',
]}
/>
</FlexColumn>
</FlexColumn>
);
};
export default WorkOnYourSolution;