Somewhat messy, but ready for production.

website/static/script.js

@@ -8,6 +8,9 @@ document.addEventListener("DOMContentLoaded", (event) => {
             response_area.innerText = 'Please enter a URL.';
             return;
         }
+        else {
+            document.getElementById('url_box').value = "";
+        }
         
         // First, process the URL
         fetch('/process_url', {
@@ -21,9 +24,17 @@ document.addEventListener("DOMContentLoaded", (event) => {
             if (!response.ok) {
                 throw new Error('Network response was not ok');
             }
-            // Start streaming once processing is started
-            submit_button.style.display = "none";
-            streamOutput(response_area);
+            // Extract the text from the response body
+            return response.text(); // Use .json() if the response is JSON
+        })
+        .then(text => {
+            submit_button.style.display = "none";    
+            if (text === "Processing started. Check /stream_output for updates.") {
+                streamOutput(response_area);
+            } else {
+                response_area.innerText = text; // Show any other response message
+                submit_button.style.display = "flex";
+            }
         })
         .catch(error => {
             console.error('Error processing URL:', error);
@@ -52,6 +63,7 @@ function streamOutput(response_area) {
                     // Decode and process the chunk
                     const chunk = decoder.decode(value, { stream: true });
                     response_area.innerHTML += chunk;
+                    response_area.scrollTop = response_area.scrollHeight
 
                     // Continue reading
                     readStream();