holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

history displaying

Browse Source
This commit is contained in:
caranicas 2022-09-26 11:15:13 -04:00
parent 76c72c1a7f
commit a6394b2dce
6 changed files with 180 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,8 +24,6 @@ import {
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import AudioDing from "../../../../molecules/audioDing"; import AudioDing from "../../../../molecules/audioDing";
import { parse } from "node:path/win32";
import { debug } from "node:console";
export default function MakeButton() { export default function MakeButton() {
const { t } = useTranslation(); const { t } = useTranslation();
@ -37,8 +35,10 @@ export default function MakeButton() {
const addNewImage = useImageQueue((state) => state.addNewImage); const addNewImage = useImageQueue((state) => state.addNewImage);
const hasQueue = useImageQueue((state) => state.hasQueuedImages()); const hasQueue = useImageQueue((state) => state.hasQueuedImages());
const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue);
const { id, options } = useImageQueue((state) => state.firstInQueue()); const { id, options } = useImageQueue((state) => state.firstInQueue());
const status = useImageFetching((state) => state.status);
const setStatus = useImageFetching((state) => state.setStatus); const setStatus = useImageFetching((state) => state.setStatus);
const setStep = useImageFetching((state) => state.setStep); const setStep = useImageFetching((state) => state.setStep);
const setTotalSteps = useImageFetching((state) => state.setTotalSteps); const setTotalSteps = useImageFetching((state) => state.setTotalSteps);
@ -66,7 +66,6 @@ export default function MakeButton() {
// } // }
try { try {
debugger;
const { status, request, output: outputs } = JSON.parse(jsonStr); const { status, request, output: outputs } = JSON.parse(jsonStr);
if (status === 'succeeded') { if (status === 'succeeded') {
@ -91,7 +90,7 @@ export default function MakeButton() {
} }
catch (e) { catch (e) {
console.error("Error HACKING JSON: ", e) console.error("Error HACKING JSON: ", e)
debugger; // debugger;
} }
} }
@ -105,7 +104,6 @@ export default function MakeButton() {
// UPDATE THE DISPLAY WITH THE PROGRESS IMAGE // UPDATE THE DISPLAY WITH THE PROGRESS IMAGE
// UPDATE THE DISPLAY WITH THE FINAL IMAGE // UPDATE THE DISPLAY WITH THE FINAL IMAGE
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);
@ -120,17 +118,21 @@ export default function MakeButton() {
const { status } = update; const { status } = update;
if (status === "progress") { if (status === "progress") {
setStatus(FetchingStates.PROGRESSING); setStatus(FetchingStates.PROGRESSING);
const { progress: { step, totalSteps, output: outputs } } = update; const { progress: { step, total_steps }, output: outputs } = update;
setStep(step); setStep(step);
setTotalSteps(totalSteps); setTotalSteps(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) => {
// console.log('progress path', output.path);
addProgressImage(output.path); addProgressImage(output.path);
}); });
} }
} else if (status === "succeeded") { } else if (status === "succeeded") {
// TODO this shoul be the the new out instead of the try catch // TODO this should be the the new out instead of the try catch
// wait for the path to come back instead of the data // wait for the path to come back instead of the data
setStatus(FetchingStates.SUCCEEDED); setStatus(FetchingStates.SUCCEEDED);
console.log(update); console.log(update);
@ -226,7 +228,6 @@ export default function MakeButton() {
useEffect(() => { useEffect(() => {
const makeImages = async (options: ImageRequest) => { const makeImages = async (options: ImageRequest) => {
// potentially update the seed // potentially update the seed
debugger;
await startStream(id, options); await startStream(id, options);
} }
@ -240,6 +241,15 @@ export default function MakeButton() {
}, [hasQueue, id, options, startStream]); }, [hasQueue, id, options, startStream]);
useEffect(() => {
// if the status is complete we can remove the image from the queue
if (status === FetchingStates.COMPLETE) {
// debugger;
removeFirstInQueue();
}
}, [removeFirstInQueue, status]);
return ( return (
<button <button
className={MakeButtonStyle} className={MakeButtonStyle}

58
ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx
View File

@ -1,6 +1,9 @@
import React from "react"; import React from "react";
import { CompletedImagesType } from "../index"; import { CompletedImagesType } from "../currentDisplay";
import { useImageDisplay } from "../../../../stores/imageDisplayStore";
import { import {
completedImagesMain, completedImagesMain,
@ -10,20 +13,41 @@ import {
// @ts-expect-error // @ts-expect-error
} from "./completedImages.css.ts"; } from "./completedImages.css.ts";
interface CurrentDisplayProps { // interface CurrentDisplayProps {
images: CompletedImagesType[] | null; // images: CompletedImagesType[] | null;
setCurrentDisplay: (image: CompletedImagesType) => void; // setCurrentDisplay: (image: CompletedImagesType) => void;
removeImages: () => void; // removeImages: () => void;
} // }
export default function CompletedImages({ export default function CompletedImages(
images, // {
setCurrentDisplay, // images,
removeImages, // setCurrentDisplay,
}: CurrentDisplayProps) { // removeImages,
const _handleSetCurrentDisplay = (index: number) => { // }: CurrentDisplayProps
const image = images![index];
setCurrentDisplay(image); ) {
const images = useImageDisplay((state) => state.images);
// useEffect(() => {
// if (images.length > 0) {
// console.log("cur", images[0]);
// setCurrentImage(images[0]);
// } else {
// setCurrentImage(null);
// }
// }, [images]);
// const _handleSetCurrentDisplay = (index: number) => {
// const image = images![index];
// setCurrentDisplay(image);
// };
const removeImages = () => {
}; };
return ( return (
@ -50,9 +74,9 @@ export default function CompletedImages({
<li key={image.id}> <li key={image.id}>
<button <button
className={imageContain} className={imageContain}
onClick={() => { // onClick={() => {
_handleSetCurrentDisplay(index); // _handleSetCurrentDisplay(index);
}} // }}
> >
<img src={image.data} alt={image.info.prompt} /> <img src={image.data} alt={image.info.prompt} />
</button> </button>

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

@ -1,28 +1,54 @@
/* eslint-disable @typescript-eslint/restrict-template-expressions */ /* eslint-disable @typescript-eslint/restrict-template-expressions */
/* eslint-disable multiline-ternary */ /* eslint-disable multiline-ternary */
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
import React from "react"; import React, { useEffect, useState } from "react";
import GeneratedImage from "../../../molecules/generatedImage"; import GeneratedImage from "../../../molecules/generatedImage";
import { useImageCreate } from "../../../../stores/imageCreateStore"; import { ImageRequest, useImageCreate } from "../../../../stores/imageCreateStore";
import { FetchingStates, useImageFetching } from "../../../../stores/imageFetchingStore";
import { useImageDisplay } from "../../../../stores/imageDisplayStore";
import { CompletedImagesType } from "../index";
interface CurrentDisplayProps { export interface CompletedImagesType {
isLoading: boolean; id?: string;
image: CompletedImagesType | null; data: string | undefined;
info: ImageRequest | undefined;
} }
export default function CurrentDisplay({ const IdleDisplay = () => {
isLoading, return (
image, <h4 className="no-image">Try Making a new image!</h4>
}: CurrentDisplayProps) { );
const { info, data } = image ?? {}; };
console.log("CurrentDisplay"); const LoadingDisplay = () => {
console.log('info', info);
console.log('data', data);
const setRequestOption = useImageCreate((state) => state.setRequestOptions); const step = useImageFetching((state) => state.step);
const totalSteps = useImageFetching((state) => state.totalSteps);
const progressImages = useImageFetching((state) => state.progressImages);
const [percent, setPercent] = useState(0);
console.log("progressImages", progressImages);
useEffect(() => {
if (totalSteps > 0) {
setPercent(Math.round((step / totalSteps) * 100));
} else {
setPercent(0);
}
}, [step, totalSteps]);
return (
<>
<h4 className="loading">Loading...</h4>
<p>{percent} % Complete </p>
</>
);
};
const ImageDisplay = ({ info, data }: CompletedImagesType) => {
const createFileName = () => { const createFileName = () => {
const { const {
@ -56,6 +82,10 @@ export default function CurrentDisplay({
return fileName; return fileName;
}; };
const setRequestOption = useImageCreate((state) => state.setRequestOptions);
const _handleSave = () => { const _handleSave = () => {
const link = document.createElement("a"); const link = document.createElement("a");
link.download = createFileName(); link.download = createFileName();
@ -67,23 +97,48 @@ export default function CurrentDisplay({
setRequestOption("init_image", data); setRequestOption("init_image", data);
}; };
return ( return (
<div className="current-display"> <div className="imageDisplay">
{isLoading ? ( <p> {info?.prompt}</p>
<h4 className="loading">Loading...</h4> <GeneratedImage imageData={data} metadata={info}></GeneratedImage>
) : ( <div>
(image !== null && ( <button onClick={_handleSave}>Save</button>
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions <button onClick={_handleUseAsInput}>Use as Input</button>
<div> </div>
<p> {info?.prompt}</p>
<GeneratedImage imageData={data} metadata={info}></GeneratedImage>
<div>
<button onClick={_handleSave}>Save</button>
<button onClick={_handleUseAsInput}>Use as Input</button>
</div>
</div>
)) || <h4 className="no-image">Try Making a new image!</h4>
)}
</div> </div>
); );
} };
export default function CurrentDisplay() {
const status = useImageFetching((state) => state.status);
const [currentImage, setCurrentImage] = useState<CompletedImagesType | null>(
null
);
// const testCur = useImageDisplay((state) => state.getCurrentImage());
const images = useImageDisplay((state) => state.images);
useEffect(() => {
if (images.length > 0) {
console.log("cur", images[0]);
setCurrentImage(images[0]);
} else {
setCurrentImage(null);
}
}, [images]);
return (
<div className="current-display">
{status === FetchingStates.IDLE && <IdleDisplay />}
{(status === FetchingStates.FETCHING || status === FetchingStates.PROGRESSING) && <LoadingDisplay />}
{(status === FetchingStates.COMPLETE && currentImage != null) && <ImageDisplay info={currentImage?.info} data={currentImage?.data} />}
</div>
);
}

42
ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
View File

@ -224,23 +224,23 @@ export default function DisplayPanel() {
// clearCachedIds(); // clearCachedIds();
// }; // };
const [currentImage, setCurrentImage] = useState<CompletedImagesType | null>( // const [currentImage, setCurrentImage] = useState<CompletedImagesType | null>(
null // null
); // );
const getCurrentImage = useImageDisplay((state) => state.getCurrentImage); // const getCurrentImage = useImageDisplay((state) => state.getCurrentImage);
const images = useImageDisplay((state) => state.images); // const images = useImageDisplay((state) => state.images);
useEffect(() => { // useEffect(() => {
if (images.length > 0) { // if (images.length > 0) {
debugger; // debugger;
const cur = getCurrentImage(); // const cur = getCurrentImage();
console.log("cur", cur); // console.log("cur", cur);
setCurrentImage(cur); // setCurrentImage(cur);
} else { // } else {
setCurrentImage(null); // setCurrentImage(null);
} // }
}, [images, getCurrentImage]); // }, [images, getCurrentImage]);
// useEffect(() => { // useEffect(() => {
// console.log("images CHANGED"); // console.log("images CHANGED");
@ -258,18 +258,16 @@ export default function DisplayPanel() {
{/* <AudioDing ref={dingRef}></AudioDing> */} {/* <AudioDing ref={dingRef}></AudioDing> */}
<div className={displayContainer}> <div className={displayContainer}>
<CurrentDisplay <CurrentDisplay
isLoading={false}
image={currentImage}
></CurrentDisplay> ></CurrentDisplay>
</div> </div>
{/* <div className={previousImages}> <div className={previousImages}>
<CompletedImages <CompletedImages
removeImages={removeImages} // removeImages={removeImages}
images={completedImages} // images={completedImages}
setCurrentDisplay={setCurrentImage} // setCurrentDisplay={setCurrentImage}
></CompletedImages> ></CompletedImages>
</div> */} </div>
</div> </div>
); );

13
ui/frontend/build_src/src/stores/imageDisplayStore.ts
View File

@ -5,11 +5,9 @@ import produce from "immer";
interface ImageDisplayState { interface ImageDisplayState {
// imageOptions: Map<string, any>; // imageOptions: Map<string, any>;
images: object[] images: object[]
// SORT OF A HACK SOLUTION
len: number,
// currentImage: object | null; // currentImage: object | null;
updateDisplay: (ImageData: string, imageOptions: any) => void; updateDisplay: (ImageData: string, imageOptions: any) => void;
getCurrentImage: () => {}; // getCurrentImage: () => {};
} }
export const useImageDisplay = create<ImageDisplayState>((set, get) => ({ export const useImageDisplay = create<ImageDisplayState>((set, get) => ({
@ -28,10 +26,11 @@ export const useImageDisplay = create<ImageDisplayState>((set, get) => ({
}) })
); );
}, },
getCurrentImage: () => {
debugger; // getCurrentImage: () => {
return get().images[0]; // debugger;
} // return get().images[0];
// }
})); }));

9
ui/frontend/build_src/src/stores/imageQueueStore.ts
View File

@ -25,7 +25,10 @@ export const useImageQueue = create<ImageQueueState>((set, get) => ({
if (isRandom) { if (isRandom) {
seed = useRandomSeed(); seed = useRandomSeed();
} }
state.images.push({ id, options: { ...imgRec, seed } }); const newImg = { id, options: { ...imgRec, seed } };
console.log("addNewImage", newImg);
state.images.push(newImg);
}) })
); );
}, },
@ -43,8 +46,10 @@ export const useImageQueue = create<ImageQueueState>((set, get) => ({
removeFirstInQueue: () => { removeFirstInQueue: () => {
set( set(
produce((state) => { produce((state) => {
console.log("removing first in queue");
const image = state.images.shift(); const image = state.images.shift();
state.completedImageIds.push(image.id); console.log("image", image);
// state.completedImageIds.push(image.id);
}) })
); );
}, },