feat(gui): export/import client state from settings tab (#161)
This commit is contained in:
parent
b2de114c8c
commit
4d62404970
|
@ -1,18 +1,36 @@
|
||||||
import { mustExist } from '@apextoaster/js-utils';
|
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
||||||
import { Refresh } from '@mui/icons-material';
|
import { Refresh } from '@mui/icons-material';
|
||||||
import { Alert, Button, Chip, Stack, TextField } from '@mui/material';
|
import { Alert, Button, Stack, TextField } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useContext, useState } from 'react';
|
import { useContext, useState } from 'react';
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
|
|
||||||
import { getApiRoot } from '../../config.js';
|
import { getApiRoot } from '../../config.js';
|
||||||
import { ConfigContext, StateContext } from '../../state.js';
|
import { ConfigContext, StateContext, STATE_KEY } from '../../state.js';
|
||||||
import { NumericField } from '../input/NumericField.js';
|
import { NumericField } from '../input/NumericField.js';
|
||||||
|
|
||||||
|
function removeBlobs(key: string, value: unknown): unknown {
|
||||||
|
if (value instanceof Blob || value instanceof File) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
// check the first item, but return all of them
|
||||||
|
if (doesExist(removeBlobs(key, value[0]))) {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
|
||||||
export function Settings() {
|
export function Settings() {
|
||||||
const config = mustExist(useContext(ConfigContext));
|
const config = mustExist(useContext(ConfigContext));
|
||||||
const state = useStore(mustExist(useContext(StateContext)));
|
const state = useStore(mustExist(useContext(StateContext)));
|
||||||
|
|
||||||
|
const [json, setJson] = useState(JSON.stringify(state, removeBlobs));
|
||||||
const [root, setRoot] = useState(getApiRoot(config));
|
const [root, setRoot] = useState(getApiRoot(config));
|
||||||
|
|
||||||
return <Stack spacing={2}>
|
return <Stack spacing={2}>
|
||||||
|
@ -42,11 +60,24 @@ export function Settings() {
|
||||||
const query = new URLSearchParams(window.location.search);
|
const query = new URLSearchParams(window.location.search);
|
||||||
query.set('api', root);
|
query.set('api', root);
|
||||||
window.location.search = query.toString();
|
window.location.search = query.toString();
|
||||||
}} />
|
}}>
|
||||||
|
Connect
|
||||||
|
</Button>
|
||||||
<Alert variant='outlined' severity='success'>
|
<Alert variant='outlined' severity='success'>
|
||||||
{config.params.version}
|
{config.params.version}
|
||||||
</Alert>
|
</Alert>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
<Stack direction='row' spacing={2}>
|
||||||
|
<TextField variant='outlined' label='Client State' value={json} onChange={(event) => {
|
||||||
|
setJson(event.target.value);
|
||||||
|
}} />
|
||||||
|
<Button variant='contained' startIcon={<Refresh />} onClick={() => {
|
||||||
|
window.localStorage.setItem(STATE_KEY, json);
|
||||||
|
window.location.reload();
|
||||||
|
}}>
|
||||||
|
Load
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
<Stack direction='row' spacing={2}>
|
<Stack direction='row' spacing={2}>
|
||||||
<Button onClick={() => state.resetTxt2Img()} color='warning'>Reset Txt2Img</Button>
|
<Button onClick={() => state.resetTxt2Img()} color='warning'>Reset Txt2Img</Button>
|
||||||
<Button onClick={() => state.resetImg2Img()} color='warning'>Reset Img2Img</Button>
|
<Button onClick={() => state.resetImg2Img()} color='warning'>Reset Img2Img</Button>
|
||||||
|
|
|
@ -14,7 +14,7 @@ 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 { getApiRoot, loadConfig, mergeConfig, PARAM_VERSION } from './config.js';
|
import { getApiRoot, loadConfig, mergeConfig, PARAM_VERSION } from './config.js';
|
||||||
import { ClientContext, ConfigContext, createStateSlices, OnnxState, STATE_VERSION, StateContext, LoggerContext } from './state.js';
|
import { ClientContext, ConfigContext, createStateSlices, OnnxState, STATE_VERSION, StateContext, LoggerContext, STATE_KEY } from './state.js';
|
||||||
|
|
||||||
export const INITIAL_LOAD_TIMEOUT = 5_000;
|
export const INITIAL_LOAD_TIMEOUT = 5_000;
|
||||||
|
|
||||||
|
@ -64,7 +64,7 @@ export async function main() {
|
||||||
...createBlendSlice(...slice),
|
...createBlendSlice(...slice),
|
||||||
...createResetSlice(...slice),
|
...createResetSlice(...slice),
|
||||||
}), {
|
}), {
|
||||||
name: 'onnx-web',
|
name: STATE_KEY,
|
||||||
partialize(s) {
|
partialize(s) {
|
||||||
return {
|
return {
|
||||||
...s,
|
...s,
|
||||||
|
|
Loading…
Reference in New Issue