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 theme from '../../utils/theme';
|
||||
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)`
|
||||
position: relative;
|
||||
@ -14,6 +15,7 @@ const CodeShellStyle = styled(FlexColumn)`
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
max-width: ${({maxWidth}) => maxWidth ? maxWidth : 'none'};
|
||||
|
||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||
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 [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) => {
|
||||
if (command[0] === '\t') {
|
||||
return <> {formatCommand(command.slice(1))}</>;
|
||||
/* eslint-disable */
|
||||
} else if (command[0] === '\s') {
|
||||
return <> {formatCommand(command.slice(1))}</>;
|
||||
} return command;
|
||||
}
|
||||
return command;
|
||||
};
|
||||
|
||||
const renderCommands = () => {
|
||||
@ -45,9 +74,10 @@ const CodeShell = (props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<CodeShellStyle as='ul'>
|
||||
<CodeShellStyle as='ul' maxWidth={props.maxWidth}>
|
||||
<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()}
|
||||
</CodeShellStyle>
|
||||
);
|
||||
|
||||
@ -6,12 +6,14 @@ import CodeShell from '../generic/CodeShell';
|
||||
import cubeIcon from '../../assets/cube_ico.svg';
|
||||
import theme from '../../utils/theme';
|
||||
import {IS_MOBILE} from '../../utils/globals';
|
||||
import Media from 'react-media';
|
||||
|
||||
const HowTo = () => {
|
||||
return (
|
||||
<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'>
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
|
||||
gap={IS_MOBILE() ? '24px' : '48px'} alignmentX={IS_MOBILE() ? 'flex-start' : 'center'}
|
||||
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'}>
|
||||
Get challenge repo
|
||||
</H2>
|
||||
@ -19,7 +21,7 @@ const HowTo = () => {
|
||||
<CircleNumber number='1'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
You need to create empty repo with name:
|
||||
<Medium>
|
||||
<Medium as='span'>
|
||||
yourID/challengeName
|
||||
</Medium>
|
||||
</Body>
|
||||
@ -38,17 +40,18 @@ const HowTo = () => {
|
||||
Make sure Gonito.net has access to your repo (e.g. by making it public).
|
||||
</Body>
|
||||
</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'}>
|
||||
Work on your solution
|
||||
</H2>
|
||||
<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
|
||||
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 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>
|
||||
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
|
||||
<H3 as='h3'>
|
||||
@ -58,7 +61,7 @@ const HowTo = () => {
|
||||
commands={['wget https://gonito.net/get/bin/geval', 'chmod u+x geval', './geval --help']}/>
|
||||
</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'}>
|
||||
Push your solution
|
||||
</H2>
|
||||
@ -79,7 +82,8 @@ const HowTo = () => {
|
||||
`git commit -m 'my brilliant solution'`,
|
||||
'git push origin my-brilliant-branch']}/>
|
||||
</FlexColumn>
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
|
||||
<FlexColumn as='article'>
|
||||
<FlexColumn alignmentX='flex-start' maxWidth='680px' gap={IS_MOBILE() ? '16px' : '24px'}>
|
||||
<H2 as='h2' margin='0 0 8px 0'>
|
||||
Submit solution to Gonito
|
||||
</H2>
|
||||
@ -101,12 +105,17 @@ const HowTo = () => {
|
||||
configure a webhook.
|
||||
</Body>
|
||||
</FlexColumn>
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'>
|
||||
<H3 as='h3'>
|
||||
</FlexColumn>
|
||||
<Media query='(max-width: 1224px)'>
|
||||
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'
|
||||
maxWidth='680px' width='100%'>
|
||||
<H3 as='h3' margin='24px 0 0 0'>
|
||||
Submission metadata
|
||||
</H3>
|
||||
<Body>
|
||||
Gonito can take the metadata (description, tags, parameters) of a submission from a number of
|
||||
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'}>
|
||||
@ -126,7 +135,8 @@ const HowTo = () => {
|
||||
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
<Medium>gonito.yaml</Medium> will be always skipped even if matches a mask given in the
|
||||
<Medium as='span'>gonito.yaml</Medium> will be always skipped even if matches a mask
|
||||
given in the
|
||||
param-files field,
|
||||
</Body>
|
||||
</FlexRow>
|
||||
@ -141,7 +151,7 @@ const HowTo = () => {
|
||||
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
|
||||
<CircleNumber number='2'/>
|
||||
<Body as='p' margin='auto 0'>
|
||||
<Medium>Gonito.yaml</Medium> file committed to the repository,
|
||||
<Medium as='span'>Gonito.yaml</Medium> file committed to the repository,
|
||||
</Body>
|
||||
</Grid>
|
||||
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
|
||||
@ -176,8 +186,10 @@ const HowTo = () => {
|
||||
backgroundColor={theme.colors.green}/>
|
||||
<Body as='p' width='90%'>
|
||||
e.g. if the output file
|
||||
is <Medium>out-epochs=10</Medium>, <Medium>learning-rate=0.01</Medium>, then parameters
|
||||
<Medium>epochs=10</Medium> and <Medium>learning-rare=0.01</Medium> will be extracted;
|
||||
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'}>
|
||||
@ -203,14 +215,9 @@ const HowTo = () => {
|
||||
<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>tags:</Medium>
|
||||
tags taken from a line starting with <Medium as='span'>tags:</Medium>
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<Body>
|
||||
Here is an example of <Medium>gonito.yaml</Medium>, in which all metadata could be given (note
|
||||
that you can also
|
||||
add links to external resources using the <Medium>`links`</Medium> section):
|
||||
</Body>
|
||||
<CodeShell codeBlockIndex={5} disablePrompt
|
||||
commands={['description: This my brilliant solution',
|
||||
'tags:', '\t- neutral-network', '\t- left-to-right',
|
||||
@ -221,11 +228,147 @@ const HowTo = () => {
|
||||
'\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>
|
||||
</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>
|
||||
It might seem a little bit complicated, but you could simply use the method which is the most
|
||||
convenient for you.
|
||||
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>
|
||||
);
|
||||
|
||||
@ -67,7 +67,7 @@ const Table = (props) => {
|
||||
return (
|
||||
<FlexColumn as='table' margin='32px 0 72px 0' width='100%'>
|
||||
<FlexColumn as='tbody' width='100%'>
|
||||
<Grid
|
||||
<Grid as='tr'
|
||||
gridGap='20px' position='relative' width='100%' padding='4px' margin='0 0 6px 0'
|
||||
gridTemplateColumns={props.gridTemplateColumns}>
|
||||
{props.headerElements.map((elem, i) => {
|
||||
@ -96,7 +96,7 @@ const Table = (props) => {
|
||||
</FlexRow>
|
||||
);
|
||||
})}
|
||||
<Line height='2px' top='32px' shadow={theme.shadow}/>
|
||||
<Line height='2px' top='32px' as='td' shadow={theme.shadow}/>
|
||||
</Grid>
|
||||
{elementsToMap.map((elem, index) => {
|
||||
return (
|
||||
|
||||
@ -62,7 +62,7 @@ const Challenge = (props) => {
|
||||
return (
|
||||
<>
|
||||
<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'>
|
||||
<Loading visible={loading}/>
|
||||
<FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user