feat(gui): make an image card component showing params

gui/src/components/ImageCard.tsx

@@ -0,0 +1,49 @@
+import { Card, CardContent, CardMedia, List, Paper, Stack, Typography } from '@mui/material';
+import * as React from 'react';
+import { UseMutationResult } from 'react-query';
+
+import { ApiResponse } from '../api/client.js';
+
+export interface ImageCardProps {
+  result: UseMutationResult<ApiResponse, unknown, void>;
+}
+
+export function ImageCard(props: ImageCardProps) {
+  const { result } = props;
+
+  if (result.status === 'error') {
+    if (result.error instanceof Error) {
+      return <div>{result.error.message}</div>;
+    } else {
+      return <div>Unknown error generating image.</div>;
+    }
+  }
+
+  if (result.status === 'loading') {
+    return <div>Generating...</div>;
+  }
+
+  if (result.status === 'success') {
+    const { data } = result;
+    const { params, output } = data;
+
+    return <Card sx={{ maxWidth: params.width }}>
+      <CardMedia sx={{ height: params.height }}
+        component='img'
+        image={output}
+        title={params.prompt}
+      />
+      <CardContent>
+        <Typography variant='body2'>
+          <Stack spacing={1}>
+            <Paper>CFG: {params.cfg}</Paper>
+            <Paper>Steps: {params.steps}</Paper>
+            <Paper>Seed: {params.seed}</Paper>
+          </Stack>
+        </Typography>
+      </CardContent>
+    </Card>;
+  }
+
+  return <div>No result. Press Generate.</div>;
+}

gui/src/components/Txt2Img.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { useMutation, useQuery } from 'react-query';
 
 import { ApiClient } from '../api/client.js';
+import { ImageCard } from './ImageCard.js';
 import { ImageControl, ImageParams } from './ImageControl.js';
 import { QueryList } from './QueryList.js';
 
@@ -61,23 +62,6 @@ export function Txt2Img(props: Txt2ImgProps) {
   const [scheduler, setScheduler] = useState('euler-a');
   const [platform, setPlatform] = useState('cpu');
 
-  function renderImage() {
-    switch (generate.status) {
-      case 'error':
-        if (generate.error instanceof Error) {
-          return <div>{generate.error.message}</div>;
-        } else {
-          return <div>Unknown error generating image.</div>;
-        }
-      case 'loading':
-        return <div>Generating...</div>;
-      case 'success':
-        return <img src={generate.data.output} />;
-      default:
-        return <div>No result. Press Generate.</div>;
-    }
-  }
-
   return <Box>
     <Stack spacing={2}>
       <Stack direction='row' spacing={2}>
@@ -99,7 +83,7 @@ export function Txt2Img(props: Txt2ImgProps) {
         setPrompt(event.target.value);
       }} />
       <Button onClick={() => generate.mutate()}>Generate</Button>
-      {renderImage()}
+      <ImageCard result={generate} />
     </Stack>
   </Box>;
 }