update image card for multiple outputs

gui/src/client.ts

@@ -145,7 +145,7 @@ export interface BlendParams {
  * General response for most image requests.
  */
 export interface ImageResponse {
-  output: Array<{
+  outputs: Array<{
     key: string;
     url: string;
   }>;
@@ -258,7 +258,7 @@ export const FIXED_FLOAT = 2;
 export const STATUS_SUCCESS = 200;
 
 export function equalResponse(a: ImageResponse, b: ImageResponse): boolean {
-  return a.output === b.output;
+  return a.outputs === b.outputs;
 }
 
 /**
@@ -546,12 +546,12 @@ export function makeClient(root: string, f = fetch): ApiClient {
  * that into a full URL, since it already knows the root URL of the server.
  */
 export async function parseApiResponse(root: string, res: Response): Promise<ImageResponse> {
-  type LimitedResponse = Omit<ImageResponse, 'output'> & { output: Array<string> };
+  type LimitedResponse = Omit<ImageResponse, 'outputs'> & { outputs: Array<string> };
 
   if (res.status === STATUS_SUCCESS) {
     const data = await res.json() as LimitedResponse;
 
-    const images = data.output.map((output) => {
+    const outputs = data.outputs.map((output) => {
       const url = new URL(joinPath('output', output), root).toString();
       return {
         key: output,
@@ -561,7 +561,7 @@ export async function parseApiResponse(root: string, res: Response): Promise<Ima
 
     return {
       ...data,
-      output: images,
+      outputs,
     };
   } else {
     throw new Error('request error');

gui/src/components/ImageCard.tsx

@@ -25,7 +25,7 @@ export function GridItem(props: { xs: number; children: React.ReactNode }) {
 
 export function ImageCard(props: ImageCardProps) {
   const { value } = props;
-  const { params, output, size } = value;
+  const { params, outputs, size } = value;
 
   const [_hash, setHash] = useHash();
   const [anchor, setAnchor] = useState<Maybe<HTMLElement>>();
@@ -42,7 +42,7 @@ export function ImageCard(props: ImageCardProps) {
   const setBlend = useStore(state, (s) => s.setBlend);
 
   async function loadSource() {
-    const req = await fetch(output[0].url);
+    const req = await fetch(outputs[index].url);
     return req.blob();
   }
 
@@ -88,7 +88,7 @@ export function ImageCard(props: ImageCardProps) {
   }
 
   function downloadImage() {
-    window.open(output[0].url, '_blank');
+    window.open(outputs[index].url, '_blank');
   }
 
   function close() {
@@ -103,7 +103,7 @@ export function ImageCard(props: ImageCardProps) {
   return <Card sx={{ maxWidth: config.params.width.default }} elevation={2}>
     <CardMedia sx={{ height: config.params.height.default }}
       component='img'
-      image={output[index].url}
+      image={outputs[index].url}
       title={params.prompt}
     />
     <CardContent>
@@ -114,7 +114,7 @@ export function ImageCard(props: ImageCardProps) {
               <IconButton onClick={() => {
                 const prevIndex = index - 1;
                 if (prevIndex < 0) {
-                  setIndex(output.length + prevIndex);
+                  setIndex(outputs.length + prevIndex);
                 } else {
                   setIndex(prevIndex);
                 }
@@ -124,12 +124,12 @@ export function ImageCard(props: ImageCardProps) {
             </Tooltip>
           </GridItem>
           <GridItem xs={4}>
-            {visibleIndex(index)} of {output.length}
+            {visibleIndex(index)} of {outputs.length}
           </GridItem>
           <GridItem xs={4}>
             <Tooltip title='Next'>
               <IconButton onClick={() => {
-                setIndex((index + 1) % output.length);
+                setIndex((index + 1) % outputs.length);
               }}>
                 <ArrowRight />
               </IconButton>

gui/src/components/ImageHistory.tsx

@@ -18,11 +18,11 @@ export function ImageHistory() {
   const children = [];
 
   if (loading.length > 0) {
-    children.push(...loading.map((item) => <LoadingCard key={`loading-${item.image.output[0].key}`} index={0} loading={item.image} />));
+    children.push(...loading.map((item) => <LoadingCard key={`loading-${item.image.outputs[0].key}`} index={0} loading={item.image} />));
   }
 
   if (history.length > 0) {
-    children.push(...history.map((item) => <ImageCard key={`history-${item.output[0].key}`} value={item} onDelete={removeHistory} />));
+    children.push(...history.map((item) => <ImageCard key={`history-${item.outputs[0].key}`} value={item} onDelete={removeHistory} />));
   } else {
     if (doesExist(loading) === false) {
       children.push(<Typography>No results. Press Generate.</Typography>);

gui/src/components/LoadingCard.tsx

@@ -33,8 +33,8 @@ export function LoadingCard(props: LoadingCardProps) {
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const setReady = useStore(state, (s) => s.setReady);
 
-  const cancel = useMutation(() => client.cancel(loading.output[index].key));
+  const cancel = useMutation(() => client.cancel(loading.outputs[index].key));
-  const ready = useQuery(`ready-${loading.output[index].key}`, () => client.ready(loading.output[index].key), {
+  const ready = useQuery(`ready-${loading.outputs[index].key}`, () => client.ready(loading.outputs[index].key), {
     // data will always be ready without this, even if the API says its not
     cacheTime: 0,
     refetchInterval: POLL_TIME,

gui/src/state.ts

@@ -164,7 +164,7 @@ export const STATE_KEY = 'onnx-web';
 /**
  * Current state version for zustand persistence.
  */
-export const STATE_VERSION = 5;
+export const STATE_VERSION = 6;
 
 export const BLEND_SOURCES = 2;
 
@@ -311,7 +311,7 @@ export function createStateSlices(server: ServerParams) {
     clearLoading(image) {
       set((prev) => ({
         ...prev,
-        loading: prev.loading.filter((it) => it.image.output[0].key !== image.output[0].key),
+        loading: prev.loading.filter((it) => it.image.outputs[0].key !== image.outputs[0].key),
       }));
     },
     pushHistory(image) {
@@ -321,7 +321,7 @@ export function createStateSlices(server: ServerParams) {
           image,
           ...prev.history,
         ].slice(0, prev.limit + DEFAULT_HISTORY.scrollback),
-        loading: prev.loading.filter((it) => it.image.output[0].key !== image.output[0].key),
+        loading: prev.loading.filter((it) => it.image.outputs[0].key !== image.outputs[0].key),
       }));
     },
     pushLoading(image) {
@@ -342,7 +342,7 @@ export function createStateSlices(server: ServerParams) {
     removeHistory(image) {
       set((prev) => ({
         ...prev,
-        history: prev.history.filter((it) => it.output !== image.output),
+        history: prev.history.filter((it) => it.outputs !== image.outputs),
       }));
     },
     setLimit(limit) {
@@ -354,7 +354,7 @@ export function createStateSlices(server: ServerParams) {
     setReady(image, ready) {
       set((prev) => {
         const loading = [...prev.loading];
-        const idx = loading.findIndex((it) => it.image.output[0].key === image.output[0].key);
+        const idx = loading.findIndex((it) => it.image.outputs[0].key === image.outputs[0].key);
         if (idx >= 0) {
           loading[idx].ready = ready;
         } else {