lint(gui): move context into state module

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';

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';
 

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';

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';

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';

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;

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';
 

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<OnnxState, [['zustand/persist', OnnxState]]>(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(<QueryClientProvider client={query}>
     <ClientContext.Provider value={client}>
       <StateContext.Provider value={state}>
@@ -55,6 +72,3 @@ window.addEventListener('load', () => {
     console.error('error in main', err);
   });
 }, false);
-
-export const ClientContext = createContext<Maybe<ApiClient>>(undefined);
-export const StateContext = createContext<Maybe<StoreApi<OnnxState>>>(undefined);

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<TabParams extends BaseImgParams> = ConfigState<Required<TabParams>>;
@@ -171,3 +182,6 @@ export function createStateSlices(base: ConfigParams) {
     createTxt2ImgSlice,
   };
 }
+
+export const ClientContext = createContext<Maybe<ApiClient>>(undefined);
+export const StateContext = createContext<Maybe<StoreApi<OnnxState>>>(undefined);