Pulling from 'dev' (streaming is here)

website/static/script.js

@@ -1,17 +1,18 @@
-
 document.addEventListener("DOMContentLoaded", (event) => {
-    document.getElementById('submit').addEventListener('click', function() {
+    const response_area = document.getElementById('response-area');
+    const submit_button = document.getElementById('submit')
+    submit_button.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;
         }
-        else{
-            response_area.innerText = "Sending URL and retriving transcript."
+        else {
+            document.getElementById('url_box').value = "";
         }
-
+        
+        // First, process the URL
         fetch('/process_url', {
             method: 'POST',
             headers: {
@@ -19,13 +20,61 @@ document.addEventListener("DOMContentLoaded", (event) => {
             },
             body: new URLSearchParams({ url: url })
         })
-        .then(response => response.text())
-        .then(data => {
-            response_area.innerText = data;
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            // 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:', error);
-            response_area.innerText = 'An error occurred. Please try again.';
+            console.error('Error processing URL:', error);
+            response_area.innerText = 'Error processing URL: ' + error.message;
+            submit_button.style.display = "flex";
         });
     });
 });
+
+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");
+
+            function readStream() {
+                reader.read().then(({ done, value }) => {
+                    if(done) {
+                        document.getElementById('submit').style.display = "flex";
+                        return
+                    }
+                    // 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();
+                });
+            }
+
+            // Start reading the stream
+            readStream();
+        })
+        .catch(error => {
+            console.error('Error fetching stream:', error);
+            response_area.innerText = 'Error fetching stream: ' + error.message;
+        });
+}

website/static/style.css

@@ -40,9 +40,10 @@ body .content {
     display: block;
     height: 90%;
     min-height: 90vh;
-    overflow: auto;
+    text-wrap: wrap;
     flex-wrap: wrap;
     align-content: flex-end;
+    overflow-y: auto;
 }
 
 .form_box {