apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

wrap experimental features in a collapsible accordion

This commit is contained in:
Sean Sube 2024-02-24 11:45:42 -06:00
parent 6226fe5d81
commit 3098e89d3d
Signed by: ssube
GPG Key ID: 3EED7B957D362AF1
6 changed files with 149 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

283
gui/src/components/control/ExperimentalControl.tsx
View File

@ -1,6 +1,6 @@
/* eslint-disable camelcase */
import { mustDefault, mustExist } from '@apextoaster/js-utils';
import { Checkbox, FormControlLabel, Stack, TextField } from '@mui/material';
import { Accordion, AccordionDetails, AccordionSummary, Checkbox, FormControlLabel, Stack, TextField } from '@mui/material';
import { useTranslation } from 'react-i18next';
import * as React from 'react';
import { useContext } from 'react';
@ -33,156 +33,161 @@ export function ExperimentalControl(props: ExperimentalControlProps) {
staleTime: STALE_TIME,
});
return <Stack spacing={STANDARD_SPACING}>
<Stack direction='row' spacing={STANDARD_SPACING}>
<FormControlLabel
label={t('experimental.prompt_editing.label')}
control={
<Checkbox
checked={experimental.promptEditing.enabled}
value='check'
return <Accordion>
<AccordionSummary>{t('experimental.label')}</AccordionSummary>
<AccordionDetails>
<Stack spacing={STANDARD_SPACING}>
<Stack direction='row' spacing={STANDARD_SPACING}>
<FormControlLabel
label={t('experimental.prompt_editing.label')}
control={
<Checkbox
checked={experimental.promptEditing.enabled}
value='check'
onChange={(event) => {
setExperimental({
promptEditing: {
...experimental.promptEditing,
enabled: experimental.promptEditing.enabled === false,
},
});
}}
/>}
/>
<QueryList
disabled={experimental.promptEditing.enabled === false}
id='prompt_filters'
labelKey='model.prompt'
name={t('experimental.prompt_editing.filter')}
query={{
result: filters,
selector: (f) => f.prompt,
}}
value={mustDefault(experimental.promptEditing.filter, '')}
onChange={(prompt_filter) => {
setExperimental({
promptEditing: {
...experimental.promptEditing,
filter: prompt_filter,
},
});
}}
/>
<TextField
disabled={experimental.promptEditing.enabled === false}
label={t('experimental.prompt_editing.remove_tokens')}
variant='outlined'
value={experimental.promptEditing.removeTokens}
onChange={(event) => {
setExperimental({
promptEditing: {
...experimental.promptEditing,
enabled: experimental.promptEditing.enabled === false,
removeTokens: event.target.value,
},
});
}}
/>}
/>
<QueryList
disabled={experimental.promptEditing.enabled === false}
id='prompt_filters'
labelKey='model.prompt'
name={t('experimental.prompt_editing.filter')}
query={{
result: filters,
selector: (f) => f.prompt,
}}
value={mustDefault(experimental.promptEditing.filter, '')}
onChange={(prompt_filter) => {
setExperimental({
promptEditing: {
...experimental.promptEditing,
filter: prompt_filter,
},
});
}}
/>
<TextField
disabled={experimental.promptEditing.enabled === false}
label={t('experimental.prompt_editing.remove_tokens')}
variant='outlined'
value={experimental.promptEditing.removeTokens}
onChange={(event) => {
setExperimental({
promptEditing: {
...experimental.promptEditing,
removeTokens: event.target.value,
},
});
}}
/>
<TextField
disabled={experimental.promptEditing.enabled === false}
label={t('experimental.prompt_editing.add_suffix')}
variant='outlined'
value={experimental.promptEditing.addSuffix}
onChange={(event) => {
setExperimental({
promptEditing: {
...experimental.promptEditing,
addSuffix: event.target.value,
},
});
}}
/>
<NumericField
disabled={experimental.promptEditing.enabled === false}
label={t('experimental.prompt_editing.min_length')}
min={params.promptEditing.minLength.min}
max={params.promptEditing.minLength.max}
step={params.promptEditing.minLength.step}
value={experimental.promptEditing.minLength}
onChange={(prompt_editing_min_length) => {
setExperimental({
promptEditing: {
...experimental.promptEditing,
minLength: prompt_editing_min_length,
},
});
}}
/>
</Stack>
<Stack direction='row' spacing={STANDARD_SPACING}>
<FormControlLabel
label={t('experimental.latent_symmetry.label')}
control={
<Checkbox
checked={experimental.latentSymmetry.enabled}
value='check'
/>
<TextField
disabled={experimental.promptEditing.enabled === false}
label={t('experimental.prompt_editing.add_suffix')}
variant='outlined'
value={experimental.promptEditing.addSuffix}
onChange={(event) => {
setExperimental({
promptEditing: {
...experimental.promptEditing,
addSuffix: event.target.value,
},
});
}}
/>
<NumericField
disabled={experimental.promptEditing.enabled === false}
label={t('experimental.prompt_editing.min_length')}
min={params.promptEditing.minLength.min}
max={params.promptEditing.minLength.max}
step={params.promptEditing.minLength.step}
value={experimental.promptEditing.minLength}
onChange={(prompt_editing_min_length) => {
setExperimental({
promptEditing: {
...experimental.promptEditing,
minLength: prompt_editing_min_length,
},
});
}}
/>
</Stack>
<Stack direction='row' spacing={STANDARD_SPACING}>
<FormControlLabel
label={t('experimental.latent_symmetry.label')}
control={
<Checkbox
checked={experimental.latentSymmetry.enabled}
value='check'
onChange={(event) => {
setExperimental({
latentSymmetry: {
...experimental.latentSymmetry,
enabled: experimental.latentSymmetry.enabled === false,
},
});
}}
/>}
/>
<NumericField
decimal
disabled={experimental.latentSymmetry.enabled === false}
label={t('experimental.latent_symmetry.gradient_start')}
min={params.latentSymmetry.gradientStart.min}
max={params.latentSymmetry.gradientStart.max}
step={params.latentSymmetry.gradientStart.step}
value={experimental.latentSymmetry.gradientStart}
onChange={(latent_symmetry_gradient_start) => {
setExperimental({
latentSymmetry: {
...experimental.latentSymmetry,
enabled: experimental.latentSymmetry.enabled === false,
gradientStart: latent_symmetry_gradient_start,
},
});
}}
/>}
/>
<NumericField
decimal
disabled={experimental.latentSymmetry.enabled === false}
label={t('experimental.latent_symmetry.gradient_start')}
min={params.latentSymmetry.gradientStart.min}
max={params.latentSymmetry.gradientStart.max}
step={params.latentSymmetry.gradientStart.step}
value={experimental.latentSymmetry.gradientStart}
onChange={(latent_symmetry_gradient_start) => {
setExperimental({
latentSymmetry: {
...experimental.latentSymmetry,
gradientStart: latent_symmetry_gradient_start,
},
});
}}
/>
<NumericField
decimal
disabled={experimental.latentSymmetry.enabled === false}
label={t('experimental.latent_symmetry.gradient_end')}
min={params.latentSymmetry.gradientEnd.min}
max={params.latentSymmetry.gradientEnd.max}
step={params.latentSymmetry.gradientEnd.step}
value={experimental.latentSymmetry.gradientEnd}
onChange={(latent_symmetry_gradient_end) => {
setExperimental({
latentSymmetry: {
...experimental.latentSymmetry,
gradientEnd: latent_symmetry_gradient_end,
},
});
}}
/>
<NumericField
decimal
disabled={experimental.latentSymmetry.enabled === false}
label={t('experimental.latent_symmetry.line_of_symmetry')}
min={params.latentSymmetry.lineOfSymmetry.min}
max={params.latentSymmetry.lineOfSymmetry.max}
step={params.latentSymmetry.lineOfSymmetry.step}
value={experimental.latentSymmetry.lineOfSymmetry}
onChange={(latent_symmetry_line_of_symmetry) => {
setExperimental({
latentSymmetry: {
...experimental.latentSymmetry,
lineOfSymmetry: latent_symmetry_line_of_symmetry,
},
});
}}
/>
</Stack>
</Stack>;
/>
<NumericField
decimal
disabled={experimental.latentSymmetry.enabled === false}
label={t('experimental.latent_symmetry.gradient_end')}
min={params.latentSymmetry.gradientEnd.min}
max={params.latentSymmetry.gradientEnd.max}
step={params.latentSymmetry.gradientEnd.step}
value={experimental.latentSymmetry.gradientEnd}
onChange={(latent_symmetry_gradient_end) => {
setExperimental({
latentSymmetry: {
...experimental.latentSymmetry,
gradientEnd: latent_symmetry_gradient_end,
},
});
}}
/>
<NumericField
decimal
disabled={experimental.latentSymmetry.enabled === false}
label={t('experimental.latent_symmetry.line_of_symmetry')}
min={params.latentSymmetry.lineOfSymmetry.min}
max={params.latentSymmetry.lineOfSymmetry.max}
step={params.latentSymmetry.lineOfSymmetry.step}
value={experimental.latentSymmetry.lineOfSymmetry}
onChange={(latent_symmetry_line_of_symmetry) => {
setExperimental({
latentSymmetry: {
...experimental.latentSymmetry,
lineOfSymmetry: latent_symmetry_line_of_symmetry,
},
});
}}
/>
</Stack>
</Stack>
</AccordionDetails>
</Accordion>;
}

