fix up types, and display id

ui/frontend/build_src/src/api/index.ts

@@ -2,7 +2,7 @@
  * basic server health
  */
 
-import type { ImageRequest } from "../stores/imageCreateStore";
+import type { SAMPLER_OPTIONS } from "../stores/imageCreateStore";
 
 // when we are on dev we want to specifiy 9000 as the port for the backend
 // when we are on prod we want be realtive to the current url
@@ -57,6 +57,62 @@ export const toggleBetaConfig = async (branch: string) => {
  * post a new request for an image
  */
 // TODO; put hese some place better
+export interface ImageRequest {
+  session_id: string;
+  prompt: string;
+  seed: number;
+  num_outputs: number;
+  num_inference_steps: number;
+  guidance_scale: number;
+  width:
+  | 128
+  | 192
+  | 256
+  | 320
+  | 384
+  | 448
+  | 512
+  | 576
+  | 640
+  | 704
+  | 768
+  | 832
+  | 896
+  | 960
+  | 1024;
+  height:
+  | 128
+  | 192
+  | 256
+  | 320
+  | 384
+  | 448
+  | 512
+  | 576
+  | 640
+  | 704
+  | 768
+  | 832
+  | 896
+  | 960
+  | 1024;
+  // allow_nsfw: boolean
+  turbo: boolean;
+  use_cpu: boolean;
+  use_full_precision: boolean;
+  save_to_disk_path: null | string;
+  use_face_correction: null | "GFPGANv1.3";
+  use_upscale: null | "RealESRGAN_x4plus" | "RealESRGAN_x4plus_anime_6B" | "";
+  show_only_filtered_image: boolean;
+  init_image: undefined | string;
+  prompt_strength: undefined | number;
+  mask: undefined | string;
+  sampler: typeof SAMPLER_OPTIONS[number];
+  stream_progress_updates: true;
+  stream_image_progress: boolean;
+
+}
+
 export interface ImageOutput {
   data: string;
   path_abs: string | null;
@@ -65,9 +121,8 @@ export interface ImageOutput {
 
 export interface ImageReturnType {
   output: ImageOutput[];
-  request: {};
+  request: ImageRequest;
   status: string;
-  session_id: string;
 }
 
 export const MakeImageKey = "MakeImage";

ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ImageRequest } from "../../../stores/imageCreateStore";
+import { ImageRequest } from "../../../api";
 
 import {
   generatedImageMain,

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import React, { useEffect, useRef } from "react";
 
-import { useImageCreate, ImageRequest } from "../../../../../stores/imageCreateStore";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
 import { useImageQueue } from "../../../../../stores/imageQueueStore";
 import {
   FetchingStates,
@@ -13,7 +13,12 @@ import { useImageDisplay } from "../../../../../stores/imageDisplayStore";
 import { v4 as uuidv4 } from "uuid";
 
 import { useRandomSeed } from "../../../../../utils";
-import { doMakeImage } from "../../../../../api";
+import {
+  ImageRequest,
+  ImageReturnType,
+  ImageOutput,
+  doMakeImage,
+} from "../../../../../api";
 import {
   MakeButtonStyle,
 } from "./makeButton.css";
@@ -22,6 +27,8 @@ import { useTranslation } from "react-i18next";
 
 import AudioDing from "../../../../molecules/audioDing";
 
+const idDelim = "_batch";
+
 export default function MakeButton() {
   const { t } = useTranslation();
 
@@ -49,45 +56,24 @@ export default function MakeButton() {
 
   const updateDisplay = useImageDisplay((state) => state.updateDisplay);
 
-  const hackJson = (jsonStr: string) => {
+  const hackJson = (jsonStr: string, id: string) => {
 
     // DONES't seem to be needed for the updated progress implementation
 
-    // if (jsonStr !== undefined && jsonStr.indexOf('}{') !== -1) {
-    //   // hack for a middleman buffering all the streaming updates, and unleashing them
-    //   //  on the poor browser in one shot.
-    //   //  this results in having to parse JSON like {"step": 1}{"step": 2}...{"status": "succeeded"..}
-    //   //  which is obviously invalid.
-    //   // So we need to just extract the last {} section, starting from "status" to the end of the response
-
-    //   const lastChunkIdx = jsonStr.lastIndexOf('}{')
-    //   if (lastChunkIdx !== -1) {
-    //     const remaining = jsonStr.substring(lastChunkIdx)
-    //     jsonStr = remaining.substring(1)
-    //   }
-    // }
-
     try {
 
-      // todo - used zod or something to validate this
+      const parsed = JSON.parse(jsonStr);
-      interface jsonResponseType {
+      const { status, request, output: outputs } = parsed as ImageReturnType;
-        status: string;
-        request: ImageRequest;
-        output: []
-      }
-      const { status, request, output: outputs }: jsonResponseType = JSON.parse(jsonStr);
-
       if (status === 'succeeded') {
-        outputs.forEach((output: any) => {
+        outputs.forEach((output: any, index: number) => {
-
-          const { data, seed } = output;
 
+          const { data, seed } = output as ImageOutput;
           const seedReq = {
             ...request,
             seed,
           };
-
+          const batchId = `${id}${idDelim}-${seed}-${index}`;
-          updateDisplay(data, seedReq);
+          updateDisplay(batchId, data, seedReq);
         });
       }
 
@@ -112,7 +98,7 @@ export default function MakeButton() {
       if (done) {
         removeFirstInQueue();
         setStatus(FetchingStates.COMPLETE);
-        hackJson(finalJSON);
+        hackJson(finalJSON, id);
         void dingRef.current?.play();
         break;
       }

ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx

@@ -26,6 +26,26 @@ export default function CompletedImages(
     clearDisplay();
   };
 
+  // const idDelim = "_batch";
+  //   if (completedQueries.length > 0) {
+  //     // map the completedImagesto a new array
+  //     // and then set the state
+  //     const temp = completedQueries
+  //       .map((query, index) => {
+  //         if (void 0 !== query) {
+  //           return query.output.map((data: ImageOutput, index: number) => {
+  //             return {
+  //               id: `${completedIds[index]}${idDelim}-${data.seed}-${index}`,
+  //               data: data.data,
+  //               info: { ...query.request, seed: data.seed },
+  //             };
+  //           });
+  //         }
+  //       })
+  //       .flat()
+  //       .reverse()
+  //       .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items
+
   return (
     <div className={completedImagesMain}>
       {/* Adjust the dom do we dont do this check twice */}

ui/frontend/build_src/src/stores/imageCreateStore.ts

@@ -5,6 +5,9 @@ import { devtools } from "zustand/middleware";
 
 import { useRandomSeed } from "../utils";
 
+import { ImageRequest } from "../api";
+
+
 export interface ImageCreationUiOptions {
   isUseRandomSeed: boolean;
   isUseAutoSave: boolean;
@@ -22,62 +25,6 @@ export const SAMPLER_OPTIONS = [
   'lms',
 ] as const;
 
-export interface ImageRequest {
-  session_id: string;
-  prompt: string;
-  seed: number;
-  num_outputs: number;
-  num_inference_steps: number;
-  guidance_scale: number;
-  width:
-  | 128
-  | 192
-  | 256
-  | 320
-  | 384
-  | 448
-  | 512
-  | 576
-  | 640
-  | 704
-  | 768
-  | 832
-  | 896
-  | 960
-  | 1024;
-  height:
-  | 128
-  | 192
-  | 256
-  | 320
-  | 384
-  | 448
-  | 512
-  | 576
-  | 640
-  | 704
-  | 768
-  | 832
-  | 896
-  | 960
-  | 1024;
-  // allow_nsfw: boolean
-  turbo: boolean;
-  use_cpu: boolean;
-  use_full_precision: boolean;
-  save_to_disk_path: null | string;
-  use_face_correction: null | "GFPGANv1.3";
-  use_upscale: null | "RealESRGAN_x4plus" | "RealESRGAN_x4plus_anime_6B" | "";
-  show_only_filtered_image: boolean;
-  init_image: undefined | string;
-  prompt_strength: undefined | number;
-  mask: undefined | string;
-  sampler: typeof SAMPLER_OPTIONS[number];
-  stream_progress_updates: true;
-  stream_image_progress: boolean;
-
-}
-
 export interface ModifierPreview {
   name: string;
   path: string;

ui/frontend/build_src/src/stores/imageDisplayStore.ts

@@ -1,7 +1,7 @@
 import create from "zustand";
 import produce from "immer";
 
-import { ImageRequest } from "./imageCreateStore";
+import { ImageRequest } from "../api";
 
 export interface CompletedImagesType {
   id?: string;
@@ -13,7 +13,7 @@ interface ImageDisplayState {
   // imageOptions: Map<string, any>;
   images: CompletedImagesType[]
   currentImage: CompletedImagesType | null
-  updateDisplay: (ImageData: string, imageOptions: any) => void;
+  updateDisplay: (id: string, ImageData: string, imageOptions: any) => void;
   setCurrentImage: (image: CompletedImagesType) => void;
   clearDisplay: () => void;
 
@@ -26,13 +26,13 @@ export const useImageDisplay = create<ImageDisplayState>((set, get) => ({
   currentImage: null,
   // use produce to make sure we don't mutate state
   // imageOptions: any
-  updateDisplay: (ImageData: string, imageOptions) => {
+  updateDisplay: (id: string, ImageData: string, imageOptions) => {
     set(
       produce((state) => {
         // options: imageOptions
-        // state.currentImage = { display: ImageData, imageOptions };
+        state.currentImage = { id, display: ImageData, info: imageOptions };
-        // imageOptions
+        // // imageOptions
-        state.images.unshift({ data: ImageData, info: imageOptions });
+        state.images.unshift({ id, data: ImageData, info: imageOptions });
         state.currentImage = state.images[0];
       })
     );

ui/frontend/build_src/src/stores/imageQueueStore.ts

@@ -2,7 +2,7 @@ import create from "zustand";
 import produce from "immer";
 import { useRandomSeed } from "../utils";
 
-import { ImageRequest } from "./imageCreateStore";
+import { ImageRequest } from "../api";
 
 interface QueueItem {
   id?: string;