extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-01-26 08:08:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

reselct and delete working

Browse Source
This commit is contained in:
caranicas 2022-09-26 17:36:21 -04:00
parent afd8717c21
commit 986b303f2f
6 changed files with 53 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,6 +44,7 @@ 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 appendData = useImageFetching((state) => state.appendData); const appendData = useImageFetching((state) => state.appendData);
const updateDisplay = useImageDisplay((state) => state.updateDisplay); const updateDisplay = useImageDisplay((state) => state.updateDisplay);
@ -159,7 +160,9 @@ export default function MakeButton() {
}; };
try { try {
resetProgressImages();
setStatus(FetchingStates.FETCHING); setStatus(FetchingStates.FETCHING);
const res = await doMakeImage(streamReq); const res = await doMakeImage(streamReq);
// @ts-expect-error // @ts-expect-error
const reader = res.body.getReader(); const reader = res.body.getReader();

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

@ -13,33 +13,16 @@ import {
// @ts-expect-error // @ts-expect-error
} from "./completedImages.css.ts"; } from "./completedImages.css.ts";
// interface CurrentDisplayProps {
// images: CompletedImagesType[] | null;
// setCurrentDisplay: (image: CompletedImagesType) => void;
// removeImages: () => void;
// }
export default function CompletedImages( export default function CompletedImages(
// {
// images,
// setCurrentDisplay,
// removeImages,
// }: CurrentDisplayProps
) { ) {
const images = useImageDisplay((state) => state.images); const images = useImageDisplay((state) => state.images);
const setCurrentImage = useImageDisplay((state) => state.setCurrentImage);
// useEffect(() => { const clearDisplay = useImageDisplay((state) => state.clearDisplay);
// if (images.length > 0) {
// console.log("cur", images[0]);
// setCurrentImage(images[0]);
// } else {
// setCurrentImage(null);
// }
// }, [images]);
// const _handleSetCurrentDisplay = (index: number) => { // const _handleSetCurrentDisplay = (index: number) => {
@ -47,7 +30,8 @@ export default function CompletedImages(
// setCurrentDisplay(image); // setCurrentDisplay(image);
// }; // };
const removeImages = () => { const removeImagesAll = () => {
clearDisplay();
}; };
return ( return (
@ -57,7 +41,7 @@ export default function CompletedImages(
<button <button
className={RemoveButton} className={RemoveButton}
onClick={() => { onClick={() => {
removeImages(); removeImagesAll();
}} }}
> >
REMOVE REMOVE
@ -74,9 +58,9 @@ export default function CompletedImages(
<li key={image.id}> <li key={image.id}>
<button <button
className={imageContain} className={imageContain}
// onClick={() => { onClick={() => {
// _handleSetCurrentDisplay(index); setCurrentImage(image);
// }} }}
> >
<img src={image.data} alt={image.info.prompt} /> <img src={image.data} alt={image.info.prompt} />
</button> </button>

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

@ -30,8 +30,6 @@ const LoadingDisplay = () => {
console.log("progressImages", progressImages); console.log("progressImages", progressImages);
useEffect(() => { useEffect(() => {
if (totalSteps > 0) { if (totalSteps > 0) {
setPercent(Math.round((step / totalSteps) * 100)); setPercent(Math.round((step / totalSteps) * 100));
@ -120,21 +118,25 @@ const ImageDisplay = ({ info, data }: CompletedImagesType) => {
export default function CurrentDisplay() { export default function CurrentDisplay() {
const status = useImageFetching((state) => state.status); const status = useImageFetching((state) => state.status);
const currentImage = useImageDisplay((state) => state.currentImage);
const [currentImage, setCurrentImage] = useState<CompletedImagesType | null>(
null console.log("currentImage", currentImage);
);
// const [currentImage, setCurrentImage] = useState<CompletedImagesType | null>(
// null
// );
// const testCur = useImageDisplay((state) => state.getCurrentImage()); // const testCur = 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) {
console.log("cur", images[0]); // console.log("cur", images[0]);
setCurrentImage(images[0]); // setCurrentImage(images[0]);
} else { // } else {
setCurrentImage(null); // setCurrentImage(null);
} // }
}, [images]); // }, [images]);
return ( return (
<div className="current-display"> <div className="current-display">

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

@ -43,145 +43,6 @@ import {
const idDelim = "_batch"; const idDelim = "_batch";
export default function DisplayPanel() { export default function DisplayPanel() {
// const dingRef = useRef<HTMLAudioElement>(null);
// const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
// // @ts-expect-error
// const { id, options } = useImageQueue((state) => state.firstInQueue());
// const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue);
// const [isEnabled, setIsEnabled] = useState(false);
// const [isLoading, setIsLoading] = useState(true);
// const { status, data } = useQuery(
// [MakeImageKey, id],
// async () => await doMakeImage(options),
// {
// enabled: isEnabled,
// }
// );
// const { status, data } = useEventSourceQuery(
// MakeImageKey,
// // [MakeImageKey, id],
// // async () => await doMakeImage(options),
// // {
// // enabled: isEnabled,
// // }
// );
// update the enabled state when the id changes
// useEffect(() => {
// setIsEnabled(void 0 !== id);
// }, [id]);
// const _handleStreamData = async (res: typeof ReadableStream) => {
// console.log("_handleStreamData");
// let reader;
// // @ts-expect-error
// if (res.body.locked) {
// console.log("locked");
// }
// else {
// reader = res.body.getReader();
// }
// console.log("reader", reader);
// const decoder = new TextDecoder();
// while (true) {
// const { done, value } = await reader.read();
// const text = decoder.decode(value);
// console.log("DECODE", done);
// console.log(text);
// if (text.status === "progress") {
// console.log("PROGRESS");
// }
// else if (text.status === "succeeded") {
// console.log("succeeded");
// }
// else {
// console.log("extra?")
// }
// console.log("-----------------");
// if (done as boolean) {
// reader.releaseLock();
// break;
// }
// }
// };
// useEffect(() => {
// const fetch = async () => {
// const res = await doMakeImage(options);
// void _handleStreamData(res);
// }
// if (isEnabled) {
// console.log('isEnabled');
// debugger;
// fetch()
// .catch((err) => {
// console.error(err);
// });
// }
// }, [isEnabled, options, _handleStreamData]);
// helper for the loading state to be enabled aware
// useEffect(() => {
// if (isEnabled && status === "loading") {
// setIsLoading(true);
// } else {
// setIsLoading(false);
// }
// }, [isEnabled, status]);
// this is where there loading actually happens
// useEffect(() => {
// console.log('DISPLATPANEL: status', status);
// console.log('DISPLATPANEL: data', data);
// // query is done
// if (status === "success") {
// // check to make sure that the image was created
// void _handleStreamData(data);
// // if (data.status === "succeeded") {
// // if (isSoundEnabled) {
// // // not awaiting the promise or error handling
// // void dingRef.current?.play();
// // }
// // removeFirstInQueue();
// // }
// }
// }, [status, data, removeFirstInQueue, dingRef, isSoundEnabled, _handleStreamData]);
/* COMPLETED IMAGES */
// const queryClient = useQueryClient();
// const [completedImages, setCompletedImages] = useState<CompletedImagesType[]>(
// []
// );
// const completedIds = useImageQueue((state) => state.completedImageIds);
// const clearCachedIds = useImageQueue((state) => state.clearCachedIds);
// this is where we generate the list of completed images
// useEffect(() => {
// const completedQueries = completedIds.map((id) => {
// const imageData = queryClient.getQueryData([MakeImageKey, id]);
// return imageData;
// }) as ImageReturnType[];
// if (completedQueries.length > 0) { // if (completedQueries.length > 0) {
// // map the completedImagesto a new array // // map the completedImagesto a new array
@ -201,60 +62,8 @@ export default function DisplayPanel() {
// .flat() // .flat()
// .reverse() // .reverse()
// .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items // .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items
// setCompletedImages(temp);
// // could move this to the useEffect for completedImages
// if (temp.length > 0) {
// setCurrentImage(temp[0]);
// } else {
// setCurrentImage(null);
// }
// } else {
// setCompletedImages([]);
// setCurrentImage(null);
// }
// }, [setCompletedImages, setCurrentImage, queryClient, completedIds]);
// this is how we remove them
// const removeImages = () => {
// completedIds.forEach((id) => {
// queryClient.removeQueries([MakeImageKey, id]);
// });
// clearCachedIds();
// };
// const [currentImage, setCurrentImage] = useState<CompletedImagesType | null>(
// null
// );
// const getCurrentImage = useImageDisplay((state) => state.getCurrentImage);
// const images = useImageDisplay((state) => state.images);
// useEffect(() => {
// if (images.length > 0) {
// debugger;
// const cur = getCurrentImage();
// console.log("cur", cur);
// setCurrentImage(cur);
// } else {
// setCurrentImage(null);
// }
// }, [images, getCurrentImage]);
// useEffect(() => {
// console.log("images CHANGED");
// debugger;
// if (len) > 0) {
// // console.log("images", images);
// setCurrentImage(getCurrentImage());
// }
// }, [len]);
return ( return (
<div className={displayPanel}> <div className={displayPanel}>
DISPLAY
{/* <AudioDing ref={dingRef}></AudioDing> */} {/* <AudioDing ref={dingRef}></AudioDing> */}
<div className={displayContainer}> <div className={displayContainer}>
<CurrentDisplay <CurrentDisplay
@ -263,9 +72,6 @@ export default function DisplayPanel() {
<div className={previousImages}> <div className={previousImages}>
<CompletedImages <CompletedImages
// removeImages={removeImages}
// images={completedImages}
// setCurrentDisplay={setCurrentImage}
></CompletedImages> ></CompletedImages>
</div> </div>

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

@ -5,15 +5,18 @@ import produce from "immer";
interface ImageDisplayState { interface ImageDisplayState {
// imageOptions: Map<string, any>; // imageOptions: Map<string, any>;
images: object[] images: object[]
// currentImage: object | null; currentImage: object | null
updateDisplay: (ImageData: string, imageOptions: any) => void; updateDisplay: (ImageData: string, imageOptions: any) => void;
setCurrentImage: (image: object) => void;
clearDisplay: () => void;
// getCurrentImage: () => {}; // getCurrentImage: () => {};
} }
export const useImageDisplay = create<ImageDisplayState>((set, get) => ({ export const useImageDisplay = create<ImageDisplayState>((set, get) => ({
imageMap: new Map<string, any>(), imageMap: new Map<string, any>(),
images: [], images: [],
// currentImage: null, currentImage: null,
// use produce to make sure we don't mutate state // use produce to make sure we don't mutate state
// imageOptions: any // imageOptions: any
updateDisplay: (ImageData: string, imageOptions) => { updateDisplay: (ImageData: string, imageOptions) => {
@ -23,14 +26,26 @@ export const useImageDisplay = create<ImageDisplayState>((set, get) => ({
// state.currentImage = { display: ImageData, imageOptions }; // state.currentImage = { display: ImageData, imageOptions };
// imageOptions // imageOptions
state.images.unshift({ data: ImageData, info: imageOptions }); state.images.unshift({ data: ImageData, info: imageOptions });
state.currentImage = state.images[0];
}) })
); );
}, },
// getCurrentImage: () => { setCurrentImage: (image) => {
// debugger; set(
// return get().images[0]; produce((state) => {
// } state.currentImage = image;
})
);
},
clearDisplay: () => {
set(
produce((state) => {
state.images = [];
state.currentImage = null;
})
);
}
})); }));

6
ui/frontend/build_src/src/stores/imageFetchingStore.ts
View File

@ -22,7 +22,7 @@ interface ImageFetchingState {
setStep: (step: number) => void; setStep: (step: number) => void;
setTotalSteps: (totalSteps: number) => void; setTotalSteps: (totalSteps: number) => void;
addProgressImage: (imageLink: string) => void; addProgressImage: (imageLink: string) => void;
clearProgressImage: () => void; resetProgressImages: () => void;
} }
export const useImageFetching = create<ImageFetchingState>((set) => ({ export const useImageFetching = create<ImageFetchingState>((set) => ({
@ -78,10 +78,12 @@ export const useImageFetching = create<ImageFetchingState>((set) => ({
}) })
); );
}, },
clearProgressImage: () => { resetProgressImages: () => {
set( set(
produce((state: ImageFetchingState) => { produce((state: ImageFetchingState) => {
state.progressImages = []; state.progressImages = [];
state.step = 0;
state.totalSteps = 0;
}) })
); );
} }