2
gui/src/components/tab/Txt2Img.tsx
View File

@ -107,8 +107,8 @@ export function Txt2Img() {
<SizeControl />
<HighresControl selectHighres={selectHighres} setHighres={setHighres} />
<UpscaleControl selectUpscale={selectUpscale} setUpscale={setUpscale} />
<ExperimentalControl selectExperimental={selectExperimental} setExperimental={setExperimental} />
<VariableControl selectGrid={selectVariable} setGrid={setVariable} />
<ExperimentalControl selectExperimental={selectExperimental} setExperimental={setExperimental} />
<Button
variant='contained'
onClick={() => generate.mutate()}

1
gui/src/strings/de.ts
View File

@ -23,6 +23,7 @@ export const I18N_STRINGS_DE = {
},
},
experimental: {
label: 'Experimentelle Merkmale',
latent_symmetry: {
label: 'Latente Symmetrie',
gradient_start: 'Steigungsstart',

1
gui/src/strings/en.ts
View File

@ -18,6 +18,7 @@ export const I18N_STRINGS_EN = {
},
},
experimental: {
label: 'Experimental Features',
latent_symmetry: {
label: 'Latent Symmetry',
gradient_start: 'Gradient Start',

1
gui/src/strings/es.ts
View File

@ -23,6 +23,7 @@ export const I18N_STRINGS_ES = {
},
},
experimental: {
label: 'Características Experimentales',
latent_symmetry: {
label: 'Simetría latente',
gradient_start: 'Inicio de gradiente',

1
gui/src/strings/fr.ts
View File

@ -23,6 +23,7 @@ export const I18N_STRINGS_FR = {
},
},
experimental: {
label: 'fonctionnalités expérimentales',
latent_symmetry: {
label: 'symétrie latente',
gradient_start: 'début du dégradé',