mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-23 03:11:45 +02:00
fixed time remaining and progress display
This commit is contained in:
parent
5a105eb2b3
commit
de2977284c
@ -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 (
|
||||
|
@ -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} />
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
</>
|
||||
|
@ -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>
|
||||
|
@ -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[]
|
||||
|
@ -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();
|
||||
})
|
||||
);
|
||||
}
|
||||
|
24
ui/frontend/dist/index.js
vendored
24
ui/frontend/dist/index.js
vendored
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user