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

Merge pull request #74 from mattyl006/my-brilliant-branch

Browse Source 
handle copy commands from CodeShell and some html structure refactor
This commit is contained in:
Mateusz Tylka 2022-11-18 13:16:55 +01:00 committed by mattyl006
commit 4bc98aa167
6 changed files with 338 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

@ -1,3 +1,3 @@
REACT_APP_KC_URL=https://auth-dev.csi.wmi.amu.edu.pl/ REACT_APP_KC_URL=https://auth-dev.csi.wmi.amu.edu.pl/
REACT_APP_KC_REALM=gonito-dev REACT_APP_KC_REALM=gonito-dev
REACT_APP_KC_CLIENT_ID=gonito-dev-heroku REACT_APP_KC_CLIENT_ID=gonito-dev-localhost

1
src/assets/check_ico.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 428 B

40
src/components/generic/CodeShell.js
View File

@ -3,7 +3,8 @@ import {FlexColumn, Svg} from '../../utils/containers';
import styled from 'styled-components'; import styled from 'styled-components';
import theme from '../../utils/theme'; import theme from '../../utils/theme';
import copyIco from '../../assets/copy_ico.svg'; import copyIco from '../../assets/copy_ico.svg';
import {Code} from '../../utils/fonts'; import checkIco from '../../assets/check_ico.svg';
import {Body, Code} from '../../utils/fonts';
const CodeShellStyle = styled(FlexColumn)` const CodeShellStyle = styled(FlexColumn)`
position: relative; position: relative;
@ -14,6 +15,7 @@ const CodeShellStyle = styled(FlexColumn)`
border-radius: 4px; border-radius: 4px;
width: 100%; width: 100%;
align-items: flex-start; align-items: flex-start;
max-width: ${({maxWidth}) => maxWidth ? maxWidth : 'none'};
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({theme}) => theme.overMobile}) {
gap: 12px; gap: 12px;
@ -21,21 +23,48 @@ const CodeShellStyle = styled(FlexColumn)`
} }
`; `;
const CopiedMessageStyle = styled(Body)`
font-size: 16px;
position: absolute;
top: -24px;
right: -10px;
background-color: ${({theme}) => theme.colors.green};
color: ${({theme}) => theme.colors.white};
border-radius: 4px;
padding: 6px;
`;
const CodeShell = (props) => { const CodeShell = (props) => {
const [ico, setIco] = React.useState(copyIco);
const clickCopyButton = () => {
let commands = '';
if (props.commands.length > 1) {
for (let command of props.commands)
commands += command + '\n';
} else commands = props.commands;
navigator.clipboard.writeText(commands).then(r => console.log(r));
setIco(checkIco);
setTimeout(() => {
setIco(copyIco);
}, 3000);
};
const formatCommand = (command) => { const formatCommand = (command) => {
if (command[0] === '\t') { if (command[0] === '\t') {
return <>&nbsp;&nbsp;&nbsp;&nbsp;{formatCommand(command.slice(1))}</>; return <>&nbsp;&nbsp;&nbsp;&nbsp;{formatCommand(command.slice(1))}</>;
/* eslint-disable */ /* eslint-disable */
} else if (command[0] === '\s') { } else if (command[0] === '\s') {
return <>&nbsp;{formatCommand(command.slice(1))}</>; return <>&nbsp;{formatCommand(command.slice(1))}</>;
} return command; }
return command;
}; };
const renderCommands = () => { const renderCommands = () => {
return ( return (
props.commands.map((command, index) => { props.commands.map((command, index) => {
return ( return (
<Code key={`command-${props.codeBlockIndex}-${index}`} as='li' <Code key={`command-${props.codeBlockIndex}-${index}`} as='li'
before={!props.disablePrompt}> before={!props.disablePrompt}>
{formatCommand(command)} {formatCommand(command)}
</Code> </Code>
@ -45,9 +74,10 @@ const CodeShell = (props) => {
}; };
return ( return (
<CodeShellStyle as='ul'> <CodeShellStyle as='ul' maxWidth={props.maxWidth}>
<Svg position='absolute' top='12px' right='12px' cursor='pointer' <Svg position='absolute' top='12px' right='12px' cursor='pointer'
backgroundColor={theme.colors.white} src={copyIco}/> backgroundColor={theme.colors.white} src={ico} onClick={clickCopyButton}/>
{ico === checkIco ? <CopiedMessageStyle>copied!</CopiedMessageStyle> : ''}
{renderCommands()} {renderCommands()}
</CodeShellStyle> </CodeShellStyle>
); );

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

@ -6,12 +6,14 @@ import CodeShell from '../generic/CodeShell';
import cubeIcon from '../../assets/cube_ico.svg'; import cubeIcon from '../../assets/cube_ico.svg';
import theme from '../../utils/theme'; import theme from '../../utils/theme';
import {IS_MOBILE} from '../../utils/globals'; import {IS_MOBILE} from '../../utils/globals';
import Media from 'react-media';
const HowTo = () => { const HowTo = () => {
return ( return (
<FlexColumn margin={IS_MOBILE() ? null : '64px 0 0 0'} padding={IS_MOBILE() ? '12px 20px' : null} <FlexColumn margin={IS_MOBILE() ? null : '64px 0 0 0'} padding={IS_MOBILE() ? '12px 20px' : null}
gap={IS_MOBILE() ? '24px' : '48px'} alignmentX='flex-start' maxWidth='668px'> gap={IS_MOBILE() ? '24px' : '48px'} alignmentX={IS_MOBILE() ? 'flex-start' : 'center'}
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'> maxWidth={IS_MOBILE() ? '668px' : 'none'}>
<FlexColumn as='article' maxWidth='680px' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}> <H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
Get challenge repo Get challenge repo
</H2> </H2>
@ -19,7 +21,7 @@ const HowTo = () => {
<CircleNumber number='1'/> <CircleNumber number='1'/>
<Body as='p' margin='auto 0'> <Body as='p' margin='auto 0'>
You need to create empty repo with name: You need to create empty repo with name:
<Medium> <Medium as='span'>
yourID/challengeName yourID/challengeName
</Medium> </Medium>
</Body> </Body>
@ -38,17 +40,18 @@ const HowTo = () => {
Make sure Gonito.net has access to your repo (e.g. by making it public). Make sure Gonito.net has access to your repo (e.g. by making it public).
</Body> </Body>
</FlexColumn> </FlexColumn>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'> <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} maxWidth='680px' alignmentX='flex-start'>
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}> <H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
Work on your solution Work on your solution
</H2> </H2>
<Body as='p'> <Body as='p'>
You need to generate your solution for the test set as <Medium>test-A/out.tsv</Medium>. It is also You need to generate your solution for the test set as <Medium as='span'>test-A/out.tsv</Medium>. It
is also
recommended to recommended to
generate the output for the dev set <Medium>(dev-0/out.tsv)</Medium>. generate the output for the dev set <Medium as='span'>(dev-0/out.tsv)</Medium>.
</Body> </Body>
<Body as='p'> <Body as='p'>
You can evaluate results for the dev set locally by <Medium>geval</Medium>. You can evaluate results for the dev set locally by <Medium as='span'>geval</Medium>.
</Body> </Body>
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'> <FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
<H3 as='h3'> <H3 as='h3'>
@ -58,7 +61,7 @@ const HowTo = () => {
commands={['wget https://gonito.net/get/bin/geval', 'chmod u+x geval', './geval --help']}/> commands={['wget https://gonito.net/get/bin/geval', 'chmod u+x geval', './geval --help']}/>
</FlexColumn> </FlexColumn>
</FlexColumn> </FlexColumn>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'> <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} maxWidth='680px' alignmentX='flex-start'>
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}> <H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
Push your solution Push your solution
</H2> </H2>
@ -79,153 +82,293 @@ const HowTo = () => {
`git commit -m 'my brilliant solution'`, `git commit -m 'my brilliant solution'`,
'git push origin my-brilliant-branch']}/> 'git push origin my-brilliant-branch']}/>
</FlexColumn> </FlexColumn>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'> <FlexColumn as='article'>
<H2 as='h2' margin='0 0 8px 0'> <FlexColumn alignmentX='flex-start' maxWidth='680px' gap={IS_MOBILE() ? '16px' : '24px'}>
Submit solution to Gonito <H2 as='h2' margin='0 0 8px 0'>
</H2> Submit solution to Gonito
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'> </H2>
<H3 as='h3'> <FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
Manual submission <H3 as='h3'>
</H3> Manual submission
<Body> </H3>
In case other methods fail, you can submit your solution manually — go to the <Medium>submit <Body>
form</Medium>. In case other methods fail, you can submit your solution manually — go to the <Medium>submit
</Body> form</Medium>.
</Body>
</FlexColumn>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'>
<H3 as='h3'>
Integration with external repos
</H3>
<Body>
If you use an external repo (e.g. at your own of Gitolite or at GitLab/GitHub), you can
configure a webhook.
</Body>
</FlexColumn>
</FlexColumn> </FlexColumn>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'> <Media query='(max-width: 1224px)'>
<H3 as='h3'> <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'
Integration with external repos maxWidth='680px' width='100%'>
</H3> <H3 as='h3' margin='24px 0 0 0'>
<Body> Submission metadata
If you use an external repo (e.g. at your own of Gitolite or at GitLab/GitHub), you can </H3>
configure a webhook. <Body>
</Body> Gonito can take the metadata (description, tags, parameters) of a submission from a
</FlexColumn> number
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'> of
<H3 as='h3'> sources (in order of precedence):
Submission metadata
</H3>
<Body>
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> </Body>
</Grid> <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'> <CircleNumber number='1'/>
<Svg src={cubeIcon} width='24px' height='22px' size='cover' <Body as='p' margin='auto 0'>
backgroundColor={theme.colors.green}/> The YAML files specified in the param-files field of the gonito.yaml file
<Body as='p' width='90%'> </Body>
only applicable for parameters </Grid>
</Body> <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
</FlexRow> <Svg src={cubeIcon} width='24px' height='22px' size='cover'
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'> backgroundColor={theme.colors.green}/>
<Svg src={cubeIcon} width='24px' height='22px' size='cover' <Body as='p' width='90%'>
backgroundColor={theme.colors.green}/> only applicable for parameters
<Body as='p' width='90%'> </Body>
<Medium>gonito.yaml</Medium> will be always skipped even if matches a mask given in the </FlexRow>
param-files field, <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
</Body> <Svg src={cubeIcon} width='24px' height='22px' size='cover'
</FlexRow> backgroundColor={theme.colors.green}/>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'> <Body as='p' width='90%'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover' <Medium as='span'>gonito.yaml</Medium> will be always skipped even if matches a mask
backgroundColor={theme.colors.green}/> given in the
<Body as='p' width='90%'> param-files field,
parameters blacklisted in the unwanted-params field of the gonito.yaml file will be </Body>
discarded, </FlexRow>
</Body> <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
</FlexRow> <Svg src={cubeIcon} width='24px' height='22px' size='cover'
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}> backgroundColor={theme.colors.green}/>
<CircleNumber number='2'/> <Body as='p' width='90%'>
<Body as='p' margin='auto 0'> parameters blacklisted in the unwanted-params field of the gonito.yaml file will be
<Medium>Gonito.yaml</Medium> file committed to the repository, discarded,
</Body> </Body>
</Grid> </FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'> <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<Svg src={cubeIcon} width='24px' height='22px' size='cover' <CircleNumber number='2'/>
backgroundColor={theme.colors.green}/> <Body as='p' margin='auto 0'>
<Body as='p' width='90%'> <Medium as='span'>Gonito.yaml</Medium> file committed to the repository,
description given in the description field, </Body>
</Body> </Grid>
</FlexRow> <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'> <Svg src={cubeIcon} width='24px' height='22px' size='cover'
<Svg src={cubeIcon} width='24px' height='22px' size='cover' backgroundColor={theme.colors.green}/>
backgroundColor={theme.colors.green}/> <Body as='p' width='90%'>
<Body as='p' width='90%'> description given in the description field,
tags given in tags field, </Body>
</Body> </FlexRow>
</FlexRow> <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'> <Svg src={cubeIcon} width='24px' height='22px' size='cover'
<Svg src={cubeIcon} width='24px' height='22px' size='cover' backgroundColor={theme.colors.green}/>
backgroundColor={theme.colors.green}/> <Body as='p' width='90%'>
<Body as='p' width='90%'> tags given in tags field,
parameters given in params field, </Body>
</Body> </FlexRow>
</FlexRow> <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}> <Svg src={cubeIcon} width='24px' height='22px' size='cover'
<CircleNumber number='3'/> backgroundColor={theme.colors.green}/>
<Body as='p' margin='auto 0'> <Body as='p' width='90%'>
Names of output files (only for parameters) parameters given in params field,
</Body> </Body>
</Grid> </FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'> <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<Svg src={cubeIcon} width='24px' height='22px' size='cover' <CircleNumber number='3'/>
backgroundColor={theme.colors.green}/> <Body as='p' margin='auto 0'>
<Body as='p' width='90%'> Names of output files (only for parameters)
e.g. if the output file </Body>
is <Medium>out-epochs=10</Medium>, <Medium>learning-rate=0.01</Medium>, then parameters </Grid>
<Medium>epochs=10</Medium> and <Medium>learning-rare=0.01</Medium> will be extracted; <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
</Body> <Svg src={cubeIcon} width='24px' height='22px' size='cover'
</FlexRow> backgroundColor={theme.colors.green}/>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}> <Body as='p' width='90%'>
<CircleNumber number='4'/> e.g. if the output file
<Body as='p' margin='auto 0'> is <Medium as='span'>out-epochs=10</Medium>, <Medium
Submission form (when submitting manually) as='span'>learning-rate=0.01</Medium>, then parameters
</Body> <Medium as='span'>epochs=10</Medium> and <Medium
</Grid> as='span'>learning-rare=0.01</Medium> will be extracted;
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}> </Body>
<CircleNumber number='5'/> </FlexRow>
<Body as='p' margin='auto 0'> <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
Git commit message <CircleNumber number='4'/>
</Body> <Body as='p' margin='auto 0'>
</Grid> Submission form (when submitting manually)
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'> </Body>
<Svg src={cubeIcon} width='24px' height='22px' size='cover' </Grid>
backgroundColor={theme.colors.green}/> <Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<Body as='p' width='90%'> <CircleNumber number='5'/>
description taken from the first paragraph <Body as='p' margin='auto 0'>
</Body> Git commit message
</FlexRow> </Body>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'> </Grid>
<Svg src={cubeIcon} width='24px' height='22px' size='cover' <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
backgroundColor={theme.colors.green}/> <Svg src={cubeIcon} width='24px' height='22px' size='cover'
<Body as='p' width='90%'> backgroundColor={theme.colors.green}/>
tags taken from a line starting with <Medium>tags:</Medium> <Body as='p' width='90%'>
</Body> description taken from the first paragraph
</FlexRow> </Body>
<Body> </FlexRow>
Here is an example of <Medium>gonito.yaml</Medium>, in which all metadata could be given (note <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
that you can also <Svg src={cubeIcon} width='24px' height='22px' size='cover'
add links to external resources using the <Medium>`links`</Medium> section): backgroundColor={theme.colors.green}/>
</Body> <Body as='p' width='90%'>
<CodeShell codeBlockIndex={5} disablePrompt tags taken from a line starting with <Medium as='span'>tags:</Medium>
commands={['description: This my brilliant solution', </Body>
'tags:', '\t- neutral-network', '\t- left-to-right', </FlexRow>
'params:', '\tepochs: 10', '\tlearning-rate: 0.01', <CodeShell codeBlockIndex={5} disablePrompt
'unwanted-params:', '\t- model-file', '\t- vocab-file', commands={['description: This my brilliant solution',
'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/', 'tags:', '\t- neutral-network', '\t- left-to-right',
'links:', '\t- title: "Some external link"', 'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
'\t\s\surl: "https://example.org/xyz"', '\t- title: "Yet another link"', 'unwanted-params:', '\t- model-file', '\t- vocab-file',
'\t\s\shttps://example.com/foo-bar-baz-123"', 'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
'\t- url: "https://example.net/bare-link-without-text']}/> 'links:', '\t- title: "Some external link"',
<Body> '\t\s\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
It might seem a little bit complicated, but you could simply use the method which is the most '\t\s\shttps://example.com/foo-bar-baz-123"',
convenient for you. '\t- url: "https://example.net/bare-link-without-text']}/>
</Body> </FlexColumn>
</FlexColumn> </Media>
<Media query='(min-width: 1225px)'>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} width='100%'>
<FlexColumn alignmentX='flex-start' maxWidth='680px' gap='32px' margin='24px 0'>
<H3 as='h3'>
Submission metadata
</H3>
<Body>
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>
</Media>
</FlexColumn> </FlexColumn>
</FlexColumn> </FlexColumn>
); );

8
src/components/specific_challenge/Table.js
View File

@ -67,9 +67,9 @@ const Table = (props) => {
return ( return (
<FlexColumn as='table' margin='32px 0 72px 0' width='100%'> <FlexColumn as='table' margin='32px 0 72px 0' width='100%'>
<FlexColumn as='tbody' width='100%'> <FlexColumn as='tbody' width='100%'>
<Grid <Grid as='tr'
gridGap='20px' position='relative' width='100%' padding='4px' margin='0 0 6px 0' gridGap='20px' position='relative' width='100%' padding='4px' margin='0 0 6px 0'
gridTemplateColumns={props.gridTemplateColumns}> gridTemplateColumns={props.gridTemplateColumns}>
{props.headerElements.map((elem, i) => { {props.headerElements.map((elem, i) => {
return ( return (
<FlexRow key={`table-header-${i}`} alignmentX='flex-start' as='td' <FlexRow key={`table-header-${i}`} alignmentX='flex-start' as='td'
@ -96,7 +96,7 @@ const Table = (props) => {
</FlexRow> </FlexRow>
); );
})} })}
<Line height='2px' top='32px' shadow={theme.shadow}/> <Line height='2px' top='32px' as='td' shadow={theme.shadow}/>
</Grid> </Grid>
{elementsToMap.map((elem, index) => { {elementsToMap.map((elem, index) => {
return ( return (

2
src/pages/Challenge.js
View File

@ -62,7 +62,7 @@ const Challenge = (props) => {
return ( return (
<> <>
<DesktopChallengeMenu setSection={setSection} section={section}/> <DesktopChallengeMenu setSection={setSection} section={section}/>
<FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 0 64px 310px'> <FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 24px 64px 310px'>
<FlexRow gap='32px' margin='0 0 32px 0' padding='16px'> <FlexRow gap='32px' margin='0 0 32px 0' padding='16px'>
<Loading visible={loading}/> <Loading visible={loading}/>
<FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'> <FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>