feat(gui): add a reset all button to settings and error screen (fixes #116)

gui/src/components/OnnxError.tsx

@@ -1,6 +1,7 @@
-import { Box, Container, Link, Stack, Typography } from '@mui/material';
+import { Box, Button, Container, Link, Stack, Typography } from '@mui/material';
 import * as React from 'react';
 import { ReactNode } from 'react';
+import { STATE_KEY } from '../state';
 
 export interface OnnxErrorProps {
   children?: ReactNode;
@@ -10,6 +11,11 @@ export interface OnnxErrorProps {
 export function OnnxError(props: OnnxErrorProps) {
   const linkback = location.href.replace(location.search, '');
 
+  function clearState() {
+    window.localStorage.removeItem(STATE_KEY);
+    window.location.reload();
+  }
+
   return (
     <Container>
       <Box sx={{ my: 4 }}>
@@ -45,6 +51,12 @@ export function OnnxError(props: OnnxErrorProps) {
             If you are trying to use a remote API server or an alternative port, you can put the address into the
             query string, like <code>{linkback}?api=http://localhost:5001</code>.
           </Typography>
+          <Typography variant='body1'>
+            If you recently upgraded and keep seeing errors, especially if you have been using a pre-release version
+            or you are getting <code>Cannot read properties of undefined</code> errors, you can try resetting the
+            client state:
+          </Typography>
+          <Button onClick={clearState} color='error'>Reset State</Button>
           <Typography variant='body1' gutterBottom>
             If your server is running and available at <a href={props.root}>{props.root}</a>, make sure you are on
             the <code>main</code> branch and try updating to the latest version:

gui/src/components/tab/Settings.tsx

@@ -48,10 +48,10 @@ export function Settings() {
       </Alert>
     </Stack>
     <Stack direction='row' spacing={2}>
-      <Button onClick={() => state.resetTxt2Img()}>Reset Txt2Img</Button>
-      <Button onClick={() => state.resetImg2Img()}>Reset Img2Img</Button>
-      <Button onClick={() => state.resetInpaint()}>Reset Inpaint</Button>
-      <Button disabled>Reset All</Button>
+      <Button onClick={() => state.resetTxt2Img()} color='warning'>Reset Txt2Img</Button>
+      <Button onClick={() => state.resetImg2Img()} color='warning'>Reset Img2Img</Button>
+      <Button onClick={() => state.resetInpaint()} color='warning'>Reset Inpaint</Button>
+      <Button onClick={() => state.resetAll()} color='error'>Reset All</Button>
     </Stack>
   </Stack>;
 }

gui/src/main.tsx

@@ -47,6 +47,7 @@ export async function main() {
         createOutpaintSlice,
         createTxt2ImgSlice,
         createUpscaleSlice,
+        createResetSlice,
       } = createStateSlices(params);
       const state = createStore<OnnxState, [['zustand/persist', OnnxState]]>(persist((...slice) => ({
         ...createBrushSlice(...slice),
@@ -58,6 +59,7 @@ export async function main() {
         ...createTxt2ImgSlice(...slice),
         ...createOutpaintSlice(...slice),
         ...createUpscaleSlice(...slice),
+        ...createResetSlice(...slice),
       }), {
         name: 'onnx-web',
         partialize(s) {

gui/src/state.ts

@@ -99,6 +99,10 @@ interface UpscaleSlice {
   setUpscaleTab(params: Partial<UpscaleReqParams>): void;
   resetUpscaleTab(): void;
 }
+
+interface ResetSlice {
+  resetAll(): void;
+}
 // #endregion
 
 /**
@@ -113,7 +117,8 @@ export type OnnxState
   & ModelSlice
   & OutpaintSlice
   & Txt2ImgSlice
-  & UpscaleSlice;
+  & UpscaleSlice
+  & ResetSlice;
 
 /**
  * Shorthand for state creator to reduce repeated arguments.
@@ -135,6 +140,11 @@ export const ConfigContext = createContext<Maybe<Config<ServerParams>>>(undefine
  */
 export const StateContext = createContext<Maybe<StoreApi<OnnxState>>>(undefined);
 
+/**
+ * Key for zustand persistence, typically local storage.
+ */
+export const STATE_KEY = 'onnx-web';
+
 /**
  * Current state version for zustand persistence.
  */
@@ -439,6 +449,20 @@ export function createStateSlices(server: ServerParams) {
     },
   });
 
+  const createResetSlice: Slice<ResetSlice> = (set) => ({
+    resetAll() {
+      set((prev) => {
+        const next = {...prev};
+        next.resetImg2Img();
+        next.resetInpaint();
+        next.resetTxt2Img();
+        next.resetUpscaleTab();
+        // TODO: reset more stuff
+        return next;
+      });
+    },
+  });
+
   return {
     createBrushSlice,
     createDefaultSlice,
@@ -449,5 +473,6 @@ export function createStateSlices(server: ServerParams) {
     createOutpaintSlice,
     createTxt2ImgSlice,
     createUpscaleSlice,
+    createResetSlice,
   };
 }