diff --git a/gui/src/components/control/ExperimentalControl.tsx b/gui/src/components/control/ExperimentalControl.tsx index e36094ba..8f705ca9 100644 --- a/gui/src/components/control/ExperimentalControl.tsx +++ b/gui/src/components/control/ExperimentalControl.tsx @@ -3,41 +3,28 @@ import { mustDefault, mustExist } from '@apextoaster/js-utils'; import { Checkbox, FormControlLabel, Stack, TextField } from '@mui/material'; import { useTranslation } from 'react-i18next'; import * as React from 'react'; -import { useState } from 'react'; import { useQuery } from '@tanstack/react-query'; +import { useStore } from 'zustand'; import { STALE_TIME, STANDARD_SPACING } from '../../constants.js'; import { NumericField } from '../input/NumericField.js'; import { QueryList } from '../input/QueryList.js'; -import { ClientContext } from '../../state/full.js'; - -export interface ExperimentalParams { - latent_symmetry: boolean; - latent_symmetry_gradient_start: number; - latent_symmetry_gradient_end: number; - latent_symmetry_line_of_symmetry: number; - prompt_editing: boolean; - prompt_filter: string; - remove_tokens: string; - add_suffix: string; -} +import { ClientContext, OnnxState, StateContext } from '../../state/full.js'; +import { ExperimentalParams } from '../../types/params.js'; export interface ExperimentalControlProps { + selectExperimental(state: OnnxState): ExperimentalParams; setExperimental(params: Record): void; } export function ExperimentalControl(props: ExperimentalControlProps) { + // eslint-disable-next-line @typescript-eslint/unbound-method + const { selectExperimental, setExperimental } = props; + + const store = mustExist(React.useContext(StateContext)); + const experimental = useStore(store, selectExperimental); + const { t } = useTranslation(); - const [state, setState] = useState({ - latent_symmetry: false, - latent_symmetry_gradient_start: 0.1, - latent_symmetry_gradient_end: 0.3, - latent_symmetry_line_of_symmetry: 0.5, - prompt_editing: false, - prompt_filter: '', - remove_tokens: '', - add_suffix: '', - }); const client = mustExist(React.useContext(ClientContext)); const filters = useQuery(['filters'], async () => client.filters(), { @@ -50,58 +37,66 @@ export function ExperimentalControl(props: ExperimentalControlProps) { label={t('experimental.latent_symmetry.label')} control={ { - setState({ - ...state, - latent_symmetry: state.latent_symmetry === false, + setExperimental({ + latentSymmetry: { + ...experimental.latentSymmetry, + enabled: experimental.latentSymmetry.enabled === false, + }, }); }} />} /> { - setState({ - ...state, - latent_symmetry_gradient_start, + setExperimental({ + latentSymmetry: { + ...experimental.latentSymmetry, + gradientStart: latent_symmetry_gradient_start, + }, }); }} /> { - setState({ - ...state, - latent_symmetry_gradient_end, + setExperimental({ + latentSymmetry: { + ...experimental.latentSymmetry, + gradientEnd: latent_symmetry_gradient_end, + }, }); }} /> { - setState({ - ...state, - latent_symmetry_line_of_symmetry, + setExperimental({ + latentSymmetry: { + ...experimental.latentSymmetry, + lineOfSymmetry: latent_symmetry_line_of_symmetry, + }, }); }} /> @@ -111,18 +106,20 @@ export function ExperimentalControl(props: ExperimentalControlProps) { label={t('experimental.prompt_editing.label')} control={ { - setState({ - ...state, - prompt_editing: state.prompt_editing === false, + setExperimental({ + promptEditing: { + ...experimental.promptEditing, + enabled: experimental.promptEditing.enabled === false, + }, }); }} />} /> f.prompt, }} - value={mustDefault(state.prompt_filter, '')} + value={mustDefault(experimental.promptEditing.filter, '')} onChange={(prompt_filter) => { - setState({ - ...state, - prompt_filter, + setExperimental({ + promptEditing: { + ...experimental.promptEditing, + filter: prompt_filter, + }, }); }} /> { - setState({ - ...state, - remove_tokens: event.target.value, + setExperimental({ + promptEditing: { + ...experimental.promptEditing, + removeTokens: event.target.value, + }, }); }} /> { - setState({ - ...state, - add_suffix: event.target.value, + setExperimental({ + promptEditing: { + ...experimental.promptEditing, + addSuffix: event.target.value, + }, }); }} /> diff --git a/gui/src/components/tab/Img2Img.tsx b/gui/src/components/tab/Img2Img.tsx index 0a9488cb..9cd34a40 100644 --- a/gui/src/components/tab/Img2Img.tsx +++ b/gui/src/components/tab/Img2Img.tsx @@ -11,7 +11,7 @@ import { IMAGE_FILTER, STALE_TIME, STANDARD_SPACING } from '../../constants.js'; import { ClientContext, ConfigContext, OnnxState, StateContext } from '../../state/full.js'; import { TabState } from '../../state/types.js'; import { JobType } from '../../types/api-v2.js'; -import { HighresParams, Img2ImgParams, ModelParams, UpscaleParams } from '../../types/params.js'; +import { ExperimentalParams, HighresParams, Img2ImgParams, ModelParams, UpscaleParams } from '../../types/params.js'; import { Profiles } from '../Profiles.js'; import { HighresControl } from '../control/HighresControl.js'; import { ImageControl } from '../control/ImageControl.js'; @@ -51,7 +51,7 @@ export function Img2Img() { }); const store = mustExist(useContext(StateContext)); - const { pushHistory, setHighres, setImg2Img, setModel, setUpscale } = useStore(store, selectActions, shallow); + const { pushHistory, setHighres, setImg2Img, setModel, setUpscale, setExperimental } = useStore(store, selectActions, shallow); const { loopback, source, sourceFilter, strength } = useStore(store, selectReactParams, shallow); const model = useStore(store, selectModel); @@ -141,10 +141,7 @@ export function Img2Img() { - { - // eslint-disable-next-line no-console - console.log('setting experimental props', props); - }} /> +