mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-23 11:21:31 +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 */
|
/* 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();
|
|
||||||
|
if (void 0 !== reader) {
|
||||||
void parseRequest(id, 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 (
|
||||||
|
@ -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) => {
|
||||||
|
if (index == progressImages.length - 1) {
|
||||||
return (
|
return (
|
||||||
<img src={`${API_URL}${image}`} key={index} />
|
<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 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>
|
||||||
|
@ -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[]
|
||||||
|
@ -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();
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
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