Update static/index.html

static/index.html

@@ -113,22 +113,7 @@
 }
 
         
-        .image-container {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-wrap: wrap;
-            gap: 10px;
-        }
-
-        .image-box {
-    width: 100px; /* Adjust the width as needed */
-    height: 200px; /* Adjust the height as needed */
-    border: 2px solid #ffffff; /* Set the border color to white */
-    border-radius: 10px;
-    overflow: hidden; /* Ensure the image does not overflow the box */
-    position: relative; /* Positioning context for absolute positioning of image */
-}
+    
 
 .spinner {
   border: 3px solid rgba(255, 255, 255, 0.3);
@@ -148,14 +133,7 @@
   100% { transform: rotate(360deg); }
 }
 
-        .image-box img {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            object-fit: cover; /* Maintain aspect ratio and cover the entire box */
-        }
+        
 
         
         
@@ -170,24 +148,9 @@
       color: #fff;
       outline: none;
         }
-          #image-box {
-  border: 2px solid blue;
-  width: 265px;
-  height: 300px;
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-  margin: auto;
-  margin-top: 30px;
-  padding-bottom: 7px;
-  gap: 14px;
-  background: linear-gradient(black, black) padding-box,
-              linear-gradient(to right, red, blue) border-box;
-  border-radius: 20px;
-  border: 2.5px solid transparent;
-}
+       
 
-#image-box p {
+#resultContainer p {
 
   font-size: 20px;
   color: white; 
@@ -355,6 +318,31 @@
 
 #generate:hover {
     background-color: #45a049; /* Hover effect */
+}
+#resultImage {
+    border: 2px solid blue;
+    width: 265px;
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+    margin: auto;
+    margin-top: 30px;
+    padding-bottom: 7px;
+    gap: 14px;
+    background: linear-gradient(black , black) padding-box,
+                linear-gradient(to right, red, blue) border-box;
+    border-radius: 20px;
+    border: 2.5px solid transparent;
+}
+
+
+
+#resultContainer img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: auto;
 }
     </style>
 </head>
@@ -415,12 +403,21 @@
         <br>
         	    <div>
                 <button id="generate" onclick="sendInputs()">generate image </button>
-               
+                 
             </div>
-        <div id="output-container" class="image-container">
-            <div id="image-box" class="image-box">
-                <p>Your Generated Image Will Appear Here</p>
-                 <div id="sendSpinner" class="spinner" style="display: none;"></div>
+             <div id="resultImage">
+    
+    <div id="loadingSpinner" style="display: none;"></div>
+    <div id="resultContainer">
+<p>Your Generated Image Will Appear Here</p>
+</div>
+            
+            
+            
+            
+            
+          
+               
             </div>
         </div>
     </div>
@@ -452,17 +449,21 @@
 function sendInputs() {
     const inputs = document.getElementById("inputs").value;
     if (!inputs) {
-        const imageBox = document.getElementById("image-box");
-        imageBox.innerHTML = "<p>Please enter prompt before sending.</p>";
+        const imageBox = document.getElementById("resultContainer");
+        imageBox.innerHTML = "<p>Please enter a prompt before sending.</p>";
         return;
     }
     
-    showSpinner('sendSpinner');
+            const loadingSpinner = document.getElementById('loadingSpinner');
+            loadingSpinner.style.display = 'block';
     const noiseLevel = document.getElementById("noise_level").value;
     const isNegative = document.getElementById("is_negative").value;
     const steps = document.getElementById("steps").value;
     const cfgScale = document.getElementById("cfg_scale").value;
     const seed = document.getElementById("seed").value;
+    
+    const resultContainer = document.getElementById("resultContainer");
+
     fetch(`/send_inputs?inputs=${encodeURIComponent(inputs)}&noise_level=${noiseLevel}&is_negative=${isNegative}&steps=${steps}&cfg_scale=${cfgScale}&seed=${seed}`)
         .then(response => {
             if (!response.ok) {
@@ -471,8 +472,10 @@ function sendInputs() {
             return response.json();
         })
         .then(data => {
-            const imageBox = document.getElementById("image-box");
             const img = new Image();
+            img.onload = () => {
+                loadingSpinner.style.display = 'none'; // Hide the loading spinner after the image is loaded
+            };
             img.src = 'data:image/jpeg;base64,' + data.image_base64;
             const maxWidth = 200;
             const maxHeight = 200;
@@ -481,17 +484,29 @@ function sendInputs() {
                 img.width *= ratio;
                 img.height *= ratio;
             }
-            imageBox.appendChild(img);
-            hideSpinner('sendSpinner');
+            resultContainer.innerHTML = ""; // Clear previous content
+            resultContainer.appendChild(img); // Append new image
         })
         .catch(error => {
             console.error('Error:', error);
-            const imageBox = document.getElementById("image-box");
-            imageBox.innerHTML = "<p>An error occurred. Please try again later.</p>";
-            hideSpinner('sendSpinner');
+            resultContainer.innerHTML = "<p>An error occurred. Please try again later.</p>";
+            loadingSpinner.style.display = 'none'; // Hide the loading spinner on error
         });
 }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
 function toggleAdvancedOptions() {
     const advancedOptions = document.getElementById("advanced-options");
     if (advancedOptions.style.display === "none") {