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

website/static/script.js

@@ -8,10 +8,6 @@ document.addEventListener("DOMContentLoaded", (event) => {
             response_area.innerText = 'Please enter a URL.';
             return;
         }
-        else{
-            response_area.innerText = "Sending URL and retriving transcript."
-        }
-
         fetch('/process_url', {
             method: 'POST',
             headers: {
@@ -19,13 +15,38 @@ document.addEventListener("DOMContentLoaded", (event) => {
             },
             body: new URLSearchParams({ url: url })
         })
-        .then(response => response.text())
-        .then(data => {
-            response_area.innerText = data;
+        .then(response => {
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder("utf-8");
+
+            function readStream() {
+                reader.read().then(({ done, value }) => {
+                    if (done) {
+                        console.log("Stream finished.");
+                        return;
+                    }
+
+                    // 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>`;
+                        }
+                    });
+
+                    // Continue reading
+                    readStream();
+                });
+            }
+
+            // Start reading the stream
+            readStream();
         })
         .catch(error => {
-            console.error('Error:', error);
-            response_area.innerText = 'An error occurred. Please try again.';
+            console.error('Error fetching stream:', error);
         });
     });
 });