72 lines
2.9 KiB
JavaScript
72 lines
2.9 KiB
JavaScript
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');
|
|
|
|
// 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...';
|
|
}
|
|
});
|
|
|
|
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;
|
|
}
|
|
}
|
|
});
|
|
|
|
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");
|
|
|
|
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;
|
|
});
|
|
}
|
|
});
|