Streaming Update (NEEDS OPTIMIZATIONS AND FAILSAFES!!!!!!!!!!!!!!!!!!!!!!)

website/static/script.js

@@ -1,13 +1,14 @@
-
 document.addEventListener("DOMContentLoaded", (event) => {
+    const response_area = document.getElementById('response-area');
     document.getElementById('submit').addEventListener('click', function() {
         var url = document.getElementById('url_box').value;
-        const response_area = document.getElementById('response-area');
 
         if (!url) {
             response_area.innerText = 'Please enter a URL.';
             return;
         }
+        
+        // First, process the URL
         fetch('/process_url', {
             method: 'POST',
             headers: {
@@ -15,6 +16,26 @@ document.addEventListener("DOMContentLoaded", (event) => {
             },
             body: new URLSearchParams({ url: url })
         })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            // Start streaming once processing is started
+            streamOutput(response_area);
+        })
+        .catch(error => {
+            console.error('Error processing URL:', error);
+            response_area.innerText = 'Error processing URL: ' + error.message;
+        });
+    });
+});
+
+function streamOutput(response_area) {
+    // Fetch the streaming output
+    const streamResponsePromise = fetch('/stream_output');
+    response_area.innerHTML = "" 
+
+    streamResponsePromise
         .then(response => {
             const reader = response.body.getReader();
             const decoder = new TextDecoder("utf-8");
@@ -28,14 +49,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
 
                     // Decode and process the chunk
                     const chunk = decoder.decode(value, { stream: true });
-
-                    // Split the received chunk by new line to handle multiple lines (if any)
-                    chunk.split('\n').forEach(data => {
-                        if (data.trim()) { // Avoid empty strings
-                            // Update the inner HTML of the output div
-                            response_area.innerHTML += `<p>${data}</p>`;
-                        }
-                    });
+                    response_area.innerHTML += chunk;
 
                     // Continue reading
                     readStream();
@@ -47,6 +61,6 @@ document.addEventListener("DOMContentLoaded", (event) => {
         })
         .catch(error => {
             console.error('Error fetching stream:', error);
+            response_area.innerText = 'Error fetching stream: ' + error.message;
         });
-    });
-});
+}