fixed time remaining and progress display

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

@@ -1,6 +1,3 @@
-/* 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 */
 import React, { useEffect } from "react";
 
@@ -43,7 +40,9 @@ export default function MakeButton() {
   const setStep = useImageFetching((state) => state.setStep);
   const setTotalSteps = useImageFetching((state) => state.setTotalSteps);
   const addProgressImage = useImageFetching((state) => state.addProgressImage);
-  const resetProgressImages = useImageFetching((state) => state.resetProgressImages);
+  const setStartTime = useImageFetching((state) => state.setStartTime);
+  const setNowTime = useImageFetching((state) => state.setNowTime);
+  const resetForFetching = useImageFetching((state) => state.resetForFetching);
   const appendData = useImageFetching((state) => state.appendData);
 
   const updateDisplay = useImageDisplay((state) => state.updateDisplay);
@@ -67,7 +66,14 @@ export default function MakeButton() {
     // }
 
     try {
-      const { status, request, output: outputs } = JSON.parse(jsonStr);
+
+      // todo - used zod or something to validate this
+      interface jsonResponseType {
+        status: string;
+        request: ImageRequest;
+        output: []
+      }
+      const { status, request, output: outputs }: jsonResponseType = JSON.parse(jsonStr);
 
       if (status === 'succeeded') {
         outputs.forEach((output: any) => {
@@ -79,7 +85,6 @@ export default function MakeButton() {
             seed,
           };
 
-          console.log('UPDATE DISPLAY!');
           updateDisplay(data, seedReq);
         });
       }
@@ -103,7 +108,7 @@ export default function MakeButton() {
     while (true) {
       const { done, value } = await reader.read();
       const jsonStr = decoder.decode(value);
-      if (done as boolean) {
+      if (done) {
         removeFirstInQueue();
         setStatus(FetchingStates.COMPLETE);
         hackJson(finalJSON)
@@ -113,15 +118,25 @@ export default function MakeButton() {
       try {
         const update = JSON.parse(jsonStr);
         const { status } = update;
+
         if (status === "progress") {
           setStatus(FetchingStates.PROGRESSING);
           const { progress: { step, total_steps }, output: outputs } = update;
           setStep(step);
           setTotalSteps(total_steps);
 
+          if (step === 0) {
+            setStartTime();
+          }
+          else {
+            console.log('step else', step);
+            setNowTime();
+          }
+
           console.log('progess step of total', step, total_steps);
           if (void 0 !== outputs) {
             outputs.forEach((output: any) => {
+              // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
               const timePath = `${output.path}?t=${new Date().getTime()}`
               console.log('progress path', timePath);
               addProgressImage(timePath);
@@ -157,13 +172,14 @@ export default function MakeButton() {
     };
 
     try {
-      resetProgressImages();
+      resetForFetching();
-      setStatus(FetchingStates.FETCHING);
-
       const res = await doMakeImage(streamReq);
-      // @ts-expect-error
+      const reader = res.body?.getReader();
-      const reader = res.body.getReader();
+
+      if (void 0 !== reader) {
         void parseRequest(id, reader);
+      }
+
     } catch (e) {
       console.log('TOP LINE STREAM ERROR')
       console.log(e);
@@ -246,7 +262,6 @@ export default function MakeButton() {
       });
     }
 
-
   }, [hasQueue, status, id, options, startStream]);
 
   return (

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

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable multiline-ternary */
 
 import React, { useEffect, useState } from "react";
 import GeneratedImage from "../../../molecules/generatedImage";
@@ -8,6 +7,7 @@ import { FetchingStates, useImageFetching } from "../../../../stores/imageFetchi
 import { CompletedImagesType, useImageDisplay } from "../../../../stores/imageDisplayStore";
 
 import { API_URL } from "../../../../api";
+import { isGeneratorFunction } from "util/types";
 
 
 const IdleDisplay = () => {
@@ -22,10 +22,19 @@ const LoadingDisplay = () => {
   const totalSteps = useImageFetching((state) => state.totalSteps);
   const progressImages = useImageFetching((state) => state.progressImages);
 
-  const [percent, setPercent] = useState(0);
+  const startTime = useImageFetching((state) => state.timeStarted);
+  const timeNow = useImageFetching((state) => state.timeNow);
+  const [timeRemaining, setTimeRemaining] = useState(0);
 
+  const [percent, setPercent] = useState(0);
   console.log("progressImages", progressImages);
 
+
+  // stepsRemaining = totalSteps - overallStepCount
+  // stepsRemaining = (stepsRemaining < 0 ? 0 : stepsRemaining)
+  // timeRemaining = (timeTaken === -1 ? '' : stepsRemaining * timeTaken) // ms
+
+
   useEffect(() => {
     if (totalSteps > 0) {
       setPercent(Math.round((step / totalSteps) * 100));
@@ -34,14 +43,27 @@ const LoadingDisplay = () => {
     }
   }, [step, totalSteps]);
 
+  useEffect(() => {
+    // find the remaining time
+    const timeTaken = +timeNow - +startTime;
+    const timePerStep = step == 0 ? 0 : timeTaken / step;
+    const totalTime = timePerStep * totalSteps;
+    const timeRemaining = (totalTime - timeTaken) / 1000;
+    setTimeRemaining(timeRemaining);
+
+  }, [step, totalSteps, startTime, timeNow, setTimeRemaining]);
+
   return (
     <>
       <h4 className="loading">Loading...</h4>
       <p>{percent} % Complete </p>
+      {timeRemaining != 0 && <p>Time Remaining: {timeRemaining} s</p>}
       {progressImages.map((image, index) => {
+        if (index == progressImages.length - 1) {
           return (
             <img src={`${API_URL}${image}`} key={index} />
           )
+        }
       })
       }
     </>

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

@@ -1,28 +1,5 @@
-/* eslint-disable @typescript-eslint/strict-boolean-expressions */
-import React, { useEffect, useState, useRef } from "react";
-// import { useImageQueue } from "../../../stores/imageQueueStore";
 
-// import { useImageFetching } from "../../../stores/imageFetchingStore";
+import React from "react";
-// import { useImageDisplay } from "../../../stores/imageDisplayStore";
-import { useImageDisplay } from "../../../stores/imageDisplayStore";
-
-// import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore";
-
-// import { useQuery, useQueryClient } from "@tanstack/react-query";
-
-
-// import {
-//   API_URL,
-//   doMakeImage,
-//   MakeImageKey,
-//   ImageReturnType,
-//   ImageOutput,
-// } from "../../../api";
-
-// import AudioDing from "../creationPanel/basicCreation/makeButton/audioDing";
-
-// import GeneratedImage from "../../molecules/generatedImage";
-// import DrawImage from "../../molecules/drawImage";
 
 import CurrentDisplay from "./currentDisplay";
 import CompletedImages from "./completedImages";
@@ -34,11 +11,6 @@ import {
   // @ts-expect-error
 } from "./displayPanel.css.ts";
 
-// export interface CompletedImagesType {
-//   id: string;
-//   data: string;
-//   info: ImageRequest;
-// }
 
 const idDelim = "_batch";
 
@@ -64,7 +36,6 @@ export default function DisplayPanel() {
   //       .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items
   return (
     <div className={displayPanel}>
-      {/* <AudioDing ref={dingRef}></AudioDing> */}
       <div className={displayContainer}>
         <CurrentDisplay
         ></CurrentDisplay>

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-plus-operands */
 import create from "zustand";
 import produce from "immer";
 
@@ -10,7 +9,6 @@ export interface CompletedImagesType {
   info: ImageRequest;
 }
 
-
 interface ImageDisplayState {
   // imageOptions: Map<string, any>;
   images: CompletedImagesType[]

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

@@ -16,13 +16,18 @@ interface ImageFetchingState {
   totalSteps: number;
   data: string;
   progressImages: string[]
+  timeStarted: Date;
+  timeNow: Date;
   appendData: (data: string) => void;
   reset: () => void;
   setStatus: (status: typeof FetchingStates[keyof typeof FetchingStates]) => void;
   setStep: (step: number) => void;
   setTotalSteps: (totalSteps: number) => void;
   addProgressImage: (imageLink: string) => void;
-  resetProgressImages: () => void;
+  setStartTime: () => void;
+  setNowTime: () => void;
+  resetForFetching: () => void;
+
 }
 
 export const useImageFetching = create<ImageFetchingState>((set) => ({
@@ -31,6 +36,8 @@ export const useImageFetching = create<ImageFetchingState>((set) => ({
   totalSteps: 0,
   data: '',
   progressImages: [],
+  timeStarted: new Date(),
+  timeNow: new Date(),
   // use produce to make sure we don't mutate state
   appendData: (data: string) => {
     set(
@@ -78,12 +85,29 @@ export const useImageFetching = create<ImageFetchingState>((set) => ({
       })
     );
   },
-  resetProgressImages: () => {
+  setStartTime: () => {
     set(
       produce((state: ImageFetchingState) => {
+        state.timeStarted = new Date();
+      })
+    );
+  },
+  setNowTime: () => {
+    set(
+      produce((state: ImageFetchingState) => {
+        state.timeNow = new Date();
+      })
+    );
+  },
+  resetForFetching: () => {
+    set(
+      produce((state: ImageFetchingState) => {
+        state.status = FetchingStates.FETCHING;
         state.progressImages = [];
         state.step = 0;
         state.totalSteps = 0;
+        state.timeNow = new Date();
+        state.timeStarted = new Date();
       })
     );
   }