diff --git a/ui/frontend/build_src/index.html b/ui/frontend/build_src/index.html index 39ca7ab4..9cd2abff 100644 --- a/ui/frontend/build_src/index.html +++ b/ui/frontend/build_src/index.html @@ -275,1255 +275,5 @@ transform: translateY(25%); } - - - - - - - - - diff --git a/ui/frontend/build_src/src/components/layouts/Beta/index.tsx b/ui/frontend/build_src/src/components/layouts/Beta/index.tsx new file mode 100644 index 00000000..ac21a339 --- /dev/null +++ b/ui/frontend/build_src/src/components/layouts/Beta/index.tsx @@ -0,0 +1,10 @@ +import React from "react"; + + +export default function Beta() { + return ( +
+

Beta

+
+ ); +}; \ No newline at end of file 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 new file mode 100644 index 00000000..f37d3614 --- /dev/null +++ b/ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts @@ -0,0 +1,35 @@ +import { style } from '@vanilla-extract/css' + +export const generatedImage = 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 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', +}); + diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/index.tsx b/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx similarity index 79% rename from ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/index.tsx rename to ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx index 08511ccf..6b6db6e2 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/index.tsx +++ b/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx @@ -3,9 +3,16 @@ import React, { useCallback } from "react"; import { ImageRequest, useImageCreate, -} from "../../../../store/imageCreateStore"; +} from "../../../store/imageCreateStore"; -import "./generatedImage.css"; +import { + generatedImage, + imageContain, + image, + saveButton, + useButton, +} from //@ts-ignore +"./generatedImage.css.ts"; type GeneretaedImageProps = { imageData: string; @@ -35,10 +42,8 @@ export default function GeneratedImage({ //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}`; @@ -46,13 +51,10 @@ export default function GeneratedImage({ 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; }; @@ -71,14 +73,14 @@ export default function GeneratedImage({ // className={[statusClass, className].join(" ")} return ( -
+

{metadata.prompt}

-
- generated - -
diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css b/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css deleted file mode 100644 index 72ffe614..00000000 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css +++ /dev/null @@ -1,22 +0,0 @@ -.display-panel { - padding: 10px; -} - -#display-container { - display: flex; - flex-direction: row; - height: 100%; - width: 100%; - overflow: hidden; -} - -#previous-images { - margin-left: 30px; - display: flex; - flex: auto; - flex-wrap: wrap; -} - -.previous-image { - margin: 0 10px; -} 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 new file mode 100644 index 00000000..be1b7aee --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css.ts @@ -0,0 +1,33 @@ +import { style } from '@vanilla-extract/css' + +export const displayPanel = style({ + padding: '10px', + // width: '512px', + // height: '512px', +}); + +export const displayContainer = style({ + display: 'flex', + flexDirection: 'row', + height: '100%', + width: '100%', + overflow: 'hidden', +}); + +export const CurrentDisplay = style({ + width: '512px', + height:'100%', +}); + +export const previousImages = style({ + marginLeft: '30px', + display: 'flex', + flex: 'auto', + flexWrap: 'wrap', +}); + +export const previousImage = style({ + margin: '0 10px', +}); + + diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/generatedImage.css b/ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/generatedImage.css deleted file mode 100644 index 6677b486..00000000 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/generatedImage.css +++ /dev/null @@ -1,19 +0,0 @@ -.generated-image { - position: relative; -} - -.image-contain { - position: relative; -} - -#save-button { - position: absolute; - top: 10px; - left: 10px; -} - -#use-button { - position: absolute; - top: 10px; - right: 10px; -} 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 dbc1166d..0337520b 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx @@ -9,9 +9,16 @@ import { doMakeImage, MakeImageKey } from "../../../api"; import AudioDing from "./audioDing"; -import GeneratedImage from "./generatedImage"; +import GeneratedImage from "../../molecules/generatedImage"; -import "./displayPanel.css"; +import { + displayPanel, + displayContainer, + CurrentDisplay, + previousImages, + previousImage +} from //@ts-ignore +"./displayPanel.css.ts"; type CompletedImagesType = { id: string; @@ -89,18 +96,22 @@ export default function DisplayPanel() { }, [setCompletedImages, queryClient, completedIds]); return ( -
-

Display Panel

+
{completedImages.length > 0 && ( -
- +
-
+
+ + + {/* TODO Put the in painting controls here */} +
+ +
{completedImages.map((image, index) => { if (void 0 !== image) { if (index == 0) { @@ -109,7 +120,7 @@ export default function DisplayPanel() { return (