feat(gui): add copy to source buttons to image card

gui/src/api/client.ts

@@ -27,7 +27,7 @@ export interface BaseImgParams {
 }
 
 export interface Img2ImgParams extends BaseImgParams {
-  source: File;
+  source: Blob;
   strength: number;
 }
 
@@ -42,7 +42,7 @@ export type Txt2ImgResponse = Required<Txt2ImgParams>;
 
 export interface InpaintParams extends BaseImgParams {
   mask: Blob;
-  source: File;
+  source: Blob;
 }
 
 export interface OutpaintParams extends Img2ImgParams {

gui/src/components/ImageCard.tsx

@@ -1,9 +1,12 @@
-import { doesExist } from '@apextoaster/js-utils';
-import { Delete, Download } from '@mui/icons-material';
+import { doesExist, mustExist } from '@apextoaster/js-utils';
+import { ContentCopy, ContentCopyTwoTone, Delete, Download } from '@mui/icons-material';
 import { Box, Button, Card, CardContent, CardMedia, Grid, Paper } from '@mui/material';
 import * as React from 'react';
+import { useContext } from 'react';
+import { useStore } from 'zustand';
 
 import { ApiResponse } from '../api/client.js';
+import { StateContext } from '../state.js';
 
 export interface ImageCardProps {
   value: ApiResponse;
@@ -21,6 +24,31 @@ export function ImageCard(props: ImageCardProps) {
   const { value } = props;
   const { params, output } = value;
 
+  const state = mustExist(useContext(StateContext));
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const setImg2Img = useStore(state, (s) => s.setImg2Img);
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const setInpaint = useStore(state, (s) => s.setInpaint);
+
+  async function loadSource() {
+    const req = await fetch(output.url);
+    return req.blob();
+  }
+
+  async function copySourceToImg2Img() {
+    const blob = await loadSource();
+    setImg2Img({
+      source: blob,
+    });
+  }
+
+  async function copySourceToInpaint() {
+    const blob = await loadSource();
+    setInpaint({
+      source: blob,
+    });
+  }
+
   function deleteImage() {
     if (doesExist(props.onDelete)) {
       props.onDelete(value);
@@ -56,6 +84,16 @@ export function ImageCard(props: ImageCardProps) {
               <Delete />
             </Button>
           </GridItem>
+          <GridItem xs={2}>
+            <Button onClick={copySourceToImg2Img}>
+              <ContentCopy />
+            </Button>
+          </GridItem>
+          <GridItem xs={2}>
+            <Button onClick={copySourceToInpaint}>
+              <ContentCopyTwoTone />
+            </Button>
+          </GridItem>
         </Grid>
       </Box>
     </CardContent>

gui/src/components/Inpaint.tsx

@@ -10,7 +10,7 @@ import { ImageControl } from './ImageControl.js';
 import { ImageInput } from './ImageInput.js';
 import { MaskCanvas } from './MaskCanvas.js';
 
-const { useContext, useEffect } = React;
+const { useContext } = React;
 
 export interface InpaintProps {
   config: ConfigParams;