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 { Alert, Button, Chip, Stack, TextField } from '@mui/material';
|
||||
import { Alert, Button, Stack, TextField } from '@mui/material';
|
||||
import * as React from 'react';
|
||||
import { useContext, useState } from 'react';
|
||||
import { useStore } from 'zustand';
|
||||
|
||||
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';
|
||||
|
||||
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() {
|
||||
const config = mustExist(useContext(ConfigContext));
|
||||
const state = useStore(mustExist(useContext(StateContext)));
|
||||
|
||||
const [json, setJson] = useState(JSON.stringify(state, removeBlobs));
|
||||
const [root, setRoot] = useState(getApiRoot(config));
|
||||
|
||||
return <Stack spacing={2}>
|
||||
|
@ -42,11 +60,24 @@ export function Settings() {
|
|||
const query = new URLSearchParams(window.location.search);
|
||||
query.set('api', root);
|
||||
window.location.search = query.toString();
|
||||
}} />
|
||||
}}>
|
||||
Connect
|
||||
</Button>
|
||||
<Alert variant='outlined' severity='success'>
|
||||
{config.params.version}
|
||||
</Alert>
|
||||
</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}>
|
||||
<Button onClick={() => state.resetTxt2Img()} color='warning'>Reset Txt2Img</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 { OnnxWeb } from './components/OnnxWeb.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;
|
||||
|
||||
|
@ -64,7 +64,7 @@ export async function main() {
|
|||
...createBlendSlice(...slice),
|
||||
...createResetSlice(...slice),
|
||||
}), {
|
||||
name: 'onnx-web',
|
||||
name: STATE_KEY,
|
||||
partialize(s) {
|
||||
return {
|
||||
...s,
|
||||
|
|
Loading…
Reference in New Issue