history displaying

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

@@ -24,8 +24,6 @@ import {
 import { useTranslation } from "react-i18next";
 
 import AudioDing from "../../../../molecules/audioDing";
-import { parse } from "node:path/win32";
-import { debug } from "node:console";
 
 export default function MakeButton() {
   const { t } = useTranslation();
@@ -37,8 +35,10 @@ export default function MakeButton() {
 
   const addNewImage = useImageQueue((state) => state.addNewImage);
   const hasQueue = useImageQueue((state) => state.hasQueuedImages());
+  const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue);
   const { id, options } = useImageQueue((state) => state.firstInQueue());
 
+  const status = useImageFetching((state) => state.status);
   const setStatus = useImageFetching((state) => state.setStatus);
   const setStep = useImageFetching((state) => state.setStep);
   const setTotalSteps = useImageFetching((state) => state.setTotalSteps);
@@ -66,7 +66,6 @@ export default function MakeButton() {
     // }
 
     try {
-      debugger;
       const { status, request, output: outputs } = JSON.parse(jsonStr);
 
       if (status === 'succeeded') {
@@ -91,7 +90,7 @@ export default function MakeButton() {
     }
     catch (e) {
       console.error("Error HACKING JSON: ", e)
-      debugger;
+      // debugger;
     }
   }
 
@@ -105,7 +104,6 @@ export default function MakeButton() {
     // UPDATE THE DISPLAY WITH THE PROGRESS IMAGE
     // UPDATE THE DISPLAY WITH THE FINAL IMAGE
 
-
     while (true) {
       const { done, value } = await reader.read();
       const jsonStr = decoder.decode(value);
@@ -120,17 +118,21 @@ export default function MakeButton() {
         const { status } = update;
         if (status === "progress") {
           setStatus(FetchingStates.PROGRESSING);
-          const { progress: { step, totalSteps, output: outputs } } = update;
+          const { progress: { step, total_steps }, output: outputs } = update;
           setStep(step);
-          setTotalSteps(totalSteps);
+          setTotalSteps(total_steps);
+
+          console.log('progess step of total', step, total_steps);
 
           if (void 0 !== outputs) {
             outputs.forEach((output: any) => {
+              // console.log('progress path', output.path);
               addProgressImage(output.path);
             });
           }
+
         } else if (status === "succeeded") {
-          // TODO this shoul be the the new out instead of the try catch
+          // TODO this should be the the new out instead of the try catch
           // wait for the path to come back instead of the data
           setStatus(FetchingStates.SUCCEEDED);
           console.log(update);
@@ -226,7 +228,6 @@ export default function MakeButton() {
   useEffect(() => {
     const makeImages = async (options: ImageRequest) => {
       // potentially update the seed
-      debugger;
       await startStream(id, options);
     }
 
@@ -240,6 +241,15 @@ export default function MakeButton() {
 
   }, [hasQueue, id, options, startStream]);
 
+  useEffect(() => {
+    // if the status is complete we can remove the image from the queue
+    if (status === FetchingStates.COMPLETE) {
+      // debugger;
+      removeFirstInQueue();
+    }
+  }, [removeFirstInQueue, status]);
+
+
   return (
     <button
       className={MakeButtonStyle}

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

@@ -1,6 +1,9 @@
 import React from "react";
 
-import { CompletedImagesType } from "../index";
+import { CompletedImagesType } from "../currentDisplay";
+
+
+import { useImageDisplay } from "../../../../stores/imageDisplayStore";
 
 import {
   completedImagesMain,
@@ -10,20 +13,41 @@ import {
   // @ts-expect-error
 } from "./completedImages.css.ts";
 
-interface CurrentDisplayProps {
-  images: CompletedImagesType[] | null;
-  setCurrentDisplay: (image: CompletedImagesType) => void;
-  removeImages: () => void;
-}
+// interface CurrentDisplayProps {
+//   images: CompletedImagesType[] | null;
+//   setCurrentDisplay: (image: CompletedImagesType) => void;
+//   removeImages: () => void;
+// }
 
-export default function CompletedImages({
-  images,
-  setCurrentDisplay,
-  removeImages,
-}: CurrentDisplayProps) {
-  const _handleSetCurrentDisplay = (index: number) => {
-    const image = images![index];
-    setCurrentDisplay(image);
+export default function CompletedImages(
+  //   {
+  //   images,
+  //   setCurrentDisplay,
+  //   removeImages,
+  // }: CurrentDisplayProps
+
+) {
+
+
+  const images = useImageDisplay((state) => state.images);
+
+  // useEffect(() => {
+  //   if (images.length > 0) {
+  //     console.log("cur", images[0]);
+  //     setCurrentImage(images[0]);
+  //   } else {
+  //     setCurrentImage(null);
+  //   }
+  // }, [images]);
+
+
+
+  // const _handleSetCurrentDisplay = (index: number) => {
+  //   const image = images![index];
+  //   setCurrentDisplay(image);
+  // };
+
+  const removeImages = () => {
   };
 
   return (
@@ -50,9 +74,9 @@ export default function CompletedImages({
             <li key={image.id}>
               <button
                 className={imageContain}
-                onClick={() => {
-                  _handleSetCurrentDisplay(index);
-                }}
+              // onClick={() => {
+              //   _handleSetCurrentDisplay(index);
+              // }}
               >
                 <img src={image.data} alt={image.info.prompt} />
               </button>

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

@@ -1,28 +1,54 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable multiline-ternary */
 /* eslint-disable @typescript-eslint/naming-convention */
-import React from "react";
+import React, { useEffect, useState } from "react";
 import GeneratedImage from "../../../molecules/generatedImage";
-import { useImageCreate } from "../../../../stores/imageCreateStore";
+import { ImageRequest, useImageCreate } from "../../../../stores/imageCreateStore";
+import { FetchingStates, useImageFetching } from "../../../../stores/imageFetchingStore";
+import { useImageDisplay } from "../../../../stores/imageDisplayStore";
 
-import { CompletedImagesType } from "../index";
 
-interface CurrentDisplayProps {
-  isLoading: boolean;
-  image: CompletedImagesType | null;
+export interface CompletedImagesType {
+  id?: string;
+  data: string | undefined;
+  info: ImageRequest | undefined;
 }
 
-export default function CurrentDisplay({
-  isLoading,
-  image,
-}: CurrentDisplayProps) {
-  const { info, data } = image ?? {};
+const IdleDisplay = () => {
+  return (
+    <h4 className="no-image">Try Making a new image!</h4>
+  );
+};
 
-  console.log("CurrentDisplay");
-  console.log('info', info);
-  console.log('data', data);
+const LoadingDisplay = () => {
 
-  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+  const step = useImageFetching((state) => state.step);
+  const totalSteps = useImageFetching((state) => state.totalSteps);
+  const progressImages = useImageFetching((state) => state.progressImages);
+
+  const [percent, setPercent] = useState(0);
+
+  console.log("progressImages", progressImages);
+
+
+
+  useEffect(() => {
+    if (totalSteps > 0) {
+      setPercent(Math.round((step / totalSteps) * 100));
+    } else {
+      setPercent(0);
+    }
+  }, [step, totalSteps]);
+
+  return (
+    <>
+      <h4 className="loading">Loading...</h4>
+      <p>{percent} % Complete </p>
+    </>
+  );
+};
+
+const ImageDisplay = ({ info, data }: CompletedImagesType) => {
 
   const createFileName = () => {
     const {
@@ -56,6 +82,10 @@ export default function CurrentDisplay({
     return fileName;
   };
 
+
+
+  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
   const _handleSave = () => {
     const link = document.createElement("a");
     link.download = createFileName();
@@ -67,23 +97,48 @@ export default function CurrentDisplay({
     setRequestOption("init_image", data);
   };
 
+
+
   return (
-    <div className="current-display">
-      {isLoading ? (
-        <h4 className="loading">Loading...</h4>
-      ) : (
-        (image !== null && (
-          // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-          <div>
-            <p> {info?.prompt}</p>
-            <GeneratedImage imageData={data} metadata={info}></GeneratedImage>
-            <div>
-              <button onClick={_handleSave}>Save</button>
-              <button onClick={_handleUseAsInput}>Use as Input</button>
-            </div>
-          </div>
-        )) || <h4 className="no-image">Try Making a new image!</h4>
-      )}
+    <div className="imageDisplay">
+      <p> {info?.prompt}</p>
+      <GeneratedImage imageData={data} metadata={info}></GeneratedImage>
+      <div>
+        <button onClick={_handleSave}>Save</button>
+        <button onClick={_handleUseAsInput}>Use as Input</button>
+      </div>
     </div>
   );
-}
+};
+
+export default function CurrentDisplay() {
+
+  const status = useImageFetching((state) => state.status);
+
+  const [currentImage, setCurrentImage] = useState<CompletedImagesType | null>(
+    null
+  );
+  // const testCur = useImageDisplay((state) => state.getCurrentImage());
+  const images = useImageDisplay((state) => state.images);
+
+  useEffect(() => {
+    if (images.length > 0) {
+      console.log("cur", images[0]);
+      setCurrentImage(images[0]);
+    } else {
+      setCurrentImage(null);
+    }
+  }, [images]);
+
+  return (
+    <div className="current-display">
+
+      {status === FetchingStates.IDLE && <IdleDisplay />}
+
+      {(status === FetchingStates.FETCHING || status === FetchingStates.PROGRESSING) && <LoadingDisplay />}
+
+      {(status === FetchingStates.COMPLETE && currentImage != null) && <ImageDisplay info={currentImage?.info} data={currentImage?.data} />}
+
+    </div>
+  );
+}

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

@@ -224,23 +224,23 @@ export default function DisplayPanel() {
   //   clearCachedIds();
   // };
 
-  const [currentImage, setCurrentImage] = useState<CompletedImagesType | null>(
-    null
-  );
+  // const [currentImage, setCurrentImage] = useState<CompletedImagesType | null>(
+  //   null
+  // );
 
-  const getCurrentImage = useImageDisplay((state) => state.getCurrentImage);
-  const images = useImageDisplay((state) => state.images);
+  // const getCurrentImage = useImageDisplay((state) => state.getCurrentImage);
+  // const images = useImageDisplay((state) => state.images);
 
-  useEffect(() => {
-    if (images.length > 0) {
-      debugger;
-      const cur = getCurrentImage();
-      console.log("cur", cur);
-      setCurrentImage(cur);
-    } else {
-      setCurrentImage(null);
-    }
-  }, [images, getCurrentImage]);
+  // useEffect(() => {
+  //   if (images.length > 0) {
+  //     debugger;
+  //     const cur = getCurrentImage();
+  //     console.log("cur", cur);
+  //     setCurrentImage(cur);
+  //   } else {
+  //     setCurrentImage(null);
+  //   }
+  // }, [images, getCurrentImage]);
 
   //   useEffect(() => {
   //     console.log("images CHANGED");
@@ -258,18 +258,16 @@ export default function DisplayPanel() {
       {/* <AudioDing ref={dingRef}></AudioDing> */}
       <div className={displayContainer}>
         <CurrentDisplay
-          isLoading={false}
-          image={currentImage}
         ></CurrentDisplay>
       </div>
 
-      {/* <div className={previousImages}>
+      <div className={previousImages}>
         <CompletedImages
-          removeImages={removeImages}
-          images={completedImages}
-          setCurrentDisplay={setCurrentImage}
+        // removeImages={removeImages}
+        // images={completedImages}
+        // setCurrentDisplay={setCurrentImage}
         ></CompletedImages>
-      </div> */}
+      </div>
 
     </div>
   );

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

@@ -5,11 +5,9 @@ import produce from "immer";
 interface ImageDisplayState {
   // imageOptions: Map<string, any>;
   images: object[]
-  // SORT OF A HACK SOLUTION
-  len: number,
   // currentImage: object | null;
   updateDisplay: (ImageData: string, imageOptions: any) => void;
-  getCurrentImage: () => {};
+  // getCurrentImage: () => {};
 }
 
 export const useImageDisplay = create<ImageDisplayState>((set, get) => ({
@@ -28,10 +26,11 @@ export const useImageDisplay = create<ImageDisplayState>((set, get) => ({
       })
     );
   },
-  getCurrentImage: () => {
-    debugger;
-    return get().images[0];
-  }
+
+  // getCurrentImage: () => {
+  //   debugger;
+  //   return get().images[0];
+  // }
 
 
 }));

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

@@ -25,7 +25,10 @@ export const useImageQueue = create<ImageQueueState>((set, get) => ({
         if (isRandom) {
           seed = useRandomSeed();
         }
-        state.images.push({ id, options: { ...imgRec, seed } });
+        const newImg = { id, options: { ...imgRec, seed } };
+        console.log("addNewImage", newImg);
+
+        state.images.push(newImg);
       })
     );
   },
@@ -43,8 +46,10 @@ export const useImageQueue = create<ImageQueueState>((set, get) => ({
   removeFirstInQueue: () => {
     set(
       produce((state) => {
+        console.log("removing first in queue");
         const image = state.images.shift();
-        state.completedImageIds.push(image.id);
+        console.log("image", image);
+        // state.completedImageIds.push(image.id);
       })
     );
   },