|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Sall-e Garbage Detection</title> |
|
<link rel="website icon" type="png" href="/icon.png" > |
|
<style> |
|
body { |
|
font-family: 'Roboto', sans-serif; background: linear-gradient(270deg, rgb(44, 13, 58), rgb(13, 58, 56)); color: white; text-align: center; margin: 0; padding: 50px; |
|
} |
|
h1 { |
|
font-size: 40px; |
|
background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44); |
|
-webkit-text-fill-color: transparent; |
|
-webkit-background-clip: text; |
|
font-weight: bold; |
|
} |
|
#upload-container { |
|
background: rgba(255, 255, 255, 0.2); padding: 20px; width: 70%; border-radius: 10px; display: inline-block; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3); |
|
} |
|
#upload { |
|
font-size: 18px; padding: 10px; border-radius: 5px; border: none; background: #fff; cursor: pointer; |
|
} |
|
#loader { |
|
margin-top: 10px; margin-left: auto; margin-right: auto; width: 60px; height: 60px; font-size: 12px; text-align: center; |
|
} |
|
p { |
|
margin-top: 10px; font-size: 12px; color: #3498db; |
|
} |
|
#spinner { |
|
border: 8px solid #f3f3f3; border-top: 8px solid rgb(117 7 7); border-radius: 50%; animation: spin 1s linear infinite; width: 40px; height: 40px; margin: auto; |
|
} |
|
@keyframes spin { |
|
0% { transform: rotate(0deg); } |
|
100% { transform: rotate(360deg); } |
|
} |
|
#outputVideo { |
|
margin-top: 20px; width: 70%; margin-left: auto; margin-right: auto; max-width: 640px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3); |
|
} |
|
#downloadBtn { |
|
display: block; visibility: hidden; width: 20%; margin-top: 20px; margin-left: auto; margin-right: auto; padding: 10px 15px; font-size: 16px; background: #27ae60; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; |
|
} |
|
#downloadBtn:hover { |
|
background: #950606; |
|
} |
|
.hidden { |
|
display: none; |
|
} |
|
@media (max-width: 860px) { |
|
h1 { font-size: 30px; } |
|
} |
|
@media (max-width: 720px) { |
|
h1 { font-size: 25px; } |
|
#upload { font-size: 15px; } |
|
#downloadBtn { font-size: 13px; } |
|
} |
|
@media (max-width: 580px) { |
|
h1 { font-size: 20px; } |
|
#upload { font-size: 10px; } |
|
#downloadBtn { font-size: 10px; } |
|
} |
|
@media (max-width: 580px) { |
|
h1 { font-size: 10px; } |
|
} |
|
@media (max-width: 460px) { |
|
#upload { font-size: 7px; } |
|
} |
|
@media (max-width: 400px) { |
|
h1 { font-size: 14px; } |
|
} |
|
@media (max-width: 370px) { |
|
h1 { font-size: 11px; } |
|
#upload { font-size: 5px; } |
|
#downloadBtn { font-size: 7px; } |
|
} |
|
@media (max-width: 330px) { |
|
h1 { font-size: 8px; } |
|
#upload { font-size: 3px; } |
|
#downloadBtn { font-size: 5px; } |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h1>Upload an Image for Garbage Detection</h1> |
|
<div id="upload-container"> |
|
<input type="file" id="upload" accept="image/*"> |
|
</div> |
|
<div id="loader" class="loader hidden"> |
|
<div id="spinner"></div> |
|
|
|
</div> |
|
<video id="outputVideo" class="outputVideo" controls></video> |
|
<a id="downloadBtn" class="downloadBtn">Download Video</a> |
|
<script> |
|
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, 3000)); |
|
} |
|
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"; |
|
}); |
|
</script> |
|
</body> |
|
</html> |
