Update recognize_plant.html

templates/recognize_plant.html

@@ -8,23 +8,36 @@
         <!-- 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="mb-8">
-                <div class="flex items-center justify-center w-full">
+                <h3 class="text-lg font-semibold mb-4">Take a Photo</h3>
-                    <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="relative">
-                        <div class="flex flex-col items-center justify-center pt-5 pb-6">
+                    <video id="camera" class="w-full h-64 bg-gray-100 rounded-lg mb-4" autoplay playsinline></video>
-                            <i class="fas fa-cloud-upload-alt text-3xl text-[#6b8f71] mb-2"></i>
+                    <button id="capture" class="btn-main w-full">
-                            <p class="mb-2 text-sm text-[#4e6b50]"><span class="font-semibold">Click to upload</span> or drag and drop</p>
+                        <i class="fas fa-camera mr-2"></i>Capture Photo
-                            <p class="text-xs text-[#6b8f71]">PNG, JPG or JPEG</p>
+                    </button>
                 </div>
-                        <input id="plant-image" name="plant-image" type="file" class="hidden" accept="image/*" />
+                <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>
-                <button type="submit" class="btn-main w-full">
-                    <i class="fas fa-search mr-2"></i>Recognize Plant
-                </button>
                 </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">
@@ -34,67 +47,69 @@
 </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;
+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
+// Start camera when page loads
-    startCameraBtn.addEventListener('click', async () => {
+async function startCamera() {
     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', () => {
+// 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 canvas to blob and submit
+    // Convert to blob and submit
-        canvas.toBlob((blob) => {
+    canvas.toBlob(blob => {
-            const formData = new FormData();
+        submitImage(blob);
-            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
+// Handle file upload
-    uploadForm.addEventListener('submit', (e) => {
+fileUpload.addEventListener('change', (e) => {
-        e.preventDefault();
+    const file = e.target.files[0];
-        const formData = new FormData(uploadForm);
+    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(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', () => {
@@ -102,6 +117,5 @@ document.addEventListener('DOMContentLoaded', function() {
         stream.getTracks().forEach(track => track.stop());
     }
 });
-});
 </script>
 {% endblock %}