88 lines
3.2 KiB
JavaScript
88 lines
3.2 KiB
JavaScript
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) {
|
|
responseArea.innerText = 'Please enter a URL.';
|
|
return;
|
|
}
|
|
|
|
// Clear the input and update UI
|
|
urlBox.value = "";
|
|
submitButton.disabled = true;
|
|
responseArea.innerText = 'Processing...';
|
|
|
|
// 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');
|
|
}
|
|
return response.text();
|
|
})
|
|
.then(text => {
|
|
if (text === "Processing started. Check /stream_output for updates.") {
|
|
streamOutput(responseArea);
|
|
} else {
|
|
responseArea.innerText = text;
|
|
submitButton.disabled = false;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error processing URL:', error);
|
|
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;
|
|
});
|
|
}
|
|
});
|