idk how an AI could do better front end experience than me but aight.
This commit is contained in:
ForeverPyrite
@@ -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 class="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>
|
||||
@@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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,102 @@
|
||||
}
|
||||
|
||||
* {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user