working display panel

ui/frontend/build_src/src/components/creationPanel/creationPanel.css

@@ -1,3 +1,6 @@
+.create-layout {
+  padding: 10px;
+}
 .panel-box-toggle-btn {
   display: block;
   width: 100%;

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

@@ -0,0 +1,21 @@
+.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;
+}
+
+.previous-image {
+  margin: 0 10px;
+}

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

@@ -0,0 +1,20 @@
+.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/displayPanel/generatedImage/index.tsx

@@ -2,14 +2,18 @@ import React, { useCallback } from "react";
 
 import { ImageRequest, useImageCreate } from "../../../store/imageCreateStore";
 
+import './generatedImage.css';
+
 type GeneretaedImageProps = {
   imageData: string;
   metadata: ImageRequest;
+  className?: string;
 };
 
 export default function GeneratedImage({
   imageData,
   metadata,
+  className,
 }: GeneretaedImageProps) {
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 
@@ -59,32 +63,21 @@ export default function GeneratedImage({
 
   const _handleUseAsInput = () => {
 
-    debugger;
     setRequestOption("init_image", imageData);
-    // initImageSelector.value = null
-    // initImagePreview.src = imgBody
 
-    // imgUseBtn.addEventListener('click', function() {
-    //   initImageSelector.value = null
-    //   initImagePreview.src = imgBody
-
-    //   initImagePreviewContainer.style.display = 'block'
-    //   promptStrengthContainer.style.display = 'block'
-
-    //   // maskSetting.style.display = 'block'
-
-    //   randomSeedField.checked = false
-    //   seedField.value = seed
-    //   seedField.disabled = false
-    // })
   };
 
+  // className={[statusClass, className].join(" ")}
+
   return (
-    <div className="generated-image">
+
-      <p>Your image</p>
+    <div className={["generated-image", className].join(" ")}>
+      <p>{metadata.prompt}</p>
+      <div className="image-contain">
         <img src={imageData} alt="generated" />
-      <button onClick={_handleSave}>Save</button>
+        <button id="save-button" onClick={_handleSave}>Save</button>
-      <button onClick={_handleUseAsInput}>Use as Input</button>
+        <button id="use-button" onClick={_handleUseAsInput}>Use as Input</button>
+      </div>
     </div>
   );
 }

ui/frontend/build_src/src/components/displayPanel/index.tsx

@@ -11,6 +11,8 @@ import AudioDing from "./audioDing";
 
 import GeneratedImage from "./generatedImage";
 
+import './displayPanel.css';
+
 type CompletedImagesType = {
   id: string;
   data: string;
@@ -81,6 +83,7 @@ export default function DisplayPanel() {
         .flat()
         .reverse();
       setCompletedImages(temp);
+      debugger;
     } else {
       setCompletedImages([]);
     }
@@ -89,26 +92,42 @@ export default function DisplayPanel() {
   return (
     <div className="display-panel">
       <h1>Display Panel</h1>
-      <div>
       <AudioDing ref={dingRef}></AudioDing>
+      {completedImages.length > 0 && (
+        <div id="display-container">
+
+          <GeneratedImage
+            key={completedImages[0].id}
+            imageData={completedImages[0].data}
+            metadata={completedImages[0].info}
+          />
+
+          <div id="previous-images">
             {completedImages.map((image, index) => {
-          // if(index == 0){
+
-          //   return null;
-          // }
               if (void 0 !== image) {
+                if(index == 0){
+                    return null;
+                  }
+
                 return (
                   <GeneratedImage
+                    className="previous-image"
                     key={image.id}
                     imageData={image.data}
                     metadata={image.info}
                   />
                 );
+        
               } else {
                   console.warn("image is undefined", image, index);
                   return null;
               }
             })}
           </div>
+
+        </div>
+      )}
     </div>
   );
 }

ui/frontend/build_src/src/index.css

@@ -10,9 +10,4 @@ body {
   left: 0;
   width: 100vw;
   height: 100vh;
-  /* pointer-events: none; */
-
-  /* this are used while we still have the original app code in the index.html */
-  /* display: none; */
-  z-index: 1;
 }