diff --git a/gui/src/components/OnnxWeb.tsx b/gui/src/components/OnnxWeb.tsx
index dcc8634f..918ee84f 100644
--- a/gui/src/components/OnnxWeb.tsx
+++ b/gui/src/components/OnnxWeb.tsx
@@ -7,7 +7,7 @@ import { useContext, useMemo } from 'react';
import { useHash } from 'react-use/lib/useHash';
import { useStore } from 'zustand';
-import { StateContext } from '../state.js';
+import { OnnxState, StateContext } from '../state.js';
import { ImageHistory } from './ImageHistory.js';
import { Logo } from './Logo.js';
import { Blend } from './tab/Blend.js';
@@ -22,7 +22,8 @@ import { getTab, getTheme, TAB_LABELS } from './utils.js';
export function OnnxWeb() {
/* checks for system light/dark mode preference */
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
- const stateTheme = useStore(mustExist(useContext(StateContext)), (s) => s.theme);
+ const store = mustExist(useContext(StateContext));
+ const stateTheme = useStore(store, selectTheme);
const theme = useMemo(
() => createTheme({
@@ -80,3 +81,7 @@ export function OnnxWeb() {
);
}
+
+export function selectTheme(state: OnnxState) {
+ return state.theme;
+}
diff --git a/gui/src/components/Profiles.tsx b/gui/src/components/Profiles.tsx
index 0346cb7d..b4adb1c0 100644
--- a/gui/src/components/Profiles.tsx
+++ b/gui/src/components/Profiles.tsx
@@ -37,13 +37,9 @@ export interface ProfilesProps {
}
export function Profiles(props: ProfilesProps) {
- const state = mustExist(useContext(StateContext));
- const profiles = useStore(state, (s) => s.profiles);
-
- // eslint-disable-next-line @typescript-eslint/unbound-method
- const saveProfile = useStore(state, (s) => s.saveProfile);
- // eslint-disable-next-line @typescript-eslint/unbound-method
- const removeProfile = useStore(state, (s) => s.removeProfile);
+ const store = mustExist(useContext(StateContext));
+ const { removeProfile, saveProfile } = useStore(store, selectActions);
+ const profiles = useStore(store, selectProfiles);
const [dialogOpen, setDialogOpen] = useState(false);
const [profileName, setProfileName] = useState('');
@@ -116,12 +112,12 @@ export function Profiles(props: ProfilesProps) {
;
}
+
+export function selectActions(state: OnnxState) {
+ return {
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ setExtras: state.setExtras,
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ setCorrectionModel: state.setCorrectionModel,
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ setDiffusionModel: state.setDiffusionModel,
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ setExtraNetwork: state.setExtraNetwork,
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ setExtraSource: state.setExtraSource,
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ setUpscalingModel: state.setUpscalingModel,
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ removeCorrectionModel: state.removeCorrectionModel,
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ removeDiffusionModel: state.removeDiffusionModel,
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ removeExtraNetwork: state.removeExtraNetwork,
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ removeExtraSource: state.removeExtraSource,
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ removeUpscalingModel: state.removeUpscalingModel,
+ };
+}
diff --git a/gui/src/components/tab/Txt2Img.tsx b/gui/src/components/tab/Txt2Img.tsx
index a1d110eb..76e669ce 100644
--- a/gui/src/components/tab/Txt2Img.tsx
+++ b/gui/src/components/tab/Txt2Img.tsx
@@ -20,8 +20,8 @@ export function Txt2Img() {
const { params } = mustExist(useContext(ConfigContext));
async function generateImage() {
- const innerState = state.getState();
- const { image, retry } = await client.txt2img(model, selectParams(innerState), selectUpscale(innerState), selectHighres(innerState));
+ const state = store.getState();
+ const { image, retry } = await client.txt2img(model, selectParams(state), selectUpscale(state), selectHighres(state));
pushHistory(image, retry);
}
@@ -32,10 +32,10 @@ export function Txt2Img() {
onSuccess: () => query.invalidateQueries([ 'ready' ]),
});
- const state = mustExist(useContext(StateContext));
- const { pushHistory, setHighres, setModel, setParams, setUpscale } = useStore(state, selectActions, shallow);
- const { height, width } = useStore(state, selectReactParams, shallow);
- const model = useStore(state, selectModel);
+ const store = mustExist(useContext(StateContext));
+ const { pushHistory, setHighres, setModel, setParams, setUpscale } = useStore(store, selectActions, shallow);
+ const { height, width } = useStore(store, selectReactParams, shallow);
+ const model = useStore(store, selectModel);
const { t } = useTranslation();
diff --git a/gui/src/components/tab/Upscale.tsx b/gui/src/components/tab/Upscale.tsx
index 49d806b5..fefdcc1d 100644
--- a/gui/src/components/tab/Upscale.tsx
+++ b/gui/src/components/tab/Upscale.tsx
@@ -18,7 +18,7 @@ import { Profiles } from '../Profiles.js';
export function Upscale() {
async function uploadSource() {
- const { upscaleHighres, upscaleUpscale, upscaleModel, upscale } = state.getState();
+ const { upscaleHighres, upscaleUpscale, upscaleModel, upscale } = store.getState();
const { image, retry } = await client.upscale(upscaleModel, {
...upscale,
source: mustExist(upscale.source), // TODO: show an error if this doesn't exist
@@ -33,19 +33,10 @@ export function Upscale() {
onSuccess: () => query.invalidateQueries([ 'ready' ]),
});
- const state = mustExist(useContext(StateContext));
- const model = useStore(state, (s) => s.upscaleModel);
- const params = useStore(state, (s) => s.upscale);
- // eslint-disable-next-line @typescript-eslint/unbound-method
- const setModel = useStore(state, (s) => s.setUpscalingModel);
- // eslint-disable-next-line @typescript-eslint/unbound-method
- const setHighres = useStore(state, (s) => s.setUpscaleHighres);
- // eslint-disable-next-line @typescript-eslint/unbound-method
- const setUpscale = useStore(state, (s) => s.setUpscaleUpscale);
- // eslint-disable-next-line @typescript-eslint/unbound-method
- const setParams = useStore(state, (s) => s.setUpscale);
- // eslint-disable-next-line @typescript-eslint/unbound-method
- const pushHistory = useStore(state, (s) => s.pushHistory);
+ const store = mustExist(useContext(StateContext));
+ const { pushHistory, setHighres, setModel, setParams, setUpscale } = useStore(store, selectActions);
+ const model = useStore(store, selectModel);
+ const params = useStore(store, selectParams);
const { t } = useTranslation();
return
@@ -70,8 +61,7 @@ export function Upscale() {
}}
/>
{
setParams(value);
}}
@@ -87,6 +77,21 @@ export function Upscale() {
;
}
+export function selectActions(state: OnnxState) {
+ return {
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ pushHistory: state.pushHistory,
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ setHighres: state.setUpscaleHighres,
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ setModel: state.setUpscaleModel,
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ setParams: state.setUpscale,
+ // eslint-disable-next-line @typescript-eslint/unbound-method
+ setUpscale: state.setUpscaleUpscale,
+ };
+}
+
export function selectModel(state: OnnxState): ModelParams {
return state.upscaleModel;
}
diff --git a/gui/src/state.ts b/gui/src/state.ts
index c05eb81c..25398689 100644
--- a/gui/src/state.ts
+++ b/gui/src/state.ts
@@ -35,13 +35,13 @@ export type Theme = PaletteMode | ''; // tri-state, '' is unset
*/
export type TabState = ConfigFiles> & ConfigState>;
-interface HistoryItem {
+export interface HistoryItem {
image: ImageResponse;
ready: Maybe;
retry: RetryParams;
}
-interface ProfileItem {
+export interface ProfileItem {
name: string;
params: BaseImgParams | Txt2ImgParams;
highres?: Maybe;