foreverpyrite/screw-bardo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modernized and simplified the app.

Browse Source 
This wasn't a crazy rewrite or anything, I just updated it to the new
YouTube Transcript and OpenAI API's, as well as super simplifying the
code. On top of that, it now works single threaded, just using multiple
gunicorn threads for concurrency. It's a lot simplier and cleaner,
although not up to my current standards.
This commit is contained in:
foreverpyrite
2025-11-03 22:43:15 -06:00
parent c6b608f125
commit 1fd6711da0
12 changed files with 850 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/website/index.html
View File

@@ -1,32 +1,30 @@
<!DOCTYPE html>
<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="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<script defer src="{{ url_for('static', filename='script.js') }}"></script>
</head>
<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="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<script defer src="{{ url_for('static', filename='script.js') }}"></script>
</head>
<body class="font-sans flex justify-center items-center h-screen bg-[#1F1F1F] text-white">
<main class="flex flex-col w-11/12 h-[90vh] bg-[#2E2E2E] rounded-lg shadow-lg overflow-hidden">
<section id="response-section" class="flex-1 p-5 bg-[#1E1E1E] overflow-y-auto text-base leading-relaxed scroll-smooth">
<pre id="response-area" class="whitespace-pre-wrap">Response will appear here.</pre>
</section>
<body class="font-sans flex justify-center items-center h-screen bg-[#1F1F1F] text-white">
<main class="flex flex-col w-11/12 h-[90vh] bg-[#2E2E2E] rounded-lg shadow-lg overflow-hidden">
<section id="response-section" class="flex-1 p-5 bg-[#1E1E1E] overflow-y-auto text-base leading-relaxed scroll-smooth">
<pre id="response-area" class="whitespace-pre-wrap">Response will appear here.</pre>
</section>
<section class="py-4 px-5 bg-[#3A3A3A]">
<form id="url-form" hx-post="/process_url" hx-swap="none" class="flex gap-2">
<input id="url_box" type="url" name="url" placeholder="Paste the lecture URL here." required autofocus
class="flex-1 py-2 px-3 bg-[#4A4A4A] text-white text-base rounded-md focus:outline-none placeholder-[#B0B0B0]">
<button type="submit" id="submit" class="py-2 px-5 bg-[#5A5A5A] text-white text-base rounded-md hover:bg-[#7A7A7A] disabled:bg-[#3A3A3A] disabled:cursor-not-allowed">
Submit
</button>
</form>
</section>
</main>
</body>
</html>
<section class="py-4 px-5 bg-[#3A3A3A]">
<form id="url-form" class="flex gap-2">
<input id="url_box" type="url" name="url" placeholder="Paste the lecture URL here." required autofocus class="flex-1 py-2 px-3 bg-[#4A4A4A] text-white text-base rounded-md focus:outline-none placeholder-[#B0B0B0]">
<button type="submit" id="submit" class="py-2 px-5 bg-[#5A5A5A] text-white text-base rounded-md hover:bg-[#7A7A7A] disabled:bg-[#3A3A3A] disabled:cursor-not-allowed">
Submit
</button>
</form>
</section>
</main>
</body>
</html>

115
app/website/static/script.js
View File

@@ -1,71 +1,68 @@
document.addEventListener("DOMContentLoaded", () => {
const responseArea = document.getElementById('response-area');
const responseSection = document.getElementById('response-section');
const submitButton = document.getElementById('submit');
const urlBox = document.getElementById('url_box');
const form = document.getElementById('url-form');
// Before sending HTMX request, prepare UI and handle empty input
document.body.addEventListener('htmx:beforeRequest', function(evt) {
if (evt.detail.elt.id === 'url-form') {
const url = urlBox.value.trim();
if (!url) {
evt.detail.shouldCancel = true;
responseArea.innerText = 'Please enter a URL.';
return;
}
urlBox.value = '';
submitButton.disabled = true;
responseArea.innerText = 'Processing...';
// Simple URL validation regex (covers http/https and domains)
const urlPattern = /^(https?:\/\/)[\w.-]+(\.[\w\.-]+)+[/#?]?.*$/i;
form.addEventListener('submit', async (evt) => {
evt.preventDefault();
const url = urlBox.value.trim();
if (!url) {
responseArea.textContent = 'Please enter a URL.';
return;
}
});
document.body.addEventListener('htmx:afterRequest', function(evt) {
if (evt.detail.elt.id === 'url-form') {
const text = evt.detail.xhr.responseText.trim();
if (text === "Processing started. Check /stream_output for updates.") {
streamOutput(responseArea, responseSection, submitButton);
} else {
responseArea.innerText = text;
submitButton.disabled = false;
}
if (!urlPattern.test(url)) {
responseArea.textContent = 'Please enter a valid URL (must start with http:// or https://).';
return;
}
});
function streamOutput(responseArea, responseSection, submitButton) {
// 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");
// Prepare UI
urlBox.value = '';
submitButton.disabled = true;
responseArea.textContent = 'Processing...\n';
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;
try {
const response = await fetch('/process-url', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({ url }),
});
}
if (!response.ok) {
throw new Error(`Server returned ${response.status}`);
}
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
responseArea.textContent = ''; // clear before streaming
async function readChunk() {
const { done, value } = await reader.read();
if (done) {
submitButton.disabled = false;
return;
}
const chunk = decoder.decode(value, { stream: true });
responseArea.innerHTML += chunk;
responseSection.scrollTop = responseSection.scrollHeight;
await readChunk();
}
await readChunk();
} catch (err) {
console.error(err);
responseArea.textContent = `Error: ${err.message}`;
submitButton.disabled = false;
}
});
});