diff --git a/gui/src/components/OnnxError.tsx b/gui/src/components/OnnxError.tsx index 6a960ef3..416414ab 100644 --- a/gui/src/components/OnnxError.tsx +++ b/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 ( @@ -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 {linkback}?api=http://localhost:5001. + + If you recently upgraded and keep seeing errors, especially if you have been using a pre-release version + or you are getting Cannot read properties of undefined errors, you can try resetting the + client state: + + If your server is running and available at {props.root}, make sure you are on the main branch and try updating to the latest version: diff --git a/gui/src/components/tab/Settings.tsx b/gui/src/components/tab/Settings.tsx index eea73f9d..1987ed65 100644 --- a/gui/src/components/tab/Settings.tsx +++ b/gui/src/components/tab/Settings.tsx @@ -48,10 +48,10 @@ export function Settings() { - - - - + + + + ; } diff --git a/gui/src/main.tsx b/gui/src/main.tsx index 535ac10f..1eb8a690 100644 --- a/gui/src/main.tsx +++ b/gui/src/main.tsx @@ -47,6 +47,7 @@ export async function main() { createOutpaintSlice, createTxt2ImgSlice, createUpscaleSlice, + createResetSlice, } = createStateSlices(params); const state = createStore(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) { diff --git a/gui/src/state.ts b/gui/src/state.ts index 9e0c65bf..71bb9186 100644 --- a/gui/src/state.ts +++ b/gui/src/state.ts @@ -99,6 +99,10 @@ interface UpscaleSlice { setUpscaleTab(params: Partial): 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>>(undefine */ export const StateContext = createContext>>(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 = (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, }; }