streaming actually works 🤨

website/static/script.js

@@ -1,6 +1,7 @@
 document.addEventListener("DOMContentLoaded", (event) => {
     const response_area = document.getElementById('response-area');
-    document.getElementById('submit').addEventListener('click', function() {
+    const submit_button = document.getElementById('submit')
+    submit_button.addEventListener('click', function() {
         var url = document.getElementById('url_box').value;
 
         if (!url) {
@@ -21,11 +22,13 @@ document.addEventListener("DOMContentLoaded", (event) => {
                 throw new Error('Network response was not ok');
             }
             // Start streaming once processing is started
+            submit_button.style.display = "none";
             streamOutput(response_area);
         })
         .catch(error => {
             console.error('Error processing URL:', error);
             response_area.innerText = 'Error processing URL: ' + error.message;
+            submit_button.style.display = "flex";
         });
     });
 });
@@ -42,11 +45,10 @@ function streamOutput(response_area) {
 
             function readStream() {
                 reader.read().then(({ done, value }) => {
-                    if (done) {
-                        console.log("Stream finished.");
-                        return;
+                    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;

website/static/style.css

@@ -37,10 +37,10 @@ body .content {
 }
 
 #response-area {
-    display: block;
+    display: flex;
     height: 90%;
     min-height: 90vh;
-    overflow: auto;
+    text-wrap: wrap;
     flex-wrap: wrap;
     align-content: flex-end;
 }