clean ups

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

@@ -24,7 +24,6 @@ import {
 import { useTranslation } from "react-i18next";
 
 import AudioDing from "../../../../molecules/audioDing";
-import { debug } from "console";
 
 export default function MakeButton() {
   const { t } = useTranslation();
@@ -91,8 +90,7 @@ export default function MakeButton() {
 
     }
     catch (e) {
-      console.error("Error HACKING JSON: ", e)
+      console.log("Error HACKING JSON: ", e)
-      // debugger;
     }
   }
 
@@ -152,8 +150,6 @@ export default function MakeButton() {
   }
 
   const startStream = async (id: string, req: ImageRequest) => {
-
-    console.log('START STREAM', id);
     const streamReq = {
       ...req,
       stream_image_progress: true,
@@ -230,7 +226,7 @@ export default function MakeButton() {
   useEffect(() => {
     const makeImages = async (options: ImageRequest) => {
       // potentially update the seed
-      await startStream(id, options);
+      await startStream(id ?? "", options);
     }
 
     if (status === FetchingStates.PROGRESSING || status === FetchingStates.FETCHING) {
@@ -238,6 +234,11 @@ export default function MakeButton() {
     }
 
     if (hasQueue) {
+
+      if (options === undefined) {
+        console.log('req is undefined');
+        return;
+      }
       makeImages(options).catch((e) => {
         console.log('HAS QUEUE ERROR');
         console.log(e);

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

@@ -1,7 +1,5 @@
 import React from "react";
 
-import { CompletedImagesType } from "../currentDisplay";
-
 
 import { useImageDisplay } from "../../../../stores/imageDisplayStore";
 
@@ -25,11 +23,6 @@ export default function CompletedImages(
   const clearDisplay = useImageDisplay((state) => state.clearDisplay);
 
 
-  // const _handleSetCurrentDisplay = (index: number) => {
-  //   const image = images![index];
-  //   setCurrentDisplay(image);
-  // };
-
   const removeImagesAll = () => {
     clearDisplay();
   };

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

@@ -1,18 +1,14 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
-/* eslint-disable multiline-ternary */
 /* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable multiline-ternary */
+
 import React, { useEffect, useState } from "react";
 import GeneratedImage from "../../../molecules/generatedImage";
-import { ImageRequest, useImageCreate } from "../../../../stores/imageCreateStore";
+import { useImageCreate } from "../../../../stores/imageCreateStore";
 import { FetchingStates, useImageFetching } from "../../../../stores/imageFetchingStore";
-import { useImageDisplay } from "../../../../stores/imageDisplayStore";
+import { CompletedImagesType, useImageDisplay } from "../../../../stores/imageDisplayStore";
 
+import { API_URL } from "../../../../api";
 
-export interface CompletedImagesType {
-  id?: string;
-  data: string | undefined;
-  info: ImageRequest | undefined;
-}
 
 const IdleDisplay = () => {
   return (
@@ -44,7 +40,7 @@ const LoadingDisplay = () => {
       <p>{percent} % Complete </p>
       {progressImages.map((image, index) => {
         return (
-          <img src={`http://localhost:9000${image}`} key={index} />
+          <img src={`${API_URL}${image}`} key={index} />
         )
       })
       }
@@ -93,7 +89,7 @@ const ImageDisplay = ({ info, data }: CompletedImagesType) => {
   const _handleSave = () => {
     const link = document.createElement("a");
     link.download = createFileName();
-    link.href = data!;
+    link.href = data ?? "";
     link.click();
   };
 
@@ -101,8 +97,6 @@ const ImageDisplay = ({ info, data }: CompletedImagesType) => {
     setRequestOption("init_image", data);
   };
 
-
-
   return (
     <div className="imageDisplay">
       <p> {info?.prompt}</p>
@@ -120,24 +114,6 @@ export default function CurrentDisplay() {
   const status = useImageFetching((state) => state.status);
   const currentImage = useImageDisplay((state) => state.currentImage);
 
-
-  console.log("currentImage", currentImage);
-
-  // 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">
 

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

@@ -2,12 +2,21 @@
 import create from "zustand";
 import produce from "immer";
 
+import { ImageRequest } from "./imageCreateStore";
+
+export interface CompletedImagesType {
+  id?: string;
+  data: string | undefined;
+  info: ImageRequest;
+}
+
+
 interface ImageDisplayState {
   // imageOptions: Map<string, any>;
-  images: object[]
+  images: CompletedImagesType[]
-  currentImage: object | null
+  currentImage: CompletedImagesType | null
   updateDisplay: (ImageData: string, imageOptions: any) => void;
-  setCurrentImage: (image: object) => void;
+  setCurrentImage: (image: CompletedImagesType) => void;
   clearDisplay: () => void;
 
   // getCurrentImage: () => {};

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

@@ -4,12 +4,18 @@ import { useRandomSeed } from "../utils";
 
 import { ImageRequest } from "./imageCreateStore";
 
+interface QueueItem {
+  id?: string;
+  options?: ImageRequest;
+  status?: "pending" | "complete" | "error";
+}
+
 interface ImageQueueState {
-  images: ImageRequest[];
+  images: QueueItem[];
   completedImageIds: string[];
   addNewImage: (id: string, imgRec: ImageRequest) => void;
   hasQueuedImages: () => boolean;
-  firstInQueue: () => ImageRequest | {};
+  firstInQueue: () => QueueItem;
   removeFirstInQueue: () => void;
   clearCachedIds: () => void;
 }
@@ -18,17 +24,11 @@ export const useImageQueue = create<ImageQueueState>((set, get) => ({
   images: [],
   completedImageIds: [],
   // use produce to make sure we don't mutate state
-  addNewImage: (id: string, imgRec: ImageRequest, isRandom = false) => {
+  addNewImage: (id: string, imgRec: ImageRequest) => {
     set(
       produce((state) => {
-        let { seed } = imgRec;
+        const item: QueueItem = { id, options: imgRec, status: "pending" };
-        if (isRandom) {
+        state.images.push(item);
-          seed = useRandomSeed();
-        }
-        const newImg = { id, options: { ...imgRec, seed } };
-        console.log("addNewImage", newImg);
-
-        state.images.push(newImg);
       })
     );
   },
@@ -38,18 +38,24 @@ export const useImageQueue = create<ImageQueueState>((set, get) => ({
   },
 
   firstInQueue: () => {
-    let first: ImageRequest | {} = get().images[0];
+    const { images } = get();
-    first = void 0 !== first ? first : {};
+    if (images.length > 0) {
-    return first;
+      return images[0];
+    }
+    // // cast an empty object to QueueItem
+    const empty: QueueItem = {};
+    return empty;
+
   },
 
   removeFirstInQueue: () => {
     set(
       produce((state) => {
-        console.log("removing first in queue");
         const image = state.images.shift();
         console.log("image", image);
-        // state.completedImageIds.push(image.id);
+        if (void 0 !== image) {
+          state.completedImageIds.push(image.id);
+        }
       })
     );
   },