File size: 2,297 Bytes
5c9ce3f | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upload Image</title>
<h1>Cat, Dog or Neither?</h1>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h2>Upload an Image</h2>
<div class="upload-box">
<form id="upload-form" method="POST" action="/predict" enctype="multipart/form-data">
<div class="drop-area" id="drop-area">
<p>Drag or drop images here or click to select</p>
<input type="file" name="file" id="file-input" accept="image/*">
</div>
<button class="upload-btn" type="submit">Upload</button>
</form>
</div>
<div class="note">Try these sample images:</div>
<div class="sample-images">
<img src="/static/cat.jpg" alt="Cat">
<img src="/static/dog.webp" alt="Dog">
<img src="/static/horse.webp" alt="Other">
<img src="/static/fish.jpg" alt="Other">
</div>
<script>
const dropArea = document.getElementById('drop-area');
const fileInput = document.getElementById('file-input');
const form = document.getElementById('upload-form');
// When file is selected via click
fileInput.addEventListener('change', () => {
if (fileInput.files.length > 0) {
form.submit();
}
});
// Click on drag area triggers file input
dropArea.addEventListener('click', () => {
fileInput.click();
});
// Handle drag-and-drop
dropArea.addEventListener('dragover', (e) => {
e.preventDefault();
dropArea.style.backgroundColor = "#dbf9ff3d";
});
dropArea.addEventListener('dragleave', () => {
dropArea.style.backgroundColor = "";
});
dropArea.addEventListener('drop', (e) => {
e.preventDefault();
dropArea.style.backgroundColor = "";
if (e.dataTransfer.files.length > 0) {
fileInput.files = e.dataTransfer.files;
form.submit(); // 🚀 Submit form automatically
}
});
</script>
</body>
</html>
|