107 lines
4.3 KiB
HTML
107 lines
4.3 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>
|
|
<form id="upload-form" method="POST" enctype="multipart/form-data" class="space-y-4">
|
|
<div class="flex items-center justify-center w-full">
|
|
<label for="plant-image" class="flex flex-col items-center justify-center w-full h-32 border-2 border-[#6b8f71] border-dashed rounded-lg cursor-pointer bg-white hover:bg-[#f8f9fa]">
|
|
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
|
<i class="fas fa-cloud-upload-alt text-3xl text-[#6b8f71] 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-[#6b8f71]">PNG, JPG or JPEG</p>
|
|
</div>
|
|
<input id="plant-image" name="plant-image" type="file" class="hidden" accept="image/*" />
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="btn-main w-full">
|
|
<i class="fas fa-search mr-2"></i>Recognize Plant
|
|
</button>
|
|
</form>
|
|
</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>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const startCameraBtn = document.getElementById('start-camera');
|
|
const captureBtn = document.getElementById('capture');
|
|
const camera = document.getElementById('camera');
|
|
const canvas = document.getElementById('canvas');
|
|
const cameraPlaceholder = document.getElementById('camera-placeholder');
|
|
const uploadForm = document.getElementById('upload-form');
|
|
let stream = null;
|
|
|
|
// Camera functionality
|
|
startCameraBtn.addEventListener('click', async () => {
|
|
try {
|
|
stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
|
camera.srcObject = stream;
|
|
camera.classList.remove('hidden');
|
|
cameraPlaceholder.classList.add('hidden');
|
|
startCameraBtn.classList.add('hidden');
|
|
captureBtn.classList.remove('hidden');
|
|
} catch (err) {
|
|
console.error('Error accessing camera:', err);
|
|
alert('Could not access camera. Please make sure you have granted camera permissions.');
|
|
}
|
|
});
|
|
|
|
captureBtn.addEventListener('click', () => {
|
|
canvas.width = camera.videoWidth;
|
|
canvas.height = camera.videoHeight;
|
|
canvas.getContext('2d').drawImage(camera, 0, 0);
|
|
|
|
// Convert canvas to blob and submit
|
|
canvas.toBlob((blob) => {
|
|
const formData = new FormData();
|
|
formData.append('plant-image', blob, 'capture.jpg');
|
|
|
|
fetch('/recognize-plant', {
|
|
method: 'POST',
|
|
body: formData
|
|
}).then(response => response.json())
|
|
.then(data => {
|
|
if (data.redirect) {
|
|
window.location.href = data.redirect;
|
|
}
|
|
});
|
|
}, 'image/jpeg');
|
|
});
|
|
|
|
// File upload functionality
|
|
uploadForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const formData = new FormData(uploadForm);
|
|
|
|
fetch('/recognize-plant', {
|
|
method: 'POST',
|
|
body: formData
|
|
}).then(response => response.json())
|
|
.then(data => {
|
|
if (data.redirect) {
|
|
window.location.href = data.redirect;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Cleanup camera when leaving page
|
|
window.addEventListener('beforeunload', () => {
|
|
if (stream) {
|
|
stream.getTracks().forEach(track => track.stop());
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |