Update index.html

index.html

@@ -6,50 +6,51 @@
 <title>Image Generator</title>
 <script>
 async function generateImage(e) {
-  e.preventDefault();
+    e.preventDefault();
 
-  const generateButton = document.getElementById('generate-btn');
-  const promptInput = document.getElementById('prompt-input');
+    const generateButton = document.getElementById('generate-btn');
+    const promptInput = document.getElementById('prompt-input');
 
-  // Check if the input is empty and return early if true
-  if (!promptInput.value.trim()) {
-    alert('Please enter a prompt.');
-    return;
-  }
+    if (!promptInput.value.trim()) {
+        alert('Please enter a prompt.');
+        return;
+    }
+
+    // Disable the button and change its text to indicate loading
+    generateButton.disabled = true;
+    generateButton.innerText = 'Generating...';
+
+    try {
+        const response = await fetch('https://2c70-35-198-254-120.ngrok-free.app/generate-image/', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded'
+            },
+            body: `prompt=${encodeURIComponent(promptInput.value)}`
+        });
 
-  // Disable the button and change its text to indicate loading
-  generateButton.disabled = true;
-  generateButton.innerText = 'Generating...';
+        const data = await response.json();
 
-  try {
-    // Make a POST request to the API endpoint
-    const response = await fetch('https://742b-35-198-254-120.ngrok-free.app/generate-image/', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded'
-      },
-      // Send the prompt as form data
-      body: `prompt=${encodeURIComponent(promptInput.value)}`
-    });
+        console.log(data); // Debugging: Log the API response to ensure data structure
 
-    // Parse the JSON response
-    const data = await response.json();
+        if (response.ok) {
+            // Assuming 'data.imageBase64' is the correct path to access your base64 image data
+            const imageBase64 = data.imageBase64; // Check if this key matches your API's response
 
-    if (response.ok) {
-      // Get the image base64 data from the response
-      document.getElementById('generated-image').src = `data:image/png;base64,${data.image_base64}`;
-    } else {
-      console.error('Error from API:', data);
-      alert('Failed to generate image.');
+            // Ensure you're using the correct MIME type: replace 'image/png' with the appropriate type if different
+            document.getElementById('generated-image').src = `data:image/png;base64,${imageBase64}`;
+        } else {
+            console.error('Error from API:', data);
+            alert('Failed to generate image.');
+        }
+    } catch (error) {
+        console.error('Network or other error:', error);
+        alert('Failed to generate image.');
+    } finally {
+        // Re-enable the button and reset its text regardless of the outcome
+        generateButton.disabled = false;
+        generateButton.innerText = 'Generate';
     }
-  } catch (error) {
-    console.error('Network or other error:', error);
-    alert('Failed to generate image.');
-  } finally {
-    // Re-enable the button and reset its text regardless of the outcome
-    generateButton.disabled = false;
-    generateButton.innerText = 'Generate';
-  }
 }
 </script>
 </head>