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>
-      <img src={imageData} alt="generated" />
-      <button onClick={_handleSave}>Save</button>
-      <button onClick={_handleUseAsInput}>Use as Input</button>
+
+    <div className={["generated-image", className].join(" ")}>
+      <p>{metadata.prompt}</p>
+      <div className="image-contain">
+        <img src={imageData} alt="generated" />
+        <button id="save-button" onClick={_handleSave}>Save</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.map((image, index) => {
-          // if(index == 0){
-          //   return null;
-          // }
-          if (void 0 !== image) {
-            return (
-              <GeneratedImage
-                key={image.id}
-                imageData={image.data}
-                metadata={image.info}
-              />
-            );
-          } else {
-            console.warn("image is undefined", image, index);
-            return null;
-          }
-        })}
-      </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 (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;
 }