Update static/index.html

static/index.html

@@ -448,47 +448,55 @@
 
 
 
-    async function sendInputs() {
+  async function sendInputs() {
     const inputs = document.getElementById("inputs").value;
-    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");
-
-    // Check if the input field is empty
     if (!inputs) {
-        resultContainer.innerHTML = `<p style="color: white;">Please enter a prompt before sending.</p>`;
+        const imageBox = document.getElementById("resultContainer");
+        imageBox.innerHTML = "<p>Please enter a prompt before sending.</p>";
         return;
     }
 
-    // Clear the result container
-    resultContainer.innerHTML = "";
-
-    // Display loading spinner
     const loadingSpinner = document.getElementById('loadingSpinner');
-    showSpinner('loadingSpinner');
-try {
-            const response = await fetch(`/send_inputs?inputs=${encodeURIComponent(inputs)}&noise_level=${noiseLevel}&is_negative=${isNegative}&steps=${steps}&cfg_scale=${cfgScale}&seed=${seed}`);
+    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;
 
-            if (!response.ok) {
-                throw new Error('Network response was not ok');
-            }
+    const resultContainer = document.getElementById("resultContainer");
 
-            const data = await response.json();
+    try {
+        const response = await fetch(`/send_inputs?inputs=${encodeURIComponent(inputs)}&noise_level=${noiseLevel}&is_negative=${isNegative}&steps=${steps}&cfg_scale=${cfgScale}&seed=${seed}`);
 
-            // Hide loading spinner
-            hideSpinner('loadingSpinner');
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
 
-            // Display the result image
-            const resultImage = document.getElementById('resultContainer');
-            resultImage.innerHTML = `<img src="${data.image_url}" alt="Generated Image">`;
-        } catch (error) {
-            console.error('Error:', error);
-            resultContainer.innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
+        const data = await response.json();
+
+        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;
+        if (img.width > maxWidth || img.height > maxHeight) {
+            const ratio = Math.min(maxWidth / img.width, maxHeight / img.height);
+            img.width *= ratio;
+            img.height *= ratio;
         }
+        resultContainer.innerHTML = ""; // Clear previous content
+        resultContainer.appendChild(img); // Append new image
+    } catch (error) {
+        console.error('Error:', error);
+        resultContainer.innerHTML = "<p>An error occurred. Please try again later.</p>";
+        loadingSpinner.style.display = 'none'; // Hide the loading spinner on error
     }
+}
+