VerpotJeLot/templates/recognize_plant.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>
    
    <div class="space-y-6">
        <!-- Camera Capture -->
        <div class="bg-[#f8f9fa] p-6 rounded-xl border border-[#e6ebe0]">
            <h2 class="text-xl font-semibold text-[#4e6b50] mb-4">Take a Photo</h2>
            <div class="relative">
                <video id="camera" class="w-full rounded-lg mb-4 hidden"></video>
                <canvas id="canvas" class="w-full rounded-lg mb-4 hidden"></canvas>
                <div id="camera-placeholder" class="w-full aspect-video bg-gray-200 rounded-lg mb-4 flex items-center justify-center">
                    <span class="text-gray-500">Camera preview will appear here</span>
                </div>
            </div>
            <div class="flex gap-4">
                <button id="start-camera" class="btn-main flex-1">
                    <i class="fas fa-camera mr-2"></i>Start Camera
                </button>
                <button id="capture" class="btn-main flex-1 hidden">
                    <i class="fas fa-camera-retro mr-2"></i>Capture
                </button>
            </div>
        </div>

        <!-- 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 %}