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 */
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();
setStatus(FetchingStates.FETCHING);
resetForFetching();
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 (

View File

@ -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} />
)
}
})
}
</>

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 { 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 React from "react";
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>

View File

@ -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[]

View File

@ -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();
})
);
}

File diff suppressed because one or more lines are too long