diff --git a/gui/src/components/tab/Settings.tsx b/gui/src/components/tab/Settings.tsx
index 1987ed65..0f5e9eb8 100644
--- a/gui/src/components/tab/Settings.tsx
+++ b/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
@@ -42,11 +60,24 @@ export function Settings() {
const query = new URLSearchParams(window.location.search);
query.set('api', root);
window.location.search = query.toString();
- }} />
+ }}>
+ Connect
+
{config.params.version}
+
+ {
+ setJson(event.target.value);
+ }} />
+ } onClick={() => {
+ window.localStorage.setItem(STATE_KEY, json);
+ window.location.reload();
+ }}>
+ Load
+
+
diff --git a/gui/src/main.tsx b/gui/src/main.tsx
index a7004578..91b23193 100644
--- a/gui/src/main.tsx
+++ b/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,