fix(gui): only enable generate buttons after image sources exist (#64)

gui/src/components/input/MaskCanvas.tsx

@@ -94,6 +94,7 @@ export function MaskCanvas(props: MaskCanvasProps) {
       const { canvas, ctx } = getClearContext(bufferRef);
       ctx.globalAlpha = FULL_OPACITY;
       ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+
       URL.revokeObjectURL(src);
 
       drawBuffer();
@@ -166,6 +167,12 @@ export function MaskCanvas(props: MaskCanvasProps) {
       }
 
       setBackground(URL.createObjectURL(source));
+
+      // initialize the mask if it does not exist
+      if (doesExist(mask) === false) {
+        getClearContext(bufferRef);
+        maskState.current = MASK_STATE.dirty;
+      }
     }
   }, [source]);
 

gui/src/components/tab/Img2Img.tsx

@@ -1,4 +1,4 @@
-import { mustExist } from '@apextoaster/js-utils';
+import { doesExist, mustExist } from '@apextoaster/js-utils';
 import { Box, Button, Stack } from '@mui/material';
 import * as React from 'react';
 import { useMutation, useQueryClient } from 'react-query';
@@ -63,7 +63,11 @@ export function Img2Img() {
         }}
       />
       <UpscaleControl />
-      <Button variant='outlined' onClick={() => upload.mutate()}>Generate</Button>
+      <Button
+        disabled={doesExist(source) === false}
+        variant='outlined'
+        onClick={() => upload.mutate()}
+      >Generate</Button>
     </Stack>
   </Box>;
 }

gui/src/components/tab/Inpaint.tsx

@@ -1,4 +1,4 @@
-import { mustExist } from '@apextoaster/js-utils';
+import { doesExist, mustExist } from '@apextoaster/js-utils';
 import { Box, Button, Stack } from '@mui/material';
 import * as React from 'react';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
@@ -161,7 +161,11 @@ export function Inpaint() {
       </Stack>
       <OutpaintControl />
       <UpscaleControl />
-      <Button variant='outlined' onClick={() => upload.mutate()}>Generate</Button>
+      <Button
+        disabled={doesExist(source) === false || doesExist(mask) === false}
+        variant='outlined'
+        onClick={() => upload.mutate()}
+      >Generate</Button>
     </Stack>
   </Box>;
 }

gui/src/components/tab/Txt2Img.tsx

@@ -65,7 +65,10 @@ export function Txt2Img() {
         />
       </Stack>
       <UpscaleControl />
-      <Button variant='outlined' onClick={() => generate.mutate()}>Generate</Button>
+      <Button
+        variant='outlined'
+        onClick={() => generate.mutate()}
+      >Generate</Button>
     </Stack>
   </Box>;
 }

gui/src/components/tab/Upscale.tsx

@@ -1,4 +1,4 @@
-import { mustExist } from '@apextoaster/js-utils';
+import { doesExist, mustExist } from '@apextoaster/js-utils';
 import { Box, Button, Stack } from '@mui/material';
 import * as React from 'react';
 import { useMutation, useQueryClient } from 'react-query';
@@ -12,8 +12,6 @@ import { UpscaleControl } from '../control/UpscaleControl.js';
 const { useContext } = React;
 
 export function Upscale() {
-  const config = mustExist(useContext(ConfigContext));
-
   async function uploadSource() {
     const { model, upscale } = state.getState();
 
@@ -46,7 +44,11 @@ export function Upscale() {
         });
       }} />
       <UpscaleControl />
-      <Button variant='outlined' onClick={() => upload.mutate()}>Generate</Button>
+      <Button
+        disabled={doesExist(params.source) === false}
+        variant='outlined'
+        onClick={() => upload.mutate()}
+      >Generate</Button>
     </Stack>
   </Box>;
 }