feat: add version check to parameters
This commit is contained in:
parent
4d9dc05cd0
commit
be3a17b2ff
|
@ -1,4 +1,5 @@
|
||||||
{
|
{
|
||||||
|
"version": "0.5.0",
|
||||||
"cfg": {
|
"cfg": {
|
||||||
"default": 6,
|
"default": 6,
|
||||||
"min": 1,
|
"min": 1,
|
||||||
|
|
|
@ -20,6 +20,7 @@
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-query": "^3.39.2",
|
"react-query": "^3.39.2",
|
||||||
|
"semver": "^7.3.8",
|
||||||
"tslib": "^2.4.1",
|
"tslib": "^2.4.1",
|
||||||
"zustand": "^4.3.1"
|
"zustand": "^4.3.1"
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
import { Alert, AlertTitle, Box, Container, Link, Stack, Typography } from '@mui/material';
|
import { Box, Container, Link, Stack, Typography } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import { ReactNode } from 'react';
|
||||||
|
|
||||||
export interface OnnxErrorProps {
|
export interface OnnxErrorProps {
|
||||||
|
children?: ReactNode;
|
||||||
root: string;
|
root: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -17,12 +19,8 @@ export function OnnxError(props: OnnxErrorProps) {
|
||||||
</Box>
|
</Box>
|
||||||
<Box sx={{ my: 4 }}>
|
<Box sx={{ my: 4 }}>
|
||||||
<Stack spacing={2}>
|
<Stack spacing={2}>
|
||||||
<Alert severity='error'>
|
{props.children}
|
||||||
<AlertTitle>
|
|
||||||
Server Error
|
|
||||||
</AlertTitle>
|
|
||||||
Could not fetch parameters from the ONNX web API server at <code>{props.root}</code>.
|
|
||||||
</Alert>
|
|
||||||
<Typography variant='body1'>
|
<Typography variant='body1'>
|
||||||
This is a web UI for running ONNX models with GPU acceleration or in software, running locally or on a
|
This is a web UI for running ONNX models with GPU acceleration or in software, running locally or on a
|
||||||
remote machine.
|
remote machine.
|
||||||
|
@ -50,7 +48,7 @@ export function OnnxError(props: OnnxErrorProps) {
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant='body1' gutterBottom>
|
<Typography variant='body1' gutterBottom>
|
||||||
If your server is running and available at <a href={props.root}>{props.root}</a>, make sure you are on
|
If your server is running and available at <a href={props.root}>{props.root}</a>, make sure you are on
|
||||||
the `main` branch and try updating to the latest version:
|
the <code>main</code> branch and try updating to the latest version:
|
||||||
<pre>
|
<pre>
|
||||||
> git branch{'\n'}
|
> git branch{'\n'}
|
||||||
* main{'\n'}
|
* main{'\n'}
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { Alert, AlertTitle, Typography } from '@mui/material';
|
||||||
|
import * as React from 'react';
|
||||||
|
import { PARAM_VERSION } from '../../config';
|
||||||
|
|
||||||
|
export interface ParamsVersionErrorProps {
|
||||||
|
root: string;
|
||||||
|
version: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ParamsVersionError(props: ParamsVersionErrorProps) {
|
||||||
|
return <Alert severity='error'>
|
||||||
|
<AlertTitle>
|
||||||
|
Parameter Version Error
|
||||||
|
</AlertTitle>
|
||||||
|
<Typography>
|
||||||
|
The server returned parameters that are too old for the client to load.
|
||||||
|
</Typography>
|
||||||
|
<Typography>
|
||||||
|
The server parameters are version <code>{props.version}</code>, but this client's required version
|
||||||
|
is <code>{PARAM_VERSION}</code>. Please update your server or use a matching version of the client.
|
||||||
|
</Typography>
|
||||||
|
</Alert>;
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,31 @@
|
||||||
|
import { Alert, AlertTitle, Typography } from '@mui/material';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
export interface ServerParamsErrorProps {
|
||||||
|
error: unknown;
|
||||||
|
root: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getErrorMessage(error: unknown): string {
|
||||||
|
if (error instanceof Error) {
|
||||||
|
return error.message;
|
||||||
|
} else if (typeof error === 'string') {
|
||||||
|
return error;
|
||||||
|
} else {
|
||||||
|
return 'unknown error';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ServerParamsError(props: ServerParamsErrorProps) {
|
||||||
|
return <Alert severity='error'>
|
||||||
|
<AlertTitle>
|
||||||
|
Server Error
|
||||||
|
</AlertTitle>
|
||||||
|
<Typography>
|
||||||
|
Could not fetch parameters from the ONNX web API server at <code>{props.root}</code>.
|
||||||
|
</Typography>
|
||||||
|
<Typography>
|
||||||
|
{getErrorMessage(props.error)}
|
||||||
|
</Typography>
|
||||||
|
</Alert>;
|
||||||
|
}
|
|
@ -38,7 +38,9 @@ export type ConfigParams = ConfigRanges<Required<
|
||||||
ModelParams &
|
ModelParams &
|
||||||
OutpaintParams &
|
OutpaintParams &
|
||||||
UpscaleParams
|
UpscaleParams
|
||||||
>>;
|
>> & {
|
||||||
|
version: string;
|
||||||
|
};
|
||||||
/* eslint-enable */
|
/* eslint-enable */
|
||||||
|
|
||||||
export interface Config {
|
export interface Config {
|
||||||
|
@ -57,7 +59,10 @@ export const DEFAULT_BRUSH = {
|
||||||
color: 255,
|
color: 255,
|
||||||
size: 8,
|
size: 8,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const IMAGE_FILTER = '.bmp, .jpg, .jpeg, .png';
|
export const IMAGE_FILTER = '.bmp, .jpg, .jpeg, .png';
|
||||||
|
export const PARAM_VERSION = '>=0.4.0';
|
||||||
|
|
||||||
export const STALE_TIME = 300_000; // 5 minutes
|
export const STALE_TIME = 300_000; // 5 minutes
|
||||||
export const POLL_TIME = 5_000; // 5 seconds
|
export const POLL_TIME = 5_000; // 5 seconds
|
||||||
export const SAVE_TIME = 5_000; // 5 seconds
|
export const SAVE_TIME = 5_000; // 5 seconds
|
||||||
|
|
135
gui/src/main.tsx
135
gui/src/main.tsx
|
@ -1,16 +1,19 @@
|
||||||
/* eslint-disable no-console */
|
/* eslint-disable no-console */
|
||||||
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
import { doesExist, mustDefault, 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 { satisfies } from 'semver';
|
||||||
import { createStore } from 'zustand';
|
import { createStore } from 'zustand';
|
||||||
import { createJSONStorage, persist } from 'zustand/middleware';
|
import { createJSONStorage, persist } from 'zustand/middleware';
|
||||||
|
|
||||||
import { makeClient } from './client.js';
|
import { makeClient } from './client.js';
|
||||||
|
import { ParamsVersionError } from './components/error/ParamsVersion.js';
|
||||||
|
import { ServerParamsError } from './components/error/ServerParams.js';
|
||||||
import { OnnxError } from './components/OnnxError.js';
|
import { OnnxError } from './components/OnnxError.js';
|
||||||
import { OnnxWeb } from './components/OnnxWeb.js';
|
import { OnnxWeb } from './components/OnnxWeb.js';
|
||||||
import { Config, loadConfig } from './config.js';
|
import { Config, loadConfig, PARAM_VERSION } from './config.js';
|
||||||
import { ClientContext, ConfigContext, createStateSlices, OnnxState, StateContext } from './state.js';
|
import { ClientContext, ConfigContext, createStateSlices, OnnxState, StateContext } from './state.js';
|
||||||
|
|
||||||
export function getApiRoot(config: Config): string {
|
export function getApiRoot(config: Config): string {
|
||||||
|
@ -39,69 +42,79 @@ export async function main() {
|
||||||
try {
|
try {
|
||||||
// load full params from the API server and merge with the initial client config
|
// 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);
|
const version = mustDefault(params.version, '0.0.0');
|
||||||
|
if (satisfies(version, PARAM_VERSION)) {
|
||||||
|
// check version here
|
||||||
|
merge(params, config.params);
|
||||||
|
|
||||||
// prep zustand with a slice for each tab, using local storage
|
// prep zustand with a slice for each tab, using local storage
|
||||||
const {
|
const {
|
||||||
createBrushSlice,
|
createBrushSlice,
|
||||||
createDefaultSlice,
|
createDefaultSlice,
|
||||||
createHistorySlice,
|
createHistorySlice,
|
||||||
createImg2ImgSlice,
|
createImg2ImgSlice,
|
||||||
createInpaintSlice,
|
createInpaintSlice,
|
||||||
createModelSlice,
|
createModelSlice,
|
||||||
createOutpaintSlice,
|
createOutpaintSlice,
|
||||||
createTxt2ImgSlice,
|
createTxt2ImgSlice,
|
||||||
createUpscaleSlice,
|
createUpscaleSlice,
|
||||||
} = createStateSlices(params);
|
} = createStateSlices(params);
|
||||||
const state = createStore<OnnxState, [['zustand/persist', OnnxState]]>(persist((...slice) => ({
|
const state = createStore<OnnxState, [['zustand/persist', OnnxState]]>(persist((...slice) => ({
|
||||||
...createBrushSlice(...slice),
|
...createBrushSlice(...slice),
|
||||||
...createDefaultSlice(...slice),
|
...createDefaultSlice(...slice),
|
||||||
...createHistorySlice(...slice),
|
...createHistorySlice(...slice),
|
||||||
...createImg2ImgSlice(...slice),
|
...createImg2ImgSlice(...slice),
|
||||||
...createInpaintSlice(...slice),
|
...createInpaintSlice(...slice),
|
||||||
...createModelSlice(...slice),
|
...createModelSlice(...slice),
|
||||||
...createTxt2ImgSlice(...slice),
|
...createTxt2ImgSlice(...slice),
|
||||||
...createOutpaintSlice(...slice),
|
...createOutpaintSlice(...slice),
|
||||||
...createUpscaleSlice(...slice),
|
...createUpscaleSlice(...slice),
|
||||||
}), {
|
}), {
|
||||||
name: 'onnx-web',
|
name: 'onnx-web',
|
||||||
partialize(s) {
|
partialize(s) {
|
||||||
return {
|
return {
|
||||||
...s,
|
...s,
|
||||||
img2img: {
|
img2img: {
|
||||||
...s.img2img,
|
...s.img2img,
|
||||||
source: undefined,
|
source: undefined,
|
||||||
},
|
},
|
||||||
inpaint: {
|
inpaint: {
|
||||||
...s.inpaint,
|
...s.inpaint,
|
||||||
mask: undefined,
|
mask: undefined,
|
||||||
source: undefined,
|
source: undefined,
|
||||||
},
|
},
|
||||||
upscaleTab: {
|
upscaleTab: {
|
||||||
...s.upscaleTab,
|
...s.upscaleTab,
|
||||||
source: undefined,
|
source: undefined,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
storage: createJSONStorage(() => localStorage),
|
storage: createJSONStorage(() => localStorage),
|
||||||
version: 3,
|
version: 3,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// prep react-query client
|
// prep react-query client
|
||||||
const query = new QueryClient();
|
const query = new QueryClient();
|
||||||
|
|
||||||
// go
|
// go
|
||||||
app.render(<QueryClientProvider client={query}>
|
app.render(<QueryClientProvider client={query}>
|
||||||
<ClientContext.Provider value={client}>
|
<ClientContext.Provider value={client}>
|
||||||
<ConfigContext.Provider value={params}>
|
<ConfigContext.Provider value={params}>
|
||||||
<StateContext.Provider value={state}>
|
<StateContext.Provider value={state}>
|
||||||
<OnnxWeb />
|
<OnnxWeb />
|
||||||
</StateContext.Provider>
|
</StateContext.Provider>
|
||||||
</ConfigContext.Provider>
|
</ConfigContext.Provider>
|
||||||
</ClientContext.Provider>
|
</ClientContext.Provider>
|
||||||
</QueryClientProvider>);
|
</QueryClientProvider>);
|
||||||
|
} else {
|
||||||
|
app.render(<OnnxError root={root}>
|
||||||
|
<ParamsVersionError root={root} version={version} />
|
||||||
|
</OnnxError>);
|
||||||
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
app.render(<OnnxError root={root} />);
|
app.render(<OnnxError root={root}>
|
||||||
|
<ServerParamsError root={root} error={err} />
|
||||||
|
</OnnxError>);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -2540,7 +2540,7 @@ semver@^6.0.0:
|
||||||
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
|
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
|
||||||
integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
|
integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
|
||||||
|
|
||||||
semver@^7.3.7:
|
semver@^7.3.7, semver@^7.3.8:
|
||||||
version "7.3.8"
|
version "7.3.8"
|
||||||
resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
|
resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
|
||||||
integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
|
integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
|
||||||
|
|
Loading…
Reference in New Issue