Shubham9008/leaf_detection_eith_gatekeeper

1const dropArea = document.getElementById('drop-area');2const fileElem = document.getElementById('fileElem');3const fileSelectBtn = document.getElementById('fileSelectBtn');4const previewContainer = document.getElementById('preview-container');5const previewImage = document.getElementById('preview-image');6const loading = document.getElementById('loading');7const resultContainer = document.getElementById('result-container');8const predictionText = document.getElementById('prediction-text');9 10// Prevent default drag behaviors11['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {12    dropArea.addEventListener(eventName, preventDefaults, false);13    document.body.addEventListener(eventName, preventDefaults, false);14});15 16function preventDefaults(e) {17    e.preventDefault();18    e.stopPropagation();19}20 21// Highlight drop area when item is dragged over it22['dragenter', 'dragover'].forEach(eventName => {23    dropArea.addEventListener(eventName, highlight, false);24});25 26['dragleave', 'drop'].forEach(eventName => {27    dropArea.addEventListener(eventName, unhighlight, false);28});29 30function highlight(e) {31    dropArea.classList.add('highlight');32}33 34function unhighlight(e) {35    dropArea.classList.remove('highlight');36}37 38// Handle dropped files39dropArea.addEventListener('drop', handleDrop, false);40 41function handleDrop(e) {42    const dt = e.dataTransfer;43    const files = dt.files;44    handleFiles(files);45}46 47// Handle selected files via button48fileSelectBtn.addEventListener('click', () => {49    fileElem.click();50});51 52function handleFiles(files) {53    if (files.length > 0) {54        const file = files[0];55        if (!file.type.startsWith('image/')) {56            alert('Please upload an image file!');57            return;58        }59        uploadFile(file);60        previewFile(file);61    }62}63 64function previewFile(file) {65    const reader = new FileReader();66    reader.readAsDataURL(file);67    reader.onloadend = function () {68        previewImage.src = reader.result;69        previewContainer.classList.remove('hidden');70        dropArea.classList.add('hidden'); // Optional: hide drop area after upload71    }72}73 74async function uploadFile(file) {75    loading.classList.remove('hidden');76    resultContainer.classList.add('hidden');77 78    let formData = new FormData();79    formData.append('file', file);80 81    try {82        let response = await fetch('/predict', {83            method: 'POST',84            body: formData85        });86 87        if (response.ok) {88            let result = await response.json();89            displayResult(result);90        } else {91            console.error('Error uploading file');92            alert('Error analyzing image. Please try again.');93        }94    } catch (error) {95        console.error('Error:', error);96        alert('Network error. Please check your connection.');97    } finally {98        loading.classList.add('hidden');99    }100}101 102function displayResult(result) {103    resultContainer.classList.remove('hidden');104    // Assuming backend returns { "class": "ClassName", "confidence": 0.99 }105    const percentage = (result.confidence * 100).toFixed(2);106    predictionText.innerText = `${result.class} (${percentage}%)`;107}108 109function resetApp() {110    fileElem.value = ""; // Clear input111    previewImage.src = "";112    previewContainer.classList.add('hidden');113    resultContainer.classList.add('hidden');114    dropArea.classList.remove('hidden');115    predictionText.innerText = "--";116}