From f9bcc5d4e42ae9ec90d2a56bf9ab2c804b541e02 Mon Sep 17 00:00:00 2001 From: Sean Sube Date: Thu, 12 Jan 2023 18:10:46 -0600 Subject: [PATCH] lint(gui): move context into state module --- gui/src/components/ImageControl.tsx | 2 +- gui/src/components/ImageHistory.tsx | 2 +- gui/src/components/Img2Img.tsx | 2 +- gui/src/components/Inpaint.tsx | 3 +-- gui/src/components/OnnxWeb.tsx | 2 +- gui/src/components/Settings.tsx | 2 +- gui/src/components/Txt2Img.tsx | 2 +- gui/src/main.tsx | 30 +++++++++++++++++++++-------- gui/src/state.ts | 18 +++++++++++++++-- 9 files changed, 45 insertions(+), 18 deletions(-) diff --git a/gui/src/components/ImageControl.tsx b/gui/src/components/ImageControl.tsx index 996ef4a4..6c83403e 100644 --- a/gui/src/components/ImageControl.tsx +++ b/gui/src/components/ImageControl.tsx @@ -6,7 +6,7 @@ import { useQuery } from 'react-query'; import { BaseImgParams } from '../api/client.js'; import { ConfigParams, STALE_TIME } from '../config.js'; -import { ClientContext } from '../main.js'; +import { ClientContext } from '../state.js'; import { SCHEDULER_LABELS } from '../strings.js'; import { NumericField } from './NumericField.js'; import { QueryList } from './QueryList.js'; diff --git a/gui/src/components/ImageHistory.tsx b/gui/src/components/ImageHistory.tsx index cef39158..ba006127 100644 --- a/gui/src/components/ImageHistory.tsx +++ b/gui/src/components/ImageHistory.tsx @@ -4,7 +4,7 @@ import { useContext } from 'react'; import * as React from 'react'; import { useStore } from 'zustand'; -import { StateContext } from '../main.js'; +import { StateContext } from '../state.js'; import { ImageCard } from './ImageCard.js'; import { LoadingCard } from './LoadingCard.js'; diff --git a/gui/src/components/Img2Img.tsx b/gui/src/components/Img2Img.tsx index d0405245..8e5c9018 100644 --- a/gui/src/components/Img2Img.tsx +++ b/gui/src/components/Img2Img.tsx @@ -5,7 +5,7 @@ import { useMutation } from 'react-query'; import { useStore } from 'zustand'; import { ConfigParams, IMAGE_FILTER } from '../config.js'; -import { ClientContext, StateContext } from '../main.js'; +import { ClientContext, StateContext } from '../state.js'; import { ImageControl } from './ImageControl.js'; import { ImageInput } from './ImageInput.js'; import { NumericField } from './NumericField.js'; diff --git a/gui/src/components/Inpaint.tsx b/gui/src/components/Inpaint.tsx index de175e87..69137436 100644 --- a/gui/src/components/Inpaint.tsx +++ b/gui/src/components/Inpaint.tsx @@ -5,9 +5,8 @@ import * as React from 'react'; import { useMutation } from 'react-query'; import { useStore } from 'zustand'; -import { ApiResponse } from '../api/client.js'; import { ConfigParams, DEFAULT_BRUSH, IMAGE_FILTER } from '../config.js'; -import { ClientContext, StateContext } from '../main.js'; +import { ClientContext, StateContext } from '../state.js'; import { ImageControl } from './ImageControl.js'; import { ImageInput } from './ImageInput.js'; import { NumericField } from './NumericField.js'; diff --git a/gui/src/components/OnnxWeb.tsx b/gui/src/components/OnnxWeb.tsx index 21af00ca..013f8160 100644 --- a/gui/src/components/OnnxWeb.tsx +++ b/gui/src/components/OnnxWeb.tsx @@ -6,7 +6,7 @@ import { useQuery } from 'react-query'; import { ApiClient } from '../api/client.js'; import { ConfigParams, STALE_TIME } from '../config.js'; -import { ClientContext } from '../main.js'; +import { ClientContext } from '../state.js'; import { MODEL_LABELS, PLATFORM_LABELS } from '../strings.js'; import { ImageHistory } from './ImageHistory.js'; import { Img2Img } from './Img2Img.js'; diff --git a/gui/src/components/Settings.tsx b/gui/src/components/Settings.tsx index 7b3388a6..3530414f 100644 --- a/gui/src/components/Settings.tsx +++ b/gui/src/components/Settings.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { useStore } from 'zustand'; import { ConfigParams } from '../config.js'; -import { StateContext } from '../main.js'; +import { StateContext } from '../state.js'; import { NumericField } from './NumericField.js'; const { useContext } = React; diff --git a/gui/src/components/Txt2Img.tsx b/gui/src/components/Txt2Img.tsx index ca358901..1a6b7e67 100644 --- a/gui/src/components/Txt2Img.tsx +++ b/gui/src/components/Txt2Img.tsx @@ -5,7 +5,7 @@ import { useMutation } from 'react-query'; import { useStore } from 'zustand'; import { ConfigParams } from '../config.js'; -import { ClientContext, StateContext } from '../main.js'; +import { ClientContext, StateContext } from '../state.js'; import { ImageControl } from './ImageControl.js'; import { NumericField } from './NumericField.js'; diff --git a/gui/src/main.tsx b/gui/src/main.tsx index 4e67d8f8..5a55b88a 100644 --- a/gui/src/main.tsx +++ b/gui/src/main.tsx @@ -1,26 +1,38 @@ /* eslint-disable no-console */ -import { Maybe, mustExist } from '@apextoaster/js-utils'; +import { mustExist } from '@apextoaster/js-utils'; import { merge } from 'lodash'; import * as React from 'react'; import ReactDOM from 'react-dom/client'; import { QueryClient, QueryClientProvider } from 'react-query'; -import { createStore, StoreApi } from 'zustand'; +import { createStore } from 'zustand'; import { createJSONStorage, persist } from 'zustand/middleware'; -import { ApiClient, makeClient } from './api/client.js'; +import { makeClient } from './api/client.js'; import { OnnxWeb } from './components/OnnxWeb.js'; import { loadConfig } from './config.js'; -import { createStateSlices, OnnxState } from './state.js'; +import { ClientContext, createStateSlices, OnnxState, StateContext } from './state.js'; const { createContext } = React; export async function main() { + // load config from GUI server const config = await loadConfig(); + + // use that to create an API client const client = makeClient(config.api.root); + + // load full params from the API server and merge with the initial client config const params = await client.params(); merge(params, config.params); - const { createDefaultSlice, createHistorySlice, createImg2ImgSlice, createInpaintSlice, createTxt2ImgSlice } = createStateSlices(params); + // prep zustand with a slice for each tab, using local storage + const { + createDefaultSlice, + createHistorySlice, + createImg2ImgSlice, + createInpaintSlice, + createTxt2ImgSlice, + } = createStateSlices(params); const state = createStore(persist((...slice) => ({ ...createTxt2ImgSlice(...slice), ...createImg2ImgSlice(...slice), @@ -37,9 +49,14 @@ export async function main() { version: 2, })); + // prep react-query client const query = new QueryClient(); + + // prep react-dom const appElement = mustExist(document.getElementById('app')); const app = ReactDOM.createRoot(appElement); + + // go app.render( @@ -55,6 +72,3 @@ window.addEventListener('load', () => { console.error('error in main', err); }); }, false); - -export const ClientContext = createContext>(undefined); -export const StateContext = createContext>>(undefined); diff --git a/gui/src/state.ts b/gui/src/state.ts index 11a698b9..8a744c73 100644 --- a/gui/src/state.ts +++ b/gui/src/state.ts @@ -1,5 +1,16 @@ -import { createStore, StateCreator } from 'zustand'; -import { ApiResponse, BaseImgParams, Img2ImgParams, InpaintParams, paramsFromConfig, Txt2ImgParams } from './api/client.js'; +import { Maybe } from '@apextoaster/js-utils'; +import { createContext } from 'react'; +import { StateCreator, StoreApi } from 'zustand'; + +import { + ApiClient, + ApiResponse, + BaseImgParams, + Img2ImgParams, + InpaintParams, + paramsFromConfig, + Txt2ImgParams, +} from './api/client.js'; import { ConfigParams, ConfigState } from './config.js'; type TabState = ConfigState>; @@ -171,3 +182,6 @@ export function createStateSlices(base: ConfigParams) { createTxt2ImgSlice, }; } + +export const ClientContext = createContext>(undefined); +export const StateContext = createContext>>(undefined);