Kobe/VerpotJeLot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update recognize_plant.html

Browse Source
This commit is contained in:
Kobe
2025-06-08 17:35:57 +02:00
parent 79c6595eab
commit 01b70e279f
1 changed files with 91 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
templates/recognize_plant.html
View File

@@ -8,21 +8,34 @@
<!-- 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 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>
<button type="submit" class="btn-main w-full">
<i class="fas fa-search mr-2"></i>Recognize Plant
</button>
</form>
<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>
@@ -34,74 +47,75 @@
</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;
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');
// 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.');
// 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.');
});
}
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');
});
// Start camera when page loads
startCamera();
// 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());
}
});
// Clean up camera when leaving page
window.addEventListener('beforeunload', () => {
if (stream) {
stream.getTracks().forEach(track => track.stop());
}
});
</script>
{% endblock %}