+
{title && (
{title}
@@ -57,82 +89,154 @@ const Quickstart = ({ data, title, description, id, children }) => {
{description &&
{description}
}
- {data.map(({ id, title, options = [], multiple, help }) => (
-
-
-
- {title}
- {help && (
-
- {' '}
-
-
- )}
-
-
- {options.map(option => {
- const optionType = multiple ? 'checkbox' : 'radio'
- const checkedForId = checked[id] || []
- return (
-
- {
- const newChecked = {
- ...checked,
- [id]: getNewChecked(
- option.id,
- checkedForId,
- multiple
- ),
+ {data.map(
+ ({
+ id,
+ title,
+ options = [],
+ dropdown = [],
+ defaultValue,
+ multiple,
+ other,
+ help,
+ }) => {
+ // Optional function that's called with the value
+ const setterFunc = setters[id] || (() => {})
+ return (
+
+
+
+ {title}
+ {help && (
+
+ {' '}
+
+
+ )}
+
+
+ {!!dropdown.length && (
+
+ )}
+ {other && otherState[id] && (
+ setterFunc(target.value)}
+ />
+ )}
+ {options.map(option => {
+ const optionType = multiple ? 'checkbox' : 'radio'
+ const checkedForId = checked[id] || []
+ return (
+
+ {
+ const newChecked = {
+ ...checked,
+ [id]: getNewChecked(
+ option.id,
+ checkedForId,
+ multiple
+ ),
+ }
+ setChecked(newChecked)
+ setStyles({
+ ...styles,
+ [id]: getCss(id, newChecked),
+ })
+ setterFunc(newChecked[id])
+ }}
+ type={optionType}
+ className={classNames(
+ classes.input,
+ classes[optionType]
+ )}
+ name={id}
+ id={`quickstart-${option.id}`}
+ value={option.id}
+ checked={checkedForId.includes(option.id)}
+ />
+
-
- )
- })}
-
-
- ))}
+ {option.title}
+ {option.meta && (
+
+ {option.meta}
+
+ )}
+ {option.help && (
+
+ {' '}
+
+
+ )}
+
+
+ )
+ })}
+
+
+ )
+ }
+ )}
-
+
{children}
+
+
+ {showCopy &&
}
)
@@ -141,6 +245,7 @@ const Quickstart = ({ data, title, description, id, children }) => {
Quickstart.defaultProps = {
data: [],
id: 'quickstart',
+ copy: true,
}
Quickstart.propTypes = {
@@ -164,12 +269,13 @@ Quickstart.propTypes = {
),
}
-const QS = ({ children, prompt = 'bash', divider = false, ...props }) => {
+const QS = ({ children, prompt = 'bash', divider = false, comment = false, ...props }) => {
const qsClassNames = classNames({
[classes.prompt]: !!prompt && !divider,
[classes.bash]: prompt === 'bash' && !divider,
[classes.python]: prompt === 'python' && !divider,
[classes.divider]: !!divider,
+ [classes.comment]: !!comment,
})
const attrs = Object.assign(
{},
diff --git a/website/src/images/icons/download.svg b/website/src/images/icons/download.svg
new file mode 100644
index 000000000..109fb73ec
--- /dev/null
+++ b/website/src/images/icons/download.svg
@@ -0,0 +1,4 @@
+
diff --git a/website/src/styles/code.module.sass b/website/src/styles/code.module.sass
index 5dffb09c5..6a91bf8aa 100644
--- a/website/src/styles/code.module.sass
+++ b/website/src/styles/code.module.sass
@@ -24,7 +24,7 @@
.code,
.juniper-input pre
display: block
- padding: 1.75em 2em
+ padding: 1.75em 1.5em
.code
&[data-prompt]:before,
diff --git a/website/src/styles/layout.sass b/website/src/styles/layout.sass
index f3d78625a..9a8640b63 100644
--- a/website/src/styles/layout.sass
+++ b/website/src/styles/layout.sass
@@ -370,9 +370,9 @@ body [id]:target
background-color: var(--color-dark-secondary)
border-left: 0.35em solid var(--color-theme)
display: block
- margin-right: -2em
- margin-left: -2em
- padding-right: 2em
+ margin-right: -1.5em
+ margin-left: -1.5em
+ padding-right: 1.5em
padding-left: 1.65em
&:empty:before
diff --git a/website/src/styles/quickstart.module.sass b/website/src/styles/quickstart.module.sass
index 51e94fa4d..a10bacca1 100644
--- a/website/src/styles/quickstart.module.sass
+++ b/website/src/styles/quickstart.module.sass
@@ -83,6 +83,24 @@
.fields
flex: 100%
+.select
+ cursor: pointer
+ border: 1px solid var(--color-subtle)
+ border-radius: var(--border-radius)
+ display: inline-block
+ padding: 0.35rem 1.25rem
+ margin: 0 1rem 0.75rem 0
+ font-size: var(--font-size-sm)
+ background: var(--color-back)
+
+.text-input
+ border: 1px solid var(--color-subtle)
+ border-radius: var(--border-radius)
+ display: inline-block
+ padding: 0.35rem 0.75rem
+ font-size: var(--font-size-sm)
+ background: var(--color-back)
+
.code
background: var(--color-front)
color: var(--color-back)
@@ -95,6 +113,7 @@
border-bottom-right-radius: var(--border-radius)
-webkit-font-smoothing: subpixel-antialiased
-moz-osx-font-smoothing: auto
+ position: relative
.results
display: block
@@ -105,6 +124,9 @@
& > span
display: block
+.hide-prompts .prompt:before
+ content: initial !important
+
.prompt:before
color: var(--color-theme)
margin-right: 1em
@@ -115,6 +137,9 @@
.python:before
content: ">>>"
+.comment
+ color: var(--syntax-comment)
+
.divider
padding: 1.5rem 0
@@ -123,3 +148,29 @@
.input:checked + .label &
color: inherit
+
+.copy-area
+ width: 1px
+ height: 1px
+ opacity: 0
+ position: absolute
+
+.menu
+ color: var(--color-subtle)
+ padding-right: 1.5rem
+ display: inline-block
+ position: absolute
+ bottom: var(--spacing-xs)
+ right: 0
+
+.icon-button
+ display: inline-block
+ color: inherit
+ cursor: pointer
+ transition: transform 0.05s ease
+
+ &:not(:last-child)
+ margin-right: 1.5rem
+
+ &:hover
+ transform: scale(1.1)
diff --git a/website/src/widgets/quickstart-install.js b/website/src/widgets/quickstart-install.js
index b2e72752a..9d993c969 100644
--- a/website/src/widgets/quickstart-install.js
+++ b/website/src/widgets/quickstart-install.js
@@ -92,7 +92,7 @@ const QuickstartInstall = ({ id, title }) => (
pip install -r requirements.txt
- pip install -U spacy-lookups-transformers
+ pip install -U spacy-transformers
pip install -U spacy-transformers
diff --git a/website/src/widgets/quickstart-training.js b/website/src/widgets/quickstart-training.js
new file mode 100644
index 000000000..5f9b9acf3
--- /dev/null
+++ b/website/src/widgets/quickstart-training.js
@@ -0,0 +1,118 @@
+import React, { useState } from 'react'
+import { StaticQuery, graphql } from 'gatsby'
+
+import { Quickstart, QS } from '../components/quickstart'
+
+const DEFAULT_LANG = 'en'
+const MODELS_SMALL = { en: 'roberta-base-small' }
+const MODELS_LARGE = { en: 'roberta-base' }
+
+const COMPONENTS = ['tagger', 'parser', 'ner', 'textcat']
+const COMMENT = `# This is an auto-generated partial config for training a model.
+# TODO: intructions for how to fill and use it`
+const DATA = [
+ {
+ id: 'lang',
+ title: 'Language',
+ defaultValue: DEFAULT_LANG,
+ },
+ {
+ id: 'components',
+ title: 'Components',
+ help: 'Pipeline components to train. Requires training data for those annotations.',
+ options: COMPONENTS.map(id => ({ id, title: id })),
+ multiple: true,
+ },
+ {
+ id: 'hardware',
+ title: 'Hardware',
+ options: [
+ { id: 'cpu-only', title: 'CPU only' },
+ { id: 'cpu', title: 'CPU preferred' },
+ { id: 'gpu', title: 'GPU', checked: true },
+ ],
+ },
+ {
+ id: 'optimize',
+ title: 'Optimize for',
+ help: '...',
+ options: [
+ { id: 'efficiency', title: 'efficiency', checked: true },
+ { id: 'accuracy', title: 'accuracy' },
+ ],
+ },
+ {
+ id: 'config',
+ title: 'Configuration',
+ options: [
+ {
+ id: 'independent',
+ title: 'independent components',
+ help: "Make components independent and don't share weights",
+ },
+ ],
+ multiple: true,
+ },
+]
+
+const QuickstartTraining = ({ id, title, download = 'config.cfg' }) => {
+ const [lang, setLang] = useState(DEFAULT_LANG)
+ const [pipeline, setPipeline] = useState([])
+ const setters = { lang: setLang, components: setPipeline }
+ return (
+ {
+ const langs = site.siteMetadata.languages
+ DATA[0].dropdown = langs.map(({ name, code }) => ({
+ id: code,
+ title: name,
+ }))
+ return (
+
+ {COMMENT}
+ [nlp]
+ lang = "{lang}"
+ pipeline = {JSON.stringify(pipeline).replace(/,/g, ', ')}
+
+ [components]
+
+ [components.transformer]
+ name = "{MODELS_SMALL[lang]}"
+ name = "{MODELS_LARGE[lang]}"
+ {!!pipeline.length &&
}
+ {pipeline.map((pipe, i) => (
+ <>
+ {i !== 0 &&
}
+ [components.{pipe}]
+ factory = "{pipe}"
+ >
+ ))}
+
+ )
+ }}
+ />
+ )
+}
+
+const query = graphql`
+ query QuickstartTrainingQuery {
+ site {
+ siteMetadata {
+ languages {
+ code
+ name
+ }
+ }
+ }
+ }
+`
+
+export default QuickstartTraining