2023-01-05 19:42:52 +00:00
|
|
|
/* eslint-disable no-console */
|
2023-01-11 02:43:14 +00:00
|
|
|
import { Maybe, mustExist } from '@apextoaster/js-utils';
|
2023-01-10 04:59:08 +00:00
|
|
|
import { merge } from 'lodash';
|
2023-01-05 03:55:25 +00:00
|
|
|
import * as React from 'react';
|
|
|
|
import ReactDOM from 'react-dom/client';
|
2023-01-06 03:01:18 +00:00
|
|
|
import { QueryClient, QueryClientProvider } from 'react-query';
|
2023-01-11 02:43:14 +00:00
|
|
|
import { createStore, StoreApi } from 'zustand';
|
|
|
|
import { createJSONStorage, persist } from 'zustand/middleware';
|
2023-01-05 03:55:25 +00:00
|
|
|
|
2023-01-11 02:43:14 +00:00
|
|
|
import { ApiClient, BaseImgParams, Img2ImgParams, InpaintParams, makeClient, paramsFromConfig, Txt2ImgParams } from './api/client.js';
|
2023-01-05 16:39:46 +00:00
|
|
|
import { OnnxWeb } from './components/OnnxWeb.js';
|
2023-01-11 02:43:14 +00:00
|
|
|
import { ConfigState, loadConfig } from './config.js';
|
|
|
|
|
|
|
|
const { createContext } = React;
|
|
|
|
|
|
|
|
interface OnnxState {
|
|
|
|
defaults: Required<BaseImgParams>;
|
|
|
|
txt2img: ConfigState<Required<Txt2ImgParams>>;
|
|
|
|
img2img: ConfigState<Required<Img2ImgParams>>;
|
|
|
|
inpaint: ConfigState<Required<InpaintParams>>;
|
|
|
|
|
|
|
|
setDefaults(newParams: Partial<BaseImgParams>): void;
|
|
|
|
setTxt2Img(newParams: Partial<ConfigState<Required<Txt2ImgParams>>>): void;
|
|
|
|
setImg2Img(newParams: Partial<ConfigState<Required<Img2ImgParams>>>): void;
|
|
|
|
setInpaint(newParams: Partial<ConfigState<Required<InpaintParams>>>): void;
|
|
|
|
|
|
|
|
resetTxt2Img(): void;
|
|
|
|
resetImg2Img(): void;
|
|
|
|
resetInpaint(): void;
|
|
|
|
}
|
2023-01-05 16:39:46 +00:00
|
|
|
|
|
|
|
export async function main() {
|
|
|
|
const config = await loadConfig();
|
2023-01-06 03:01:18 +00:00
|
|
|
const client = makeClient(config.api.root);
|
2023-01-10 04:59:08 +00:00
|
|
|
const params = await client.params();
|
2023-01-10 05:16:28 +00:00
|
|
|
merge(params, config.params);
|
2023-01-05 16:39:46 +00:00
|
|
|
|
2023-01-11 02:43:14 +00:00
|
|
|
const defaults = paramsFromConfig(params);
|
|
|
|
const state = createStore<OnnxState, [['zustand/persist', never]]>(persist((set) => ({
|
|
|
|
defaults,
|
|
|
|
txt2img: {
|
|
|
|
...defaults,
|
|
|
|
height: params.height.default,
|
|
|
|
width: params.width.default,
|
|
|
|
},
|
|
|
|
img2img: {
|
|
|
|
...defaults,
|
|
|
|
strength: params.strength.default,
|
|
|
|
},
|
|
|
|
inpaint: {
|
|
|
|
...defaults,
|
|
|
|
},
|
|
|
|
setDefaults(newParams) {
|
|
|
|
set((oldState) => ({
|
|
|
|
...oldState,
|
|
|
|
defaults: {
|
|
|
|
...oldState.defaults,
|
|
|
|
...newParams,
|
|
|
|
},
|
|
|
|
}));
|
|
|
|
},
|
|
|
|
setTxt2Img(newParams) {
|
|
|
|
set((oldState) => ({
|
|
|
|
...oldState,
|
|
|
|
txt2img: {
|
|
|
|
...oldState.txt2img,
|
|
|
|
...newParams,
|
|
|
|
},
|
|
|
|
}));
|
|
|
|
},
|
|
|
|
setImg2Img(newParams) {
|
|
|
|
set((oldState) => ({
|
|
|
|
...oldState,
|
|
|
|
img2img: {
|
|
|
|
...oldState.img2img,
|
|
|
|
...newParams,
|
|
|
|
},
|
|
|
|
}));
|
|
|
|
},
|
|
|
|
setInpaint(newParams) {
|
|
|
|
set((oldState) => ({
|
|
|
|
...oldState,
|
|
|
|
inpaint: {
|
|
|
|
...oldState.inpaint,
|
|
|
|
...newParams,
|
|
|
|
},
|
|
|
|
}));
|
|
|
|
},
|
|
|
|
resetTxt2Img() {
|
|
|
|
set((oldState) => ({
|
|
|
|
...oldState,
|
|
|
|
txt2img: {
|
|
|
|
...defaults,
|
|
|
|
height: params.height.default,
|
|
|
|
width: params.width.default,
|
|
|
|
},
|
|
|
|
}));
|
|
|
|
},
|
|
|
|
resetImg2Img() {
|
|
|
|
set((oldState) => ({
|
|
|
|
...oldState,
|
|
|
|
img2img: {
|
|
|
|
...defaults,
|
|
|
|
strength: params.strength.default,
|
|
|
|
},
|
|
|
|
}));
|
|
|
|
},
|
|
|
|
resetInpaint() {
|
|
|
|
set((oldState) => ({
|
|
|
|
...oldState,
|
|
|
|
inpaint: {
|
|
|
|
...defaults,
|
|
|
|
},
|
|
|
|
}));
|
|
|
|
},
|
|
|
|
}), {
|
|
|
|
name: 'onnx-web',
|
|
|
|
storage: createJSONStorage(() => localStorage),
|
|
|
|
}));
|
|
|
|
|
2023-01-10 05:16:28 +00:00
|
|
|
const query = new QueryClient();
|
2023-01-05 03:55:25 +00:00
|
|
|
const appElement = mustExist(document.getElementById('app'));
|
|
|
|
const app = ReactDOM.createRoot(appElement);
|
2023-01-06 05:53:39 +00:00
|
|
|
app.render(<QueryClientProvider client={query}>
|
2023-01-11 02:43:14 +00:00
|
|
|
<ClientContext.Provider value={client}>
|
|
|
|
<StateContext.Provider value={state}>
|
|
|
|
<OnnxWeb client={client} config={params} />
|
|
|
|
</StateContext.Provider>
|
|
|
|
</ClientContext.Provider>
|
2023-01-06 05:53:39 +00:00
|
|
|
</QueryClientProvider>);
|
2023-01-05 03:55:25 +00:00
|
|
|
}
|
|
|
|
|
2023-01-05 16:39:46 +00:00
|
|
|
window.addEventListener('load', () => {
|
|
|
|
console.log('launching onnx-web');
|
2023-01-05 19:42:52 +00:00
|
|
|
main().catch((err) => {
|
|
|
|
console.error('error in main', err);
|
|
|
|
});
|
2023-01-05 16:39:46 +00:00
|
|
|
}, false);
|
2023-01-11 02:43:14 +00:00
|
|
|
|
|
|
|
export const ClientContext = createContext<Maybe<ApiClient>>(undefined);
|
|
|
|
export const StateContext = createContext<Maybe<StoreApi<OnnxState>>>(undefined);
|