idk how an AI could do better front end experience than me but aight.

app/website/static/script.js

@@ -1,18 +1,24 @@
-document.addEventListener("DOMContentLoaded", (event) => {
-    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;
+document.addEventListener("DOMContentLoaded", () => {
+    const responseArea = document.getElementById('response-area');
+    const submitButton = document.getElementById('submit');
+    const urlForm = document.getElementById('url-form');
+    const urlBox = document.getElementById('url_box');
+
+    urlForm.addEventListener('submit', function(event) {
+        event.preventDefault(); // Prevent form from submitting the traditional way
+        const url = urlBox.value.trim();
 
         if (!url) {
-            response_area.innerText = 'Please enter a URL.';
+            responseArea.innerText = 'Please enter a URL.';
             return;
         }
-        else {
-            document.getElementById('url_box').value = "";
-        }
-        
-        // First, process the URL
+
+        // Clear the input and update UI
+        urlBox.value = "";
+        submitButton.disabled = true;
+        responseArea.innerText = 'Processing...';
+
+        // Process the URL
         fetch('/process_url', {
             method: 'POST',
             headers: {
@@ -24,57 +30,58 @@ document.addEventListener("DOMContentLoaded", (event) => {
             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
+            return response.text();
         })
         .then(text => {
-            submit_button.style.display = "none";    
             if (text === "Processing started. Check /stream_output for updates.") {
-                streamOutput(response_area);
+                streamOutput(responseArea);
             } else {
-                response_area.innerText = text; // Show any other response message
-                submit_button.style.display = "flex";
+                responseArea.innerText = text;
+                submitButton.disabled = false;
             }
         })
         .catch(error => {
             console.error('Error processing URL:', error);
-            response_area.innerText = 'Error processing URL: ' + error.message;
-            submit_button.style.display = "flex";
+            responseArea.innerText = 'Error processing URL: ' + error.message;
+            submitButton.disabled = false;
         });
     });
+
+    function streamOutput(responseArea) {
+        // Fetch the streaming output
+        fetch('/stream_output')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder("utf-8");
+
+                responseArea.innerHTML = "";
+
+                function readStream() {
+                    reader.read().then(({ done, value }) => {
+                        if (done) {
+                            submitButton.disabled = false;
+                            return;
+                        }
+                        const chunk = decoder.decode(value, { stream: true });
+                        responseArea.innerHTML += chunk;
+                        responseArea.scrollTop = responseArea.scrollHeight;
+                        readStream();
+                    }).catch(error => {
+                        console.error('Error reading stream:', error);
+                        responseArea.innerText = 'Error reading stream: ' + error.message;
+                        submitButton.disabled = false;
+                    });
+                }
+
+                readStream();
+            })
+            .catch(error => {
+                console.error('Error fetching stream:', error);
+                responseArea.innerText = 'Error fetching stream: ' + error.message;
+                submitButton.disabled = false;
+            });
+    }
 });
-
-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;
-        });
-}