Merge commit '14b320bbdea91c3614bef5721dedf4ac6c8bdac5'

app/app.py

@@ -1,63 +1,68 @@
-from flask import Flask, render_template, Response, request
-from main import get_auto_transcript, get_video_id, create_and_stream, log, output_stream, awaiter 
-from asyncio import sleep
-from datetime import datetime
-import pytz
-import threading
+import logging
+import os
+from flask import Flask, render_template, Response, request, session
+from main import yoink, process, user_streams, stream_lock
+import uuid  # Import UUID
 
-
-  
 app = Flask(__name__, static_folder="website/static", template_folder="website")
+app.secret_key = os.urandom(24)  # Necessary for using sessions
+
+
+# Configure logging
+logging.basicConfig(
+    filename='./logs/app.log',
+    level=logging.DEBUG,
+    format='%(asctime)s %(levelname)s: %(message)s',
+    datefmt='%Y-%m-%d %H:%M:%S'
+)
+
+def create_session():
+    session_id = str(uuid.uuid4())
+    # This should never happen but I'm putting the logic there anyways
+    try:
+        if user_streams[session_id]:
+            session_id = create_session()
+    except KeyError:
+        pass
+    return session_id
+    
 
 @app.route('/')
 def home():
-    return render_template('index.html')
+    session_id = create_session()
+    session['id'] = session_id
+    logging.info(f"Home page accessed. Assigned initial session ID: {session_id}")
+    return render_template('index.html', session_id=session_id)
 
 @app.route('/process_url', methods=['POST'])
 def process_url():
-    global thread
-    log(f"\n\n\n## New Entry at {datetime.now(pytz.timezone('America/New_York')).strftime('%Y-%m-%d %H:%M:%S')}\n\n")
+    session_id = session.get('id')
+    if not session_id:
+        session_id = create_session()
+        session['id'] = session_id
+        logging.info(f"No existing session. Created new session ID: {session_id}")
+
     url = request.form['url']
-    log(f"URL: {url}\n")
-    # Extract the video ID from the URL
-    video_id = get_video_id(url)  # Modify this function to accept the URL
-    if not video_id:
-        log(f"Could not parse video id from URL: {url}")
-        return "Couldn't parse video ID from URL. (Are you sure you entered a valid YouTube.com or YouTu.be URL?)"
-    log(f"Video ID: {video_id}\n\n")
-    
-    # Get the transcript for that video ID
-    transcript = get_auto_transcript(video_id)
-    if (not transcript):
-        log("## Error: could not retrieve transcript, Assistant won't be called.")
-        return "Successfully parsed video ID from URL, however the ID was either invalid, the transcript was disabled by the video owner, or some other error was raised because of YouTube."
-    
-    thread = threading.Thread(name="create_stream", target=create_and_stream, args=(transcript,)) # The comma here is very intentional, it's so that it iterates it as a tuple rather than iterateing the string.
-    log("Stream preperation complete, sending reply...\n\n")
-    return Response("Processing started. Check /stream_output for updates.", content_type='text/plain', status=200)  # Add more detailed output if needed
+    logging.info(f"Received URL for processing from session {session_id}: {url}")
+    success, msg, status_code, = process(url, session_id)
+
+    if success:
+        logging.info(f"Processing started successfully for session {session_id}.")
+        return Response("Processing started. Check /stream_output for updates.", content_type='text/plain', status=200)
+    else:
+        logging.error(f"Processing failed for session {session_id}: {msg}")
+        return Response(msg, content_type='text/plain', status=status_code)
 
 @app.route('/stream_output')
 def stream_output():
-    def yoink():
-        log("<details>\n<summary>Starting stream thread...</summary>\n\n")
-        thread.start()
-        # Start streaming output from output_stream
-        log("Starting to stream output.")
-        while not output_stream.done:
-            if output_stream.buffer != []:
-                delta = output_stream.buffer.pop(0)
-                yield bytes(delta, encoding="utf-8")
-            else:
-                awaiter(sleep(0.05))
-        log(f"\nStream successfully completely.\n\n</details>\n\n---\n\n### Completed Assistant Response:\n{output_stream.response}\n\n---\n\n")
-        output_stream.reset()
-        thread.join()
-        log("\n### Task completed sucessfully without errors!")
-        return 
-    return Response(yoink(), content_type='text/plain', status=200)
+    session_id = session.get('id')
+    if not session_id or session_id not in user_streams:
+        logging.warning(f"Stream requested without a valid session ID: {session_id}")
+        return Response("No active stream for this session.", content_type='text/plain', status=400)
+    logging.info(f"Streaming output requested for session {session_id}.")
+    return Response(yoink(session_id), content_type='text/plain', status=200)
 
-
-
-
-if __name__ == '__main__': 
-    app.run(debug=True)
+if __name__ == '__main__':
+        logging.info("Starting Flask application.")
+        app.run(debug=True, threaded=True)  # Enable threaded to handle multiple requests
+    

app/website/index.html

@@ -2,29 +2,27 @@
 <html lang="en-us">
 
 <head>
-
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
     <title>Screw You Bardo</title>
-
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     <link rel="icon" type="image/x-icon" href="https://www.foreverpyrite.com/favicon.ico">
-    <script src="{{ url_for('static', filename='script.js')}}"></script>
-
+    <script defer src="{{ url_for('static', filename='script.js') }}"></script>
 </head>
 
 <body>
+    <main class="container">
+        <section id="response-section">
+            <pre id="response-area">Response will appear here.</pre>
+        </section>
 
-    <div class="content">
-        <pre id="response-area">Response will appear here.</pre>
-        <div class="form_box">
-            <input id="url_box" placeholder="Paste the lecture URL here." autofocus></input>
-            <input id="submit" type="submit" onclick=""></input>
-        </div>
-
-
-    </div>
+        <section class="form-section">
+            <form id="url-form">
+                <input type="url" id="url_box" name="url" placeholder="Paste the lecture URL here." required autofocus>
+                <button type="submit" id="submit">Submit</button>
+            </form>
+        </section>
+    </main>
 </body>
 
 </html>

app/website/static/script.js

@@ -1,18 +1,25 @@
-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 responseSection = document.getElementById('response-section');
+    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 +31,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;
+                        responseSection.scrollTop = responseSection.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;
-        });
-}

app/website/static/style.css

@@ -1,7 +1,5 @@
-
-
 @font-face {
-    font-family: 'nimbus_sans_d_otlight';
+    font-family: 'NimbusSansD';
     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;
@@ -9,70 +7,103 @@
 }
 
 * {
-    font-family: 'nimbus_sans_d_otlight';
-    color: white;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'NimbusSansD', sans-serif;
+    color: #FFFFFF;
 }
 
 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);
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #1F1F1F;
 }
 
-body .content {
+.container {
     display: flex;
     flex-direction: column;
-    align-self: center;
-    width: 75%;
-    max-width: 65vw;
-    height: 100%;
-    min-height: 100vh;
-    max-height: 100vh;
+    width: 85vw;
+    height: 90vh;
+    background-color: #2E2E2E;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+}
+
+#response-section {
+    flex: 1;
+    padding: 20px;
+    background-color: #1E1E1E;
+    overflow-y: auto;
+    font-size: 1rem;
+    line-height: 1.5;
+    scroll-behavior: smooth;
+}
+
+.form-section {
+    padding: 15px 20px;
+    background-color: #3A3A3A;
 }
 
 #response-area {
-    display: block;
-    height: 90%;
-    min-height: 90vh;
-    text-wrap: wrap;
-    flex-wrap: wrap;
-    align-content: flex-end;
-    overflow-y: auto;
+    white-space: pre-wrap;
 }
 
-.form_box {
+#url-form {
     display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-content: space-around;
+    gap: 10px;
 }
 
 #url_box {
-    display: flex;
-    height: 5%;
-    min-height: 5vh;
-    width: 90%;
-    min-width: 80vh;
-    background-color: rgb(31, 31, 31);
+    flex: 1;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    background-color: #4A4A4A;
+    color: #FFFFFF;
+    font-size: 1rem;
+    outline: none;
+}
+
+#url_box::placeholder {
+    color: #B0B0B0;
 }
 
 #submit {
-    display: flex;
-    width: 5%;
-    min-width: 3vw;
-    background-color: rgb(49, 49, 49);
-}
-#submit:hover {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    background-color: #5A5A5A;
+    color: #FFFFFF;
+    font-size: 1rem;
     cursor: pointer;
-    background-color: rgb(31, 31, 31);
+    transition: background-color 0.3s ease;
 }
 
-input {
-    border-radius: 15px;
+#submit:hover {
+    background-color: #7A7A7A;
 }
+
+#submit:disabled {
+    background-color: #3A3A3A;
+    cursor: not-allowed;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 600px) {
+    .container {
+        height: 95vh;
+    }
+
+    #url_box {
+        font-size: 0.9rem;
+    }
+
+    #submit {
+        font-size: 0.9rem;
+        padding: 10px;
+    }
+}