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

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

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

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

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

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

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

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

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

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

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