lint(gui): move context into state module
This commit is contained in:
parent
7885bbfbdd
commit
f9bcc5d4e4
|
@ -6,7 +6,7 @@ import { useQuery } from 'react-query';
|
||||||
|
|
||||||
import { BaseImgParams } from '../api/client.js';
|
import { BaseImgParams } from '../api/client.js';
|
||||||
import { ConfigParams, STALE_TIME } from '../config.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 { SCHEDULER_LABELS } from '../strings.js';
|
||||||
import { NumericField } from './NumericField.js';
|
import { NumericField } from './NumericField.js';
|
||||||
import { QueryList } from './QueryList.js';
|
import { QueryList } from './QueryList.js';
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { useContext } from 'react';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
|
|
||||||
import { StateContext } from '../main.js';
|
import { StateContext } from '../state.js';
|
||||||
import { ImageCard } from './ImageCard.js';
|
import { ImageCard } from './ImageCard.js';
|
||||||
import { LoadingCard } from './LoadingCard.js';
|
import { LoadingCard } from './LoadingCard.js';
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,7 @@ import { useMutation } from 'react-query';
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
|
|
||||||
import { ConfigParams, IMAGE_FILTER } from '../config.js';
|
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 { ImageControl } from './ImageControl.js';
|
||||||
import { ImageInput } from './ImageInput.js';
|
import { ImageInput } from './ImageInput.js';
|
||||||
import { NumericField } from './NumericField.js';
|
import { NumericField } from './NumericField.js';
|
||||||
|
|
|
@ -5,9 +5,8 @@ import * as React from 'react';
|
||||||
import { useMutation } from 'react-query';
|
import { useMutation } from 'react-query';
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
|
|
||||||
import { ApiResponse } from '../api/client.js';
|
|
||||||
import { ConfigParams, DEFAULT_BRUSH, IMAGE_FILTER } from '../config.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 { ImageControl } from './ImageControl.js';
|
||||||
import { ImageInput } from './ImageInput.js';
|
import { ImageInput } from './ImageInput.js';
|
||||||
import { NumericField } from './NumericField.js';
|
import { NumericField } from './NumericField.js';
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { useQuery } from 'react-query';
|
||||||
|
|
||||||
import { ApiClient } from '../api/client.js';
|
import { ApiClient } from '../api/client.js';
|
||||||
import { ConfigParams, STALE_TIME } from '../config.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 { MODEL_LABELS, PLATFORM_LABELS } from '../strings.js';
|
||||||
import { ImageHistory } from './ImageHistory.js';
|
import { ImageHistory } from './ImageHistory.js';
|
||||||
import { Img2Img } from './Img2Img.js';
|
import { Img2Img } from './Img2Img.js';
|
||||||
|
|
|
@ -4,7 +4,7 @@ import * as React from 'react';
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
|
|
||||||
import { ConfigParams } from '../config.js';
|
import { ConfigParams } from '../config.js';
|
||||||
import { StateContext } from '../main.js';
|
import { StateContext } from '../state.js';
|
||||||
import { NumericField } from './NumericField.js';
|
import { NumericField } from './NumericField.js';
|
||||||
|
|
||||||
const { useContext } = React;
|
const { useContext } = React;
|
||||||
|
|
|
@ -5,7 +5,7 @@ import { useMutation } from 'react-query';
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
|
|
||||||
import { ConfigParams } from '../config.js';
|
import { ConfigParams } from '../config.js';
|
||||||
import { ClientContext, StateContext } from '../main.js';
|
import { ClientContext, StateContext } from '../state.js';
|
||||||
import { ImageControl } from './ImageControl.js';
|
import { ImageControl } from './ImageControl.js';
|
||||||
import { NumericField } from './NumericField.js';
|
import { NumericField } from './NumericField.js';
|
||||||
|
|
||||||
|
|
|
@ -1,26 +1,38 @@
|
||||||
/* eslint-disable no-console */
|
/* eslint-disable no-console */
|
||||||
import { Maybe, mustExist } from '@apextoaster/js-utils';
|
import { mustExist } from '@apextoaster/js-utils';
|
||||||
import { merge } from 'lodash';
|
import { merge } from 'lodash';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
import { QueryClient, QueryClientProvider } from 'react-query';
|
import { QueryClient, QueryClientProvider } from 'react-query';
|
||||||
import { createStore, StoreApi } from 'zustand';
|
import { createStore } from 'zustand';
|
||||||
import { createJSONStorage, persist } from 'zustand/middleware';
|
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 { OnnxWeb } from './components/OnnxWeb.js';
|
||||||
import { loadConfig } from './config.js';
|
import { loadConfig } from './config.js';
|
||||||
import { createStateSlices, OnnxState } from './state.js';
|
import { ClientContext, createStateSlices, OnnxState, StateContext } from './state.js';
|
||||||
|
|
||||||
const { createContext } = React;
|
const { createContext } = React;
|
||||||
|
|
||||||
export async function main() {
|
export async function main() {
|
||||||
|
// load config from GUI server
|
||||||
const config = await loadConfig();
|
const config = await loadConfig();
|
||||||
|
|
||||||
|
// use that to create an API client
|
||||||
const client = makeClient(config.api.root);
|
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();
|
const params = await client.params();
|
||||||
merge(params, config.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) => ({
|
const state = createStore<OnnxState, [['zustand/persist', OnnxState]]>(persist((...slice) => ({
|
||||||
...createTxt2ImgSlice(...slice),
|
...createTxt2ImgSlice(...slice),
|
||||||
...createImg2ImgSlice(...slice),
|
...createImg2ImgSlice(...slice),
|
||||||
|
@ -37,9 +49,14 @@ export async function main() {
|
||||||
version: 2,
|
version: 2,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
// prep react-query client
|
||||||
const query = new QueryClient();
|
const query = new QueryClient();
|
||||||
|
|
||||||
|
// prep react-dom
|
||||||
const appElement = mustExist(document.getElementById('app'));
|
const appElement = mustExist(document.getElementById('app'));
|
||||||
const app = ReactDOM.createRoot(appElement);
|
const app = ReactDOM.createRoot(appElement);
|
||||||
|
|
||||||
|
// go
|
||||||
app.render(<QueryClientProvider client={query}>
|
app.render(<QueryClientProvider client={query}>
|
||||||
<ClientContext.Provider value={client}>
|
<ClientContext.Provider value={client}>
|
||||||
<StateContext.Provider value={state}>
|
<StateContext.Provider value={state}>
|
||||||
|
@ -55,6 +72,3 @@ window.addEventListener('load', () => {
|
||||||
console.error('error in main', err);
|
console.error('error in main', err);
|
||||||
});
|
});
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
export const ClientContext = createContext<Maybe<ApiClient>>(undefined);
|
|
||||||
export const StateContext = createContext<Maybe<StoreApi<OnnxState>>>(undefined);
|
|
||||||
|
|
|
@ -1,5 +1,16 @@
|
||||||
import { createStore, StateCreator } from 'zustand';
|
import { Maybe } from '@apextoaster/js-utils';
|
||||||
import { ApiResponse, BaseImgParams, Img2ImgParams, InpaintParams, paramsFromConfig, Txt2ImgParams } from './api/client.js';
|
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';
|
import { ConfigParams, ConfigState } from './config.js';
|
||||||
|
|
||||||
type TabState<TabParams extends BaseImgParams> = ConfigState<Required<TabParams>>;
|
type TabState<TabParams extends BaseImgParams> = ConfigState<Required<TabParams>>;
|
||||||
|
@ -171,3 +182,6 @@ export function createStateSlices(base: ConfigParams) {
|
||||||
createTxt2ImgSlice,
|
createTxt2ImgSlice,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const ClientContext = createContext<Maybe<ApiClient>>(undefined);
|
||||||
|
export const StateContext = createContext<Maybe<StoreApi<OnnxState>>>(undefined);
|
||||||
|
|
Loading…
Reference in New Issue