From 01b70e279fbf0aeffb2183af94416dd88eee4cee Mon Sep 17 00:00:00 2001
From: Kobe <kobeamerijckx@outlook.com>
Date: Sun, 8 Jun 2025 17:35:57 +0200
Subject: [PATCH] Update recognize_plant.html

---
 templates/recognize_plant.html | 168 ++++++++++++++++++---------------
 1 file changed, 91 insertions(+), 77 deletions(-)

diff --git a/templates/recognize_plant.html b/templates/recognize_plant.html
index ee7157e..1726d0c 100644
--- a/templates/recognize_plant.html
+++ b/templates/recognize_plant.html
@@ -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 %} 
\ No newline at end of file