diff --git a/gui/src/components/Profiles.tsx b/gui/src/components/Profiles.tsx index f692ebfe..0346cb7d 100644 --- a/gui/src/components/Profiles.tsx +++ b/gui/src/components/Profiles.tsx @@ -21,15 +21,15 @@ import { useTranslation } from 'react-i18next'; import { useStore } from 'zustand'; import { BaseImgParams, HighresParams, ImageMetadata, Txt2ImgParams, UpscaleParams } from '../client/types.js'; -import { StateContext } from '../state.js'; +import { OnnxState, StateContext } from '../state.js'; import { DeepPartial } from '../types.js'; const { useState } = React; export interface ProfilesProps { - highres: HighresParams; - params: BaseImgParams; - upscale: UpscaleParams; + selectHighres(state: OnnxState): HighresParams; + selectParams(state: OnnxState): BaseImgParams; + selectUpscale(state: OnnxState): UpscaleParams; setHighres(params: Partial): void; setParams(params: Partial): void; @@ -116,11 +116,12 @@ export function Profiles(props: ProfilesProps) { diff --git a/gui/src/components/control/HighresControl.tsx b/gui/src/components/control/HighresControl.tsx index 4d2380c2..d65a0f3d 100644 --- a/gui/src/components/control/HighresControl.tsx +++ b/gui/src/components/control/HighresControl.tsx @@ -3,19 +3,23 @@ import { Checkbox, FormControl, FormControlLabel, InputLabel, MenuItem, Select, import * as React from 'react'; import { useContext } from 'react'; import { useTranslation } from 'react-i18next'; +import { useStore } from 'zustand'; import { HighresParams } from '../../client/types.js'; -import { ConfigContext } from '../../state.js'; +import { ConfigContext, OnnxState, StateContext } from '../../state.js'; import { NumericField } from '../input/NumericField.js'; export interface HighresControlProps { - highres: HighresParams; + selectHighres(state: OnnxState): HighresParams; setHighres(params: Partial): void; } export function HighresControl(props: HighresControlProps) { // eslint-disable-next-line @typescript-eslint/unbound-method - const { highres, setHighres } = props; + const { selectHighres, setHighres } = props; + + const state = mustExist(useContext(StateContext)); + const highres = useStore(state, selectHighres); const { params } = mustExist(useContext(ConfigContext)); const { t } = useTranslation(); diff --git a/gui/src/components/control/UpscaleControl.tsx b/gui/src/components/control/UpscaleControl.tsx index f9d739b1..6b4aeb61 100644 --- a/gui/src/components/control/UpscaleControl.tsx +++ b/gui/src/components/control/UpscaleControl.tsx @@ -3,19 +3,23 @@ import { Checkbox, FormControl, FormControlLabel, InputLabel, MenuItem, Select, import * as React from 'react'; import { useContext } from 'react'; import { useTranslation } from 'react-i18next'; +import { useStore } from 'zustand'; import { UpscaleParams } from '../../client/types.js'; -import { ConfigContext } from '../../state.js'; +import { ConfigContext, OnnxState, StateContext } from '../../state.js'; import { NumericField } from '../input/NumericField.js'; export interface UpscaleControlProps { - upscale: UpscaleParams; + selectUpscale(state: OnnxState): UpscaleParams; setUpscale(params: Partial): void; } export function UpscaleControl(props: UpscaleControlProps) { // eslint-disable-next-line @typescript-eslint/unbound-method - const { upscale, setUpscale } = props; + const { selectUpscale, setUpscale } = props; + + const state = mustExist(useContext(StateContext)); + const upscale = useStore(state, selectUpscale); const { params } = mustExist(useContext(ConfigContext)); const { t } = useTranslation(); diff --git a/gui/src/components/tab/Blend.tsx b/gui/src/components/tab/Blend.tsx index f54159eb..d25b523c 100644 --- a/gui/src/components/tab/Blend.tsx +++ b/gui/src/components/tab/Blend.tsx @@ -1,13 +1,14 @@ import { mustDefault, mustExist } from '@apextoaster/js-utils'; import { Box, Button, Stack } from '@mui/material'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import * as React from 'react'; import { useContext } from 'react'; import { useTranslation } from 'react-i18next'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useStore } from 'zustand'; +import { BlendParams, ModelParams, UpscaleParams } from '../../client/types.js'; import { IMAGE_FILTER } from '../../config.js'; -import { BLEND_SOURCES, ClientContext, StateContext } from '../../state.js'; +import { BLEND_SOURCES, ClientContext, OnnxState, StateContext, TabState } from '../../state.js'; import { range } from '../../utils.js'; import { UpscaleControl } from '../control/UpscaleControl.js'; import { ImageInput } from '../input/ImageInput.js'; @@ -33,8 +34,7 @@ export function Blend() { const state = mustExist(useContext(StateContext)); const brush = useStore(state, (s) => s.blendBrush); - const blend = useStore(state, (s) => s.blend); - const upscale = useStore(state, (s) => s.blendUpscale); + const blend = useStore(state, selectParams); // eslint-disable-next-line @typescript-eslint/unbound-method const setBlend = useStore(state, (s) => s.setBlend); // eslint-disable-next-line @typescript-eslint/unbound-method @@ -77,7 +77,7 @@ export function Blend() { }} setBrush={setBrush} /> - +