121 lines
4.5 KiB
HTML
121 lines
4.5 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Recognize Plant{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-2xl mx-auto bg-white p-8 rounded-2xl shadow-xl mt-8">
|
|
<h1 class="text-3xl font-bold text-[#4e6b50] mb-6 text-center">Plant Recognition</h1>
|
|
<!-- File Upload -->
|
|
<div class="bg-[#f8f9fa] p-6 rounded-xl border border-[#e6ebe0]">
|
|
<h2 class="text-xl font-semibold text-[#4e6b50] mb-4">Upload Image</h2>
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold mb-4">Take a Photo</h3>
|
|
<div class="relative">
|
|
<video id="camera" class="w-full h-64 bg-gray-100 rounded-lg mb-4" autoplay playsinline></video>
|
|
<button id="capture" class="btn-main w-full">
|
|
<i class="fas fa-camera mr-2"></i>Capture Photo
|
|
</button>
|
|
</div>
|
|
<div id="preview-container" class="hidden">
|
|
<img id="preview" class="w-full h-64 object-cover rounded-lg mb-4" alt="Captured photo">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-4">Or Upload an Image</h3>
|
|
<form id="upload-form" class="space-y-4">
|
|
<div class="flex items-center justify-center w-full">
|
|
<label for="file-upload" class="flex flex-col items-center justify-center w-full h-32 border-2 border-[#4e6b50] border-dashed rounded-lg cursor-pointer bg-[#f5f7f2] hover:bg-[#e6ebe0]">
|
|
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
|
<i class="fas fa-cloud-upload-alt text-3xl text-[#4e6b50] mb-2"></i>
|
|
<p class="mb-2 text-sm text-[#4e6b50]"><span class="font-semibold">Click to upload</span> or drag and drop</p>
|
|
<p class="text-xs text-[#4e6b50]">PNG, JPG or JPEG</p>
|
|
</div>
|
|
<input id="file-upload" type="file" class="hidden" accept="image/*" />
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 text-center">
|
|
<a href="{{ url_for('home') }}" class="inline-block bg-[#e6ebe0] text-[#3e5637] hover:bg-[#b7c7a3] hover:text-[#4e6b50] font-semibold px-6 py-2 rounded-lg shadow transition-colors duration-200">
|
|
← Back to Home
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let stream = null;
|
|
const camera = document.getElementById('camera');
|
|
const capture = document.getElementById('capture');
|
|
const preview = document.getElementById('preview');
|
|
const previewContainer = document.getElementById('preview-container');
|
|
const fileUpload = document.getElementById('file-upload');
|
|
const uploadForm = document.getElementById('upload-form');
|
|
|
|
// Start camera when page loads
|
|
async function startCamera() {
|
|
try {
|
|
stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
|
camera.srcObject = stream;
|
|
} catch (err) {
|
|
console.error('Error accessing camera:', err);
|
|
alert('Could not access camera. Please make sure you have granted camera permissions.');
|
|
}
|
|
}
|
|
|
|
// Capture photo
|
|
capture.addEventListener('click', () => {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = camera.videoWidth;
|
|
canvas.height = camera.videoHeight;
|
|
canvas.getContext('2d').drawImage(camera, 0, 0);
|
|
|
|
// Convert to blob and submit
|
|
canvas.toBlob(blob => {
|
|
submitImage(blob);
|
|
}, 'image/jpeg');
|
|
});
|
|
|
|
// Handle file upload
|
|
fileUpload.addEventListener('change', (e) => {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
submitImage(file);
|
|
}
|
|
});
|
|
|
|
// Submit image to server
|
|
function submitImage(imageData) {
|
|
const formData = new FormData();
|
|
formData.append('image', imageData);
|
|
|
|
fetch('/recognize-plant', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.redirect) {
|
|
window.location.href = data.redirect;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('An error occurred while processing the image.');
|
|
});
|
|
}
|
|
|
|
// Start camera when page loads
|
|
startCamera();
|
|
|
|
// Clean up camera when leaving page
|
|
window.addEventListener('beforeunload', () => {
|
|
if (stream) {
|
|
stream.getTracks().forEach(track => track.stop());
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |