Dockerized

app/website/static/script.js

@@ -0,0 +1,80 @@
+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;
+
+        if (!url) {
+            response_area.innerText = 'Please enter a URL.';
+            return;
+        }
+        else {
+            document.getElementById('url_box').value = "";
+        }
+        
+        // First, process the URL
+        fetch('/process_url', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+            },
+            body: new URLSearchParams({ url: url })
+        })
+        .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 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;
+        });
+}

app/website/static/style.css

@@ -0,0 +1,78 @@
+
+
+@font-face {
+    font-family: 'nimbus_sans_d_otlight';
+    src: url('font-files/nimbus-sans-d-ot-light.woff2') format('woff2'),
+         url('font-files/nimbus-sans-d-ot-light.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+* {
+    font-family: 'nimbus_sans_d_otlight';
+    color: white;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 100vw;
+    height: 100%;
+    min-height: 100vh;
+    max-height: 100vh;
+    margin: 0;
+    background-color: rgb(31, 31, 31);
+}
+
+body .content {
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+    width: 75%;
+    max-width: 65vw;
+    height: 100%;
+    min-height: 100vh;
+    max-height: 100vh;
+}
+
+#response-area {
+    display: block;
+    height: 90%;
+    min-height: 90vh;
+    text-wrap: wrap;
+    flex-wrap: wrap;
+    align-content: flex-end;
+    overflow-y: auto;
+}
+
+.form_box {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-content: space-around;
+}
+
+#url_box {
+    display: flex;
+    height: 5%;
+    min-height: 5vh;
+    width: 90%;
+    min-width: 80vh;
+    background-color: rgb(31, 31, 31);
+}
+
+#submit {
+    display: flex;
+    width: 5%;
+    min-width: 3vw;
+    background-color: rgb(49, 49, 49);
+}
+#submit:hover {
+    cursor: pointer;
+    background-color: rgb(31, 31, 31);
+}
+
+input {
+    border-radius: 15px;
+}