Update static/index.html

static/index.html

@@ -446,58 +446,47 @@
             });
     }
 
-function sendInputs() {
+
+
+
+    async function sendInputs() {
     const inputs = document.getElementById("inputs").value;
-    if (!inputs) {
-        const imageBox = document.getElementById("resultContainer");
-        imageBox.innerHTML = "<p>Please enter a prompt before sending.</p>";
-        return;
-    }
-    
-            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) {
-                throw new Error('Network response was not ok');
-            }
-            return response.json();
-        })
-        .then(data => {
-            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
-        });
-}
+    // Check if the input field is empty
+    if (!inputs) {
+        resultContainer.innerHTML = `<p style="color: white;">Please enter a prompt before sending.</p>`;
+        return;
+    }
 
+    // Clear the result container
+    resultContainer.innerHTML = "";
 
+    // Display loading spinner
+    const loadingSpinner = document.getElementById('loadingSpinner');
+    loadingSpinner.style.display = 'block';
 
+    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
+        loadingSpinner.style.display = 'none';
 
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+
+        return response.json();
+    } catch (error) {
+        console.error('Error:', error);
+        resultContainer.innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
+    }
+}