2023-01-05 19:42:52 +00:00
|
|
|
/* eslint-disable no-console */
|
2023-01-19 23:17:43 +00:00
|
|
|
import { mustDefault, mustExist, timeout } from '@apextoaster/js-utils';
|
2023-01-05 03:55:25 +00:00
|
|
|
import * as React from 'react';
|
2023-01-22 16:05:56 +00:00
|
|
|
import { createRoot } from 'react-dom/client';
|
2023-01-15 00:07:05 +00:00
|
|
|
import { QueryClient, QueryClientProvider } from 'react-query';
|
2023-01-18 05:04:57 +00:00
|
|
|
import { satisfies } from 'semver';
|
2023-01-13 00:10:46 +00:00
|
|
|
import { createStore } from 'zustand';
|
2023-01-11 02:43:14 +00:00
|
|
|
import { createJSONStorage, persist } from 'zustand/middleware';
|
2023-01-05 03:55:25 +00:00
|
|
|
|
2023-01-16 20:10:15 +00:00
|
|
|
import { makeClient } from './client.js';
|
2023-01-18 05:04:57 +00:00
|
|
|
import { ParamsVersionError } from './components/error/ParamsVersion.js';
|
|
|
|
import { ServerParamsError } from './components/error/ServerParams.js';
|
2023-01-14 17:25:53 +00:00
|
|
|
import { OnnxError } from './components/OnnxError.js';
|
2023-01-05 16:39:46 +00:00
|
|
|
import { OnnxWeb } from './components/OnnxWeb.js';
|
2023-01-18 13:20:12 +00:00
|
|
|
import { getApiRoot, loadConfig, mergeConfig, PARAM_VERSION } from './config.js';
|
2023-01-22 01:46:54 +00:00
|
|
|
import { ClientContext, ConfigContext, createStateSlices, OnnxState, STATE_VERSION, StateContext } from './state.js';
|
2023-01-11 02:43:14 +00:00
|
|
|
|
2023-01-19 23:17:43 +00:00
|
|
|
export const INITIAL_LOAD_TIMEOUT = 5_000;
|
|
|
|
|
2023-01-05 16:39:46 +00:00
|
|
|
export async function main() {
|
2023-01-13 00:10:46 +00:00
|
|
|
// load config from GUI server
|
2023-01-05 16:39:46 +00:00
|
|
|
const config = await loadConfig();
|
2023-01-13 00:10:46 +00:00
|
|
|
|
|
|
|
// use that to create an API client
|
2023-01-14 00:40:20 +00:00
|
|
|
const root = getApiRoot(config);
|
|
|
|
const client = makeClient(root);
|
2023-01-13 00:10:46 +00:00
|
|
|
|
|
|
|
// prep react-dom
|
2023-01-05 03:55:25 +00:00
|
|
|
const appElement = mustExist(document.getElementById('app'));
|
2023-01-22 16:05:56 +00:00
|
|
|
const app = createRoot(appElement);
|
2023-01-13 00:10:46 +00:00
|
|
|
|
2023-01-14 17:25:53 +00:00
|
|
|
try {
|
|
|
|
// load full params from the API server and merge with the initial client config
|
2023-01-19 23:17:43 +00:00
|
|
|
const params = await timeout(INITIAL_LOAD_TIMEOUT, client.params());
|
2023-01-18 05:04:57 +00:00
|
|
|
const version = mustDefault(params.version, '0.0.0');
|
|
|
|
if (satisfies(version, PARAM_VERSION)) {
|
2023-01-18 13:20:12 +00:00
|
|
|
const completeConfig = mergeConfig(config, params);
|
2023-01-14 17:25:53 +00:00
|
|
|
|
2023-01-18 05:04:57 +00:00
|
|
|
// prep zustand with a slice for each tab, using local storage
|
|
|
|
const {
|
|
|
|
createBrushSlice,
|
|
|
|
createDefaultSlice,
|
|
|
|
createHistorySlice,
|
|
|
|
createImg2ImgSlice,
|
|
|
|
createInpaintSlice,
|
|
|
|
createModelSlice,
|
|
|
|
createOutpaintSlice,
|
|
|
|
createTxt2ImgSlice,
|
|
|
|
createUpscaleSlice,
|
2023-02-12 22:52:50 +00:00
|
|
|
createBlendSlice,
|
2023-02-11 21:22:24 +00:00
|
|
|
createResetSlice,
|
2023-01-18 05:04:57 +00:00
|
|
|
} = createStateSlices(params);
|
|
|
|
const state = createStore<OnnxState, [['zustand/persist', OnnxState]]>(persist((...slice) => ({
|
|
|
|
...createBrushSlice(...slice),
|
|
|
|
...createDefaultSlice(...slice),
|
|
|
|
...createHistorySlice(...slice),
|
|
|
|
...createImg2ImgSlice(...slice),
|
|
|
|
...createInpaintSlice(...slice),
|
|
|
|
...createModelSlice(...slice),
|
|
|
|
...createTxt2ImgSlice(...slice),
|
|
|
|
...createOutpaintSlice(...slice),
|
|
|
|
...createUpscaleSlice(...slice),
|
2023-02-12 22:52:50 +00:00
|
|
|
...createBlendSlice(...slice),
|
2023-02-11 21:22:24 +00:00
|
|
|
...createResetSlice(...slice),
|
2023-01-18 05:04:57 +00:00
|
|
|
}), {
|
|
|
|
name: 'onnx-web',
|
|
|
|
partialize(s) {
|
|
|
|
return {
|
|
|
|
...s,
|
|
|
|
img2img: {
|
|
|
|
...s.img2img,
|
|
|
|
source: undefined,
|
|
|
|
},
|
|
|
|
inpaint: {
|
|
|
|
...s.inpaint,
|
|
|
|
mask: undefined,
|
|
|
|
source: undefined,
|
|
|
|
},
|
|
|
|
upscaleTab: {
|
|
|
|
...s.upscaleTab,
|
|
|
|
source: undefined,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
},
|
|
|
|
storage: createJSONStorage(() => localStorage),
|
2023-01-22 01:46:54 +00:00
|
|
|
version: STATE_VERSION,
|
2023-01-18 05:04:57 +00:00
|
|
|
}));
|
2023-01-14 17:25:53 +00:00
|
|
|
|
2023-01-18 05:04:57 +00:00
|
|
|
// prep react-query client
|
|
|
|
const query = new QueryClient();
|
2023-01-14 17:25:53 +00:00
|
|
|
|
2023-01-18 05:04:57 +00:00
|
|
|
// go
|
|
|
|
app.render(<QueryClientProvider client={query}>
|
|
|
|
<ClientContext.Provider value={client}>
|
2023-01-18 13:20:12 +00:00
|
|
|
<ConfigContext.Provider value={completeConfig}>
|
2023-01-18 05:04:57 +00:00
|
|
|
<StateContext.Provider value={state}>
|
|
|
|
<OnnxWeb />
|
|
|
|
</StateContext.Provider>
|
|
|
|
</ConfigContext.Provider>
|
|
|
|
</ClientContext.Provider>
|
|
|
|
</QueryClientProvider>);
|
|
|
|
} else {
|
|
|
|
app.render(<OnnxError root={root}>
|
|
|
|
<ParamsVersionError root={root} version={version} />
|
|
|
|
</OnnxError>);
|
|
|
|
}
|
2023-01-14 17:25:53 +00:00
|
|
|
} catch (err) {
|
2023-01-18 05:04:57 +00:00
|
|
|
app.render(<OnnxError root={root}>
|
|
|
|
<ServerParamsError root={root} error={err} />
|
|
|
|
</OnnxError>);
|
2023-01-14 17:25:53 +00:00
|
|
|
}
|
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);
|