apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

continue migrating to selectors

This commit is contained in:
Sean Sube 2023-07-22 10:02:17 -05:00
parent ffc941548d
commit 97daf1aa7c
Signed by: ssube
GPG Key ID: 3EED7B957D362AF1
4 changed files with 96 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gui/src/components/card/LoadingCard.tsx
View File

@ -34,7 +34,7 @@ export function LoadingCard(props: LoadingCardProps) {
const { t } = useTranslation();
const cancel = useMutation(() => client.cancel(image.outputs[index].key));
const ready = useQuery([`ready-${image.outputs[index].key}`], () => client.ready(image.outputs[index].key), {
const ready = useQuery(['ready', image.outputs[index].key], () => client.ready(image.outputs[index].key), {
// data will always be ready without this, even if the API says its not
cacheTime: 0,
refetchInterval: POLL_TIME,

42
gui/src/components/tab/Img2Img.tsx
View File

@ -5,6 +5,7 @@ import * as React from 'react';
import { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { useStore } from 'zustand';
import { shallow} from 'zustand/shallow';
import { HighresParams, Img2ImgParams, ModelParams, UpscaleParams } from '../../client/types.js';
import { IMAGE_FILTER, STALE_TIME } from '../../config.js';
@ -47,21 +48,10 @@ export function Img2Img() {
});
const state = mustExist(useContext(StateContext));
const { pushHistory, setHighres, setImg2Img, setModel, setUpscale } = useStore(state, selectActions, shallow);
const { loopback, source, sourceFilter, strength } = useStore(state, selectReactParams, shallow);
const model = useStore(state, selectModel);
const source = useStore(state, (s) => s.img2img.source);
const sourceFilter = useStore(state, (s) => s.img2img.sourceFilter);
const strength = useStore(state, (s) => s.img2img.strength);
const loopback = useStore(state, (s) => s.img2img.loopback);
// eslint-disable-next-line @typescript-eslint/unbound-method
const setImg2Img = useStore(state, (s) => s.setImg2Img);
// eslint-disable-next-line @typescript-eslint/unbound-method
const setHighres = useStore(state, (s) => s.setImg2ImgHighres);
// eslint-disable-next-line @typescript-eslint/unbound-method
const setUpscale = useStore(state, (s) => s.setImg2ImgUpscale);
// eslint-disable-next-line @typescript-eslint/unbound-method
const setModel = useStore(state, (s) => s.setImg2ImgModel);
// eslint-disable-next-line @typescript-eslint/unbound-method
const pushHistory = useStore(state, (s) => s.pushHistory);
const { t } = useTranslation();
return <Box>
@ -155,6 +145,21 @@ export function Img2Img() {
</Box>;
}
export function selectActions(state: OnnxState) {
return {
// eslint-disable-next-line @typescript-eslint/unbound-method
pushHistory: state.pushHistory,
// eslint-disable-next-line @typescript-eslint/unbound-method
setImg2Img: state.setImg2Img,
// eslint-disable-next-line @typescript-eslint/unbound-method
setHighres: state.setImg2ImgHighres,
// eslint-disable-next-line @typescript-eslint/unbound-method
setModel: state.setImg2ImgModel,
// eslint-disable-next-line @typescript-eslint/unbound-method
setUpscale: state.setImg2ImgUpscale,
};
}
export function selectModel(state: OnnxState): ModelParams {
return state.img2imgModel;
}
@ -163,6 +168,15 @@ export function selectParams(state: OnnxState): TabState<Img2ImgParams> {
return state.img2img;
}
export function selectReactParams(state: OnnxState) {
return {
loopback: state.img2img.loopback,
source: state.img2img.source,
sourceFilter: state.img2img.sourceFilter,
strength: state.img2img.strength,
};
}
export function selectHighres(state: OnnxState): HighresParams {
return state.img2imgHighres;
}

66
gui/src/components/tab/Inpaint.tsx
View File

@ -5,8 +5,9 @@ import * as React from 'react';
import { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { useStore } from 'zustand';
import { shallow } from 'zustand/shallow';
import { HighresParams, InpaintParams, ModelParams, UpscaleParams } from '../../client/types.js';
import { BrushParams, HighresParams, InpaintParams, ModelParams, UpscaleParams } from '../../client/types.js';
import { IMAGE_FILTER, STALE_TIME } from '../../config.js';
import { ClientContext, ConfigContext, OnnxState, StateContext, TabState } from '../../state.js';
import { HighresControl } from '../control/HighresControl.js';
@ -33,6 +34,7 @@ export function Inpaint() {
async function uploadSource(): Promise<void> {
const innerState = state.getState();
const { outpaint } = innerState;
const inpaint = selectParams(innerState);
if (outpaint.enabled) {
@ -64,42 +66,23 @@ export function Inpaint() {
}
const state = mustExist(useContext(StateContext));
const source = useStore(state, (s) => s.inpaint.source);
const mask = useStore(state, (s) => s.inpaint.mask);
const strength = useStore(state, (s) => s.inpaint.strength);
const noise = useStore(state, (s) => s.inpaint.noise);
const filter = useStore(state, (s) => s.inpaint.filter);
const tileOrder = useStore(state, (s) => s.inpaint.tileOrder);
const fillColor = useStore(state, (s) => s.inpaint.fillColor);
const { pushHistory, setBrush, setHighres, setModel, setInpaint, setUpscale } = useStore(state, selectActions, shallow);
const { source, mask, strength, noise, filter, tileOrder, fillColor } = useStore(state, selectReactParams, shallow);
const model = useStore(state, selectModel);
const outpaint = useStore(state, (s) => s.outpaint);
const brush = useStore(state, (s) => s.inpaintBrush);
const brush = useStore(state, selectBrush);
// eslint-disable-next-line @typescript-eslint/unbound-method
const setInpaint = useStore(state, (s) => s.setInpaint);
// eslint-disable-next-line @typescript-eslint/unbound-method
const setBrush = useStore(state, (s) => s.setInpaintBrush);
// eslint-disable-next-line @typescript-eslint/unbound-method
const setModel = useStore(state, (s) => s.setInpaintModel);
// eslint-disable-next-line @typescript-eslint/unbound-method
const setHighres = useStore(state, (s) => s.setInpaintHighres);
// eslint-disable-next-line @typescript-eslint/unbound-method
const setUpscale = useStore(state, (s) => s.setInpaintUpscale);
// eslint-disable-next-line @typescript-eslint/unbound-method
const pushHistory = useStore(state, (s) => s.pushHistory);
const { t } = useTranslation();
const query = useQueryClient();
const upload = useMutation(uploadSource, {
onSuccess: () => query.invalidateQueries([ 'ready' ]),
onSuccess: () => query.invalidateQueries(['ready']),
});
function renderBanner() {
if (supportsInpaint()) {
return undefined;
} else {
return <Alert severity="warning">{t('error.inpaint.support')}</Alert>;
return <Alert severity='warning'>{t('error.inpaint.support')}</Alert>;
}
}
@ -245,6 +228,27 @@ export function Inpaint() {
</Box>;
}
export function selectActions(state: OnnxState) {
return {
// eslint-disable-next-line @typescript-eslint/unbound-method
pushHistory: state.pushHistory,
// eslint-disable-next-line @typescript-eslint/unbound-method
setBrush: state.setInpaintBrush,
// eslint-disable-next-line @typescript-eslint/unbound-method
setHighres: state.setInpaintHighres,
// eslint-disable-next-line @typescript-eslint/unbound-method
setModel: state.setInpaintModel,
// eslint-disable-next-line @typescript-eslint/unbound-method
setInpaint: state.setInpaint,
// eslint-disable-next-line @typescript-eslint/unbound-method
setUpscale: state.setInpaintUpscale,
};
}
export function selectBrush(state: OnnxState): BrushParams {
return state.inpaintBrush;
}
export function selectModel(state: OnnxState): ModelParams {
return state.inpaintModel;
}
@ -253,6 +257,18 @@ export function selectParams(state: OnnxState): TabState<InpaintParams> {
return state.inpaint;
}
export function selectReactParams(state: OnnxState) {
return {
source: state.inpaint.source,
mask: state.inpaint.mask,
strength: state.inpaint.strength,
noise: state.inpaint.noise,
filter: state.inpaint.filter,
tileOrder: state.inpaint.tileOrder,
fillColor: state.inpaint.fillColor,
};
}
export function selectHighres(state: OnnxState): HighresParams {
return state.inpaintHighres;
}

38
gui/src/components/tab/Txt2Img.tsx
View File

@ -5,6 +5,7 @@ import * as React from 'react';
import { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { useStore } from 'zustand';
import { shallow } from 'zustand/shallow';
import { HighresParams, ModelParams, Txt2ImgParams, UpscaleParams } from '../../client/types.js';
import { ClientContext, ConfigContext, OnnxState, StateContext, TabState } from '../../state.js';
@ -32,19 +33,10 @@ export function Txt2Img() {
});
const state = mustExist(useContext(StateContext));
const height = useStore(state, (s) => s.txt2img.height);
const width = useStore(state, (s) => s.txt2img.width);
const { pushHistory, setHighres, setModel, setParams, setUpscale } = useStore(state, selectActions, shallow);
const { height, width } = useStore(state, selectReactParams, shallow);
const model = useStore(state, selectModel);
// eslint-disable-next-line @typescript-eslint/unbound-method
const setParams = useStore(state, (s) => s.setTxt2Img);
// eslint-disable-next-line @typescript-eslint/unbound-method
const setHighres = useStore(state, (s) => s.setTxt2ImgHighres);
// eslint-disable-next-line @typescript-eslint/unbound-method
const setUpscale = useStore(state, (s) => s.setTxt2ImgUpscale);
// eslint-disable-next-line @typescript-eslint/unbound-method
const setModel = useStore(state, (s) => s.setTxt2ImgModel);
// eslint-disable-next-line @typescript-eslint/unbound-method
const pushHistory = useStore(state, (s) => s.pushHistory);
const { t } = useTranslation();
return <Box>
@ -95,6 +87,21 @@ export function Txt2Img() {
</Box>;
}
export function selectActions(state: OnnxState) {
return {
// eslint-disable-next-line @typescript-eslint/unbound-method
pushHistory: state.pushHistory,
// eslint-disable-next-line @typescript-eslint/unbound-method
setHighres: state.setTxt2ImgHighres,
// eslint-disable-next-line @typescript-eslint/unbound-method
setModel: state.setTxt2ImgModel,
// eslint-disable-next-line @typescript-eslint/unbound-method
setParams: state.setTxt2Img,
// eslint-disable-next-line @typescript-eslint/unbound-method
setUpscale: state.setTxt2ImgUpscale,
};
}
export function selectModel(state: OnnxState): ModelParams {
return state.txt2imgModel;
}
@ -103,6 +110,13 @@ export function selectParams(state: OnnxState): TabState<Txt2ImgParams> {
return state.txt2img;
}
export function selectReactParams(state: OnnxState) {
return {
height: state.txt2img.height,
width: state.txt2img.width,
};
}
export function selectHighres(state: OnnxState): HighresParams {
return state.txt2imgHighres;
}