feat(gui): add fill with white, toggle for outpainting

gui/src/api/client.ts

@@ -46,6 +46,8 @@ export interface InpaintParams extends BaseImgParams {
 }
 
 export interface OutpaintPixels {
+  enabled: boolean;
+
   left: number;
   right: number;
   top: number;

gui/src/components/Inpaint.tsx

@@ -27,7 +27,7 @@ export function Inpaint(props: InpaintProps) {
   async function uploadSource(): Promise<void> {
     const outpaint = state.getState().outpaint; // TODO: seems shady
 
-    if (outpaint.bottom > 0 || outpaint.left > 0 || outpaint.right > 0 || outpaint.top > 0) {
+    if (outpaint.enabled) {
       const output = await client.outpaint({
         ...params,
         ...outpaint,

gui/src/components/MaskCanvas.tsx

@@ -233,8 +233,8 @@ export function MaskCanvas(props: MaskCanvasProps) {
     <Stack direction='row' spacing={4}>
       <NumericField
         label='Brush Color'
-        min={0}
+        min={COLORS.black}
-        max={255}
+        max={COLORS.white}
         step={1}
         value={brush.color}
         onChange={(color) => {
@@ -243,7 +243,7 @@ export function MaskCanvas(props: MaskCanvasProps) {
       />
       <NumericField
         label='Brush Size'
-        min={4}
+        min={1}
         max={64}
         step={1}
         value={brush.size}
@@ -282,6 +282,16 @@ export function MaskCanvas(props: MaskCanvasProps) {
         }}>
         Fill with black
       </Button>
+      <Button
+        variant='outlined'
+        startIcon={<FormatColorFill />}
+        onClick={() => {
+          floodCanvas(bufferRef, floodWhite);
+          drawBuffer();
+          save();
+        }}>
+        Fill with white
+      </Button>
       <Button
         variant='outlined'
         startIcon={<Gradient />}
@@ -333,7 +343,11 @@ export function floodAbove(n: number): number {
 }
 
 export function floodBlack(): number {
-  return 0;
+  return COLORS.black;
+}
+
+export function floodWhite(): number {
+  return COLORS.white;
 }
 
 export function grayToRGB(n: number, o = 1.0): string {
@@ -355,7 +369,7 @@ function floodCanvas(ref: RefObject<HTMLCanvasElement>, flood: FloodFn) {
       pixels[i + 1] = final;
       pixels[i + 2] = final;
       // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      pixels[i + 3] = 255;
+      pixels[i + 3] = COLORS.white; // fully opaque
     }
   }
 

gui/src/components/NumericField.tsx

@@ -12,6 +12,7 @@ export function parseNumber(num: string, decimal = false): number {
 
 export interface ImageControlProps {
   decimal?: boolean;
+  disabled?: boolean;
   label: string;
   min: number;
   max: number;
@@ -22,10 +23,12 @@ export interface ImageControlProps {
 }
 
 export function NumericField(props: ImageControlProps) {
-  const { decimal, label, min, max, step, value } = props;
+  const { decimal = false, disabled = false, label, min, max, step, value } = props;
+
   return <Stack spacing={2}>
     <TextField
       label={label}
+      disabled={disabled}
       variant='outlined'
       type='number'
       inputProps={{ min, max, step }}
@@ -37,6 +40,7 @@ export function NumericField(props: ImageControlProps) {
       }}
     />
     <Slider
+      disabled={disabled}
       min={min}
       max={max}
       step={step}

gui/src/components/OutpaintControl.tsx

@@ -1,5 +1,6 @@
 import { mustExist } from '@apextoaster/js-utils';
-import { Stack } from '@mui/material';
+import { Check } from '@mui/icons-material';
+import { Stack, ToggleButton } from '@mui/material';
 import * as React from 'react';
 import { useContext } from 'react';
 import { useStore } from 'zustand';
@@ -21,8 +22,22 @@ export function OutpaintControl(props: OutpaintControlProps) {
   const setOutpaint = useStore(state, (s) => s.setOutpaint);
 
   return <Stack direction='row' spacing={4}>
+    <ToggleButton
+      color='primary'
+      selected={params.enabled}
+      value='check'
+      onChange={(event) => {
+        setOutpaint({
+          enabled: params.enabled === false,
+        });
+      }}
+    >
+      <Check />
+      Outpainting
+    </ToggleButton>
     <NumericField
       label='Left'
+      disabled={params.enabled === false}
       min={0}
       max={config.width.max}
       step={config.width.step}
@@ -35,6 +50,7 @@ export function OutpaintControl(props: OutpaintControlProps) {
     />
     <NumericField
       label='Right'
+      disabled={params.enabled === false}
       min={0}
       max={config.width.max}
       step={config.width.step}
@@ -47,6 +63,7 @@ export function OutpaintControl(props: OutpaintControlProps) {
     />
     <NumericField
       label='Top'
+      disabled={params.enabled === false}
       min={0}
       max={config.height.max}
       step={config.height.step}
@@ -59,6 +76,7 @@ export function OutpaintControl(props: OutpaintControlProps) {
     />
     <NumericField
       label='Bottom'
+      disabled={params.enabled === false}
       min={0}
       max={config.height.max}
       step={config.height.step}

gui/src/state.ts

@@ -184,6 +184,7 @@ export function createStateSlices(base: ConfigParams) {
 
   const createOutpaintSlice: StateCreator<OnnxState, [], [], OutpaintSlice> = (set) => ({
     outpaint: {
+      enabled: false,
       left: 0,
       right: 0,
       top: 0,