fixed most of the big css issues

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

@@ -2,6 +2,6 @@ input[size="4"] {
   width: 4.5rem;
 }
 
-#File-Body>#File-For {
+#File-Body > #File-For {
   display: none;
-}
+}

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

@@ -52,5 +52,5 @@ li {
 
 input[type="file"] {
   /* Dont show the file name */
-  color:transparent;
+  color: transparent;
-}
+}

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

@@ -32,7 +32,6 @@ export default function CreationPanel() {
       const reader = new FileReader();
       reader.onload = (e) => {
         if (e.target) {
-          debugger;
           setRequestOption("init_image", e.target.result);
         }
       };

ui/frontend/build_src/src/components/creationPanel/makeButton/index.tsx

@@ -10,6 +10,8 @@ export default function MakeButton() {
   const parallelCount = useImageCreate((state) => state.parallelCount);
   const builtRequest = useImageCreate((state) => state.builtRequest);
   const addNewImage = useImageQueue((state) => state.addNewImage);
+  const isRandomSeed = useImageCreate((state) => state.isRandomSeed());
+  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 
   const makeImages = () => {
     // the request that we have built
@@ -57,6 +59,13 @@ export default function MakeButton() {
         seed: seed,
       });
     });
+
+    // potentially update the seed
+    if (isRandomSeed) {
+      // update the seed for the next time we click the button
+      setRequestOption("seed", useRandomSeed());
+    }
+
   };
 
   return <button onClick={makeImages}>Make</button>;

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

@@ -1,5 +1,5 @@
 .display-panel {
-  padding:10px;
+  padding: 10px;
 }
 
 #display-container {
@@ -13,9 +13,10 @@
 #previous-images {
   margin-left: 30px;
   display: flex;
-  flex:auto;
+  flex: auto;
+  flex-wrap: wrap;
 }
 
 .previous-image {
   margin: 0 10px;
-}
+}

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

@@ -4,7 +4,6 @@
 
 .image-contain {
   position: relative;
-
 }
 
 #save-button {

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

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 
 import { ImageRequest, useImageCreate } from "../../../store/imageCreateStore";
 
-import './generatedImage.css';
+import "./generatedImage.css";
 
 type GeneretaedImageProps = {
   imageData: string;
@@ -62,21 +62,22 @@ export default function GeneratedImage({
   };
 
   const _handleUseAsInput = () => {
-
     setRequestOption("init_image", imageData);
-
   };
 
   // className={[statusClass, className].join(" ")}
 
   return (
-
     <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="save-button" onClick={_handleSave}>
-        <button id="use-button" onClick={_handleUseAsInput}>Use as Input</button>
+          Save
+        </button>
+        <button id="use-button" onClick={_handleUseAsInput}>
+          Use as Input
+        </button>
       </div>
     </div>
   );

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

@@ -83,7 +83,6 @@ export default function DisplayPanel() {
         .flat()
         .reverse();
       setCompletedImages(temp);
-      debugger;
     } else {
       setCompletedImages([]);
     }
@@ -95,7 +94,6 @@ export default function DisplayPanel() {
       <AudioDing ref={dingRef}></AudioDing>
       {completedImages.length > 0 && (
         <div id="display-container">
-
           <GeneratedImage
             key={completedImages[0].id}
             imageData={completedImages[0].data}
@@ -106,6 +104,7 @@ export default function DisplayPanel() {
             {completedImages.map((image, index) => {
 
               if (void 0 !== image) {
+                debugger;
                 if(index == 0){
                     return null;
                   }

ui/frontend/dist/index.css

@@ -1 +1 @@
-.App{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:360px 1fr;grid-template-rows:100px 1fr 300px;grid-template-areas:"header header header" "create display display" "footer footer footer"}@media screen and (max-width: 768px){.App{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 300px;grid-template-areas:"header" "create" "display" "footer"}}.header-layout{grid-area:header}.create-layout{grid-area:create}.display-layout{grid-area:display}.footer-layout{grid-area:footer}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.mb-4{margin-bottom:1rem}.starting{color:#f0ad4e}.error{color:#d9534f}.success{color:#5cb85c}.header-display{color:#fff;display:flex;align-items:center;justify-content:center}.status-display{margin-left:10px}input[size="4"]{width:4.5rem}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
+.App{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:360px 1fr;grid-template-rows:100px 1fr 300px;grid-template-areas:"header header header" "create display display" "footer footer footer"}@media screen and (max-width: 768px){.App{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 300px;grid-template-areas:"header" "create" "display" "footer"}}.header-layout{grid-area:header}.create-layout{grid-area:create}.display-layout{grid-area:display}.footer-layout{grid-area:footer}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.mb-4{margin-bottom:1rem}.starting{color:#f0ad4e}.error{color:#d9534f}.success{color:#5cb85c}.header-display{color:#fff;display:flex;align-items:center;justify-content:center}.status-display{margin-left:10px}input[size="4"]{width:4.5rem}#File-Body>#File-For{display:none}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.generated-image,.image-contain{position:relative}#save-button{position:absolute;top:10px;left:10px}#use-button{position:absolute;top:10px;right:10px}.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}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh}