wrap experimental features in a collapsible accordion
This commit is contained in:
parent
6226fe5d81
commit
3098e89d3d
|
@ -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>;
|
||||
}
|
||||
|
|
|
@ -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()}
|
||||
|
|
|
@ -23,6 +23,7 @@ export const I18N_STRINGS_DE = {
|
|||
},
|
||||
},
|
||||
experimental: {
|
||||
label: 'Experimentelle Merkmale',
|
||||
latent_symmetry: {
|
||||
label: 'Latente Symmetrie',
|
||||
gradient_start: 'Steigungsstart',
|
||||
|
|
|
@ -18,6 +18,7 @@ export const I18N_STRINGS_EN = {
|
|||
},
|
||||
},
|
||||
experimental: {
|
||||
label: 'Experimental Features',
|
||||
latent_symmetry: {
|
||||
label: 'Latent Symmetry',
|
||||
gradient_start: 'Gradient Start',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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é',
|
||||
|
|
Loading…
Reference in New Issue