feat(gui): export/import client state from settings tab (#161)

gui/src/components/tab/Settings.tsx

@@ -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>

gui/src/main.tsx

@@ -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,