fix(gui): only show inpaint image once

gui/src/components/input/ImageInput.tsx

@@ -5,25 +5,21 @@ import * as React from 'react';
 
 export interface ImageInputProps {
   filter: string;
-  hidden?: boolean;
   image?: Maybe<Blob>;
   label: string;
 
+  hideSelection?: boolean;
+
   onChange: (file: File) => void;
-  renderImage?: (image: Maybe<Blob>) => React.ReactNode;
 }
 
 export function ImageInput(props: ImageInputProps) {
   function renderImage() {
-    if (mustDefault(props.hidden, false)) {
+    if (doesExist(props.image)) {
+      if (mustDefault(props.hideSelection, false)) {
         return undefined;
       }
 
-    if (doesExist(props.renderImage)) {
-      return props.renderImage(props.image);
-    }
-
-    if (doesExist(props.image)) {
       return <img
         src={URL.createObjectURL(props.image)}
         style={{
@@ -37,6 +33,7 @@ export function ImageInput(props: ImageInputProps) {
   }
 
   return <Stack direction='row' spacing={2}>
+    <Stack>
       <Button component='label' startIcon={<PhotoCamera />}>
         {props.label}
         <input
@@ -53,6 +50,7 @@ export function ImageInput(props: ImageInputProps) {
           }}
         />
       </Button>
+    </Stack>
     {renderImage()}
   </Stack>;
 }

gui/src/components/input/MaskCanvas.tsx

@@ -38,14 +38,14 @@ export interface Point {
 }
 
 export interface MaskCanvasProps {
-  base?: Maybe<Blob>;
   source?: Maybe<Blob>;
+  mask?: Maybe<Blob>;
 
   onSave: (blob: Blob) => void;
 }
 
 export function MaskCanvas(props: MaskCanvasProps) {
-  const { base, source } = props;
+  const { source, mask } = props;
   const { params } = mustExist(useContext(ConfigContext));
 
   function saveMask(): void {
@@ -140,20 +140,20 @@ export function MaskCanvas(props: MaskCanvasProps) {
   }, [maskState.current]);
 
   useEffect(() => {
-    if (doesExist(bufferRef.current) && doesExist(source)) {
+    if (doesExist(bufferRef.current) && doesExist(mask)) {
-      drawSource(source);
+      drawSource(mask);
     }
-  }, [source]);
+  }, [mask]);
 
   useEffect(() => {
-    if (doesExist(base)) {
+    if (doesExist(source)) {
       if (doesExist(background)) {
         URL.revokeObjectURL(background);
       }
 
-      setBackground(URL.createObjectURL(base));
+      setBackground(URL.createObjectURL(source));
     }
-  }, [base]);
+  }, [source]);
 
   const styles: React.CSSProperties = {
     maxHeight: params.height.default,

gui/src/components/tab/Inpaint.tsx

@@ -75,6 +75,7 @@ export function Inpaint() {
         filter={IMAGE_FILTER}
         image={source}
         label='Source'
+        hideSelection={true}
         onChange={(file) => {
           setInpaint({
             source: file,
@@ -85,23 +86,22 @@ export function Inpaint() {
         filter={IMAGE_FILTER}
         image={mask}
         label='Mask'
+        hideSelection={true}
         onChange={(file) => {
           setInpaint({
             mask: file,
           });
         }}
-        renderImage={(image) =>
+      />
       <MaskCanvas
-            base={source}
+        source={source}
-            source={image}
+        mask={mask}
         onSave={(file) => {
           setInpaint({
             mask: file,
           });
         }}
       />
-        }
-      />
       <ImageControl
         selector={(s) => s.inpaint}
         onChange={(newParams) => {