Update index.html

index.html

@@ -76,20 +76,38 @@
             </button>
         </div>
 
+        <!-- Response Display Area -->
+        <div id="response-display" class="pt-8 text-center min-h-[4rem] text-lg font-medium text-gray-400">
+            <!-- Messages will appear here -->
+        </div>
+
     </div>
 
     <script>
         const BASE_URL = 'https://32d5c4f4e919.ngrok-free.app';
         const prevBtn = document.getElementById('prev-btn');
         const nextBtn = document.getElementById('next-btn');
+        const responseDisplay = document.getElementById('response-display');
+
+        /**
+         * Updates the UI display with the given message and style.
+         * @param {string} message - The text to display.
+         * @param {string} type - 'success' or 'error'.
+         */
+        function updateDisplay(message, type) {
+            responseDisplay.textContent = message;
+            responseDisplay.classList.remove('text-green-400', 'text-red-400', 'text-gray-400');
+            if (type === 'success') {
+                responseDisplay.classList.add('text-green-400');
+            } else if (type === 'error') {
+                responseDisplay.classList.add('text-red-400');
+            } else {
+                 responseDisplay.classList.add('text-gray-400');
+            }
+        }
 
         /**
          * Handles the API call with exponential backoff for resilience.
-         * Now includes explicit check for Content-Type to avoid JSON parsing errors 
-         * when the server returns HTML (e.g., an error page).
-         * @param {string} fullUrl - The full URL to fetch.
-         * @param {number} retries - Maximum number of retry attempts.
-         * @param {number} delay - Initial delay in milliseconds.
          */
         async function safeFetch(fullUrl, retries = 3, delay = 1000) {
             for (let i = 0; i < retries; i++) {
@@ -98,28 +116,23 @@
                     const contentType = response.headers.get("content-type");
 
                     if (!response.ok) {
-                        // Handle non-200 HTTP status codes
                         const responseText = await response.text();
                         throw new Error(`HTTP error ${response.status}: ${responseText.substring(0, 100)}...`);
                     }
 
                     if (!contentType || !contentType.includes("application/json")) {
-                        // Handle correct HTTP status but unexpected body type (e.g., HTML error page)
                         const responseText = await response.text();
                         throw new Error(`Content-Type error! Expected 'application/json' but received: ${contentType || 'None'}. Server body starts with: ${responseText.substring(0, 50)}...`);
                     }
                     
-                    // Parse JSON only if checks pass
                     return await response.json();
 
                 } catch (error) {
-                    // Log the specific error during retry
                     console.error(`Attempt ${i + 1} failed for ${fullUrl}:`, error.message);
                     if (i < retries - 1) {
                         await new Promise(resolve => setTimeout(resolve, delay));
-                        delay *= 2; // Exponential backoff
+                        delay *= 2; 
                     } else {
-                        // On final attempt, re-throw the error
                         throw new Error(`Failed to complete request to ${fullUrl} after ${retries} attempts. Reason: ${error.message}`);
                     }
                 }
@@ -128,21 +141,24 @@
 
         /**
          * Main function to handle button click and send request.
-         * @param {string} endpoint - The path to append to the base URL (e.g., '/next').
          */
         async function sendRequest(endpoint) {
             const fullUrl = `${BASE_URL}${endpoint}`;
 
-            // Disable buttons to indicate loading state
+            // Disable buttons and show loading state
             prevBtn.disabled = true;
             nextBtn.disabled = true;
+            updateDisplay("Connecting to backend...", 'loading');
             console.log(`Sending request to: ${fullUrl}`);
 
             try {
                 const result = await safeFetch(fullUrl);
+                // Extract and display the "Statement" from your JSON response
+                updateDisplay(result.Statement || "Success! JSON received.", 'success');
                 console.log(`SUCCESS: Response from ${endpoint}`, result);
             } catch (error) {
-                // Log detailed error to console
+                // Display the detailed error on the screen
+                updateDisplay(`Connection Error: ${error.message}`, 'error');
                 console.error(`ERROR: Failed request to ${endpoint}`, error.message);
             } finally {
                 // Enable buttons regardless of success or failure
@@ -154,6 +170,9 @@
         // Event listeners for the buttons
         prevBtn.addEventListener('click', () => sendRequest(prevBtn.dataset.endpoint));
         nextBtn.addEventListener('click', () => sendRequest(nextBtn.dataset.endpoint));
+        
+        // Set initial message
+        updateDisplay("Ready. Please ensure your FastAPI server is running.", 'loading');
 
     </script>
 </body>