File size: 3,547 Bytes
57328cd 1bd6599 57328cd 1bd6599 57328cd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("outputVideo").classList.add("hidden");
document.getElementById("downloadBtn").style.visibility = "hidden";
});
document.getElementById('upload').addEventListener('change', async function(event) {
event.preventDefault();
const loader = document.getElementById("loader");
const outputVideo = document.getElementById("outputVideo");
const downloadBtn = document.getElementById("downloadBtn");
let file = event.target.files[0];
if (file) {
let formData = new FormData();
formData.append("file", file);
loader.classList.remove("hidden");
outputVideo.classList.add("hidden");
document.getElementById("downloadBtn").style.visibility = "hidden";
let response = await fetch('/upload/', { method: 'POST', body: formData });
let result = await response.json();
let user_id = result.user_id;
while (true) {
let checkResponse = await fetch(`/check_video/${user_id}`);
let checkResult = await checkResponse.json();
if (checkResult.ready) break;
await new Promise(resolve => setTimeout(resolve, 10000)); // Wait 10s before checking again
}
loader.classList.add("hidden");
let videoUrl = `/video/${user_id}?t=${new Date().getTime()}`;
outputVideo.src = videoUrl;
outputVideo.load();
outputVideo.play();
outputVideo.setAttribute("crossOrigin", "anonymous");
outputVideo.classList.remove("hidden");
downloadBtn.href = videoUrl;
document.getElementById("downloadBtn").style.visibility = "visible";
}
});
document.getElementById('outputVideo').addEventListener('error', function() {
console.log("⚠️ Video could not be played, showing download button instead.");
document.getElementById('outputVideo').classList.add("hidden");
document.getElementById("downloadBtn").style.visibility = "visible";
});
async function uploadAnimal() {
const fileInput = document.getElementById('upload2');
if (!fileInput.files.length) return alert("Upload an image first");
// Upload and read image file
const formData = new FormData();
formData.append("file", fileInput.files[0]);
// Handshake with FastAPI
const res = await fetch("/animal/", {
method: "POST",
body: formData
});
// Error
if (!res.ok) {
alert("Failed to process animal detection.");
return;
}
// Create image
const blob = await res.blob();
const imgURL = URL.createObjectURL(blob);
document.getElementById("animal-result").innerHTML =
`<p><b>Animal Detection Result:</b></p><img src="${imgURL}" width="640"/>`;
}
async function uploadTrash() {
const fileInput = document.getElementById('upload3');
if (!fileInput.files.length) return alert("Upload an image first");
// Upload and read image file
const formData = new FormData();
formData.append("file", fileInput.files[0]);
// Handshake with FastAPI
const res = await fetch("/classification/", {
method: "POST",
body: formData
});
// Error
if (!res.ok) {
alert("Failed to process garbage classification.");
return;
}
// Create image
const blob = await res.blob();
const imgURL = URL.createObjectURL(blob);
document.getElementById("trash-result").innerHTML =
`<p><b>Garbage Classification Result:</b></p><img src="${imgURL}" width="640"/>`;
}
|