actual displaying

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { API_URL } from "../../../../../../api";
+import { API_URL } from "../../../api";
 
 const url = `${API_URL}/ding.mp3`;
 

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
 /* eslint-disable @typescript-eslint/prefer-ts-expect-error */
 /* eslint-disable @typescript-eslint/naming-convention */
@@ -10,6 +11,8 @@ import {
   useImageFetching
 } from "../../../../../stores/imageFetchingStore";
 
+import { useImageDisplay } from "../../../../../stores/imageDisplayStore";
+
 import { v4 as uuidv4 } from "uuid";
 
 import { useRandomSeed } from "../../../../../utils";
@@ -20,8 +23,9 @@ import {
 
 import { useTranslation } from "react-i18next";
 
-import AudioDing from "./audioDing";
+import AudioDing from "../../../../molecules/audioDing";
 import { parse } from "node:path/win32";
+import { debug } from "node:console";
 
 export default function MakeButton() {
   const { t } = useTranslation();
@@ -36,42 +40,104 @@ export default function MakeButton() {
   const { id, options } = useImageQueue((state) => state.firstInQueue());
 
   const setStatus = useImageFetching((state) => state.setStatus);
+  const setStep = useImageFetching((state) => state.setStep);
+  const setTotalSteps = useImageFetching((state) => state.setTotalSteps);
   const appendData = useImageFetching((state) => state.appendData);
 
+  const updateDisplay = useImageDisplay((state) => state.updateDisplay);
+
+
+  const hackJson = (jsonStr: 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 {
+      debugger;
+      const { status, request, output: outputs } = JSON.parse(jsonStr);
+
+      if (status === 'succeeded') {
+        outputs.forEach((output: any) => {
+
+          const { data, seed } = output;
+
+          const seedReq = {
+            ...request,
+            seed,
+          };
+
+          console.log('UPDATE DISPLAY!');
+          updateDisplay(data, seedReq);
+        });
+      }
+
+      else {
+        console.warn(`Unexpected status: ${status}`);
+      }
+
+    }
+    catch (e) {
+      console.error("Error HACKING JSON: ", e)
+      debugger;
+    }
+  }
+
   const parseRequest = async (reader: ReadableStreamDefaultReader<Uint8Array>) => {
     const decoder = new TextDecoder();
+    let finalJSON = '';
     while (true) {
       const { done, value } = await reader.read();
-
+      const jsonStr = decoder.decode(value);
+      console.log("READ START");
       if (done as boolean) {
         console.log("DONE");
+        // console.log('DONE jsonStr', jsonStr);
+        // debugger;
+        // finalJSON += jsonStr;
         setStatus(FetchingStates.COMPLETE);
+        hackJson(finalJSON)
         break;
       }
 
-      const jsonStr = decoder.decode(value);
-
       try {
         const update = JSON.parse(jsonStr);
 
         if (update.status === "progress") {
           console.log("PROGRESS");
           setStatus(FetchingStates.PROGRESSING);
+          console.log(update);
         }
         else if (update.status === "succeeded") {
           console.log("succeeded");
           setStatus(FetchingStates.SUCCEEDED);
+          console.log(update);
           // appendData(update.data);
         }
         else {
           console.log("extra?", update);
           // appendData(update.data);
         }
+
+        console.log('------------------');
       }
       catch (e) {
         console.log('PARSE ERRROR')
-        console.log(e)
+        // console.log(e)
-        debugger;
+        console.log(jsonStr);
+        finalJSON += jsonStr;
         //    appendData(update.data);
       }
 
@@ -93,6 +159,7 @@ export default function MakeButton() {
       void parseRequest(reader);
 
     } catch (e) {
+      console.log('TOP LINE ERROR')
       console.log('e');
     }
 

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable multiline-ternary */
 /* eslint-disable @typescript-eslint/naming-convention */
 import React from "react";
@@ -17,6 +18,10 @@ export default function CurrentDisplay({
 }: CurrentDisplayProps) {
   const { info, data } = image ?? {};
 
+  console.log("CurrentDisplay");
+  console.log('info', info);
+  console.log('data', data);
+
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 
   const createFileName = () => {
@@ -29,7 +34,7 @@ export default function CurrentDisplay({
       use_upscale,
       width,
       height,
-    } = info!;
+    } = info;
 
     // Most important information is the prompt
     let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_");

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

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 import React, { useEffect, useState, useRef } from "react";
-import { useImageQueue } from "../../../stores/imageQueueStore";
+// import { useImageQueue } from "../../../stores/imageQueueStore";
 
-import { useImageFetching } from "../../../stores/imageFetchingStore";
+// import { useImageFetching } from "../../../stores/imageFetchingStore";
+// import { useImageDisplay } from "../../../stores/imageDisplayStore";
 import { useImageDisplay } from "../../../stores/imageDisplayStore";
 
 // import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore";
@@ -28,8 +29,8 @@ import CompletedImages from "./completedImages";
 
 import {
   displayPanel,
-  // displayContainer,
+  displayContainer,
-  // previousImages,
+  previousImages,
   // @ts-expect-error
 } from "./displayPanel.css.ts";
 
@@ -49,9 +50,7 @@ export default function DisplayPanel() {
   // const { id, options } = useImageQueue((state) => state.firstInQueue());
   // const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue);
 
-  // const [currentImage, setCurrentImage] = useState<CompletedImagesType | null>(
+
-  //   null
-  // );
 
   // const [isEnabled, setIsEnabled] = useState(false);
 
@@ -225,23 +224,54 @@ export default function DisplayPanel() {
   //   clearCachedIds();
   // };
 
+  const [currentImage, setCurrentImage] = useState<CompletedImagesType | null>(
+    null
+  );
+
+  const len = useImageDisplay((state) => state.len);
+  const getCurrentImage = useImageDisplay((state) => state.getCurrentImage);
+  const images = useImageDisplay((state) => state.images);
+
+  useEffect(() => {
+    if (len > 0) {
+      debugger;
+      const cur = getCurrentImage();
+      console.log("cur", cur);
+      setCurrentImage(cur);
+    } else {
+      setCurrentImage(null);
+    }
+  }, [len, getCurrentImage]);
+
+  //   useEffect(() => {
+  //     console.log("images CHANGED");
+  //     debugger;
+  //     if (len) > 0) {
+  //     // console.log("images", images);
+  //     setCurrentImage(getCurrentImage());
+  //   }
+  // }, [len]);
+
+
   return (
     <div className={displayPanel}>
       DISPLAY
-      {/* <AudioDing ref={dingRef}></AudioDing>
+      {/* <AudioDing ref={dingRef}></AudioDing> */}
       <div className={displayContainer}>
         <CurrentDisplay
-          isLoading={isLoading}
+          isLoading={false}
           image={currentImage}
         ></CurrentDisplay>
       </div>
-      <div className={previousImages}>
+
+      {/* <div className={previousImages}>
         <CompletedImages
           removeImages={removeImages}
           images={completedImages}
           setCurrentDisplay={setCurrentImage}
         ></CompletedImages>
       </div> */}
+
     </div>
   );
 }

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

@@ -1,22 +1,40 @@
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
 import create from "zustand";
 import produce from "immer";
 
 interface ImageDisplayState {
-  imageOptions: Map<string, any>;
+  // imageOptions: Map<string, any>;
-  currentImage: object | null;
+  images: object[]
-  addNewImage: (ImageData: string, imageOptions: any) => void;
+  // SORT OF A HACK SOLUTION
+  len: number,
+  // currentImage: object | null;
+  updateDisplay: (ImageData: string, imageOptions: any) => void;
+  getCurrentImage: () => {};
 }
 
-export const useImageDisplay = create<ImageDisplayState>((set) => ({
+export const useImageDisplay = create<ImageDisplayState>((set, get) => ({
-  imageOptions: new Map<string, any>(),
+  // imageOptions: new Map<string, any>(),
-  currentImage: null,
+  images: [],
+  len: 0,
+  // currentImage: null,
   // use produce to make sure we don't mutate state
-  addNewImage: (ImageData: string, imageOptions: any) => {
+  // imageOptions: any
+  updateDisplay: (ImageData: string, imageOptions) => {
     set(
       produce((state) => {
-        state.currentImage = { display: ImageData, options: imageOptions };
+        // options: imageOptions
-        state.images.set(ImageData, imageOptions);
+        // state.currentImage = { display: ImageData, imageOptions };
+        // imageOptions
+        state.images.push({ data: ImageData, info: imageOptions });
+        state.len += 1;
+        debugger
       })
     );
   },
+  getCurrentImage: () => {
+    debugger;
+    return get().images[0];
+  }
+
+
 }));