letter box image

ui/frontend/build_src/src/components/layouts/Beta/index.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+
+export default function Beta() {
+  return (
+    <div>
+      <h1>Beta</h1>
+    </div>
+  );
+};

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',
+});
+

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 (
-    <div className={["generated-image", className].join(" ")}>
+    <div className={[generatedImage, className].join(" ")}>
       <p>{metadata.prompt}</p>
-      <div className="image-contain">
+      <div className={imageContain}>
-        <img src={imageData} alt="generated" />
+        <img className={image} src={imageData} alt="generated" />
-        <button id="save-button" onClick={_handleSave}>
+        <button className={saveButton} onClick={_handleSave}>
           Save
         </button>
-        <button id="use-button" onClick={_handleUseAsInput}>
+        <button className={useButton} onClick={_handleUseAsInput}>
           Use as Input
         </button>
       </div>

ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css

@@ -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;
-}

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',
+});
+
+

ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/generatedImage.css

@@ -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;
-}

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 (
-    <div className="display-panel">
+    <div className={displayPanel}>
-      <h1>Display Panel</h1>
       <AudioDing ref={dingRef}></AudioDing>
       {completedImages.length > 0 && (
-        <div id="display-container">
+        <div className={displayContainer}>
+
+          <div className={CurrentDisplay}>
             <GeneratedImage
               key={completedImages[0].id}
               imageData={completedImages[0].data}
               metadata={completedImages[0].info}
             />
 
-          <div id="previous-images">
+            {/* TODO Put the in painting controls here */}
+          </div>
+
+          <div className={previousImages}>
             {completedImages.map((image, index) => {
               if (void 0 !== image) {
                 if (index == 0) {
@@ -109,7 +120,7 @@ export default function DisplayPanel() {
 
                 return (
                   <GeneratedImage
-                    className="previous-image"
+                    className={previousImage}
                     key={image.id}
                     imageData={image.data}
                     metadata={image.info}