fixed time remaining and progress display

This commit is contained in:
caranicas 2022-09-27 10:45:36 -04:00
parent 5a105eb2b3
commit de2977284c
6 changed files with 95 additions and 65 deletions

View File

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

View File

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

View File

@ -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 CurrentDisplay from "./currentDisplay";
import CompletedImages from "./completedImages"; import CompletedImages from "./completedImages";
@ -34,11 +11,6 @@ import {
// @ts-expect-error // @ts-expect-error
} from "./displayPanel.css.ts"; } from "./displayPanel.css.ts";
// export interface CompletedImagesType {
// id: string;
// data: string;
// info: ImageRequest;
// }
const idDelim = "_batch"; const idDelim = "_batch";
@ -64,7 +36,6 @@ export default function DisplayPanel() {
// .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items // .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items
return ( return (
<div className={displayPanel}> <div className={displayPanel}>
{/* <AudioDing ref={dingRef}></AudioDing> */}
<div className={displayContainer}> <div className={displayContainer}>
<CurrentDisplay <CurrentDisplay
></CurrentDisplay> ></CurrentDisplay>

View File

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

View File

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

File diff suppressed because one or more lines are too long