diff --git a/website/src/styles/quickstart.module.sass b/website/src/styles/quickstart.module.sass index a08d6bcb6..8ad106a78 100644 --- a/website/src/styles/quickstart.module.sass +++ b/website/src/styles/quickstart.module.sass @@ -38,7 +38,7 @@ cursor: pointer display: inline-block padding: 0.35rem 0.5rem 0.25rem 0 - margin: 0 1rem 0.75rem 0 + margin: 0 1rem 0.5rem 0 font-size: var(--font-size-xs) font-weight: bold @@ -73,16 +73,19 @@ background: var(--color-theme) .checkbox + &:before + $size: 18px content: "" display: inline-block - width: 20px - height: 20px + width: $size + height: $size border: 1px solid var(--color-subtle) vertical-align: middle margin-right: 0.5rem cursor: pointer - border-radius: var(--border-radius) + border-radius: $size / 4 background: var(--color-back) + position: relative + top: -1px .checkbox:checked + &:before // Embed "check" icon here for simplicity diff --git a/website/src/widgets/quickstart-install.js b/website/src/widgets/quickstart-install.js index 741973945..a8bdf21dc 100644 --- a/website/src/widgets/quickstart-install.js +++ b/website/src/widgets/quickstart-install.js @@ -4,6 +4,8 @@ import { StaticQuery, graphql } from 'gatsby' import { Quickstart, QS } from '../components/quickstart' import { repo } from '../components/util' +const DEFAULT_MODELS = ['en'] +const DEFAULT_OPT = 'efficiency' const DEFAULT_HARDWARE = 'cpu' const DEFAULT_CUDA = 'cuda100' const CUDA = { @@ -68,9 +70,13 @@ const QuickstartInstall = ({ id, title }) => { const [train, setTrain] = useState(false) const [hardware, setHardware] = useState(DEFAULT_HARDWARE) const [cuda, setCuda] = useState(DEFAULT_CUDA) + const [selectedModels, setModels] = useState(DEFAULT_MODELS) + const [efficiency, setEfficiency] = useState(DEFAULT_OPT === 'efficiency') const setters = { hardware: v => (Array.isArray(v) ? setHardware(v[0]) : setCuda(v)), config: v => setTrain(v.includes('train')), + models: setModels, + optimize: v => setEfficiency(v.includes('efficiency')), } const showDropdown = { hardware: () => hardware === 'gpu', @@ -89,13 +95,37 @@ const QuickstartInstall = ({ id, title }) => { ...DATA, { id: 'models', - title: 'Trained Pipelines', + title: 'Trained pipelines', multiple: true, options: models .sort((a, b) => a.name.localeCompare(b.name)) - .map(({ code, name }) => ({ id: code, title: name })), + .map(({ code, name }) => ({ + id: code, + title: name, + checked: DEFAULT_MODELS.includes(code), + })), }, ] + if (selectedModels.length) { + data.push({ + id: 'optimize', + title: 'Select pipeline for', + options: [ + { + id: 'efficiency', + title: 'efficiency', + checked: DEFAULT_OPT === 'efficiency', + help: 'Faster and smaller pipeline, but less accurate', + }, + { + id: 'accuracy', + title: 'accuracy', + checked: DEFAULT_OPT === 'accuracy', + help: 'Larger and slower pipeline, but more accurate', + }, + ], + }) + } return ( { conda install -c conda-forge spacy-lookups-data - {models.map(({ code, models: modelOptions }) => ( - - python -m spacy download {modelOptions[0]} - - ))} + {models.map(({ code, models: modelOptions }) => { + const pkg = modelOptions[efficiency ? 0 : modelOptions.length - 1] + return ( + + python -m spacy download {pkg} + + ) + })} ) }} diff --git a/website/src/widgets/quickstart-models.js b/website/src/widgets/quickstart-models.js index ffd1b3df9..5f94c60cb 100644 --- a/website/src/widgets/quickstart-models.js +++ b/website/src/widgets/quickstart-models.js @@ -31,25 +31,33 @@ const data = [ }, { id: 'optimize', - title: 'Optimize for', - help: - 'Optimize for efficiency (faster & smaller model) or higher accuracy (larger & slower model)', + title: 'Select for', options: [ - { id: 'efficiency', title: 'efficiency', checked: DEFAULT_OPT === 'efficiency' }, - { id: 'accuracy', title: 'accuracy', checked: DEFAULT_OPT === 'accuracy' }, + { + id: 'efficiency', + title: 'efficiency', + checked: DEFAULT_OPT === 'efficiency', + help: 'Faster and smaller pipeline, but less accurate', + }, + { + id: 'accuracy', + title: 'accuracy', + checked: DEFAULT_OPT === 'accuracy', + help: 'Larger and slower pipeline, but more accurate', + }, ], }, { id: 'config', title: 'Options', multiple: true, - options: [{ id: 'example', title: 'Show usage example' }], + options: [{ id: 'example', title: 'Show text example' }], }, ] const QuickstartInstall = ({ id, title, description, children }) => { const [lang, setLang] = useState(DEFAULT_LANG) - const [efficiency, setEfficiency] = useState(DEFAULT_OPT) + const [efficiency, setEfficiency] = useState(DEFAULT_OPT === 'efficiency') const setters = { lang: setLang, optimize: v => setEfficiency(v.includes('efficiency')),