apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

fix(gui): swap toggle buttons for decent checkboxes

This commit is contained in:
Sean Sube 2023-01-19 08:35:06 -06:00
parent 4fbf046e28
commit 46026d9aa0
2 changed files with 40 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
gui/src/components/control/OutpaintControl.tsx
View File

@ -1,6 +1,5 @@
import { mustExist } from '@apextoaster/js-utils';
import { ZoomOutMap } from '@mui/icons-material';
import { Stack, ToggleButton } from '@mui/material';
import { Checkbox, FormControlLabel, Stack } from '@mui/material';
import * as React from 'react';
import { useContext } from 'react';
import { useStore } from 'zustand';
@ -16,19 +15,18 @@ export function OutpaintControl() {
const setOutpaint = useStore(state, (s) => s.setOutpaint);
return <Stack direction='row' spacing={4}>
<ToggleButton
color='primary'
selected={outpaint.enabled}
value='check'
onChange={(event) => {
setOutpaint({
enabled: outpaint.enabled === false,
});
}}
>
<ZoomOutMap />
Outpaint
</ToggleButton>
<FormControlLabel
label='Outpaint'
control={<Checkbox
checked={outpaint.enabled}
value='check'
onChange={(event) => {
setOutpaint({
enabled: outpaint.enabled === false,
});
}}
/>}
/>
<NumericField
label='Left'
disabled={outpaint.enabled === false}

57
gui/src/components/control/UpscaleControl.tsx
View File

@ -1,6 +1,5 @@
import { mustExist } from '@apextoaster/js-utils';
import { FaceRetouchingNatural, ZoomIn } from '@mui/icons-material';
import { Stack, ToggleButton } from '@mui/material';
import { Checkbox, FormControlLabel, Stack } from '@mui/material';
import * as React from 'react';
import { useContext } from 'react';
import { useStore } from 'zustand';
@ -16,19 +15,18 @@ export function UpscaleControl() {
const setUpscale = useStore(state, (s) => s.setUpscale);
return <Stack direction='row' spacing={4}>
<ToggleButton
color='primary'
selected={upscale.enabled}
value='check'
onChange={(event) => {
setUpscale({
enabled: upscale.enabled === false,
});
}}
>
<ZoomIn />
Upscale
</ToggleButton>
<FormControlLabel
label='Upscale'
control={<Checkbox
checked={upscale.enabled}
value='check'
onChange={(event) => {
setUpscale({
enabled: upscale.enabled === false,
});
}}
/>}
/>
<NumericField
label='Scale'
disabled={upscale.enabled === false}
@ -69,24 +67,23 @@ export function UpscaleControl() {
});
}}
/>
<ToggleButton
color='primary'
disabled={upscale.enabled === false}
selected={upscale.enabled && upscale.faces}
value='check'
onChange={(event) => {
setUpscale({
faces: upscale.faces === false,
});
}}
>
<FaceRetouchingNatural />
Face Correction
</ToggleButton>
<FormControlLabel
label='Face Correction'
control={<Checkbox
disabled={upscale.enabled === false}
checked={upscale.enabled && upscale.faces}
value='check'
onChange={(event) => {
setUpscale({
faces: upscale.faces === false,
});
}}
/>}
/>
<NumericField
label='Strength'
decimal
disabled={upscale.enabled === false && upscale.faces === false}
disabled={upscale.enabled === false || upscale.faces === false}
min={params.faceStrength.min}
max={params.faceStrength.max}
step={params.faceStrength.step}