Upload 57 files

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+models/1/variables/variables.data-00000-of-00001 filter=lfs diff=lfs merge=lfs -text
+models/4.keras filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,11 +1,874 @@
----
-title: Potato Diseases Detection With Deep Learning
-emoji: 📈
-colorFrom: gray
-colorTo: red
-sdk: docker
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🥔 Potato Skin Disease Detection Using Deep Learning
+
+[![Python](https://img.shields.io/badge/Python-3.8+-blue.svg)](https://www.python.org/)
+[![TensorFlow](https://img.shields.io/badge/TensorFlow-2.x-orange.svg)](https://tensorflow.org/)
+[![Keras](https://img.shields.io/badge/Keras-2.x-red.svg)](https://keras.io/)
+[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
+
+> 🔬 An AI-powered computer vision system for detecting and classifying potato skin diseases using deep learning techniques.
+
+## 📋 Table of Contents
+
+- [🎯 Project Overview](#-project-overview)
+- [🌟 Features](#-features)
+- [📊 Dataset](#-dataset)
+- [🚀 Getting Started](#-getting-started)
+- [💻 Usage](#-usage)
+- [🏗️ Model Architecture](#-model-architecture)
+- [📈 Results](#-results)
+- [🚀 Next Steps](#-Next-Steps)
+- [📄 License](#-license)
+
+## 🎯 Project Overview
+
+This project implements a **Convolutional Neural Network (CNN)** using TensorFlow/Keras to automatically detect and classify potato skin diseases from digital images. The system can identify three main categories:
+
+- 🍃 **Healthy Potatoes**
+- 🦠 **Early Blight Disease**
+- 🍄 **Late Blight Disease**
+
+### 🎥 Demo
+
+<details>
+<summary>Click to see sample predictions</summary>
+
+```
+Input: potato_image.jpg
+Output: "Early Blight Disease" (Confidence: 94.2%)
+```
+
+</details>
+
+## 🌟 Features
+
+- ✅ **Multi-class Classification**: Detects 3 types of potato conditions
+- ✅ **Data Augmentation**: Improves model robustness with image transformations
+- ✅ **Interactive Visualization**: Displays sample images with predictions
+- ✅ **Optimized Performance**: Uses caching and prefetching for faster training
+- ✅ **Scalable Architecture**: Easy to extend to more disease types
+- ✅ **Real-time Inference**: Fast prediction on new images
+
+## 📊 Dataset
+
+### 📈 Dataset Statistics
+
+- **Total Images**: 2,152
+- **Classes**: 3 (Early Blight, Late Blight, Healthy)
+- **Image Size**: 256×256 pixels
+- **Color Channels**: RGB (3 channels)
+- **Data Split**: 80% Train, 10% Validation, 10% Test
+
+## 📁 Project Structure
+
+```
+potato-disease-detection/
+├── 📓 POTATO_Skin_Diseases_Detection_Using_Deep_Learning.ipynb
+├── 📄 README.md
+├── 📋 requirements.txt
+├── 📁 PlantVillage/
+│   ├── 📁 Potato___Early_blight/
+│   ├── 📁 Potato___Late_blight/
+│   └── 📁 Potato___healthy/
+├── 📁 models/
+│   └── 💾 trained_model.h5
+└── 📁 results/
+    ├── 📊 training_plots.png
+    └── 📈 confusion_matrix.png
+```
+
+📂 Root Directory/
+├── 🐍 app.py # Main Flask application
+├── 📦 requirements.txt # Dependencies
+├── 🚀 run_flask_app.bat # Easy startup script
+├── 📚 README_Flask.md # Complete documentation
+├── 📂 templates/
+│ └── 🌐 index.html # Web interface
+└── 📂 static/
+├── 📂 css/
+│ └── 💄 style.css # Beautiful styling
+└── 📂 js/
+└── ⚡ script.js # Interactive functionality
+
+## 🚀 Getting Started
+
+### 📋 Prerequisites
+
+```bash
+Python 3.8+
+TensorFlow 2.x
+Matplotlib
+NumPy
+```
+
+### ⚡ Quick Start and Installation
+
+### 🐍 Environment Setup
+
+```bash
+# Create virtual environment
+python -m venv potato_env
+
+# Activate environment
+# Windows:
+potato_env\Scripts\activate
+# macOS/Linux:
+source potato_env/bin/activate
+
+# Install packages
+pip install -r requirements.txt
+```
+
+# Run Application
+
+#### **Step 1: Install Dependencies**
+
+```cmd
+pip install -r requirements.txt
+```
+
+#### **Step 2: Run the Application**
+
+```cmd
+python app.py
+```
+
+#### **Step 3: Open Your Browser**
+
+- **Main App**: http://localhost:5000
+- **Health Check**: http://localhost:5000/health
+
+## 💻 Usage
+
+### 🔧 Training the Model
+
+The notebook includes the complete pipeline:
+
+1. **Data Loading & Preprocessing**
+
+   ```python
+   # Load dataset
+   dataset = tf.keras.preprocessing.image_dataset_from_directory(
+       "PlantVillage",
+       image_size=(256, 256),
+       batch_size=32
+   )
+   ```
+
+2. **Data Augmentation**
+
+   ```python
+   # Apply data augmentation
+   data_augmentation = tf.keras.Sequential([
+       tf.keras.layers.RandomFlip("horizontal_and_vertical"),
+       tf.keras.layers.RandomRotation(0.2)
+   ])
+   ```
+
+3. **Model Configuration**
+   ```python
+   IMAGE_SIZE = 256
+   BATCH_SIZE = 32
+   CHANNELS = 3
+   EPOCHS = 50
+   ```
+
+### 🎯 Making Predictions
+
+```python
+# Load your trained model
+model = tf.keras.models.load_model('potato_disease_model.h5')
+
+# Make prediction
+prediction = model.predict(new_image)
+predicted_class = class_names[np.argmax(prediction)]
+```
+
+## 🏗️ Model Architecture
+
+### 🧠 Network Components
+
+1. **Input Layer**: 256×256×3 RGB images
+2. **Preprocessing**:
+   - Image resizing and rescaling (1.0/255)
+   - Data augmentation (RandomFlip, RandomRotation)
+3. **Feature Extraction**: CNN layers for pattern recognition
+4. **Classification**: Dense layers for final prediction
+
+### ⚙️ Training Configuration
+
+- **Optimizer**: Adam (recommended)
+- **Loss Function**: Sparse Categorical Crossentropy
+- **Metrics**: Accuracy
+- **Epochs**: 50
+- **Batch Size**: 32
+
+## 📈 Results
+
+### 📊 Performance Metrics
+
+| Metric              | Score |
+| ------------------- | ----- |
+| Training Accuracy   | XX.X% |
+| Validation Accuracy | XX.X% |
+| Test Accuracy       | XX.X% |
+| F1-Score            | XX.X% |
+
+### 🎨 Visualization
+
+The notebook includes:
+
+- ✅ Sample image visualization
+- ✅ Training/validation loss curves
+- ✅ Confusion matrix
+- ✅ Class-wise accuracy
+
+# 🥔 Potato Disease Detection - Flask Web Application
+
+A modern Flask web application for detecting potato diseases using deep learning. Upload images or use your camera to get instant disease predictions with confidence scores and treatment recommendations.
+
+## ✨ Features
+
+### 🖼️ **Dual Input Methods**
+
+- **📁 File Upload**: Drag & drop or browse to select images
+- **📸 Camera Capture**: Take photos directly from your device camera
+
+### 🧠 **AI-Powered Detection**
+
+- **🎯 Accurate Predictions**: Uses trained CNN model for disease detection
+- **📊 Confidence Scores**: Shows prediction confidence with color-coded badges
+- **📈 Probability Breakdown**: Displays probabilities for all disease classes
+
+### 💡 **Smart Recommendations**
+
+- **🏥 Treatment Advice**: Provides specific recommendations for each condition
+- **🚨 Urgency Levels**: Different advice based on disease severity
+- **📋 Downloadable Reports**: Generate and download analysis reports
+
+### 🎨 **Modern Interface**
+
+- **📱 Responsive Design**: Works perfectly on mobile and desktop
+- **🌟 Beautiful UI**: Modern design with smooth animations
+- **🔄 Real-time Analysis**: Instant predictions with loading indicators
+
+## 🦠 Detected Diseases
+
+1. **🍂 Early Blight** - Common fungal disease affecting potato leaves
+2. **💀 Late Blight** - Serious disease that can destroy entire crops
+3. **✅ Healthy** - No disease detected
+
+## 🎯 How to Use
+
+### **📁 Upload Method**
+
+1. **Select Upload** tab (default)
+2. **Drag & drop** an image or **click to browse**
+3. **Click "Analyze Disease"** button
+4. **View results** with predictions and recommendations
+
+### **📸 Camera Method**
+
+1. **Click Camera** tab
+2. **Click "Start Camera"** (allow permissions)
+3. **Click "Capture Photo"** when ready
+4. **Click "Analyze Disease"** button
+5. **View results** with predictions and recommendations
+
+### **📊 Understanding Results**
+
+- **🎯 Primary Diagnosis**: Main prediction with confidence score
+- **📈 Probability Breakdown**: All disease probabilities
+- **💡 Recommendations**: Treatment and care advice
+- **📋 Download Report**: Save results as text file
+
+## 🔧 Technical Details
+
+- **🐍 Backend**: Flask 2.3+ with Python
+- **🧠 AI Model**: TensorFlow/Keras CNN
+- **🖼️ Image Processing**: PIL/Pillow for preprocessing
+- **🎨 Frontend**: HTML5, CSS3, Vanilla JavaScript
+- **📱 Camera**: WebRTC getUserMedia API
+- **💾 Storage**: Local file system for uploads
+
+## 📋 Requirements
+
+- **🐍 Python**: 3.8+ (Recommended: 3.10+)
+- **💻 OS**: Windows, macOS, or Linux
+- **🧠 Memory**: 4GB+ RAM (8GB recommended)
+- **💾 Storage**: ~2GB for dependencies and models
+- **🌐 Browser**: Chrome, Firefox, Safari, Edge (latest versions)
+
+## 🛠️ Troubleshooting
+
+### ❌ **Model Not Loading**
+
+```
+Error: Model not loaded! Please check the model file path.
+```
+
+**Solution:**
+
+- Ensure `models/1.h5` exists
+- Check TensorFlow installation: `pip install tensorflow>=2.13.0`
+
+### ❌ **Camera Not Working**
+
+```
+Could not access camera. Please check permissions.
+```
+
+**Solution:**
+
+- Allow camera permissions in your browser
+- Use HTTPS for camera access (or localhost)
+- Check if another app is using the camera
+
+### ❌ **Port Already in Use**
+
+```
+Address already in use
+```
+
+**Solution:**
+
+- Close other Flask applications
+- Change port in `app.py`: `app.run(port=5001)`
+- Kill process: `taskkill /f /im python.exe` (Windows)
+
+### ❌ **File Upload Issues**
+
+```
+Invalid file type or File too large
+```
+
+**Solution:**
+
+- Use supported formats: PNG, JPG, JPEG
+- Keep file size under 16MB
+- Check image isn't corrupted
+
+## 🎨 Customization
+
+### **🎯 Add New Disease Classes**
+
+1. Update `CLASS_NAMES` in `app.py`
+2. Add descriptions in `CLASS_DESCRIPTIONS`
+3. Update recommendations in `get_recommendations()`
+4. Retrain model with new classes
+
+## 📱 Mobile Responsiveness
+
+The application is now **fully responsive** and optimized for mobile devices:
+
+### 📲 Mobile Features:
+
+- ✅ **Touch-friendly interface** with larger touch targets (44px minimum)
+- ✅ **Responsive design** that adapts to screen sizes from 320px to desktop
+- ✅ **Mobile camera support** with environment (back) camera preference
+- ✅ **Optimized image display** for mobile viewports
+- ✅ **Landscape/Portrait orientation** support
+- ✅ **iOS Safari compatibility** with viewport fixes
+- ✅ **Prevent accidental zoom** on form inputs
+- ✅ **Touch-optimized drag & drop** for file uploads
+
+### **🎨 Modify UI**
+
+- **Colors**: Edit CSS variables in `style.css`
+- **Layout**: Modify templates in `templates/`
+- **Functionality**: Update JavaScript in `static/js/`
+
+### **⚙️ Configuration**
+
+- **Upload size**: Change `MAX_CONTENT_LENGTH` in `app.py`
+- **Image size**: Modify `IMAGE_SIZE` parameter
+- **Port**: Update `app.run(port=5000)` line
+
+## 🔒 Security Notes
+
+- **🚫 Production Use**: This is for development/research only
+- **🔐 Secret Key**: Change `app.secret_key` for production
+- **📁 File Validation**: Only accepts image files
+- **💾 File Cleanup**: Consider automatic cleanup of old uploads
+
+## 📈 Performance Tips
+
+- **📸 Image Quality**: Use clear, well-lit potato leaf images
+- **🎯 Focus**: Ensure leaves fill most of the frame
+- **📏 Size**: Optimal size is 256x256 pixels or larger
+- **🌟 Lighting**: Good natural lighting gives best results
+
+## 🌐 Browser Compatibility
+
+- ✅ **Chrome**: 90+
+- ✅ **Firefox**: 88+
+- ✅ **Safari**: 14+
+- ✅ **Edge**: 90+
+- ⚠️ **Mobile**: Camera features may vary
+
+## 📄 API Endpoints
+
+- `GET /` - Main web interface
+- `POST /predict` - Upload image prediction
+- `POST /predict_camera` - Camera image prediction
+- `GET /health` - Application health check
+
+## 🤝 Support
+
+For issues or questions:
+
+1. Check the troubleshooting section above
+2. Verify your Python and dependencies versions
+3. Ensure model files are in the correct location
+4. Test with the provided sample images
+
+---
+
+## 🚀 Next Steps
+
+### 🔮 Future Enhancements
+
+- [ ] **Model Optimization**: Implement transfer learning with pre-trained models
+- [ ] **Web Application**: Create a Flask/Streamlit web interface
+- [ ] **Mobile App**: Develop a mobile application for field use
+- [ ] **More Diseases**: Expand to detect additional potato diseases
+- [ ] **Real-time Detection**: Implement live camera feed processing
+- [ ] **API Development**: Create REST API for integration
+
+### 🎯 Improvement Ideas
+
+- [ ] **Hyperparameter Tuning**: Optimize model parameters
+- [ ] **Cross-validation**: Implement k-fold cross-validation
+- [ ] **Ensemble Methods**: Combine multiple models
+- [ ] **Data Balancing**: Handle class imbalance if present
+
+### 🐛 Bug Reports
+
+If you find a bug, please create an issue with:
+
+- Description of the problem
+- Steps to reproduce
+- Expected vs actual behavior
+- System information
+
+### 💡 Feature Requests
+
+For new features, please provide:
+
+- Clear description of the feature
+- Use case and benefits
+- Implementation suggestions```
+
+# ==================DEBUGGING AND TROUBLESHOOTING GUIDE:===========================
+
+# 🥔 Potato Disease Detection - Upload Functionality Guide
+
+## 🚀 Quick Start
+
+1. **Run the Application**:
+
+   ```bash
+   python app.py
+   ```
+
+   Or double-click `run_and_test.bat`
+
+2. **Access the App**:
+   - Main app: http://localhost:5000
+   - Debug upload page: http://localhost:5000/debug
+   - Health check: http://localhost:5000/health
+
+## 📋 Testing Upload Functionality
+
+### Step 1: Check System Health
+
+1. Go to http://localhost:5000/debug
+2. Click "🔍 Check System Health"
+3. Verify all items show ✅:
+   - Status: healthy
+   - Model Loaded: Yes
+   - Upload Dir Exists: Yes
+   - Upload Dir Writable: Yes
+
+### Step 2: Test Upload Directory
+
+1. Click "📂 Test Upload Directory"
+2. Should show "Upload directory is working correctly"
+
+### Step 3: Test Image Upload
+
+1. Click "📁 Click here to select an image" or drag an image
+2. Select a potato leaf image (JPG, PNG, JPEG)
+3. Preview should appear
+4. Click "🔬 Analyze Disease"
+5. Results should show:
+   - Disease name and confidence
+   - Recommendations
+   - The analyzed image displayed
+
+## 🔧 Troubleshooting Upload Issues
+
+### Issue: "No file uploaded" Error
+
+**Solutions:**
+
+1. Ensure you're clicking the upload area or browse link
+2. Check browser console for JavaScript errors (F12)
+3. Try the debug page: http://localhost:5000/debug
+4. **Mobile**: Tap firmly on upload area, wait for file picker
+
+### Issue: File Not Saving
+
+**Solutions:**
+
+1. Check upload directory permissions:
+   ```bash
+   mkdir static/uploads
+   ```
+2. Run as administrator if on Windows
+3. Check disk space
+4. **Mobile**: Ensure stable network connection
+
+### Issue: Camera Not Working (Mobile)
+
+**Solutions:**
+
+1. **Grant camera permissions** when prompted
+2. **Use HTTPS** for camera access on mobile (required by browsers)
+3. **Check camera availability** - some devices block camera access
+4. **Try different browsers** (Chrome/Safari work best)
+5. **Close other camera apps** that might be using the camera
+
+### Issue: Touch/Tap Not Working (Mobile)
+
+**Solutions:**
+
+1. **Clear browser cache** and reload
+2. **Disable browser zoom** if enabled
+3. **Try two-finger tap** if single tap doesn't work
+4. **Check touch targets** - buttons should be at least 44px
+5. **Restart browser app** on mobile device
+
+### Issue: Image Too Small/Large on Mobile
+
+**Solutions:**
+
+1. **Portrait orientation** usually works better
+2. **Pinch to zoom** on images if needed
+3. **Landscape mode** available for wider screens
+4. **Image auto-resizes** based on screen size
+
+### Issue: Slow Performance on Mobile
+
+**Solutions:**
+
+1. **Close other browser tabs** to free memory
+2. **Use smaller image files** (under 5MB recommended)
+3. **Ensure good network connection** for uploads
+4. **Clear browser cache** regularly
+5. **Restart browser** if app becomes unresponsive
+
+### Issue: Model Not Loading
+
+**Solutions:**
+
+1. Verify model file exists: `models/1.h5`
+2. Install required packages:
+   ```bash
+   pip install tensorflow pillow flask
+   ```
+
+### Issue: JavaScript Errors
+
+**Solutions:**
+
+1. Clear browser cache (Ctrl+F5)
+2. Check browser console (F12)
+3. Try a different browser
+4. Disable browser extensions
+
+### Issue: Image Not Displaying in Results
+
+**Solutions:**
+
+1. Check browser network tab (F12) for failed requests
+2. Verify uploaded file in `static/uploads/` folder
+3. Check Flask console for file save errors
+
+## 🧪 Debug Features
+
+### Console Logging
+
+The JavaScript includes extensive console logging. Open browser developer tools (F12) to see:
+
+- File selection events
+- Upload progress
+- Server responses
+- Error details
+
+### Debug Endpoints
+
+- `/health` - System status
+- `/debug/upload-test` - Upload directory test
+- `/debug` - Interactive upload test page
+
+### Manual Testing
+
+1. **File Input Test**:
+
+   ```javascript
+   document.getElementById("fileInput").click();
+   ```
+
+2. **Check Selected File**:
+
+   ```javascript
+   console.log(selectedFile);
+   ```
+
+3. **Test FormData**:
+   ```javascript
+   const formData = new FormData();
+   formData.append("file", selectedFile);
+   console.log([...formData.entries()]);
+   ```
+
+## 💡 Tips for Success
+
+1. **Use supported image formats**: JPG, PNG, JPEG, GIF
+2. **Keep file size under 16MB**
+3. **Use clear potato leaf images**
+4. **Check browser compatibility** (modern browsers work best)
+5. **Enable JavaScript**
+6. **Allow camera permissions** (for camera capture feature)
+
+## 🆘 Getting Help
+
+If upload functionality still doesn't work:
+
+1. **Check Flask console output** for error messages
+2. **Check browser console** (F12 → Console tab)
+3. **Try the debug page** at `/debug`
+4. **Test with different image files**
+5. **Restart the Flask app**
+6. **Check file permissions** on the upload directory
+
+## 🎯 Expected Results
+
+After successful upload and analysis:
+
+- ✅ Disease classification (Early Blight, Late Blight, or Healthy)
+- ✅ Confidence percentage
+- ✅ Treatment recommendations
+- ✅ Analyzed image displayed in results
+- ✅ Timestamp of analysis
+
+# PDF Report Download Upgrade Guide
+
+## 🎉 New Features Added
+
+### ✨ **PDF Format**
+
+- Professional PDF reports instead of simple text files
+- Includes header, footer, tables, and proper formatting
+- Company branding and professional layout
+
+### 📁 **Folder Selection**
+
+- Choose where to save your PDF reports
+- Modern file picker dialog (supported browsers)
+- Automatic fallback to default downloads folder
+
+### 🎨 **Enhanced Report Content**
+
+- **Report Header**: Timestamp, analysis method, model version
+- **Analyzed Image**: Embedded image (if available)
+- **Diagnosis Section**: Disease name, confidence, risk assessment
+- **Probability Breakdown**: Table showing all class probabilities
+- **Treatment Recommendations**: Numbered list of actionable advice
+- **Professional Footer**: Branding and copyright information
+
+## 🚀 Installation Requirements
+
+Add to your `requirements.txt`:
+
+```
+reportlab>=4.0.0
+```
+
+Install the new dependency:
+
+```bash
+pip install reportlab>=4.0.0
+```
+
+# PDF Generation Troubleshooting Guide
+
+## 🔧 If PDF Generation is Failing
+
+### Quick Fix Steps
+
+1. **Install ReportLab Library**
+
+   ```bash
+   pip install reportlab>=4.0.0
+   ```
+
+2. **Run Installation Script**
+
+   - **Windows**: Double-click `install_pdf_deps.bat`
+   - **Linux/Mac**: Run `bash install_pdf_deps.sh`
+
+3. **Restart the Application**
+   ```bash
+   python app.py
+   ```
+
+### Common Issues and Solutions
+
+#### ❌ **"ReportLab not available" Error**
+
+**Problem**: ReportLab library is not installed.
+
+**Solution**:
+
+```bash
+pip install reportlab
+# or
+pip install reportlab>=4.0.0
+```
+
+**Alternative**: Use virtual environment
+
+```bash
+python -m venv pdf_env
+source pdf_env/bin/activate  # Linux/Mac
+# or
+pdf_env\Scripts\activate     # Windows
+pip install reportlab
+```
+
+#### ❌ **"Permission denied" or "Access denied" Errors**
+
+**Problem**: Insufficient permissions to install packages.
+
+**Solutions**:
+
+1. **Use --user flag**:
+
+   ```bash
+   pip install --user reportlab
+   ```
+
+2. **Run as administrator** (Windows):
+
+   - Right-click Command Prompt → "Run as administrator"
+   - Then run: `pip install reportlab`
+
+3. **Use sudo** (Linux/Mac):
+   ```bash
+   sudo pip install reportlab
+   ```
+
+#### ❌ **"Module not found" Error Despite Installation**
+
+**Problem**: ReportLab installed in different Python environment.
+
+**Solutions**:
+
+1. **Check Python version**:
+
+   ```bash
+   python --version
+   which python  # Linux/Mac
+   where python  # Windows
+   ```
+
+2. **Install for specific Python version**:
+
+   ```bash
+   python3 -m pip install reportlab
+   # or
+   python3.9 -m pip install reportlab
+   ```
+
+3. **Verify installation**:
+   ```bash
+   python -c "import reportlab; print('ReportLab available')"
+   ```
+
+#### ❌ **PDF Generation Works but Images Missing**
+
+**Problem**: Image files not accessible or corrupted.
+
+**Solutions**:
+
+1. **Check upload folder permissions**:
+
+   ```bash
+   ls -la static/uploads/  # Linux/Mac
+   dir static\uploads\     # Windows
+   ```
+
+2. **Verify image exists**:
+
+   - Check browser developer tools for 404 errors
+   - Ensure images are properly saved during upload
+
+3. **Check image format**:
+   - Ensure images are JPG, PNG, or supported formats
+   - ReportLab may have issues with some image formats
+
+#### ❌ **Client-side PDF Generation Fails**
+
+**Problem**: jsPDF library not loading.
+
+**Solutions**:
+
+1. **Check internet connection** (jsPDF loads from CDN)
+
+2. **Check browser console** for JavaScript errors
+
+#### ❌ **Folder Selection Not Working**
+
+**Problem**: File System Access API not supported.
+
+**Solutions**:
+
+1. **Update browser**:
+
+   - Chrome 86+ or Edge 86+ required for folder selection
+   - Firefox and Safari will use default download folder
+
+2. **Enable experimental features** (Chrome):
+
+   - Go to `chrome://flags`
+   - Enable "Experimental Web Platform features"
+
+3. **Accept automatic download** to default folder
+
+The system should work with any clear image of a potato plant leaf!
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🙏 Acknowledgments
+
+- **PlantVillage Dataset**: For providing the potato disease dataset
+- **TensorFlow Team**: For the amazing deep learning framework
+- **Open Source Community**: For inspiration and resources
+
+## 📞 Contact
+
+- **Author**: Lucky Sharma
+- **Email**: panditluckysharma42646@gmail.com
+- **LinkedIn**: https://www.linkedin.com/in/lucky-sharma918894599977
+- **GitHub**: https://github.com/itsluckysharma01
+
+---
+
+<div align="center">
+  <p>⭐ Star this repository if you found it helpful!</p>
+  <p>🍀 Happy coding and may your potatoes be healthy!</p>
+</div>
+"

app.py

@@ -0,0 +1,625 @@
+import os
+import numpy as np
+import tensorflow as tf
+from flask import Flask, render_template, request, jsonify, redirect, url_for, flash, send_from_directory, send_file
+from werkzeug.utils import secure_filename
+from PIL import Image
+import io
+import base64
+from datetime import datetime
+import tempfile
+
+# PDF generation dependencies with error handling
+try:
+    from reportlab.lib.pagesizes import letter, A4
+    from reportlab.platypus import SimpleDocTemplate, Paragraph, Spacer, Image as RLImage, Table, TableStyle
+    from reportlab.lib.styles import getSampleStyleSheet, ParagraphStyle
+    from reportlab.lib.units import inch
+    from reportlab.lib import colors
+    from reportlab.lib.enums import TA_CENTER, TA_LEFT
+    REPORTLAB_AVAILABLE = True
+    print("✅ ReportLab library loaded successfully!")
+except ImportError as e:
+    REPORTLAB_AVAILABLE = False
+    print(f"⚠️ ReportLab not available: {e}")
+    print("📝 PDF generation will use client-side fallback only")
+
+app = Flask(__name__)
+app.secret_key = 'your-secret-key-here'  # Change this to a secure secret key
+
+# Configuration
+UPLOAD_FOLDER = 'static/uploads'
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
+MAX_CONTENT_LENGTH = 16 * 1024 * 1024  # 16MB max file size
+
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['MAX_CONTENT_LENGTH'] = MAX_CONTENT_LENGTH
+
+# Create upload directory if it doesn't exist
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+os.makedirs('static/css', exist_ok=True)
+os.makedirs('static/js', exist_ok=True)
+os.makedirs('templates', exist_ok=True)
+
+@app.route('/uploads/<filename>')
+def uploaded_file(filename):
+    """Serve uploaded files"""
+    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
+
+# Load the trained model
+MODEL_PATH = "models/1.h5"  # Update this path if needed
+try:
+    model = tf.keras.models.load_model(MODEL_PATH)
+    print("✅ Model loaded successfully!")
+    MODEL_LOADED = True
+except Exception as e:
+    print(f"❌ Error loading model: {e}")
+    MODEL_LOADED = False
+    model = None
+
+# Class names from your training (must match the exact order from training)
+# Training order: ['Potato___Early_blight', 'Potato___Late_blight', 'Potato___healthy']
+CLASS_NAMES = ["Potato___Early_blight", "Potato___Late_blight", "Potato___healthy"]
+CLASS_DISPLAY_NAMES = ["Early Blight", "Late Blight", "Healthy"]
+CLASS_DESCRIPTIONS = {
+    "Potato___Early_blight": "A common fungal disease that causes dark spots on potato leaves. Treatment with copper-based fungicides is recommended.",
+    "Potato___Late_blight": "A serious disease caused by Phytophthora infestans. Immediate action required - remove infected plants and apply appropriate fungicides.",
+    "Potato___healthy": "The potato plant appears healthy with no signs of disease detected. Continue good agricultural practices."
+}
+
+# Image preprocessing parameters
+IMAGE_SIZE = 256
+
+def allowed_file(filename):
+    """Check if file extension is allowed"""
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def preprocess_image(image):
+    """Preprocess the uploaded image for prediction"""
+    try:
+        # Convert to RGB if necessary
+        if image.mode != "RGB":
+            image = image.convert("RGB")
+        
+        # Resize image
+        image = image.resize((IMAGE_SIZE, IMAGE_SIZE))
+        
+        # Convert to numpy array 
+        img_array = np.array(image)
+        
+        # DO NOT normalize here - the model has built-in rescaling layer
+        # The model expects pixel values in range [0, 255]
+        # img_array = img_array / 255.0  # Removed this line
+        
+        # Add batch dimension
+        img_array = np.expand_dims(img_array, axis=0)
+        
+        # Debug: Print image statistics
+        print(f"Image shape: {img_array.shape}")
+        print(f"Image pixel range: [{img_array.min():.2f}, {img_array.max():.2f}]")
+        
+        return img_array
+    except Exception as e:
+        print(f"Error preprocessing image: {e}")
+        return None
+
+def predict_disease(image):
+    """Make prediction on the preprocessed image"""
+    if not MODEL_LOADED or model is None:
+        return {"error": "Model not loaded"}
+    
+    try:
+        # Preprocess image
+        processed_image = preprocess_image(image)
+        if processed_image is None:
+            return {"error": "Failed to preprocess image"}
+        
+        # Make prediction
+        predictions = model.predict(processed_image)
+        predicted_class_index = np.argmax(predictions[0])
+        confidence = float(np.max(predictions[0]))
+        
+        # Debug: Print prediction details
+        print(f"Raw predictions: {predictions[0]}")
+        print(f"Predicted class index: {predicted_class_index}")
+        print(f"Confidence: {confidence:.4f}")
+        
+        # Get class name
+        predicted_class = CLASS_NAMES[predicted_class_index]
+        predicted_display_name = CLASS_DISPLAY_NAMES[predicted_class_index]
+        
+        # Create detailed results
+        all_predictions = {}
+        for i, (class_name, display_name) in enumerate(zip(CLASS_NAMES, CLASS_DISPLAY_NAMES)):
+            all_predictions[display_name] = {
+                'probability': round(float(predictions[0][i]) * 100, 2),
+                'description': CLASS_DESCRIPTIONS[class_name]
+            }
+        
+        return {
+            "predicted_class": predicted_display_name,
+            "confidence": round(confidence * 100, 2),
+            "description": CLASS_DESCRIPTIONS[predicted_class],
+            "all_predictions": all_predictions,
+            "timestamp": datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+        }
+        
+    except Exception as e:
+        print(f"Prediction error: {e}")
+        return {"error": f"Prediction failed: {str(e)}"}
+
+def get_recommendations(disease_name, confidence):
+    """Get treatment recommendations based on prediction"""
+    recommendations = {
+        'Early Blight': [
+            "Remove affected leaves immediately and dispose properly",
+            "Apply copper-based fungicide spray",
+            "Improve air circulation around plants",
+            "Avoid overhead watering",
+            "Consider crop rotation for next season"
+        ],
+        'Late Blight': [
+            "URGENT: Remove and destroy infected plants immediately",
+            "Apply systemic fungicides (metalaxyl-based)",
+            "Monitor weather conditions closely",
+            "Increase plant spacing for better air circulation",
+            "Harvest healthy tubers as soon as possible"
+        ],
+        'Healthy': [
+            "Continue current care practices",
+            "Maintain proper watering schedule",
+            "Monitor plants regularly for early signs of disease",
+            "Ensure good soil drainage",
+            "Apply balanced fertilizer as needed"
+        ]
+    }
+    return recommendations.get(disease_name, ["Consult agricultural expert for specific advice"])
+
+@app.route('/')
+def index():
+    """Main page"""
+    return render_template('index.html', model_loaded=MODEL_LOADED)
+
+@app.route('/test')
+def test_upload():
+    """Simple upload test page"""
+    return render_template('test_upload.html')
+
+@app.route('/debug')
+def debug_upload():
+    """Debug upload test page"""
+    return render_template('debug_upload.html')
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    """Handle image upload and prediction"""
+    try:
+        print(f"Received prediction request. Files: {list(request.files.keys())}")
+        
+        if 'file' not in request.files:
+            print("No file in request")
+            return jsonify({'error': 'No file uploaded'}), 400
+        
+        file = request.files['file']
+        print(f"File received: {file.filename}, size: {file.content_length if hasattr(file, 'content_length') else 'unknown'}")
+        
+        if file.filename == '':
+            print("Empty filename")
+            return jsonify({'error': 'No file selected'}), 400
+        
+        if not allowed_file(file.filename):
+            print(f"Invalid file type: {file.filename}")
+            return jsonify({'error': 'Invalid file type. Please upload PNG, JPG, or JPEG files.'}), 400
+        
+        # Ensure upload directory exists
+        os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+        
+        # Save uploaded file
+        filename = secure_filename(file.filename)
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        filename = f"{timestamp}_{filename}"
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        
+        print(f"Saving file to: {filepath}")
+        file.save(filepath)
+        print(f"File saved successfully")
+        
+        # Verify file exists
+        if not os.path.exists(filepath):
+            print(f"File was not saved properly: {filepath}")
+            return jsonify({'error': 'Failed to save uploaded file'}), 500
+        
+        print(f"File size on disk: {os.path.getsize(filepath)} bytes")
+        
+        # Open and predict
+        try:
+            image = Image.open(filepath)
+            print(f"Image opened successfully: {image.size}, mode: {image.mode}")
+        except Exception as e:
+            print(f"Failed to open image: {e}")
+            return jsonify({'error': f'Invalid image file: {str(e)}'}), 400
+        
+        result = predict_disease(image)
+        print(f"Prediction result: {result}")
+        
+        if 'error' in result:
+            return jsonify(result), 500
+        
+        # Add recommendations and image URL for upload method
+        result['recommendations'] = get_recommendations(result['predicted_class'], result['confidence'])
+        result['image_url'] = url_for('uploaded_file', filename=filename)
+        
+        print(f"Final result with image URL: {result['image_url']}")
+        return jsonify(result)
+        
+    except Exception as e:
+        print(f"Prediction error: {e}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({'error': f'Prediction failed: {str(e)}'}), 500
+
+@app.route('/predict_camera', methods=['POST'])
+def predict_camera():
+    """Handle camera image prediction"""
+    try:
+        data = request.get_json()
+        
+        if 'image' not in data:
+            return jsonify({'error': 'No image data provided'}), 400
+        
+        # Decode base64 image
+        image_data = data['image'].split(',')[1]  # Remove data:image/png;base64, prefix
+        image_bytes = base64.b64decode(image_data)
+        image = Image.open(io.BytesIO(image_bytes))
+        
+        # Save camera image
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        filename = f"camera_{timestamp}.png"
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        image.save(filepath)
+        
+        # Make prediction
+        result = predict_disease(image)
+        
+        if 'error' in result:
+            return jsonify(result), 500
+        
+        # Add recommendations and image URL for camera method
+        result['recommendations'] = get_recommendations(result['predicted_class'], result['confidence'])
+        result['image_url'] = url_for('uploaded_file', filename=filename)
+        
+        return jsonify(result)
+        
+    except Exception as e:
+        return jsonify({'error': f'Camera prediction failed: {str(e)}'}), 500
+
+@app.route('/health')
+def health():
+    """Health check endpoint"""
+    upload_dir_exists = os.path.exists(app.config['UPLOAD_FOLDER'])
+    upload_dir_writable = os.access(app.config['UPLOAD_FOLDER'], os.W_OK) if upload_dir_exists else False
+    
+    return jsonify({
+        'status': 'healthy',
+        'model_loaded': MODEL_LOADED,
+        'upload_dir_exists': upload_dir_exists,
+        'upload_dir_writable': upload_dir_writable,
+        'upload_path': app.config['UPLOAD_FOLDER'],
+        'timestamp': datetime.now().isoformat()
+    })
+
+@app.route('/debug/upload-test')
+def debug_upload_test():
+    """Debug endpoint to test upload directory"""
+    try:
+        # Ensure upload directory exists
+        os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+        
+        # Test file creation
+        test_file = os.path.join(app.config['UPLOAD_FOLDER'], 'test.txt')
+        with open(test_file, 'w') as f:
+            f.write('test')
+        
+        # Clean up test file
+        os.remove(test_file)
+        
+        return jsonify({
+            'status': 'success',
+            'message': 'Upload directory is working correctly',
+            'path': app.config['UPLOAD_FOLDER']
+        })
+    except Exception as e:
+        return jsonify({
+            'status': 'error',
+            'message': f'Upload directory test failed: {str(e)}',
+            'path': app.config['UPLOAD_FOLDER']
+        }), 500
+
+def test_model_predictions():
+    """Test the model with some dummy data to verify it's working correctly"""
+    if not MODEL_LOADED or model is None:
+        return {"error": "Model not loaded"}
+    
+    try:
+        # Create dummy test data - same shape as expected input
+        dummy_image = np.random.randint(0, 255, (1, IMAGE_SIZE, IMAGE_SIZE, 3), dtype=np.uint8)
+        
+        # Make prediction
+        predictions = model.predict(dummy_image)
+        
+        print(f"Model test - Input shape: {dummy_image.shape}")
+        print(f"Model test - Output shape: {predictions.shape}")
+        print(f"Model test - Predictions: {predictions[0]}")
+        print(f"Model test - Sum of predictions: {np.sum(predictions[0])}")
+        print(f"Model test - Class names order: {CLASS_NAMES}")
+        
+        return {
+            "status": "success",
+            "input_shape": str(dummy_image.shape),
+            "output_shape": str(predictions.shape),
+            "predictions": predictions[0].tolist(),
+            "prediction_sum": float(np.sum(predictions[0])),
+            "class_names": CLASS_NAMES
+        }
+    except Exception as e:
+        print(f"Model test error: {e}")
+        return {"error": f"Model test failed: {str(e)}"}
+
+@app.route('/debug/model-test')
+def debug_model_test():
+    """Debug endpoint to test model functionality"""
+    result = test_model_predictions()
+    return jsonify(result)
+
+@app.errorhandler(413)
+def too_large(e):
+    return jsonify({'error': 'File too large. Maximum size is 16MB.'}), 413
+
+@app.errorhandler(404)
+def not_found(e):
+    return render_template('index.html', model_loaded=MODEL_LOADED)
+
+def generate_pdf_report(prediction_data, image_path=None):
+    """Generate a professional PDF report for the disease prediction"""
+    if not REPORTLAB_AVAILABLE:
+        print("❌ ReportLab not available - cannot generate server-side PDF")
+        return None
+        
+    try:
+        # Create a temporary file for the PDF
+        temp_pdf = tempfile.NamedTemporaryFile(delete=False, suffix='.pdf')
+        
+        # Create the PDF document
+        doc = SimpleDocTemplate(temp_pdf.name, pagesize=A4)
+        styles = getSampleStyleSheet()
+        story = []
+        
+        # Custom styles
+        title_style = ParagraphStyle(
+            'CustomTitle',
+            parent=styles['Title'],
+            fontSize=24,
+            spaceAfter=30,
+            alignment=TA_CENTER,
+            textColor=colors.darkgreen
+        )
+        
+        heading_style = ParagraphStyle(
+            'CustomHeading',
+            parent=styles['Heading2'],
+            fontSize=16,
+            spaceAfter=12,
+            textColor=colors.darkblue
+        )
+        
+        # Title
+        story.append(Paragraph("🥔 POTATO DISEASE DETECTION REPORT", title_style))
+        story.append(Spacer(1, 20))
+        
+        # Header info table
+        header_data = [
+            ['Report Generated:', prediction_data.get('timestamp', datetime.now().strftime("%Y-%m-%d %H:%M:%S"))],
+            ['Analysis Method:', 'Deep Learning AI Classification'],
+            ['Model Version:', 'TensorFlow/Keras CNN v1.0']
+        ]
+        
+        header_table = Table(header_data, colWidths=[2*inch, 4*inch])
+        header_table.setStyle(TableStyle([
+            ('BACKGROUND', (0, 0), (0, -1), colors.lightgrey),
+            ('TEXTCOLOR', (0, 0), (-1, -1), colors.black),
+            ('ALIGN', (0, 0), (-1, -1), 'LEFT'),
+            ('FONTNAME', (0, 0), (-1, -1), 'Helvetica-Bold'),
+            ('FONTSIZE', (0, 0), (-1, -1), 10),
+            ('BOTTOMPADDING', (0, 0), (-1, -1), 12),
+            ('GRID', (0, 0), (-1, -1), 1, colors.black)
+        ]))
+        
+        story.append(header_table)
+        story.append(Spacer(1, 30))
+        
+        # Add image if provided
+        if image_path and os.path.exists(image_path):
+            story.append(Paragraph("📸 ANALYZED IMAGE", heading_style))
+            try:
+                # Resize image to fit in PDF
+                img = RLImage(image_path)
+                img.drawHeight = 3 * inch
+                img.drawWidth = 3 * inch
+                story.append(img)
+                story.append(Spacer(1, 20))
+            except Exception as img_error:
+                print(f"Warning: Could not add image to PDF: {img_error}")
+                story.append(Paragraph("Image could not be embedded in PDF", styles['Normal']))
+                story.append(Spacer(1, 20))
+        
+        # Diagnosis Section
+        story.append(Paragraph("🎯 DIAGNOSIS RESULTS", heading_style))
+        
+        # Main diagnosis
+        diagnosis_data = [
+            ['Predicted Disease:', prediction_data.get('predicted_class', 'Unknown')],
+            ['Confidence Level:', f"{prediction_data.get('confidence', 0):.2f}%"],
+            ['Risk Assessment:', get_risk_level(prediction_data.get('confidence', 0))]
+        ]
+        
+        diagnosis_table = Table(diagnosis_data, colWidths=[2*inch, 4*inch])
+        diagnosis_table.setStyle(TableStyle([
+            ('BACKGROUND', (0, 0), (0, -1), colors.lightblue),
+            ('TEXTCOLOR', (0, 0), (-1, -1), colors.black),
+            ('ALIGN', (0, 0), (-1, -1), 'LEFT'),
+            ('FONTNAME', (0, 0), (-1, -1), 'Helvetica'),
+            ('FONTSIZE', (0, 0), (-1, -1), 12),
+            ('BOTTOMPADDING', (0, 0), (-1, -1), 12),
+            ('GRID', (0, 0), (-1, -1), 1, colors.black)
+        ]))
+        
+        story.append(diagnosis_table)
+        story.append(Spacer(1, 20))
+        
+        # Description
+        story.append(Paragraph("📋 DESCRIPTION", heading_style))
+        description = Paragraph(prediction_data.get('description', 'No description available.'), styles['Normal'])
+        story.append(description)
+        story.append(Spacer(1, 20))
+        
+        # Probability breakdown
+        story.append(Paragraph("📊 PROBABILITY BREAKDOWN", heading_style))
+        
+        prob_data = [['Disease Type', 'Probability']]
+        all_predictions = prediction_data.get('all_predictions', {})
+        for disease, info in all_predictions.items():
+            prob_data.append([disease, f"{info.get('probability', 0):.2f}%"])
+        
+        prob_table = Table(prob_data, colWidths=[3*inch, 2*inch])
+        prob_table.setStyle(TableStyle([
+            ('BACKGROUND', (0, 0), (-1, 0), colors.grey),
+            ('TEXTCOLOR', (0, 0), (-1, 0), colors.whitesmoke),
+            ('ALIGN', (0, 0), (-1, -1), 'CENTER'),
+            ('FONTNAME', (0, 0), (-1, 0), 'Helvetica-Bold'),
+            ('FONTNAME', (0, 1), (-1, -1), 'Helvetica'),
+            ('FONTSIZE', (0, 0), (-1, -1), 10),
+            ('BOTTOMPADDING', (0, 0), (-1, -1), 12),
+            ('GRID', (0, 0), (-1, -1), 1, colors.black)
+        ]))
+        
+        story.append(prob_table)
+        story.append(Spacer(1, 20))
+        
+        # Recommendations
+        story.append(Paragraph("💡 TREATMENT RECOMMENDATIONS", heading_style))
+        
+        recommendations = prediction_data.get('recommendations', [])
+        for i, rec in enumerate(recommendations, 1):
+            rec_text = f"{i}. {rec}"
+            story.append(Paragraph(rec_text, styles['Normal']))
+            story.append(Spacer(1, 8))
+        
+        story.append(Spacer(1, 30))
+        
+        # Footer
+        footer_style = ParagraphStyle(
+            'Footer',
+            parent=styles['Normal'],
+            fontSize=10,
+            alignment=TA_CENTER,
+            textColor=colors.grey
+        )
+        
+        story.append(Paragraph("_______________________________________________", footer_style))
+        story.append(Spacer(1, 10))
+        story.append(Paragraph("Generated by Potato Disease Detection System", footer_style))
+        story.append(Paragraph("Powered by Flask & TensorFlow | Lucky Sharma", footer_style))
+        story.append(Paragraph("© 2025 All Rights Reserved", footer_style))
+        
+        # Build PDF
+        doc.build(story)
+        
+        print(f"✅ PDF report generated successfully: {temp_pdf.name}")
+        return temp_pdf.name
+        
+    except Exception as e:
+        print(f"❌ Error generating PDF: {e}")
+        import traceback
+        traceback.print_exc()
+        return None
+
+def get_risk_level(confidence):
+    """Determine risk level based on confidence"""
+    if confidence >= 80:
+        return "High Confidence"
+    elif confidence >= 60:
+        return "Medium Confidence"
+    else:
+        return "Low Confidence - Manual Verification Recommended"
+
+@app.route('/generate-pdf-report', methods=['POST'])
+def generate_pdf_report_route():
+    """Generate and download PDF report"""
+    try:
+        data = request.get_json()
+        
+        if not data:
+            return jsonify({'error': 'No data provided'}), 400
+        
+        # Check if ReportLab is available
+        if not REPORTLAB_AVAILABLE:
+            print("⚠️ ReportLab not available, suggesting client-side fallback")
+            return jsonify({
+                'error': 'Server-side PDF generation not available',
+                'fallback': 'client',
+                'message': 'ReportLab library not installed. Using client-side fallback.'
+            }), 503
+        
+        # Get image path if provided
+        image_path = None
+        if 'image_url' in data:
+            # Extract filename from URL and construct full path
+            image_filename = data['image_url'].split('/')[-1]
+            image_path = os.path.join(app.config['UPLOAD_FOLDER'], image_filename)
+            
+            # Verify image exists
+            if not os.path.exists(image_path):
+                image_path = None
+        
+        # Generate PDF
+        pdf_path = generate_pdf_report(data, image_path)
+        
+        if not pdf_path:
+            print("❌ PDF generation failed, suggesting client-side fallback")
+            return jsonify({
+                'error': 'Server-side PDF generation failed',
+                'fallback': 'client',
+                'message': 'Could not generate PDF on server. Using client-side fallback.'
+            }), 503
+        
+        # Create filename
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        disease_name = data.get('predicted_class', 'unknown').replace(' ', '_')
+        pdf_filename = f"potato_disease_report_{disease_name}_{timestamp}.pdf"
+        
+        print(f"✅ PDF generated successfully: {pdf_filename}")
+        return send_file(
+            pdf_path,
+            as_attachment=True,
+            download_name=pdf_filename,
+            mimetype='application/pdf'
+        )
+        
+    except Exception as e:
+        print(f"❌ PDF generation error: {e}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({
+            'error': f'PDF generation failed: {str(e)}',
+            'fallback': 'client',
+            'message': 'Server error occurred. Using client-side fallback.'
+        }), 503
+
+if __name__ == '__main__':
+    print("🚀 Starting Potato Disease Detection Flask App...")
+    print(f"📁 Upload folder: {UPLOAD_FOLDER}")
+    print(f"🤖 Model loaded: {MODEL_LOADED}")
+    print("🌐 Access the app at: http://localhost:5000")
+    print("💡 Press Ctrl+C to stop the server")
+    
+    app.run(debug=True, host='0.0.0.0', port=5000)

models/1.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6a45a2a92332af1909dc22a358df71f5bda8a8a0d8e8f20b8a418058f1d6bb05
+size 2284808

models/1/fingerprint.pb

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cb44ef89d6bb9784adb55b8e23814c1d68d97b3fc64dd3cf7af384477086d64c
+size 75

models/1/saved_model.pb

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e363b45246a41fa1857bd8f17447da4aac0058b6539ee50e3d043cc9ad0dafa6
+size 162792

models/1/variables/variables.data-00000-of-00001

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fd04fe5bed6a7d85490a35ee700b54e39c4b6e46876fd28f7d8c471b00558374
+size 1474148

models/4.keras

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7fafa6d490669d331044ed2cca67a6c437773725be035f13e64e7f4c6145554b
+size 2284916

requirements.txt

@@ -0,0 +1,7 @@
+Flask>=2.3.0
+tensorflow>=2.13.0
+Pillow>=10.0.0
+numpy>=1.24.0
+Werkzeug>=2.3.0
+reportlab>=4.0.0
+

runtime.txt

@@ -0,0 +1 @@
+python-3.10.12

static/content/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

static/content/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

static/css/style.css

@@ -0,0 +1,1334 @@
+/* CSS Variables for mobile viewport fix */
+:root {
+    --vh: 1vh;
+}
+
+/* Mobile-specific body classes */
+.mobile-device {
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.ios-device {
+    -webkit-overflow-scrolling: touch;
+}
+
+/* Tooltip styles for unsupported features */
+.tooltip {
+    position: absolute;
+    bottom: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    white-space: nowrap;
+    z-index: 1000;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+}
+
+.method-card:hover .tooltip {
+    opacity: 1;
+}
+
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    line-height: 1.6;
+    color: #333;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* Header */
+.header {
+    text-align: center;
+    margin-bottom: 30px;
+    color: white;
+}
+
+.header-content {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 30px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.logo-icon {
+    font-size: 4rem;
+    margin-bottom: 15px;
+    color: #4ade80;
+}
+
+.header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+    font-weight: 700;
+}
+
+.header p {
+    font-size: 1.1rem;
+    opacity: 0.9;
+    margin-bottom: 15px;
+}
+
+.alert {
+    padding: 15px;
+    border-radius: 10px;
+    margin-top: 15px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.alert-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    color: #fee2e2;
+}
+
+/* Main Content */
+.main-content {
+    background: white;
+    border-radius: 20px;
+    padding: 40px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    margin-bottom: 30px;
+    position: relative;
+}
+
+/* Upload Methods */
+.upload-methods {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 30px;
+    justify-content: center;
+}
+
+.method-card {
+    flex: 1;
+    max-width: 200px;
+    padding: 25px;
+    border: 2px solid #e2e8f0;
+    border-radius: 15px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: #f8fafc;
+}
+
+.method-card:hover {
+    border-color: #667eea;
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.2);
+}
+
+.method-card.active {
+    border-color: #667eea;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+}
+
+.method-card i {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+    color: #667eea;
+}
+
+.method-card.active i {
+    color: white;
+}
+
+.method-card h3 {
+    margin-bottom: 5px;
+    font-size: 1.2rem;
+}
+
+.method-card p {
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+/* Upload Section */
+.upload-area {
+    border: 3px dashed #cbd5e1;
+    border-radius: 15px;
+    padding: 60px 20px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: #f8fafc;
+}
+
+.upload-area:hover, .upload-area.dragover {
+    border-color: #667eea;
+    background: #f0f9ff;
+    transform: translateY(-2px);
+}
+
+.upload-icon {
+    font-size: 4rem;
+    margin-bottom: 20px;
+    color: #667eea;
+}
+
+.upload-content h3 {
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+    color: #1e293b;
+}
+
+.browse-text {
+    color: #667eea;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.supported-formats {
+    margin-top: 15px;
+    color: #94a3b8;
+}
+
+/* Camera Section */
+.camera-container {
+    text-align: center;
+    padding: 20px;
+    border: 2px dashed #cbd5e1;
+    border-radius: 15px;
+    background: #f8fafc;
+}
+
+#video {
+    max-width: 100%;
+    max-height: 400px;
+    border-radius: 10px;
+    margin-bottom: 20px;
+}
+
+.camera-controls {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+/* Image Preview */
+.image-preview {
+    text-align: center;
+    margin-top: 30px;
+}
+
+.image-preview img {
+    max-width: 100%;
+    max-height: 400px;
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    margin-bottom: 20px;
+}
+
+.image-actions {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    margin-top: 20px;
+    flex-wrap: wrap;
+}
+
+/* Buttons */
+.btn {
+    padding: 12px 25px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.btn-predict {
+    background: linear-gradient(135deg, #4ade80, #22c55e);
+    color: white;
+}
+
+.btn-predict:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(34, 197, 94, 0.3);
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+}
+
+.btn-camera {
+    background: linear-gradient(135deg, #f59e0b, #d97706);
+    color: white;
+}
+
+.btn-camera:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(245, 158, 11, 0.3);
+}
+
+.btn-capture {
+    background: linear-gradient(135deg, #ef4444, #dc2626);
+    color: white;
+}
+
+.btn-capture:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.3);
+}
+
+.btn-secondary {
+    background: #e2e8f0;
+    color: #475569;
+}
+
+.btn-secondary:hover {
+    background: #cbd5e1;
+    transform: translateY(-2px);
+}
+
+/* Loading */
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.95);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 20px;
+    z-index: 1000;
+}
+
+.loading-content {
+    text-align: center;
+    color: #667eea;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 4px solid #e2e8f0;
+    border-top: 4px solid #667eea;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Results Section */
+.results-section {
+    margin-top: 40px;
+}
+
+.results-section h2 {
+    color: #1e293b;
+    margin-bottom: 30px;
+    font-size: 2rem;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+/* Analyzed Image Display */
+.analyzed-image {
+    background: #f8fafc;
+    border-radius: 15px;
+    padding: 25px;
+    margin-bottom: 30px;
+    text-align: center;
+}
+
+.analyzed-image h3 {
+    color: #1e293b;
+    margin-bottom: 20px;
+    font-size: 1.4rem;
+}
+
+.analyzed-image-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.analyzed-img {
+    max-width: 100%;
+    max-height: 300px;
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+    border: 3px solid #e2e8f0;
+}
+
+.prediction-card {
+    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
+    border-radius: 15px;
+    padding: 30px;
+    margin-bottom: 30px;
+    border: 1px solid #e2e8f0;
+}
+
+.prediction-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+
+.confidence-badge {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    padding: 8px 20px;
+    border-radius: 20px;
+    font-weight: 700;
+    font-size: 1.1rem;
+}
+
+.prediction-result {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.disease-icon {
+    font-size: 3rem;
+    color: #667eea;
+    background: rgba(102, 126, 234, 0.1);
+    padding: 20px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.disease-info h4 {
+    font-size: 1.8rem;
+    color: #1e293b;
+    margin-bottom: 10px;
+}
+
+.disease-info p {
+    color: #64748b;
+    font-size: 1.1rem;
+    margin-bottom: 8px;
+}
+
+.timestamp {
+    color: #94a3b8;
+    font-size: 0.9rem;
+}
+
+/* Detailed Analysis */
+.detailed-analysis {
+    background: #f8fafc;
+    border-radius: 15px;
+    padding: 30px;
+    margin-bottom: 30px;
+}
+
+.detailed-analysis h3 {
+    color: #1e293b;
+    margin-bottom: 20px;
+    font-size: 1.3rem;
+}
+
+.probability-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    padding: 15px;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.probability-label {
+    font-weight: 600;
+    color: #1e293b;
+    flex: 1;
+    min-width: 120px;
+}
+
+.probability-bar {
+    flex: 2;
+    height: 8px;
+    background: #e2e8f0;
+    border-radius: 4px;
+    margin: 0 15px;
+    overflow: hidden;
+    min-width: 100px;
+}
+
+.probability-fill {
+    height: 100%;
+    border-radius: 4px;
+    transition: width 0.5s ease;
+}
+
+.probability-value {
+    font-weight: 700;
+    color: #1e293b;
+    min-width: 50px;
+    text-align: right;
+}
+
+/* Recommendations */
+.recommendations {
+    background: linear-gradient(135deg, #fef3c7, #fed7aa);
+    border-radius: 15px;
+    padding: 30px;
+    border-left: 5px solid #f59e0b;
+    margin-bottom: 30px;
+}
+
+.recommendations h3 {
+    color: #92400e;
+    margin-bottom: 20px;
+    font-size: 1.3rem;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.recommendation-item {
+    background: rgba(255, 255, 255, 0.7);
+    padding: 15px;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    border-left: 3px solid #f59e0b;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+}
+
+.recommendation-item i {
+    color: #f59e0b;
+    margin-top: 2px;
+    flex-shrink: 0;
+}
+
+.recommendation-item span {
+    color: #78350f;
+    line-height: 1.5;
+}
+
+/* Result Actions */
+.result-actions {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+.download-group {
+    margin-top: 20px;
+    padding: 20px;
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+    border-radius: 12px;
+    border: 1px solid #e2e8f0;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+}
+
+.download-group::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
+    animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+.download-help {
+    font-size: 14px;
+    margin-bottom: 5px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-weight: 500;
+    border: 1px solid;
+    transition: all 0.3s ease;
+    text-align: center;
+    max-width: 300px;
+    line-height: 1.4;
+}
+
+.download-help.supported {
+    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
+    color: #065f46;
+    border-color: #10b981;
+}
+
+.download-help.supported .help-icon {
+    color: #10b981;
+}
+
+.download-help.not-supported {
+    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+    color: #6b7280;
+    border-color: #d1d5db;
+}
+
+.download-help.not-supported .help-icon {
+    color: #9ca3af;
+}
+
+.help-icon {
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+}
+
+.download-help i {
+    color: inherit;
+    font-size: 1rem;
+}
+
+#downloadResultBtn {
+    width: 100%;
+    max-width: 300px;
+    padding: 15px 20px;
+    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+    position: relative;
+    overflow: hidden;
+}
+
+#downloadResultBtn:hover:not(:disabled) {
+    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
+    transform: translateY(-2px);
+}
+
+#downloadResultBtn:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+}
+
+#downloadResultBtn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: none;
+}
+
+#downloadResultBtn.folder-supported {
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+}
+
+#downloadResultBtn.folder-supported:hover:not(:disabled) {
+    background: linear-gradient(135deg, #059669 0%, #047857 100%);
+    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
+}
+
+#downloadResultBtn .fas.fa-folder-open {
+    margin-right: 0;
+}
+
+/* Footer */
+.footer {
+    text-align: center;
+    color: white;
+    opacity: 0.9;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.9rem;
+}
+
+.status-good {
+    color: #4ade80;
+}
+
+.status-error {
+    color: #ef4444;
+}
+
+/* Touch and Mobile Specific Styles */
+.upload-area,
+.method-card,
+.btn,
+.browse-text {
+    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.3);
+    touch-action: manipulation;
+}
+
+/* Improve touch targets for mobile */
+@media (max-width: 768px) {
+    .btn {
+        min-height: 44px; /* Apple's recommended minimum touch target */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .method-card {
+        min-height: 120px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .upload-area {
+        min-height: 150px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .browse-text {
+        padding: 8px 12px;
+        border-radius: 4px;
+        background: rgba(102, 126, 234, 0.1);
+        margin: 0 4px;
+    }
+    
+    /* Larger touch targets for camera controls */
+    .camera-controls .btn {
+        min-height: 50px;
+        font-size: 1rem;
+    }
+    
+    /* Better spacing for recommendation items */
+    .recommendation-item {
+        min-height: 50px;
+        display: flex;
+        align-items: center;
+    }
+    
+    /* Improve probability item touch area */
+    .probability-item {
+        min-height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+}
+
+/* Prevent zoom on input focus for iOS */
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+    input[type="file"] {
+        font-size: 16px;
+    }
+}
+
+/* High DPI display optimizations */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    .analyzed-img,
+    .image-preview img,
+    #video {
+        image-rendering: -webkit-optimize-contrast;
+        image-rendering: crisp-edges;
+    }
+}
+
+/* Landscape orientation for mobile */
+@media (max-width: 768px) and (orientation: landscape) {
+    .header-content {
+        padding: 15px;
+    }
+    
+    .logo-icon {
+        font-size: 2rem;
+        margin-bottom: 5px;
+    }
+    
+    .header h1 {
+        font-size: 1.8rem;
+        margin-bottom: 5px;
+    }
+    
+    .header p {
+        font-size: 0.9rem;
+        margin-bottom: 10px;
+    }
+    
+    .main-content {
+        padding: 15px;
+    }
+    
+    .upload-methods {
+        flex-direction: row;
+        justify-content: center;
+        gap: 20px;
+    }
+    
+    .method-card {
+        max-width: 200px;
+        padding: 12px;
+    }
+    
+    .upload-area {
+        padding: 25px 15px;
+    }
+    
+    #video {
+        max-height: 200px;
+    }
+    
+    .image-preview img,
+    .analyzed-img {
+        max-height: 200px;
+    }
+}
+
+/* Print styles for results */
+@media print {
+    .header,
+    .upload-methods,
+    .upload-section,
+    .camera-section,
+    .image-preview,
+    .loading-overlay,
+    .result-actions,
+    .footer {
+        display: none !important;
+    }
+    
+    .main-content {
+        box-shadow: none;
+        border: 1px solid #000;
+    }
+    
+    .results-section {
+        display: block !important;
+    }
+    
+    body {
+        background: white;
+        color: black;
+    }
+}
+
+/* Responsive Design */
+
+/* Large tablets and small desktops */
+@media (max-width: 1024px) {
+    .container {
+        padding: 15px;
+    }
+    
+    .header-content {
+        padding: 25px;
+    }
+    
+    .main-content {
+        padding: 30px;
+    }
+    
+    .upload-methods {
+        gap: 15px;
+    }
+    
+    .method-card {
+        padding: 20px;
+    }
+}
+
+/* Tablets */
+@media (max-width: 768px) {
+    .container {
+        padding: 10px;
+    }
+    
+    .header h1 {
+        font-size: 2rem;
+    }
+    
+    .header p {
+        font-size: 1rem;
+    }
+    
+    .logo-icon {
+        font-size: 3rem;
+    }
+    
+    .header-content {
+        padding: 20px;
+    }
+    
+    .main-content {
+        padding: 20px;
+        margin-bottom: 20px;
+    }
+    
+    .upload-methods {
+        flex-direction: column;
+        align-items: center;
+        gap: 15px;
+    }
+    
+    .method-card {
+        max-width: 280px;
+        width: 100%;
+    }
+    
+    .method-card i {
+        font-size: 2rem;
+    }
+    
+    .upload-area {
+        padding: 40px 15px;
+    }
+    
+    .upload-icon {
+        font-size: 3rem;
+    }
+    
+    .upload-content h3 {
+        font-size: 1.3rem;
+    }
+    
+    .camera-container {
+        padding: 15px;
+    }
+    
+    #video {
+        max-height: 300px;
+    }
+    
+    .image-preview img {
+        max-height: 300px;
+    }
+    
+    .prediction-header {
+        flex-direction: column;
+        text-align: center;
+        gap: 10px;
+    }
+    
+    .prediction-result {
+        flex-direction: column;
+        text-align: center;
+        gap: 15px;
+    }
+    
+    .disease-icon {
+        font-size: 2.5rem;
+        padding: 15px;
+        align-self: center;
+    }
+    
+    .disease-info h4 {
+        font-size: 1.5rem;
+    }
+    
+    .probability-item {
+        flex-direction: column;
+        gap: 10px;
+        text-align: center;
+        padding: 12px;
+    }
+    
+    .probability-bar {
+        width: 100%;
+        margin: 0;
+        height: 6px;
+    }
+    
+    .analyzed-img {
+        max-height: 250px;
+    }
+    
+    .detailed-analysis,
+    .recommendations {
+        padding: 20px;
+    }
+    
+    .recommendation-item {
+        padding: 12px;
+        flex-direction: column;
+        text-align: center;
+        gap: 8px;
+    }
+    
+    .camera-controls {
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+    }
+    
+    .image-actions,
+    .result-actions {
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+    }
+    
+    .btn {
+        width: 100%;
+        max-width: 250px;
+        padding: 12px 20px;
+        font-size: 0.95rem;
+    }
+    
+    .footer {
+        flex-direction: column;
+        text-align: center;
+        gap: 10px;
+        padding: 15px;
+    }
+}
+
+/* Mobile phones */
+@media (max-width: 480px) {
+    .container {
+        padding: 8px;
+    }
+    
+    .header h1 {
+        font-size: 1.8rem;
+        margin-bottom: 8px;
+    }
+    
+    .header p {
+        font-size: 0.95rem;
+        margin-bottom: 10px;
+    }
+    
+    .logo-icon {
+        font-size: 2.5rem;
+        margin-bottom: 10px;
+    }
+    
+    .header-content {
+        padding: 15px;
+        margin-bottom: 20px;
+    }
+    
+    .main-content {
+        padding: 15px;
+        border-radius: 15px;
+    }
+    
+    .upload-methods {
+        gap: 12px;
+    }
+    
+    .method-card {
+        max-width: 100%;
+        padding: 15px;
+    }
+    
+    .method-card h3 {
+        font-size: 1.1rem;
+    }
+    
+    .method-card p {
+        font-size: 0.85rem;
+    }
+    
+    .method-card i {
+        font-size: 1.8rem;
+        margin-bottom: 8px;
+    }
+    
+    .upload-area {
+        padding: 30px 10px;
+        border-radius: 12px;
+    }
+    
+    .upload-icon {
+        font-size: 2.5rem;
+        margin-bottom: 15px;
+    }
+    
+    .upload-content h3 {
+        font-size: 1.2rem;
+        margin-bottom: 8px;
+    }
+    
+    .upload-content p {
+        font-size: 0.9rem;
+    }
+    
+    .supported-formats {
+        font-size: 0.8rem;
+    }
+    
+    .camera-container {
+        padding: 12px;
+    }
+    
+    #video {
+        max-height: 250px;
+        border-radius: 8px;
+    }
+    
+    .image-preview img {
+        max-height: 250px;
+    }
+    
+    .results-section h2 {
+        font-size: 1.6rem;
+        margin-bottom: 20px;
+    }
+    
+    .prediction-card,
+    .detailed-analysis,
+    .recommendations {
+        padding: 15px;
+        margin-bottom: 20px;
+        border-radius: 12px;
+    }
+    
+    .prediction-header h3 {
+        font-size: 1.1rem;
+    }
+    
+    .confidence-badge {
+        padding: 6px 15px;
+        font-size: 1rem;
+        border-radius: 15px;
+    }
+    
+    .disease-icon {
+        font-size: 2rem;
+        padding: 12px;
+    }
+    
+    .disease-info h4 {
+        font-size: 1.3rem;
+        margin-bottom: 8px;
+    }
+    
+    .disease-info p {
+        font-size: 1rem;
+    }
+    
+    .detailed-analysis h3,
+    .recommendations h3 {
+        font-size: 1.2rem;
+        margin-bottom: 15px;
+    }
+    
+    .probability-item {
+        padding: 10px;
+        border-radius: 8px;
+        margin-bottom: 10px;
+    }
+    
+    .probability-label {
+        font-size: 0.9rem;
+        min-width: auto;
+    }
+    
+    .probability-bar {
+        height: 5px;
+        min-width: 80px;
+    }
+    
+    .probability-value {
+        font-size: 0.9rem;
+        min-width: 40px;
+    }
+    
+    .analyzed-image {
+        padding: 15px;
+        margin-bottom: 20px;
+    }
+    
+    .analyzed-image h3 {
+        font-size: 1.2rem;
+        margin-bottom: 15px;
+    }
+    
+    .analyzed-img {
+        max-height: 200px;
+        border-width: 2px;
+    }
+    
+    .recommendation-item {
+        padding: 10px;
+        border-radius: 8px;
+        margin-bottom: 8px;
+        font-size: 0.9rem;
+    }
+    
+    .recommendation-item i {
+        font-size: 0.9rem;
+    }
+    
+    .btn {
+        padding: 10px 15px;
+        font-size: 0.9rem;
+        border-radius: 6px;
+    }
+    
+    .camera-controls {
+        gap: 8px;
+    }
+    
+    .image-actions,
+    .result-actions {
+        gap: 8px;
+    }
+    
+    .loading-overlay {
+        border-radius: 15px;
+    }
+    
+    .spinner {
+        width: 40px;
+        height: 40px;
+        margin-bottom: 15px;
+    }
+    
+    .loading-content p {
+        font-size: 1rem;
+        margin-bottom: 5px;
+    }
+    
+    .loading-content small {
+        font-size: 0.85rem;
+    }
+    
+    .footer {
+        padding: 12px;
+        font-size: 0.85rem;
+    }
+    
+    .status-indicator {
+        font-size: 0.8rem;
+    }
+}
+
+/* Very small screens */
+@media (max-width: 320px) {
+    .container {
+        padding: 5px;
+    }
+    
+    .header h1 {
+        font-size: 1.6rem;
+    }
+    
+    .logo-icon {
+        font-size: 2rem;
+    }
+    
+    .main-content {
+        padding: 12px;
+    }
+    
+    .upload-area {
+        padding: 20px 8px;
+    }
+    
+    .upload-content h3 {
+        font-size: 1.1rem;
+    }
+    
+    .btn {
+        padding: 8px 12px;
+        font-size: 0.85rem;
+        max-width: 200px;
+    }
+    
+    .prediction-card,
+    .detailed-analysis,
+    .recommendations,
+    .analyzed-image {
+        padding: 12px;
+    }
+    
+    .disease-info h4 {
+        font-size: 1.2rem;
+    }
+    
+    .analyzed-img {
+        max-height: 180px;
+    }
+}
+
+/* Utility Classes */
+.fade-in {
+    animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.text-center {
+    text-align: center;
+}
+
+.hidden {
+    display: none !important;
+}

static/js/script.js

@@ -0,0 +1,988 @@
+class PotatoDiseaseDetector {
+    constructor() {
+        this.currentMethod = 'upload';
+        this.stream = null;
+        this.selectedFile = null;
+        this.initializeElements();
+        this.checkBrowserCompatibility();
+        this.bindEvents();
+    }
+
+    checkBrowserCompatibility() {
+        // Check for File System Access API support
+        this.folderSelectionSupported = 'showSaveFilePicker' in window;
+        
+        // Update download help text based on browser compatibility
+        const downloadHelp = document.getElementById('downloadHelp');
+        if (downloadHelp) {
+            if (this.folderSelectionSupported) {
+                downloadHelp.innerHTML = '✅ Folder selection supported - Choose where to save your PDF!';
+                downloadHelp.style.color = '#28a745';
+            } else {
+                downloadHelp.innerHTML = '📁 Will download to your default Downloads folder';
+                downloadHelp.style.color = '#6c757d';
+            }
+        }
+        
+        // Update button text based on compatibility
+        const downloadBtn = document.getElementById('downloadResultBtn');
+        if (downloadBtn && this.folderSelectionSupported) {
+            downloadBtn.innerHTML = '<i class="fas fa-folder-open"></i> Choose Folder & Download PDF';
+        } else if (downloadBtn) {
+            downloadBtn.innerHTML = '<i class="fas fa-download"></i> Download PDF Report';
+        }
+        
+        console.log('Browser compatibility:', {
+            folderSelection: this.folderSelectionSupported,
+            userAgent: navigator.userAgent
+        });
+    }
+
+    initializeElements() {
+        // Method cards
+        this.uploadCard = document.getElementById('uploadCard');
+        this.cameraCard = document.getElementById('cameraCard');
+        
+        // Sections
+        this.uploadSection = document.getElementById('uploadSection');
+        this.cameraSection = document.getElementById('cameraSection');
+        
+        // Upload elements
+        this.uploadArea = document.getElementById('uploadArea');
+        this.fileInput = document.getElementById('fileInput');
+        
+        // Camera elements
+        this.video = document.getElementById('video');
+        this.canvas = document.getElementById('canvas');
+        this.startCameraBtn = document.getElementById('startCamera');
+        this.captureBtn = document.getElementById('captureBtn');
+        this.stopCameraBtn = document.getElementById('stopCamera');
+        
+        // Preview and actions
+        this.imagePreview = document.getElementById('imagePreview');
+        this.previewImg = document.getElementById('previewImg');
+        this.predictBtn = document.getElementById('predictBtn');
+        this.clearBtn = document.getElementById('clearBtn');
+        
+        // Results
+        this.resultsSection = document.getElementById('resultsSection');
+        this.loadingOverlay = document.getElementById('loadingOverlay');
+        this.newAnalysisBtn = document.getElementById('newAnalysisBtn');
+        this.downloadResultBtn = document.getElementById('downloadResultBtn');
+        
+        // Analyzed image display
+        this.analyzedImageSection = document.getElementById('analyzedImageSection');
+        this.analyzedImage = document.getElementById('analyzedImage');
+        
+        // Result elements
+        this.diseaseName = document.getElementById('diseaseName');
+        this.diseaseDescription = document.getElementById('diseaseDescription');
+        this.confidenceValue = document.getElementById('confidenceValue');
+        this.confidenceBadge = document.getElementById('confidenceBadge');
+        this.diseaseIcon = document.getElementById('diseaseIcon');
+        this.timestamp = document.getElementById('timestamp');
+        this.probabilities = document.getElementById('probabilities');
+        this.recommendationList = document.getElementById('recommendationList');
+    }
+
+    bindEvents() {
+        // Method switching
+        this.uploadCard.addEventListener('click', () => this.switchMethod('upload'));
+        this.cameraCard.addEventListener('click', () => this.switchMethod('camera'));
+        
+        // Upload events with touch support
+        this.uploadArea.addEventListener('click', (e) => {
+            console.log('Upload area clicked');
+            this.fileInput.click();
+        });
+        
+        // Touch events for mobile
+        this.uploadArea.addEventListener('touchend', (e) => {
+            e.preventDefault();
+            console.log('Upload area touched');
+            this.fileInput.click();
+        });
+        
+        // Specific handler for browse text
+        const browseText = document.querySelector('.browse-text');
+        if (browseText) {
+            browseText.addEventListener('click', (e) => {
+                e.stopPropagation();
+                console.log('Browse text clicked');
+                this.fileInput.click();
+            });
+            
+            browseText.addEventListener('touchend', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                console.log('Browse text touched');
+                this.fileInput.click();
+            });
+        }
+        
+        this.uploadArea.addEventListener('dragover', this.handleDragOver.bind(this));
+        this.uploadArea.addEventListener('dragleave', this.handleDragLeave.bind(this));
+        this.uploadArea.addEventListener('drop', this.handleDrop.bind(this));
+        this.fileInput.addEventListener('change', (e) => {
+            console.log('File input changed:', e.target.files);
+            this.handleFileSelect(e);
+        });
+        
+        // Camera events
+        this.startCameraBtn.addEventListener('click', this.startCamera.bind(this));
+        this.captureBtn.addEventListener('click', this.capturePhoto.bind(this));
+        this.stopCameraBtn.addEventListener('click', this.stopCamera.bind(this));
+        
+        // Action buttons
+        this.predictBtn.addEventListener('click', this.makePrediction.bind(this));
+        this.clearBtn.addEventListener('click', this.clearSelection.bind(this));
+        this.newAnalysisBtn.addEventListener('click', this.newAnalysis.bind(this));
+        this.downloadResultBtn.addEventListener('click', this.downloadReport.bind(this));
+    }
+
+    switchMethod(method) {
+        this.currentMethod = method;
+        
+        // Update card states
+        this.uploadCard.classList.toggle('active', method === 'upload');
+        this.cameraCard.classList.toggle('active', method === 'camera');
+        
+        // Show/hide sections
+        this.uploadSection.style.display = method === 'upload' ? 'block' : 'none';
+        this.cameraSection.style.display = method === 'camera' ? 'block' : 'none';
+        
+        // Stop camera if switching away
+        if (method !== 'camera') {
+            this.stopCamera();
+        }
+        
+        // Clear any existing selections
+        this.clearSelection();
+    }
+
+    // Upload handling
+    handleDragOver(e) {
+        e.preventDefault();
+        this.uploadArea.classList.add('dragover');
+    }
+
+    handleDragLeave(e) {
+        e.preventDefault();
+        this.uploadArea.classList.remove('dragover');
+    }
+
+    handleDrop(e) {
+        e.preventDefault();
+        this.uploadArea.classList.remove('dragover');
+        
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+            this.processFile(files[0]);
+        }
+    }
+
+    handleFileSelect(e) {
+        const file = e.target.files[0];
+        if (file) {
+            this.processFile(file);
+        }
+    }
+
+    processFile(file) {
+        console.log('Processing file:', file.name, file.type, file.size);
+        
+        if (!this.isValidImageFile(file)) {
+            this.showError('Please select a valid image file (PNG, JPG, JPEG)');
+            return;
+        }
+
+        if (file.size > 16 * 1024 * 1024) {
+            this.showError('File size must be less than 16MB');
+            return;
+        }
+
+        this.selectedFile = file;
+        console.log('File selected successfully:', file.name);
+        this.displayImagePreview(file);
+    }
+
+    isValidImageFile(file) {
+        const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
+        return validTypes.includes(file.type);
+    }
+
+    displayImagePreview(file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            this.previewImg.src = e.target.result;
+            this.imagePreview.style.display = 'block';
+            this.imagePreview.classList.add('fade-in');
+            this.hideResults();
+        };
+        reader.readAsDataURL(file);
+    }
+
+    // Camera handling
+    async startCamera() {
+        try {
+            // Enhanced camera constraints for mobile devices
+            const constraints = {
+                video: {
+                    facingMode: 'environment', // Use back camera on mobile
+                    width: { ideal: 1280, max: 1920 },
+                    height: { ideal: 720, max: 1080 },
+                    aspectRatio: { ideal: 16/9 }
+                }
+            };
+            
+            // Fallback for devices that don't support environment camera
+            try {
+                this.stream = await navigator.mediaDevices.getUserMedia(constraints);
+            } catch (envError) {
+                console.log('Environment camera not available, trying default camera');
+                const fallbackConstraints = {
+                    video: {
+                        width: { ideal: 1280, max: 1920 },
+                        height: { ideal: 720, max: 1080 }
+                    }
+                };
+                this.stream = await navigator.mediaDevices.getUserMedia(fallbackConstraints);
+            }
+            
+            this.video.srcObject = this.stream;
+            this.video.style.display = 'block';
+            
+            this.startCameraBtn.style.display = 'none';
+            this.captureBtn.style.display = 'inline-flex';
+            this.stopCameraBtn.style.display = 'inline-flex';
+            
+        } catch (error) {
+            console.error('Error accessing camera:', error);
+            this.showError('Could not access camera. Please check permissions.');
+        }
+    }
+
+    capturePhoto() {
+        const context = this.canvas.getContext('2d');
+        this.canvas.width = this.video.videoWidth;
+        this.canvas.height = this.video.videoHeight;
+        
+        context.drawImage(this.video, 0, 0);
+        
+        this.canvas.toBlob((blob) => {
+            this.selectedFile = blob;
+            this.previewImg.src = this.canvas.toDataURL();
+            this.imagePreview.style.display = 'block';
+            this.imagePreview.classList.add('fade-in');
+            this.hideResults();
+        }, 'image/png');
+    }
+
+    stopCamera() {
+        if (this.stream) {
+            this.stream.getTracks().forEach(track => track.stop());
+            this.stream = null;
+        }
+        
+        this.video.style.display = 'none';
+        this.startCameraBtn.style.display = 'inline-flex';
+        this.captureBtn.style.display = 'none';
+        this.stopCameraBtn.style.display = 'none';
+    }
+
+    // Prediction
+    async makePrediction() {
+        console.log('Making prediction...');
+        console.log('Current method:', this.currentMethod);
+        console.log('Selected file:', this.selectedFile);
+        
+        if (!this.selectedFile) {
+            this.showError('Please select an image first');
+            return;
+        }
+
+        this.showLoading(true);
+        
+        try {
+            let response;
+            
+            if (this.currentMethod === 'camera') {
+                console.log('Using camera prediction endpoint');
+                // Send base64 image for camera
+                const imageData = this.canvas.toDataURL();
+                response = await fetch('/predict_camera', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ image: imageData })
+                });
+            } else {
+                console.log('Using upload prediction endpoint');
+                // Send file for upload
+                const formData = new FormData();
+                formData.append('file', this.selectedFile);
+                
+                console.log('FormData created with file:', this.selectedFile.name);
+                
+                response = await fetch('/predict', {
+                    method: 'POST',
+                    body: formData
+                });
+            }
+
+            console.log('Response status:', response.status);
+            
+            if (!response.ok) {
+                const errorText = await response.text();
+                console.error('Response error:', errorText);
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const result = await response.json();
+            console.log('Prediction result:', result);
+            
+            if (result.error) {
+                throw new Error(result.error);
+            }
+
+            this.displayResults(result);
+            
+        } catch (error) {
+            console.error('Prediction error:', error);
+            this.showError(`Prediction failed: ${error.message}`);
+        } finally {
+            this.showLoading(false);
+        }
+    }
+
+    displayResults(result) {
+        // Store current prediction data for PDF generation
+        this.currentPredictionData = result;
+        
+        // Display the analyzed image if available
+        if (result.image_url) {
+            this.analyzedImage.src = result.image_url;
+            this.analyzedImageSection.style.display = 'block';
+        }
+        
+        // Update main prediction
+        this.diseaseName.textContent = result.predicted_class;
+        this.diseaseDescription.textContent = result.description;
+        this.confidenceValue.textContent = `${result.confidence}%`;
+        this.timestamp.textContent = `Analysis completed: ${result.timestamp}`;
+        
+        // Update confidence badge color
+        this.updateConfidenceBadge(result.confidence);
+        
+        // Update disease icon
+        this.updateDiseaseIcon(result.predicted_class);
+        
+        // Display probabilities
+        this.displayProbabilities(result.all_predictions);
+        
+        // Display recommendations
+        this.displayRecommendations(result.recommendations);
+        
+        // Show results
+        this.resultsSection.style.display = 'block';
+        this.resultsSection.classList.add('fade-in');
+        this.resultsSection.scrollIntoView({ behavior: 'smooth' });
+    }
+
+    updateConfidenceBadge(confidence) {
+        if (confidence >= 90) {
+            this.confidenceBadge.style.background = 'linear-gradient(135deg, #22c55e, #16a34a)';
+        } else if (confidence >= 70) {
+            this.confidenceBadge.style.background = 'linear-gradient(135deg, #f59e0b, #d97706)';
+        } else {
+            this.confidenceBadge.style.background = 'linear-gradient(135deg, #ef4444, #dc2626)';
+        }
+    }
+
+    updateDiseaseIcon(diseaseName) {
+        const iconMap = {
+            'Early Blight': { icon: 'fas fa-exclamation-triangle', color: '#f59e0b' },
+            'Late Blight': { icon: 'fas fa-skull-crossbones', color: '#ef4444' },
+            'Healthy': { icon: 'fas fa-check-circle', color: '#22c55e' }
+        };
+        
+        const iconInfo = iconMap[diseaseName] || { icon: 'fas fa-leaf', color: '#667eea' };
+        this.diseaseIcon.innerHTML = `<i class="${iconInfo.icon}"></i>`;
+        this.diseaseIcon.style.color = iconInfo.color;
+    }
+
+    displayProbabilities(allPredictions) {
+        this.probabilities.innerHTML = '';
+        
+        Object.entries(allPredictions).forEach(([disease, data]) => {
+            const probability = data.probability;
+            const item = document.createElement('div');
+            item.className = 'probability-item';
+            
+            const color = this.getProbabilityColor(probability);
+            
+            item.innerHTML = `
+                <div class="probability-label">${disease}</div>
+                <div class="probability-bar">
+                    <div class="probability-fill" style="width: ${probability}%; background: ${color};"></div>
+                </div>
+                <div class="probability-value">${probability}%</div>
+            `;
+            
+            this.probabilities.appendChild(item);
+        });
+    }
+
+    getProbabilityColor(probability) {
+        if (probability >= 70) return 'linear-gradient(90deg, #22c55e, #16a34a)';
+        if (probability >= 40) return 'linear-gradient(90deg, #f59e0b, #d97706)';
+        return 'linear-gradient(90deg, #ef4444, #dc2626)';
+    }
+
+    displayRecommendations(recommendations) {
+        this.recommendationList.innerHTML = '';
+        
+        recommendations.forEach((rec, index) => {
+            const item = document.createElement('div');
+            item.className = 'recommendation-item';
+            item.innerHTML = `
+                <i class="fas fa-check-circle"></i>
+                <span>${rec}</span>
+            `;
+            this.recommendationList.appendChild(item);
+        });
+    }
+
+    // Utility methods
+    clearSelection() {
+        this.selectedFile = null;
+        this.fileInput.value = '';
+        this.imagePreview.style.display = 'none';
+        this.hideResults();
+    }
+
+    newAnalysis() {
+        this.clearSelection();
+        this.stopCamera();
+        this.switchMethod('upload');
+    }
+
+    hideResults() {
+        this.resultsSection.style.display = 'none';
+        this.analyzedImageSection.style.display = 'none';
+    }
+
+    showLoading(show) {
+        this.loadingOverlay.style.display = show ? 'flex' : 'none';
+    }
+
+    showError(message) {
+        alert(`Error: ${message}`);
+    }
+
+    async downloadReport() {
+        try {
+            // Show loading state
+            this.downloadResultBtn.disabled = true;
+            
+            if (this.folderSelectionSupported) {
+                this.downloadResultBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Preparing folder selection...';
+            } else {
+                this.downloadResultBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating PDF...';
+            }
+            
+            // Gather all report data
+            const reportData = {
+                predicted_class: this.diseaseName.textContent,
+                confidence: parseFloat(this.confidenceValue.textContent.replace('%', '')),
+                description: this.diseaseDescription.textContent,
+                timestamp: this.timestamp.textContent,
+                image_url: this.analyzedImage.src || null,
+                all_predictions: this.currentPredictionData || {},
+                recommendations: this.getCurrentRecommendations()
+            };
+            
+            // Try to generate PDF via backend
+            const response = await fetch('/generate-pdf-report', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(reportData)
+            });
+            
+            if (response.ok) {
+                // Backend PDF generation successful
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                
+                // Create download link with File System Access API for folder selection
+                if (this.folderSelectionSupported) {
+                    this.downloadResultBtn.innerHTML = '<i class="fas fa-folder-open"></i> Choose save location...';
+                    
+                    try {
+                        // Modern browsers with File System Access API
+                        const timestamp = new Date().toISOString().slice(0, 19).replace(/[-:]/g, '');
+                        const diseaseName = reportData.predicted_class.replace(/\s+/g, '_');
+                        const filename = `potato_disease_report_${diseaseName}_${timestamp}.pdf`;
+                        
+                        // Show folder picker dialog
+                        const fileHandle = await window.showSaveFilePicker({
+                            suggestedName: filename,
+                            types: [
+                                {
+                                    description: 'PDF Reports',
+                                    accept: {
+                                        'application/pdf': ['.pdf'],
+                                    },
+                                },
+                            ],
+                            excludeAcceptAllOption: true,
+                            startIn: 'documents' // Suggest Documents folder
+                        });
+                        
+                        this.downloadResultBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving to selected folder...';
+                        
+                        const writable = await fileHandle.createWritable();
+                        await writable.write(blob);
+                        await writable.close();
+                        
+                        this.showSuccessMessage('📁 PDF report saved to your chosen folder successfully!');
+                    } catch (err) {
+                        if (err.name === 'AbortError') {
+                            // User cancelled folder selection
+                            this.showInfoMessage('📁 Folder selection cancelled. Try again to choose a save location.');
+                        } else {
+                            console.error('Folder save error:', err);
+                            // Fallback to regular download
+                            this.fallbackDownload(url, blob, reportData);
+                            this.showWarningMessage('📁 Folder selection failed. Downloaded to default location instead.');
+                        }
+                    }
+                } else {
+                    // Fallback for browsers without File System Access API
+                    this.fallbackDownload(url, blob, reportData);
+                }
+                
+                window.URL.revokeObjectURL(url);
+            } else {
+                // Backend failed, check if it's a server-side issue or ReportLab missing
+                let errorData;
+                try {
+                    errorData = await response.json();
+                } catch (e) {
+                    errorData = { error: 'Unknown server error' };
+                }
+                
+                console.warn('Backend PDF generation failed:', errorData);
+                
+                if (errorData.fallback === 'client' || response.status === 503) {
+                    // Server suggests client-side fallback
+                    console.log('Using client-side PDF generation fallback');
+                    await this.generateClientSidePDF(reportData);
+                } else {
+                    // Other server errors
+                    throw new Error(errorData.message || errorData.error || 'Server PDF generation failed');
+                }
+            }
+            
+        } catch (error) {
+            console.error('Error downloading report:', error);
+            // Final fallback to text report
+            this.generateTextReport();
+            this.showErrorMessage('PDF generation failed, downloaded as text file instead.');
+        } finally {
+            // Reset button state
+            this.downloadResultBtn.disabled = false;
+            
+            if (this.folderSelectionSupported) {
+                this.downloadResultBtn.innerHTML = '<i class="fas fa-folder-open"></i> Choose Folder & Download PDF';
+            } else {
+                this.downloadResultBtn.innerHTML = '<i class="fas fa-download"></i> Download PDF Report';
+            }
+        }
+    }
+    
+    fallbackDownload(url, blob, reportData) {
+        const timestamp = new Date().toISOString().slice(0, 19).replace(/[-:]/g, '');
+        const diseaseName = reportData.predicted_class.replace(/\s+/g, '_');
+        const filename = `potato_disease_report_${diseaseName}_${timestamp}.pdf`;
+        
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        
+        this.showSuccessMessage('PDF report downloaded to default folder!');
+    }
+    
+    async generateClientSidePDF(reportData) {
+        // Client-side PDF generation using jsPDF
+        try {
+            if (typeof jsPDF === 'undefined') {
+                throw new Error('jsPDF library not loaded');
+            }
+            
+            console.log('📄 Generating client-side PDF...');
+            const { jsPDF } = window.jspdf;
+            const doc = new jsPDF();
+            
+            // Add content to PDF
+            doc.setFontSize(20);
+            doc.text('🥔 POTATO DISEASE DETECTION REPORT', 20, 30);
+            
+            doc.setFontSize(12);
+            doc.text(`Report Generated: ${reportData.timestamp}`, 20, 50);
+            doc.text(`Analysis Method: Deep Learning AI Classification`, 20, 60);
+            doc.text(`Model Version: TensorFlow/Keras CNN v1.0`, 20, 70);
+            
+            // Main diagnosis
+            doc.setFontSize(16);
+            doc.text('🎯 DIAGNOSIS RESULTS', 20, 90);
+            
+            doc.setFontSize(12);
+            doc.text(`Predicted Disease: ${reportData.predicted_class}`, 20, 105);
+            doc.text(`Confidence: ${reportData.confidence}%`, 20, 115);
+            
+            // Risk assessment
+            let riskLevel = 'Unknown';
+            if (reportData.confidence >= 80) riskLevel = 'High Confidence';
+            else if (reportData.confidence >= 60) riskLevel = 'Medium Confidence';
+            else riskLevel = 'Low Confidence - Manual Verification Recommended';
+            
+            doc.text(`Risk Assessment: ${riskLevel}`, 20, 125);
+            
+            // Description
+            doc.setFontSize(16);
+            doc.text('📋 DESCRIPTION', 20, 145);
+            
+            doc.setFontSize(10);
+            const splitDescription = doc.splitTextToSize(reportData.description, 170);
+            doc.text(splitDescription, 20, 160);
+            
+            let yPos = 160 + (splitDescription.length * 5) + 15;
+            
+            // Probability breakdown
+            doc.setFontSize(16);
+            doc.text('📊 PROBABILITY BREAKDOWN', 20, yPos);
+            yPos += 15;
+            
+            doc.setFontSize(10);
+            if (reportData.all_predictions) {
+                for (const [disease, info] of Object.entries(reportData.all_predictions)) {
+                    doc.text(`• ${disease}: ${info.probability}%`, 20, yPos);
+                    yPos += 10;
+                }
+            }
+            
+            yPos += 10;
+            
+            // Recommendations
+            doc.setFontSize(16);
+            doc.text('💡 TREATMENT RECOMMENDATIONS', 20, yPos);
+            yPos += 15;
+            
+            doc.setFontSize(10);
+            reportData.recommendations.forEach((rec, index) => {
+                const recText = `${index + 1}. ${rec}`;
+                const splitRec = doc.splitTextToSize(recText, 170);
+                doc.text(splitRec, 20, yPos);
+                yPos += splitRec.length * 5 + 3;
+                
+                // Add new page if needed
+                if (yPos > 270) {
+                    doc.addPage();
+                    yPos = 20;
+                }
+            });
+            
+            // Footer
+            yPos = Math.max(yPos + 20, 250);
+            doc.setFontSize(8);
+            doc.text('Generated by Potato Disease Detection System', 20, yPos);
+            doc.text('Powered by Flask & TensorFlow | Lucky Sharma', 20, yPos + 8);
+            doc.text('© 2025 All Rights Reserved', 20, yPos + 16);
+            
+            // Save PDF
+            const timestamp = new Date().toISOString().slice(0, 19).replace(/[-:]/g, '');
+            const diseaseName = reportData.predicted_class.replace(/\s+/g, '_');
+            const filename = `potato_disease_report_${diseaseName}_${timestamp}.pdf`;
+            
+            // Try to use File System Access API for folder selection
+            if ('showSaveFilePicker' in window) {
+                try {
+                    const fileHandle = await window.showSaveFilePicker({
+                        suggestedName: filename,
+                        types: [
+                            {
+                                description: 'PDF files',
+                                accept: {
+                                    'application/pdf': ['.pdf'],
+                                },
+                            },
+                        ],
+                    });
+                    
+                    const writable = await fileHandle.createWritable();
+                    const pdfBlob = doc.output('blob');
+                    await writable.write(pdfBlob);
+                    await writable.close();
+                    
+                    this.showSuccessMessage('PDF report saved successfully using client-side generation!');
+                } catch (err) {
+                    if (err.name !== 'AbortError') {
+                        // Fallback to regular download
+                        doc.save(filename);
+                        this.showSuccessMessage('PDF report generated successfully!');
+                    }
+                }
+            } else {
+                // Regular download for older browsers
+                doc.save(filename);
+                this.showSuccessMessage('PDF report generated successfully!');
+            }
+            
+        } catch (error) {
+            console.error('Client-side PDF generation failed:', error);
+            this.showErrorMessage('PDF generation failed. Falling back to text report.');
+            this.generateTextReport();
+        }
+    }
+    
+    getCurrentRecommendations() {
+        const recommendations = [];
+        const recItems = this.recommendationList.querySelectorAll('.recommendation-item span');
+        recItems.forEach(item => {
+            recommendations.push(item.textContent);
+        });
+        return recommendations;
+    }
+    
+    generateTextReport() {
+        // Fallback text report generation (original functionality)
+        const diseaseName = this.diseaseName.textContent;
+        const confidence = this.confidenceValue.textContent;
+        const description = this.diseaseDescription.textContent;
+        const timestamp = this.timestamp.textContent;
+        
+        let report = `POTATO DISEASE DETECTION REPORT\n`;
+        report += `=====================================\n\n`;
+        report += `${timestamp}\n\n`;
+        report += `DIAGNOSIS: ${diseaseName}\n`;
+        report += `CONFIDENCE: ${confidence}\n\n`;
+        report += `DESCRIPTION:\n${description}\n\n`;
+        report += `RECOMMENDATIONS:\n`;
+        
+        const recommendations = this.recommendationList.querySelectorAll('.recommendation-item span');
+        recommendations.forEach((rec, index) => {
+            report += `${index + 1}. ${rec.textContent}\n`;
+        });
+        
+        report += `\n=====================================\n`;
+        report += `Generated by Potato Disease Detection System\n`;
+        report += `Powered by Flask & TensorFlow\n`;
+        
+        // Download as text file
+        const blob = new Blob([report], { type: 'text/plain' });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `potato_disease_report_${Date.now()}.txt`;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+    }
+
+    showSuccessMessage(message) {
+        this.showMessage(message, 'success');
+    }
+
+    showInfoMessage(message) {
+        this.showMessage(message, 'info');
+    }
+
+    showWarningMessage(message) {
+        this.showMessage(message, 'warning');
+    }
+
+    showErrorMessage(message) {
+        this.showMessage(message, 'error');
+    }
+
+    showMessage(message, type = 'info') {
+        // Create or update message container
+        let messageContainer = document.getElementById('message-container');
+        if (!messageContainer) {
+            messageContainer = document.createElement('div');
+            messageContainer.id = 'message-container';
+            messageContainer.style.position = 'fixed';
+            messageContainer.style.top = '20px';
+            messageContainer.style.right = '20px';
+            messageContainer.style.zIndex = '10000';
+            messageContainer.style.maxWidth = '400px';
+            document.body.appendChild(messageContainer);
+        }
+
+        // Create message element
+        const messageEl = document.createElement('div');
+        messageEl.className = `message message-${type}`;
+        messageEl.innerHTML = `
+            <div style="
+                background: ${this.getMessageColor(type)};
+                color: white;
+                padding: 12px 16px;
+                border-radius: 8px;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+                margin-bottom: 10px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                font-size: 14px;
+                animation: slideInRight 0.3s ease-out;
+            ">
+                <span>${message}</span>
+                <button onclick="this.parentElement.parentElement.remove()" 
+                        style="background: none; border: none; color: white; font-size: 18px; cursor: pointer; padding: 0; margin-left: 10px;">×</button>
+            </div>
+        `;
+
+        // Add CSS animation if not already added
+        if (!document.getElementById('message-styles')) {
+            const style = document.createElement('style');
+            style.id = 'message-styles';
+            style.textContent = `
+                @keyframes slideInRight {
+                    from { transform: translateX(100%); opacity: 0; }
+                    to { transform: translateX(0); opacity: 1; }
+                }
+            `;
+            document.head.appendChild(style);
+        }
+
+        messageContainer.appendChild(messageEl);
+
+        // Auto-remove after 5 seconds
+        setTimeout(() => {
+            if (messageEl.parentElement) {
+                messageEl.remove();
+            }
+        }, 5000);
+    }
+
+    getMessageColor(type) {
+        const colors = {
+            success: '#10b981', // green
+            info: '#3b82f6',    // blue
+            warning: '#f59e0b', // amber
+            error: '#ef4444'    // red
+        };
+        return colors[type] || colors.info;
+    }
+}
+
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new PotatoDiseaseDetector();
+});
+
+// Add some utility functions
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+// Mobile device detection and utilities
+function isMobileDevice() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}
+
+function isIOSDevice() {
+    return /iPad|iPhone|iPod/.test(navigator.userAgent);
+}
+
+function getOptimalImageSize() {
+    const isMobile = isMobileDevice();
+    if (isMobile) {
+        return {
+            maxWidth: window.innerWidth - 40,
+            maxHeight: Math.min(window.innerHeight * 0.4, 300)
+        };
+    }
+    return {
+        maxWidth: 400,
+        maxHeight: 400
+    };
+}
+
+// Prevent double-tap zoom on mobile
+function preventDoubleTab() {
+    let lastTouchEnd = 0;
+    document.addEventListener('touchend', function (event) {
+        const now = (new Date()).getTime();
+        if (now - lastTouchEnd <= 300) {
+            event.preventDefault();
+        }
+        lastTouchEnd = now;
+    }, false);
+}
+
+// Initialize mobile optimizations
+if (isMobileDevice()) {
+    preventDoubleTab();
+    
+    // Add mobile class to body for CSS targeting
+    document.body.classList.add('mobile-device');
+    
+    if (isIOSDevice()) {
+        document.body.classList.add('ios-device');
+    }
+    
+    // Adjust viewport height for mobile browsers
+    function setVH() {
+        let vh = window.innerHeight * 0.01;
+        document.documentElement.style.setProperty('--vh', `${vh}px`);
+    }
+    
+    setVH();
+    window.addEventListener('resize', setVH);
+    window.addEventListener('orientationchange', () => {
+        setTimeout(setVH, 100);
+    });
+}
+
+// Check browser compatibility
+function checkBrowserSupport() {
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        console.warn('Camera functionality not supported in this browser');
+        const cameraCard = document.getElementById('cameraCard');
+        if (cameraCard) {
+            cameraCard.style.opacity = '0.5';
+            cameraCard.style.cursor = 'not-allowed';
+            
+            // Add tooltip for unsupported browsers
+            const tooltip = document.createElement('div');
+            tooltip.className = 'tooltip';
+            tooltip.textContent = 'Camera not supported in this browser';
+            cameraCard.appendChild(tooltip);
+        }
+    }
+    
+    // Check for file upload support
+    if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
+        console.warn('File upload not supported in this browser');
+        const uploadCard = document.getElementById('uploadCard');
+        if (uploadCard) {
+            uploadCard.style.opacity = '0.7';
+        }
+    }
+}
+
+// Run compatibility check
+checkBrowserSupport();