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-12 23:49:51 +00:00
|
|
|
import { ApiClient, makeClient } from './api/client.js';
|
2023-01-05 16:39:46 +00:00
|
|
|
import { OnnxWeb } from './components/OnnxWeb.js';
|
2023-01-12 23:49:51 +00:00
|
|
|
import { loadConfig } from './config.js';
|
|
|
|
import { createStateSlices, OnnxState } from './state.js';
|
2023-01-11 02:43:14 +00:00
|
|
|
|
|
|
|
const { createContext } = React;
|
|
|
|
|
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-12 23:49:51 +00:00
|
|
|
const { createDefaultSlice, createHistorySlice, createImg2ImgSlice, createInpaintSlice, createTxt2ImgSlice } = createStateSlices(params);
|
|
|
|
const state = createStore<OnnxState, [['zustand/persist', OnnxState]]>(persist((...slice) => ({
|
|
|
|
...createTxt2ImgSlice(...slice),
|
|
|
|
...createImg2ImgSlice(...slice),
|
|
|
|
...createInpaintSlice(...slice),
|
|
|
|
...createHistorySlice(...slice),
|
|
|
|
...createDefaultSlice(...slice),
|
2023-01-11 02:43:14 +00:00
|
|
|
}), {
|
|
|
|
name: 'onnx-web',
|
2023-01-12 03:45:47 +00:00
|
|
|
partialize: (oldState) => ({
|
|
|
|
...oldState,
|
2023-01-12 23:57:43 +00:00
|
|
|
loading: false,
|
2023-01-12 03:45:47 +00:00
|
|
|
}),
|
2023-01-11 02:43:14 +00:00
|
|
|
storage: createJSONStorage(() => localStorage),
|
2023-01-12 23:57:43 +00:00
|
|
|
version: 2,
|
2023-01-11 02:43:14 +00:00
|
|
|
}));
|
|
|
|
|
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);
|