Update static/index.html

static/index.html

@@ -448,52 +448,55 @@
 
 
 
-  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';
 
+
+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) {
+        document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Please enter a prompt before sending.</p>`;
+        return;
+    }
 
     try {
-        const response = await fetch(`/send_inputs?inputs=${encodeURIComponent(inputs)}&noise_level=${noiseLevel}&is_negative=${isNegative}&steps=${steps}&cfg_scale=${cfgScale}&seed=${seed}`);
+        // Clear the result container
+        document.getElementById('resultContainer').innerHTML = "";
 
-        if (!response.ok) {
-            throw new Error('Network response was not ok');
-        }
+        // Display loading spinner
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        loadingSpinner.style.display = 'block';
 
-        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;
+        // Fetch data from the server
+        const response = await fetch(`/send_inputs?inputs=${encodeURIComponent(inputs)}&noise_level=${noiseLevel}&is_negative=${isNegative}&steps=${steps}&cfg_scale=${cfgScale}&seed=${seed}`);
+
+        // Check if the response is successful
+        if (response.ok) {
+            const resultContainer = document.getElementById('resultContainer');
+            const data = await response.json();
+            const img = document.createElement('img');
+            img.style.maxWidth = '100%'; // Adjust this value as needed
+            img.style.maxHeight = '100%'; // Adjust this value as needed
+            img.src = 'data:image/jpeg;base64,' + data.image_base64;
+            resultContainer.appendChild(img);
+        } else {
+            document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
         }
-        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
+        document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
+    } finally {
+        // Hide loading spinner regardless of success or failure
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        loadingSpinner.style.display = 'none';
     }
 }
 
@@ -503,11 +506,6 @@
 
 
 
-
-
-
-
-
 function toggleAdvancedOptions() {
     const advancedOptions = document.getElementById("advanced-options");
     if (advancedOptions.style.display === "none") {