feat(gui): add a reset all button to settings and error screen (fixes #116)
This commit is contained in:
parent
9171ab68bc
commit
8f0a8e6fdb
|
@ -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 * as React from 'react';
|
||||||
import { ReactNode } from 'react';
|
import { ReactNode } from 'react';
|
||||||
|
import { STATE_KEY } from '../state';
|
||||||
|
|
||||||
export interface OnnxErrorProps {
|
export interface OnnxErrorProps {
|
||||||
children?: ReactNode;
|
children?: ReactNode;
|
||||||
|
@ -10,6 +11,11 @@ export interface OnnxErrorProps {
|
||||||
export function OnnxError(props: OnnxErrorProps) {
|
export function OnnxError(props: OnnxErrorProps) {
|
||||||
const linkback = location.href.replace(location.search, '');
|
const linkback = location.href.replace(location.search, '');
|
||||||
|
|
||||||
|
function clearState() {
|
||||||
|
window.localStorage.removeItem(STATE_KEY);
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
<Box sx={{ my: 4 }}>
|
<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
|
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>.
|
query string, like <code>{linkback}?api=http://localhost:5001</code>.
|
||||||
</Typography>
|
</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>
|
<Typography variant='body1' gutterBottom>
|
||||||
If your server is running and available at <a href={props.root}>{props.root}</a>, make sure you are on
|
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:
|
the <code>main</code> branch and try updating to the latest version:
|
||||||
|
|
|
@ -48,10 +48,10 @@ export function Settings() {
|
||||||
</Alert>
|
</Alert>
|
||||||
</Stack>
|
</Stack>
|
||||||
<Stack direction='row' spacing={2}>
|
<Stack direction='row' spacing={2}>
|
||||||
<Button onClick={() => state.resetTxt2Img()}>Reset Txt2Img</Button>
|
<Button onClick={() => state.resetTxt2Img()} color='warning'>Reset Txt2Img</Button>
|
||||||
<Button onClick={() => state.resetImg2Img()}>Reset Img2Img</Button>
|
<Button onClick={() => state.resetImg2Img()} color='warning'>Reset Img2Img</Button>
|
||||||
<Button onClick={() => state.resetInpaint()}>Reset Inpaint</Button>
|
<Button onClick={() => state.resetInpaint()} color='warning'>Reset Inpaint</Button>
|
||||||
<Button disabled>Reset All</Button>
|
<Button onClick={() => state.resetAll()} color='error'>Reset All</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Stack>;
|
</Stack>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -47,6 +47,7 @@ export async function main() {
|
||||||
createOutpaintSlice,
|
createOutpaintSlice,
|
||||||
createTxt2ImgSlice,
|
createTxt2ImgSlice,
|
||||||
createUpscaleSlice,
|
createUpscaleSlice,
|
||||||
|
createResetSlice,
|
||||||
} = createStateSlices(params);
|
} = createStateSlices(params);
|
||||||
const state = createStore<OnnxState, [['zustand/persist', OnnxState]]>(persist((...slice) => ({
|
const state = createStore<OnnxState, [['zustand/persist', OnnxState]]>(persist((...slice) => ({
|
||||||
...createBrushSlice(...slice),
|
...createBrushSlice(...slice),
|
||||||
|
@ -58,6 +59,7 @@ export async function main() {
|
||||||
...createTxt2ImgSlice(...slice),
|
...createTxt2ImgSlice(...slice),
|
||||||
...createOutpaintSlice(...slice),
|
...createOutpaintSlice(...slice),
|
||||||
...createUpscaleSlice(...slice),
|
...createUpscaleSlice(...slice),
|
||||||
|
...createResetSlice(...slice),
|
||||||
}), {
|
}), {
|
||||||
name: 'onnx-web',
|
name: 'onnx-web',
|
||||||
partialize(s) {
|
partialize(s) {
|
||||||
|
|
|
@ -99,6 +99,10 @@ interface UpscaleSlice {
|
||||||
setUpscaleTab(params: Partial<UpscaleReqParams>): void;
|
setUpscaleTab(params: Partial<UpscaleReqParams>): void;
|
||||||
resetUpscaleTab(): void;
|
resetUpscaleTab(): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface ResetSlice {
|
||||||
|
resetAll(): void;
|
||||||
|
}
|
||||||
// #endregion
|
// #endregion
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -113,7 +117,8 @@ export type OnnxState
|
||||||
& ModelSlice
|
& ModelSlice
|
||||||
& OutpaintSlice
|
& OutpaintSlice
|
||||||
& Txt2ImgSlice
|
& Txt2ImgSlice
|
||||||
& UpscaleSlice;
|
& UpscaleSlice
|
||||||
|
& ResetSlice;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Shorthand for state creator to reduce repeated arguments.
|
* 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);
|
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.
|
* 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 {
|
return {
|
||||||
createBrushSlice,
|
createBrushSlice,
|
||||||
createDefaultSlice,
|
createDefaultSlice,
|
||||||
|
@ -449,5 +473,6 @@ export function createStateSlices(server: ServerParams) {
|
||||||
createOutpaintSlice,
|
createOutpaintSlice,
|
||||||
createTxt2ImgSlice,
|
createTxt2ImgSlice,
|
||||||
createUpscaleSlice,
|
createUpscaleSlice,
|
||||||
|
createResetSlice,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue