handle copy commands from CodeShell and some html structure refactor
This commit is contained in:
parent
1c392fea0d
commit
7123604061
1
src/assets/check_ico.svg
Normal file
1
src/assets/check_ico.svg
Normal 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>
|
After Width: | Height: | Size: 428 B |
@ -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,14 +23,41 @@ 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';
|
||||||
|
}
|
||||||
|
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 <> {formatCommand(command.slice(1))}</>;
|
return <> {formatCommand(command.slice(1))}</>;
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
} else if (command[0] === '\s') {
|
} else if (command[0] === '\s') {
|
||||||
return <> {formatCommand(command.slice(1))}</>;
|
return <> {formatCommand(command.slice(1))}</>;
|
||||||
} return command;
|
}
|
||||||
|
return command;
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderCommands = () => {
|
const renderCommands = () => {
|
||||||
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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 (
|
||||||
|
@ -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'>
|
||||||
|
Loading…
Reference in New Issue
Block a user