feat(gui): show recent image history

gui/src/components/ImageCard.tsx

@@ -1,47 +1,28 @@
 import { Card, CardContent, CardMedia, Paper, Stack } 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>;
+  value: ApiResponse;
 }
 
 export function ImageCard(props: ImageCardProps) {
-  const { result } = props;
+  const { value } = props;
+  const { params, output } = value;
 
-  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>
-        <Stack spacing={2}>
-          <Paper>CFG: {params.cfg}</Paper>
-          <Paper>Steps: {params.steps}</Paper>
-          <Paper>Seed: {params.seed}</Paper>
-        </Stack>
-      </CardContent>
-    </Card>;
-  }
-
-  return <div>No result. Press Generate.</div>;
+  return <Card sx={{ maxWidth: params.width }}>
+    <CardMedia sx={{ height: params.height }}
+      component='img'
+      image={output}
+      title={params.prompt}
+    />
+    <CardContent>
+      <Stack spacing={2}>
+        <Paper>CFG: {params.cfg}</Paper>
+        <Paper>Steps: {params.steps}</Paper>
+        <Paper>Seed: {params.seed}</Paper>
+      </Stack>
+    </CardContent>
+  </Card>;
 }

gui/src/components/MutationHistory.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import * as React from 'react';
+import { UseMutationResult } from 'react-query';
+import { Grid, Stack } from '@mui/material';
+
+export interface MutationHistoryProps<T> {
+  element: React.ComponentType<{value: T}>;
+  limit: number;
+  result: UseMutationResult<T, unknown, void>;
+
+  isPresent: (list: Array<T>, item: T) => boolean;
+}
+
+export function MutationHistory<T>(props: MutationHistoryProps<T>) {
+  const { limit, result } = props;
+  const { status } = result;
+
+  const [history, setHistory] = useState<Array<T>>([]);
+  const children = [];
+
+  if (status === 'loading') {
+    children.push(<div>Generating...</div>);
+  }
+
+  if (status === 'success') {
+    const { data } = result;
+    if (props.isPresent(history, data)) {
+      // item already exists, skip it
+    } else {
+      setHistory([
+        data,
+        ...history,
+      ].slice(0, limit));
+    }
+  }
+
+  if (history.length > 0) {
+    children.push(...history.map((item) => <props.element value={item} />));
+  } else {
+    // only show the prompt when the button has not been pushed
+    if (status !== 'loading') {
+      children.push(<div>No results. Press Generate.</div>);
+    }
+  }
+
+  return <Grid container spacing={2}>{children.slice(0, limit).map((child) => <Grid xs={6}>{child}</Grid>)}</Grid>;
+}

gui/src/components/Txt2Img.tsx

@@ -5,6 +5,7 @@ import { useMutation, useQuery } from 'react-query';
 import { ApiClient } from '../api/client.js';
 import { ImageCard } from './ImageCard.js';
 import { ImageControl, ImageParams } from './ImageControl.js';
+import { MutationHistory } from './MutationHistory.js';
 import { QueryList } from './QueryList.js';
 
 const { useState } = React;
@@ -83,7 +84,9 @@ export function Txt2Img(props: Txt2ImgProps) {
         setPrompt(event.target.value);
       }} />
       <Button onClick={() => generate.mutate()}>Generate</Button>
-      <ImageCard result={generate} />
+      <MutationHistory result={generate} limit={4} element={ImageCard}
+        isPresent={(list, item) => list.some((other) => item.output === other.output)}
+      />
     </Stack>
   </Box>;
 }