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 { 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';
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue