From c7b89a1126e0bd0c1ac98381104fbadbc84f82e7 Mon Sep 17 00:00:00 2001 From: caranicas Date: Sun, 18 Sep 2022 15:19:31 -0400 Subject: [PATCH] current and cache history --- ui/frontend/build_src/package-lock.json | 13 +++ ui/frontend/build_src/package.json | 1 + .../generatedImage/generatedImage.css.ts | 38 +++----- .../molecules/generatedImage/index.tsx | 68 ++------------ .../organisms/creationPanel/index.tsx | 3 + .../completedImages/completedImages.css.ts | 44 +++++++++ .../displayPanel/completedImages/index.tsx | 75 ++++++++++++---- .../displayPanel/currentDisplay/index.tsx | 90 +++++++++++++++++++ .../displayPanel/displayPanel.css.ts | 28 +++--- .../organisms/displayPanel/index.tsx | 68 +++++--------- ui/frontend/build_src/tsconfig.json | 5 ++ ui/frontend/build_src/vite.config.ts | 14 +++ 12 files changed, 278 insertions(+), 169 deletions(-) create mode 100644 ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts create mode 100644 ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx diff --git a/ui/frontend/build_src/package-lock.json b/ui/frontend/build_src/package-lock.json index 8cb7e912..c4fee72c 100644 --- a/ui/frontend/build_src/package-lock.json +++ b/ui/frontend/build_src/package-lock.json @@ -21,6 +21,7 @@ "zustand": "^4.1.1" }, "devDependencies": { + "@types/node": "^18.7.18", "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", "@types/uuid": "^8.3.4", @@ -613,6 +614,12 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/@types/node": { + "version": "18.7.18", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.18.tgz", + "integrity": "sha512-m+6nTEOadJZuTPkKR/SYK3A2d7FZrgElol9UP1Kae90VVU4a6mxnPuLiIW1m4Cq4gZ/nWb9GrdVXJCoCazDAbg==", + "dev": true + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -2361,6 +2368,12 @@ "use-sync-external-store": "^1.2.0" } }, + "@types/node": { + "version": "18.7.18", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.18.tgz", + "integrity": "sha512-m+6nTEOadJZuTPkKR/SYK3A2d7FZrgElol9UP1Kae90VVU4a6mxnPuLiIW1m4Cq4gZ/nWb9GrdVXJCoCazDAbg==", + "dev": true + }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", diff --git a/ui/frontend/build_src/package.json b/ui/frontend/build_src/package.json index 660dc833..53ab4d0e 100644 --- a/ui/frontend/build_src/package.json +++ b/ui/frontend/build_src/package.json @@ -23,6 +23,7 @@ "zustand": "^4.1.1" }, "devDependencies": { + "@types/node": "^18.7.18", "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", "@types/uuid": "^8.3.4", diff --git a/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts b/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts index 850161b8..7091cf9c 100644 --- a/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts +++ b/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts @@ -1,34 +1,20 @@ import { style } from "@vanilla-extract/css"; -export const generatedImage = style({ +export const generatedImageMain = style({ position: "relative", - width: "512px", - height: "512px", }); -export const imageContain = style({ - width: "512px", - height: "512px", - backgroundColor: "black", - display: "flex", - justifyContent: "center", - alignItems: "center", -}); +// export const imageContain = style({ +// width: "512px", +// height: "512px", +// backgroundColor: "black", +// display: "flex", +// justifyContent: "center", +// alignItems: "center", +// }); export const image = style({ - width: "512px", - height: "512px", - objectFit: "contain", -}); - -export const saveButton = style({ - position: "absolute", - bottom: "10px", - left: "10px", -}); - -export const useButton = style({ - position: "absolute", - bottom: "10px", - right: "10px", + // width: "512px", + // height: "512px", + // objectFit: "contain", }); diff --git a/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx b/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx index 0458550f..0b33b687 100644 --- a/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx +++ b/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx @@ -3,17 +3,16 @@ import React, { useCallback } from "react"; import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore"; import { - generatedImage, - imageContain, + generatedImageMain, image, - saveButton, - useButton, //@ts-ignore -} from "./generatedImage.css.ts"; +} from //@ts-ignore + "./generatedImage.css.ts"; type GeneretaedImageProps = { imageData: string; metadata: ImageRequest; className?: string; + children: never[]; }; export default function GeneratedImage({ @@ -21,65 +20,10 @@ export default function GeneratedImage({ metadata, className, }: GeneretaedImageProps) { - const setRequestOption = useImageCreate((state) => state.setRequestOptions); - - const createFileName = () => { - const { - prompt, - seed, - num_inference_steps, - guidance_scale, - use_face_correction, - use_upscale, - width, - height, - } = metadata; - - //Most important information is the prompt - let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_"); - underscoreName = underscoreName.substring(0, 100); - // name and the top level metadata - let fileName = `${underscoreName}_Seed-${seed}_Steps-${num_inference_steps}_Guidance-${guidance_scale}`; - // Add the face correction and upscale - if (use_face_correction) { - fileName += `_FaceCorrection-${use_face_correction}`; - } - if (use_upscale) { - fileName += `_Upscale-${use_upscale}`; - } - // Add the width and height - fileName += `_${width}x${height}`; - // add the file extension - fileName += `.png`; - // return fileName - return fileName; - }; - - const _handleSave = () => { - const link = document.createElement("a"); - link.download = createFileName(); - link.href = imageData; - link.click(); - }; - - const _handleUseAsInput = () => { - setRequestOption("init_image", imageData); - }; - - // className={[statusClass, className].join(" ")} return ( -
-

{metadata.prompt}

-
- generated - - -
+
+ {metadata.prompt}
); } diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx index b72b55d1..934de211 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx @@ -4,6 +4,9 @@ import AdvancedSettings from "./advancedSettings"; import ImageModifiers from "./imageModifiers"; import InpaintingPanel from "./inpaintingPanel"; +// this works but causes type errors so its not worth it for now +// import { useImageCreate } from "@stores/imageCreateStore.ts"; + import { useImageCreate } from "../../../stores/imageCreateStore"; import "./creationPanel.css"; diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts new file mode 100644 index 00000000..058376c7 --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts @@ -0,0 +1,44 @@ + + +import { style, globalStyle } from "@vanilla-extract/css"; + +// @ts-ignore +import { vars } from "../../../../styles/theme/index.css.ts"; + + +export const completedImagesMain = style({ + display: 'flex', + flexDirection: 'row', + flexWrap: 'nowrap', + height: '100%', + width: '100%', + overflow: 'auto', + paddingBottom: vars.spacing.medium, + +}); + + +export const imageContain = style({ + width: "112px", + backgroundColor: "black", + display: "flex", + justifyContent: "center", + alignItems: "center", + flexShrink: 0, + border: '0 none', + padding: '0', +}); + +globalStyle(`${imageContain} img`, { + width: "100%", + objectFit: "contain", + +}); + +globalStyle(`${completedImagesMain} > ${imageContain}:first-of-type`, { + marginLeft: vars.spacing.medium, +}); + +globalStyle(`${imageContain} > ${imageContain}:last-of-type`, { + marginRight: 0, +}); diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx index a23522ff..0738603c 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx @@ -1,18 +1,61 @@ -export const CompletedImages = () => { +import React from "react"; + + +import { CompletedImagesType } from "../index"; + +type CurrentDisplayProps = { + images: CompletedImagesType[] | null; + setCurrentDisplay: (image: CompletedImagesType) => void; +} + + +import { + completedImagesMain, + imageContain +} from //@ts-ignore + "./completedImages.css.ts"; + +export default function CompletedImages({ images, setCurrentDisplay }: CurrentDisplayProps) { + + + const _handleSetCurrentDisplay = (index: number) => { + debugger + const image = images![index]; + setCurrentDisplay(image); + }; + + + console.log('COMP{LETED IMAGES', images); return ( -
-

Completed Images

+
+ {images && images.map((image, index) => { + + // if (void 0 !== image) { + // return null; + // } + + return ( + + //
{ + // debugger; + // const image = images[index]; + // _handleSetCurrentDisplay(image); + // }}> + // {image.info.prompt} + //
+ + + ); + })}
- ); - // const { data } = useQuery("completedImages", getCompletedImages); - // return ( - //
- //

Completed Images

- //
- // {data?.map((image) => ( - // - // ))} - //
- //
- // ); -}; + ) +}; \ No newline at end of file diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx new file mode 100644 index 00000000..539859f8 --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx @@ -0,0 +1,90 @@ +import React from "react"; +import GeneratedImage from "../../../molecules/generatedImage"; +import { ImageRequest, useImageCreate } from "../../../../stores/imageCreateStore"; + +import { CompletedImagesType } from "../index"; + +type CurrentDisplayProps = { + image: CompletedImagesType | null; +}; + + +export default function CurrentDisplay({ image }: CurrentDisplayProps) { + + const { info, data } = image || { info: null, data: null }; + + const setRequestOption = useImageCreate((state) => state.setRequestOptions); + + const createFileName = () => { + const { + prompt, + seed, + num_inference_steps, + guidance_scale, + use_face_correction, + use_upscale, + width, + height, + } = info!; + + //Most important information is the prompt + let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_"); + underscoreName = underscoreName.substring(0, 100); + // name and the top level metadata + let fileName = `${underscoreName}_Seed-${seed}_Steps-${num_inference_steps}_Guidance-${guidance_scale}`; + // Add the face correction and upscale + if (use_face_correction) { + fileName += `_FaceCorrection-${use_face_correction}`; + } + if (use_upscale) { + fileName += `_Upscale-${use_upscale}`; + } + // Add the width and height + fileName += `_${width}x${height}`; + // add the file extension + fileName += `.png`; + // return fileName + return fileName; + }; + + const _handleSave = () => { + const link = document.createElement("a"); + link.download = createFileName(); + link.href = data!; + link.click(); + }; + + const _handleUseAsInput = () => { + setRequestOption("init_image", data); + }; + + + + return ( +
+ {image && +
+

{info!.prompt}

+ + + +
+ + +
+
+ } +
+
+
+ ); +} + + diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts b/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts index a0252e79..f2c2749f 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts @@ -4,29 +4,21 @@ import { style } from "@vanilla-extract/css"; import { vars } from "../../../styles/theme/index.css.ts"; export const displayPanel = style({ - padding: vars.spacing.medium, + height: '100%', + display: 'flex', + flexDirection: 'column', }); export const displayContainer = style({ - display: "flex", - flexDirection: "row", - height: "100%", - width: "100%", - overflow: "hidden", -}); -export const CurrentDisplay = style({ - width: "512px", - height: "100%", + flexGrow: 1, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + }); export const previousImages = style({ - marginLeft: vars.spacing.large, - display: "flex", - flex: "auto", - flexWrap: "wrap", -}); - -export const previousImage = style({ - margin: `0 ${vars.spacing.small}`, + height: '150px', }); diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx index bf36fd73..321fb155 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx @@ -9,33 +9,36 @@ import { doMakeImage, MakeImageKey } from "../../../api"; import AudioDing from "./audioDing"; -import GeneratedImage from "../../molecules/generatedImage"; +// import GeneratedImage from "../../molecules/generatedImage"; // import DrawImage from "../../molecules/drawImage"; + +import CurrentDisplay from "./currentDisplay"; +import CompletedImages from "./completedImages"; + import { displayPanel, displayContainer, - CurrentDisplay, + // CurrentDisplay, previousImages, previousImage, //@ts-ignore } from "./displayPanel.css.ts"; -type CompletedImagesType = { +export type CompletedImagesType = { id: string; data: string; info: ImageRequest; }; export default function DisplayPanel() { + const dingRef = useRef(null); const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled()); - - const isInPaintingMode = useImageCreate((state) => state.isInpainting); - - /* FETCHING */ // @ts-ignore const { id, options } = useImageQueue((state) => state.firstInQueue()); const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue); + const [currentImage, setCurrentImage] = useState(null); + const { status, data } = useQuery( [MakeImageKey, id], () => doMakeImage(options), @@ -58,16 +61,15 @@ export default function DisplayPanel() { }, [status, data, removeFirstInQueue, dingRef, isSoundEnabled]); /* COMPLETED IMAGES */ - const queryClient = useQueryClient(); const [completedImages, setCompletedImages] = useState( [] ); const completedIds = useImageQueue((state) => state.completedImageIds); - const init_image = useImageCreate((state) => - state.getValueForRequestKey("init_image") - ); + // const init_image = useImageCreate((state) => + // state.getValueForRequestKey("init_image") + // ); useEffect(() => { const testReq = {} as ImageRequest; @@ -97,51 +99,23 @@ export default function DisplayPanel() { .flat() .reverse(); setCompletedImages(temp); + setCurrentImage(temp[0] || null); } else { setCompletedImages([]); + setCurrentImage(null); } - }, [setCompletedImages, queryClient, completedIds]); + }, [setCompletedImages, setCurrentImage, queryClient, completedIds]); return (
- {/* {isInPaintingMode && } */} - - {completedImages.length > 0 && ( - <> -
- -
- -
- {completedImages.map((image, index) => { - if (void 0 !== image) { - if (index == 0) { - return null; - } - - return ( - - ); - } else { - console.warn("image is undefined", image, index); - return null; - } - })} -
- - )} + +
+
+
); } + diff --git a/ui/frontend/build_src/tsconfig.json b/ui/frontend/build_src/tsconfig.json index 3d0a51a8..898ec466 100644 --- a/ui/frontend/build_src/tsconfig.json +++ b/ui/frontend/build_src/tsconfig.json @@ -1,5 +1,10 @@ { "compilerOptions": { + "baseUrl": "./", + "paths": { + "@stores": ["src/stores"] + }, + "target": "ESNext", "useDefineForClassFields": true, "lib": ["DOM", "DOM.Iterable", "ESNext"], diff --git a/ui/frontend/build_src/vite.config.ts b/ui/frontend/build_src/vite.config.ts index 35317af2..5002f65c 100644 --- a/ui/frontend/build_src/vite.config.ts +++ b/ui/frontend/build_src/vite.config.ts @@ -2,14 +2,28 @@ import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin"; +import path from "path"; // https://vitejs.dev/config/ export default defineConfig({ + + resolve: { + alias: { + // TODO figure out why vs code complains about this even though it works + "@stores": path.resolve(__dirname, "./src/stores"), + // TODO - add more aliases + + }, + }, + + plugins: [ react(), vanillaExtractPlugin({ // configuration }), ], + + server: { port: 9001, },