| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AgriScan - Agricultural Diagnosis System</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| :root { |
| --primary: #4CAF50; |
| --primary-dark: #388E3C; |
| --secondary: #FFC107; |
| --dark: #263238; |
| --light: #f5f7fa; |
| } |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #f5f7fa; |
| color: var(--dark); |
| overflow-x: hidden; |
| } |
| |
| .glass-card { |
| background: rgba(255, 255, 255, 0.15); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); |
| } |
| |
| .floating-animation { |
| animation: float 6s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| .pulse-animation { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| .disease-card { |
| transition: all 0.3s ease; |
| transform-style: preserve-3d; |
| } |
| |
| .disease-card:hover { |
| transform: translateY(-10px) rotateX(5deg); |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); |
| } |
| |
| .severity-low { |
| border-left: 4px solid #4CAF50; |
| } |
| |
| .severity-medium { |
| border-left: 4px solid #FFC107; |
| } |
| |
| .severity-high { |
| border-left: 4px solid #F44336; |
| } |
| |
| .upload-area { |
| border: 2px dashed #B0BEC5; |
| transition: all 0.3s ease; |
| } |
| |
| .upload-area:hover { |
| border-color: var(--primary); |
| background-color: rgba(76, 175, 80, 0.05); |
| } |
| |
| .upload-area.active { |
| border-color: var(--primary); |
| background-color: rgba(76, 175, 80, 0.1); |
| } |
| |
| .loading-spinner { |
| width: 50px; |
| height: 50px; |
| border: 5px solid rgba(76, 175, 80, 0.2); |
| border-radius: 50%; |
| border-top-color: var(--primary); |
| animation: spin 1s linear infinite; |
| } |
| |
| @keyframes spin { |
| 100% { transform: rotate(360deg); } |
| } |
| |
| .modal-overlay { |
| background-color: rgba(0, 0, 0, 0.7); |
| backdrop-filter: blur(5px); |
| } |
| |
| .leaf-decoration { |
| position: absolute; |
| opacity: 0.1; |
| z-index: -1; |
| } |
| |
| .leaf-1 { |
| top: 10%; |
| left: 5%; |
| transform: rotate(30deg); |
| width: 200px; |
| } |
| |
| .leaf-2 { |
| bottom: 15%; |
| right: 5%; |
| transform: rotate(-20deg); |
| width: 250px; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <nav class="bg-white shadow-sm py-4 px-6 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-leaf text-2xl text-green-600"></i> |
| <span class="text-xl font-bold text-green-600">AgriScan</span> |
| </div> |
| <div class="hidden md:flex space-x-6"> |
| <a href="#" class="text-gray-700 hover:text-green-600 transition">Home</a> |
| <a href="#" class="text-gray-700 hover:text-green-600 transition">Diagnosis</a> |
| <a href="#" class="text-gray-700 hover:text-green-600 transition">Solutions</a> |
| <a href="#" class="text-gray-700 hover:text-green-600 transition">About</a> |
| </div> |
| <button class="md:hidden text-gray-700"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </nav> |
|
|
| |
| <div class="relative overflow-hidden"> |
| <div class="container mx-auto px-6 py-16 md:py-24 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0"> |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6"> |
| Smart <span class="text-green-600">Agricultural</span> Diagnosis |
| </h1> |
| <p class="text-lg text-gray-600 mb-8"> |
| Upload images of your crops to detect diseases and pests instantly. |
| Get expert recommendations to protect your harvest. |
| </p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button id="uploadTrigger" class="bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-6 rounded-lg transition flex items-center justify-center space-x-2 pulse-animation"> |
| <i class="fas fa-camera"></i> |
| <span>Upload Image</span> |
| </button> |
| <button class="border border-green-600 text-green-600 hover:bg-green-50 font-medium py-3 px-6 rounded-lg transition flex items-center justify-center space-x-2"> |
| <i class="fas fa-book"></i> |
| <span>Learn More</span> |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative w-full max-w-md"> |
| <div class="glass-card rounded-2xl p-2 floating-animation"> |
| <img src="https://images.unsplash.com/photo-1500382018108-84409b9278d0?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Farm field" class="rounded-xl w-full"> |
| </div> |
| <div class="absolute -bottom-8 -left-8 bg-white p-4 rounded-xl shadow-lg w-40"> |
| <div class="flex items-center space-x-2 mb-2"> |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| <span class="text-xs font-medium">Healthy</span> |
| </div> |
| <p class="text-xs text-gray-600">Rice Field - 98% Healthy</p> |
| </div> |
| <div class="absolute -top-8 -right-8 bg-white p-4 rounded-xl shadow-lg w-40"> |
| <div class="flex items-center space-x-2 mb-2"> |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> |
| <span class="text-xs font-medium">Disease</span> |
| </div> |
| <p class="text-xs text-gray-600">Corn Rust - 85% Match</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <img src="https://www.svgrepo.com/show/530597/leaf.svg" class="leaf-decoration leaf-1"> |
| <img src="https://www.svgrepo.com/show/530597/leaf.svg" class="leaf-decoration leaf-2"> |
| </div> |
|
|
| |
| <div id="uploadModal" class="fixed inset-0 z-50 flex items-center justify-center hidden modal-overlay"> |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-md mx-4 overflow-hidden"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold text-gray-800">Upload Crop Image</h3> |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div id="uploadArea" class="upload-area rounded-lg p-8 text-center cursor-pointer mb-4"> |
| <input type="file" id="fileInput" accept="image/*" class="hidden"> |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i> |
| <p class="text-gray-600 mb-2">Drag & drop your image here</p> |
| <p class="text-sm text-gray-500 mb-4">or</p> |
| <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition"> |
| Browse Files |
| </button> |
| <p class="text-xs text-gray-500 mt-4">Supports: JPG, PNG (Max 5MB)</p> |
| </div> |
| |
| <div id="previewContainer" class="hidden"> |
| <div class="border rounded-lg overflow-hidden mb-4 relative"> |
| <img id="previewImage" class="w-full h-48 object-contain bg-gray-100"> |
| <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2 text-sm"> |
| Selected Image Preview |
| </div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <button id="cancelUpload" class="text-gray-600 hover:text-gray-800 font-medium"> |
| Cancel |
| </button> |
| <button id="analyzeBtn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition flex items-center space-x-2"> |
| <span>Analyze Image</span> |
| <i class="fas fa-magnifying-glass"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="analysisModal" class="fixed inset-0 z-50 flex items-center justify-center hidden modal-overlay"> |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl mx-4 overflow-hidden"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold text-gray-800">Analysis Results</h3> |
| <button id="closeAnalysisModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="flex flex-col md:flex-row gap-6 mb-6"> |
| <div class="md:w-1/2"> |
| <div class="border rounded-lg overflow-hidden relative"> |
| <img id="analysisPreview" class="w-full h-64 object-contain bg-gray-100"> |
| <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2 text-sm"> |
| Uploaded Image Analysis |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/2"> |
| <div class="bg-gray-50 p-4 rounded-lg h-full"> |
| <h4 class="font-medium text-gray-800 mb-2">Crop Information</h4> |
| <div class="grid grid-cols-2 gap-2 text-sm mb-4"> |
| <div class="text-gray-600">Crop Type:</div> |
| <div class="font-medium">Rice</div> |
| <div class="text-gray-600">Health Status:</div> |
| <div class="font-medium text-red-600">Affected</div> |
| <div class="text-gray-600">Confidence:</div> |
| <div class="font-medium">92%</div> |
| <div class="text-gray-600">Date:</div> |
| <div class="font-medium">Today</div> |
| </div> |
| <div class="border-t pt-3"> |
| <h4 class="font-medium text-gray-800 mb-2">Image Details</h4> |
| <div class="grid grid-cols-2 gap-2 text-sm"> |
| <div class="text-gray-600">File Name:</div> |
| <div class="font-medium truncate" id="fileNameDisplay"></div> |
| <div class="text-gray-600">File Size:</div> |
| <div class="font-medium" id="fileSizeDisplay"></div> |
| <div class="text-gray-600">Upload Time:</div> |
| <div class="font-medium" id="uploadTimeDisplay"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <h4 class="font-medium text-gray-800 mb-3">Detected Issues</h4> |
| <div id="diseaseResults" class="space-y-3"> |
| |
| </div> |
| |
| <div class="mt-6 pt-4 border-t"> |
| <h4 class="font-medium text-gray-800 mb-3">Recommended Solutions</h4> |
| <div class="bg-green-50 p-4 rounded-lg"> |
| <div class="flex items-start space-x-3"> |
| <i class="fas fa-lightbulb text-green-600 mt-1"></i> |
| <div> |
| <p class="text-sm text-gray-800">Apply fungicide containing azoxystrobin at 0.5-1.0 L/ha. Repeat after 15 days if necessary.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="loadingModal" class="fixed inset-0 z-50 flex items-center justify-center hidden modal-overlay"> |
| <div class="bg-white rounded-xl shadow-2xl p-8 text-center max-w-sm"> |
| <div class="flex justify-center mb-6"> |
| <div class="loading-spinner"></div> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Analyzing Your Image</h3> |
| <p class="text-gray-600 mb-6">Our AI is examining your crop for diseases and pests. This may take a few moments.</p> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div id="progressBar" class="bg-green-600 h-2 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="container mx-auto px-6 py-12"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Recent Diagnoses</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto"> |
| Below are some of the most common agricultural issues we've recently identified. |
| Upload your own images to get personalized analysis. |
| </p> |
| </div> |
| |
| <div id="diseaseGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-6"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <i class="fas fa-leaf text-2xl text-green-400"></i> |
| <span class="text-xl font-bold">AgriScan</span> |
| </div> |
| <p class="text-gray-400"> |
| Advanced agricultural diagnosis system to help farmers protect their crops. |
| </p> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Diagnosis</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Solutions</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQs</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Research</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Subscribe</h4> |
| <p class="text-gray-400 mb-4"> |
| Get the latest agricultural tips and updates. |
| </p> |
| <div class="flex"> |
| <input type="email" placeholder="Your email" class="bg-gray-800 text-white px-4 py-2 rounded-l-lg focus:outline-none w-full"> |
| <button class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-r-lg"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> |
| <p>© 2023 AgriScan. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const uploadTrigger = document.getElementById('uploadTrigger'); |
| const uploadModal = document.getElementById('uploadModal'); |
| const closeModal = document.getElementById('closeModal'); |
| const uploadArea = document.getElementById('uploadArea'); |
| const fileInput = document.getElementById('fileInput'); |
| const previewContainer = document.getElementById('previewContainer'); |
| const previewImage = document.getElementById('previewImage'); |
| const cancelUpload = document.getElementById('cancelUpload'); |
| const analyzeBtn = document.getElementById('analyzeBtn'); |
| const loadingModal = document.getElementById('loadingModal'); |
| const progressBar = document.getElementById('progressBar'); |
| const analysisModal = document.getElementById('analysisModal'); |
| const closeAnalysisModal = document.getElementById('closeAnalysisModal'); |
| const analysisPreview = document.getElementById('analysisPreview'); |
| const diseaseResults = document.getElementById('diseaseResults'); |
| const diseaseGrid = document.getElementById('diseaseGrid'); |
| |
| |
| const sampleDiseases = [ |
| { |
| name: "Rice Blast", |
| nameCn: "稻瘟病", |
| severity: "high", |
| severityText: "严重 / Severe", |
| description: "Fungal disease causing lesions on leaves, stems and panicles.", |
| descriptionCn: "真菌病害，导致叶片、茎秆和穗部出现病斑。", |
| image: "https://images.unsplash.com/photo-1591462653185-2ba301e3d859?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", |
| solution: "Use resistant varieties and apply fungicides like tricyclazole." |
| }, |
| { |
| name: "Corn Rust", |
| nameCn: "玉米锈病", |
| severity: "medium", |
| severityText: "中等 / Moderate", |
| description: "Orange pustules on leaves that reduce photosynthesis.", |
| descriptionCn: "叶片上出现橙色脓疱，降低光合作用。", |
| image: "https://images.unsplash.com/photo-1596422846543-75c6fc8cd896?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", |
| solution: "Apply fungicides containing triazole or strobilurin." |
| }, |
| { |
| name: "Wheat Scab", |
| nameCn: "小麦赤霉病", |
| severity: "high", |
| severityText: "严重 / Severe", |
| description: "Causes bleaching of spikelets and shriveled grains.", |
| descriptionCn: "导致小穗白化和籽粒皱缩。", |
| image: "https://images.unsplash.com/photo-1518977676601-b53f82aba655?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", |
| solution: "Use resistant varieties and apply fungicides at flowering." |
| }, |
| { |
| name: "Aphids", |
| nameCn: "蚜虫", |
| severity: "medium", |
| severityText: "中等 / Moderate", |
| description: "Small sap-sucking insects that transmit plant viruses.", |
| descriptionCn: "吸食汁液的小昆虫，传播植物病毒。", |
| image: "https://images.unsplash.com/photo-1586007553955-1c0a7a5b0b8e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", |
| solution: "Use insecticidal soaps or neonicotinoid insecticides." |
| }, |
| { |
| name: "Spider Mites", |
| nameCn: "红蜘蛛", |
| severity: "low", |
| severityText: "轻微 / Mild", |
| description: "Tiny mites that cause stippling and webbing on leaves.", |
| descriptionCn: "微小螨虫，导致叶片出现点刻和网状物。", |
| image: "https://images.unsplash.com/photo-1586007553955-1c0a7a5b0b8e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", |
| solution: "Use miticides and increase humidity to discourage mites." |
| }, |
| { |
| name: "Powdery Mildew", |
| nameCn: "白粉病", |
| severity: "low", |
| severityText: "轻微 / Mild", |
| description: "White powdery growth on leaves and stems.", |
| descriptionCn: "叶片和茎秆上出现白色粉状生长物。", |
| image: "https://images.unsplash.com/photo-1586007553955-1c0a7a5b0b8e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", |
| solution: "Apply sulfur or potassium bicarbonate fungicides." |
| } |
| ]; |
| |
| |
| function initDiseaseGrid() { |
| diseaseGrid.innerHTML = ''; |
| sampleDiseases.forEach(disease => { |
| const severityClass = disease.severity === 'high' ? 'severity-high' : |
| disease.severity === 'medium' ? 'severity-medium' : 'severity-low'; |
| |
| const card = document.createElement('div'); |
| card.className = `disease-card bg-white rounded-xl shadow-md overflow-hidden ${severityClass}`; |
| card.innerHTML = ` |
| <div class="h-48 overflow-hidden"> |
| <img src="${disease.image}" alt="${disease.name}" class="w-full h-full object-cover"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="font-bold text-lg">${disease.name}</h3> |
| <span class="text-xs px-2 py-1 rounded-full ${ |
| disease.severity === 'high' ? 'bg-red-100 text-red-800' : |
| disease.severity === 'medium' ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800' |
| }"> |
| ${disease.severityText} |
| </span> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">${disease.description}</p> |
| <button class="text-green-600 hover:text-green-800 font-medium text-sm flex items-center"> |
| View details |
| <i class="fas fa-chevron-right ml-1 text-xs"></i> |
| </button> |
| </div> |
| `; |
| |
| card.addEventListener('click', () => { |
| showDiseaseDetails(disease); |
| }); |
| |
| diseaseGrid.appendChild(card); |
| }); |
| } |
| |
| |
| function showDiseaseDetails(disease) { |
| diseaseResults.innerHTML = ` |
| <div class="disease-card bg-white border border-gray-200 rounded-lg p-4 flex items-start ${ |
| disease.severity === 'high' ? 'severity-high' : |
| disease.severity === 'medium' ? 'severity-medium' : 'severity-low' |
| }"> |
| <div class="w-16 h-16 rounded-lg overflow-hidden mr-4"> |
| <img src="${disease.image}" alt="${disease.name}" class="w-full h-full object-cover"> |
| </div> |
| <div> |
| <div class="flex justify-between items-start mb-1"> |
| <h4 class="font-bold">${disease.name} / ${disease.nameCn}</h4> |
| <span class="text-xs px-2 py-1 rounded-full ${ |
| disease.severity === 'high' ? 'bg-red-100 text-red-800' : |
| disease.severity === 'medium' ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800' |
| }"> |
| ${disease.severityText} |
| </span> |
| </div> |
| <p class="text-sm text-gray-600 mb-2">${disease.description}</p> |
| <p class="text-sm text-gray-600">${disease.descriptionCn}</p> |
| </div> |
| </div> |
| `; |
| |
| analysisPreview.src = disease.image; |
| analysisModal.classList.remove('hidden'); |
| } |
| |
| |
| uploadTrigger.addEventListener('click', () => { |
| uploadModal.classList.remove('hidden'); |
| }); |
| |
| closeModal.addEventListener('click', () => { |
| uploadModal.classList.add('hidden'); |
| previewContainer.classList.add('hidden'); |
| uploadArea.classList.remove('hidden'); |
| }); |
| |
| closeAnalysisModal.addEventListener('click', () => { |
| analysisModal.classList.add('hidden'); |
| }); |
| |
| |
| uploadArea.addEventListener('click', () => { |
| fileInput.click(); |
| }); |
| |
| uploadArea.addEventListener('dragover', (e) => { |
| e.preventDefault(); |
| uploadArea.classList.add('active'); |
| }); |
| |
| uploadArea.addEventListener('dragleave', () => { |
| uploadArea.classList.remove('active'); |
| }); |
| |
| uploadArea.addEventListener('drop', (e) => { |
| e.preventDefault(); |
| uploadArea.classList.remove('active'); |
| |
| if (e.dataTransfer.files.length) { |
| fileInput.files = e.dataTransfer.files; |
| handleFileSelect(); |
| } |
| }); |
| |
| fileInput.addEventListener('change', handleFileSelect); |
| |
| function handleFileSelect() { |
| if (fileInput.files && fileInput.files[0]) { |
| const reader = new FileReader(); |
| |
| reader.onload = function(e) { |
| previewImage.src = e.target.result; |
| uploadArea.classList.add('hidden'); |
| previewContainer.classList.remove('hidden'); |
| }; |
| |
| reader.readAsDataURL(fileInput.files[0]); |
| } |
| } |
| |
| cancelUpload.addEventListener('click', () => { |
| previewContainer.classList.add('hidden'); |
| uploadArea.classList.remove('hidden'); |
| fileInput.value = ''; |
| }); |
| |
| analyzeBtn.addEventListener('click', () => { |
| uploadModal.classList.add('hidden'); |
| loadingModal.classList.remove('hidden'); |
| |
| |
| let progress = 0; |
| const interval = setInterval(() => { |
| progress += Math.random() * 10; |
| if (progress > 100) progress = 100; |
| progressBar.style.width = `${progress}%`; |
| |
| if (progress === 100) { |
| clearInterval(interval); |
| setTimeout(() => { |
| loadingModal.classList.add('hidden'); |
| showAnalysisResults(); |
| }, 500); |
| } |
| }, 300); |
| }); |
| |
| function showAnalysisResults() { |
| |
| const randomDisease = sampleDiseases[Math.floor(Math.random() * sampleDiseases.length)]; |
| showDiseaseDetails(randomDisease); |
| analysisPreview.src = previewImage.src; |
| |
| |
| const file = fileInput.files[0]; |
| document.getElementById('fileNameDisplay').textContent = file.name; |
| document.getElementById('fileSizeDisplay').textContent = `${(file.size / 1024).toFixed(1)} KB`; |
| document.getElementById('uploadTimeDisplay').textContent = new Date().toLocaleTimeString(); |
| } |
| |
| |
| initDiseaseGrid(); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Yango1/https-huggingface-co-spaces-yango1-cropspest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
