How to draft content complete
This commit is contained in:
parent
acca12b53f
commit
d43701b08f
@ -18,7 +18,7 @@ const CodeShellStyle = styled(FlexColumn)`
|
|||||||
const CodeShell = (props) => {
|
const CodeShell = (props) => {
|
||||||
return (
|
return (
|
||||||
<CodeShellStyle>
|
<CodeShellStyle>
|
||||||
<Svg position='absolute' top='12px' right='12px'
|
<Svg position='absolute' top='12px' right='12px' cursor='pointer'
|
||||||
backgroundColor={theme.colors.white} src={copyIco}/>
|
backgroundColor={theme.colors.white} src={copyIco}/>
|
||||||
{props.children}
|
{props.children}
|
||||||
</CodeShellStyle>
|
</CodeShellStyle>
|
||||||
|
|||||||
@ -1,12 +1,14 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {FlexColumn, FlexRow} from '../../utils/containers';
|
import {FlexColumn, FlexRow, Svg} from '../../utils/containers';
|
||||||
import {Body, H2, Medium} from '../../utils/fonts';
|
import {Body, Code, CodeMedium, H2, H3, Medium} from '../../utils/fonts';
|
||||||
import CircleNumber from '../elements/CircleNumber';
|
import CircleNumber from '../elements/CircleNumber';
|
||||||
import CodeShell from '../elements/CodeShell';
|
import CodeShell from '../elements/CodeShell';
|
||||||
|
import cubeIcon from '../../assets/cube_ico.svg';
|
||||||
|
import theme from '../../utils/theme';
|
||||||
|
|
||||||
const HowTo = () => {
|
const HowTo = () => {
|
||||||
return (
|
return (
|
||||||
<FlexColumn padding='64px' gap='48px' alignmentX='flex-start' maxWidth='668px'>
|
<FlexColumn margin='64px 0 0 0' gap='48px' alignmentX='flex-start' maxWidth='668px'>
|
||||||
<FlexColumn as='article' gap='24px' alignmentX='flex-start'>
|
<FlexColumn as='article' gap='24px' alignmentX='flex-start'>
|
||||||
<H2 as='h2' margin='0 0 8px 0'>
|
<H2 as='h2' margin='0 0 8px 0'>
|
||||||
Get challenge repo
|
Get challenge repo
|
||||||
@ -21,7 +23,10 @@ const HowTo = () => {
|
|||||||
</Body>
|
</Body>
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
<CodeShell>
|
<CodeShell>
|
||||||
siema
|
<Code as='p'>
|
||||||
|
<CodeMedium>~$</CodeMedium> git clone
|
||||||
|
git@git.wmi.amu.edu.pl:YOURID/challenging-america-geo-prediction.git
|
||||||
|
</Code>
|
||||||
</CodeShell>
|
</CodeShell>
|
||||||
<FlexRow width='100%' gap='16px' alignmentX='flex-start'>
|
<FlexRow width='100%' gap='16px' alignmentX='flex-start'>
|
||||||
<CircleNumber number='2'/>
|
<CircleNumber number='2'/>
|
||||||
@ -29,10 +34,280 @@ const HowTo = () => {
|
|||||||
Pull gonito challenge repo
|
Pull gonito challenge repo
|
||||||
</Body>
|
</Body>
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
|
<CodeShell>
|
||||||
|
<Code as='p'>
|
||||||
|
<CodeMedium>~$</CodeMedium> cd challenging-america-geo-prediction
|
||||||
|
</Code>
|
||||||
|
<Code as='p'>
|
||||||
|
<CodeMedium>~$</CodeMedium> git pull git://gonito.net/challenging-america-geo-prediction.git
|
||||||
|
</Code>
|
||||||
|
</CodeShell>
|
||||||
<Body as='p'>
|
<Body as='p'>
|
||||||
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='24px' alignmentX='flex-start'>
|
||||||
|
<H2 as='h2' margin='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
|
||||||
|
recommended to
|
||||||
|
generate the output for the dev set <Medium>(dev-0/out.tsv)</Medium>.
|
||||||
|
</Body>
|
||||||
|
<Body as='p'>
|
||||||
|
You can evaluate results for the dev set locally by <Medium>geval</Medium>.
|
||||||
|
</Body>
|
||||||
|
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
|
||||||
|
<H3 as='h3'>
|
||||||
|
Install geval
|
||||||
|
</H3>
|
||||||
|
<CodeShell>
|
||||||
|
<Code as='p'>
|
||||||
|
<CodeMedium>~$</CodeMedium> wget https://gonito.net/get/bin/geval
|
||||||
|
</Code>
|
||||||
|
<Code as='p'>
|
||||||
|
<CodeMedium>~$</CodeMedium> chmod u+x geval
|
||||||
|
</Code>
|
||||||
|
<Code as='p'>
|
||||||
|
<CodeMedium>~$</CodeMedium> ./geval --help
|
||||||
|
</Code>
|
||||||
|
</CodeShell>
|
||||||
|
</FlexColumn>
|
||||||
|
</FlexColumn>
|
||||||
|
<FlexColumn as='article' gap='24px' alignmentX='flex-start'>
|
||||||
|
<H2 as='h2' margin='0 0 8px 0'>
|
||||||
|
Push your solution
|
||||||
|
</H2>
|
||||||
|
<Body>
|
||||||
|
Commit and push <Medium>out.tsv</Medium> files to your repo. It is also recommended to push your
|
||||||
|
source codes along
|
||||||
|
with <Medium>out.tsv</Medium> files.
|
||||||
|
</Body>
|
||||||
|
<CodeShell>
|
||||||
|
<Code as='p'>
|
||||||
|
<CodeMedium>~$</CodeMedium> cd challenging-america-geo-prediction
|
||||||
|
</Code>
|
||||||
|
<Code as='p'>
|
||||||
|
<CodeMedium>~$</CodeMedium> git checkout -b my-brilliant-branch # switch to some other branch
|
||||||
|
</Code>
|
||||||
|
<Code as='p'>
|
||||||
|
<CodeMedium>~$</CodeMedium> git add foo.py build.sh # add your source codes
|
||||||
|
</Code>
|
||||||
|
<Code as='p'>
|
||||||
|
<CodeMedium>~$</CodeMedium> git add gonito.yaml # it's a good practice to add metadata file, see
|
||||||
|
below
|
||||||
|
</Code>
|
||||||
|
</CodeShell>
|
||||||
|
<CodeShell>
|
||||||
|
<Code as='p'>
|
||||||
|
<CodeMedium>~$</CodeMedium> git add dev-0/out.tsv test-A/out.tsv # add your output files
|
||||||
|
</Code>
|
||||||
|
<Code as='p'>
|
||||||
|
<CodeMedium>~$</CodeMedium> git commit -m 'my brilliant solution'
|
||||||
|
</Code>
|
||||||
|
<Code as='p'>
|
||||||
|
<CodeMedium>~$</CodeMedium> git push origin my-brilliant-branch
|
||||||
|
</Code>
|
||||||
|
</CodeShell>
|
||||||
|
</FlexColumn>
|
||||||
|
<FlexColumn as='article' gap='24px' alignmentX='flex-start'>
|
||||||
|
<H2 as='h2' margin='0 0 8px 0'>
|
||||||
|
Submit solution to Gonito
|
||||||
|
</H2>
|
||||||
|
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
|
||||||
|
<H3 as='h3'>
|
||||||
|
Manual submission
|
||||||
|
</H3>
|
||||||
|
<Body>
|
||||||
|
In case other methods fail, you can submit your solution manually — go to the <Medium>submit
|
||||||
|
form</Medium>.
|
||||||
|
</Body>
|
||||||
|
</FlexColumn>
|
||||||
|
<FlexColumn as='article' gap='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 as='article' gap='24px' alignmentX='flex-start' width='100%'>
|
||||||
|
<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>
|
||||||
|
<FlexRow width='100%' gap='16px' alignmentX='flex-start'>
|
||||||
|
<CircleNumber number='1'/>
|
||||||
|
<Body as='p'>
|
||||||
|
The YAML files specified in the param-files field of the gonito.yaml file
|
||||||
|
</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%'>
|
||||||
|
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>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>
|
||||||
|
<FlexRow width='100%' gap='16px' alignmentX='flex-start'>
|
||||||
|
<CircleNumber number='2'/>
|
||||||
|
<Body as='p'>
|
||||||
|
<Medium>Gonito.yaml</Medium> file committed to the repository,
|
||||||
|
</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%'>
|
||||||
|
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>
|
||||||
|
<FlexRow width='100%' gap='16px' alignmentX='flex-start'>
|
||||||
|
<CircleNumber number='3'/>
|
||||||
|
<Body as='p'>
|
||||||
|
Names of output files (only 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%'>
|
||||||
|
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;
|
||||||
|
</Body>
|
||||||
|
</FlexRow>
|
||||||
|
<FlexRow width='100%' gap='16px' alignmentX='flex-start'>
|
||||||
|
<CircleNumber number='4'/>
|
||||||
|
<Body as='p'>
|
||||||
|
Submission form (when submitting manually)
|
||||||
|
</Body>
|
||||||
|
</FlexRow>
|
||||||
|
<FlexRow width='100%' gap='16px' alignmentX='flex-start'>
|
||||||
|
<CircleNumber number='5'/>
|
||||||
|
<Body as='p'>
|
||||||
|
Git commit message
|
||||||
|
</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%'>
|
||||||
|
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>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>
|
||||||
|
<Code as='p'>
|
||||||
|
description: This my brilliant solution
|
||||||
|
</Code>
|
||||||
|
<Code as='p'>
|
||||||
|
tags:
|
||||||
|
</Code>
|
||||||
|
<Code as='p' margin='0 0 0 12px'>
|
||||||
|
- neural-network
|
||||||
|
</Code>
|
||||||
|
<Code as='p' margin='0 0 0 12px'>
|
||||||
|
- left-to-right
|
||||||
|
</Code>
|
||||||
|
<Code as='p'>
|
||||||
|
params:
|
||||||
|
</Code>
|
||||||
|
<Code as='p' margin='0 0 0 12px'>
|
||||||
|
epochs: 10
|
||||||
|
</Code>
|
||||||
|
<Code as='p' margin='0 0 0 12px'>
|
||||||
|
learning-rate: 0.01
|
||||||
|
</Code>
|
||||||
|
<Code as='p'>
|
||||||
|
unwanted-params:
|
||||||
|
</Code>
|
||||||
|
<Code as='p' margin='0 0 0 12px'>
|
||||||
|
- model-file
|
||||||
|
</Code>
|
||||||
|
<Code as='p' margin='0 0 0 12px'>
|
||||||
|
- vocab-file
|
||||||
|
</Code>
|
||||||
|
<Code as='p'>
|
||||||
|
param-files:
|
||||||
|
</Code>
|
||||||
|
<Code as='p' margin='0 0 0 12px'>
|
||||||
|
- “*.yaml”
|
||||||
|
</Code>
|
||||||
|
<Code as='p' margin='0 0 0 12px'>
|
||||||
|
- config/*.yaml
|
||||||
|
</Code>
|
||||||
|
<Code as='p'>
|
||||||
|
links:
|
||||||
|
</Code>
|
||||||
|
<Code as='p' margin='0 0 0 12px'>
|
||||||
|
- title: "Some external link"
|
||||||
|
</Code>
|
||||||
|
<Code as='p' margin='0 0 0 12px'>
|
||||||
|
url: "https://example.com/foo-bar-baz-123"
|
||||||
|
</Code>
|
||||||
|
<Code as='p' margin='0 0 0 12px'>
|
||||||
|
- title: "Yet another link"
|
||||||
|
</Code>
|
||||||
|
<Code as='p' margin='0 0 0 12px'>
|
||||||
|
url: "https://example.org/xyz"
|
||||||
|
</Code>
|
||||||
|
<Code as='p' margin='0 0 0 12px'>
|
||||||
|
- url: "https://example.net/bare-link-without-text"
|
||||||
|
</Code>
|
||||||
|
</CodeShell>
|
||||||
|
<Body>
|
||||||
|
It might seem a little bit complicated, but you could simply use the method which is the most
|
||||||
|
convenient for you.
|
||||||
|
</Body>
|
||||||
|
</FlexColumn>
|
||||||
|
</FlexColumn>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500&family=Roboto:wght@300;400;500&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500&family=Roboto:wght@300;400;500&family=Ubuntu:wght@300;400;500&display=swap');
|
||||||
|
|
||||||
html {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|||||||
@ -7,7 +7,6 @@ const H1 = styled(Container)`
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
line-height: 52px;
|
line-height: 52px;
|
||||||
@ -16,7 +15,6 @@ const H1 = styled(Container)`
|
|||||||
|
|
||||||
const H2 = styled(H1)`
|
const H2 = styled(H1)`
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
@ -26,7 +24,6 @@ const H2 = styled(H1)`
|
|||||||
const H3 = styled(H1)`
|
const H3 = styled(H1)`
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
@ -39,7 +36,6 @@ const Body = styled(Container)`
|
|||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@ -49,7 +45,6 @@ const Body = styled(Container)`
|
|||||||
|
|
||||||
const Medium = styled(Body)`
|
const Medium = styled(Body)`
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@ -66,11 +61,32 @@ const Menu = styled(Container)`
|
|||||||
const Label = styled(Menu)`
|
const Label = styled(Menu)`
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export {H1, H2, H3, Body, Medium, Menu, Label};
|
const Code = styled(Container)`
|
||||||
|
display: inline-block;
|
||||||
|
font-family: 'Ubuntu', sans-serif;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 18px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: ${({theme}) => theme.colors.white};
|
||||||
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const CodeMedium = styled(Code)`
|
||||||
|
color: ${({theme}) => theme.colors.green};
|
||||||
|
font-weight: 400;
|
||||||
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export {H1, H2, H3, Body, Medium, Menu, Label, Code, CodeMedium};
|
||||||
Loading…
Reference in New Issue
Block a user