CropIntel — HF Space deploy (all-in-one app)

.dockerignore

@@ -0,0 +1,13 @@
+node_modules
+.next
+.git
+.gitignore
+*.md
+!README.md
+ml/data
+.env
+.env.*
+**/__pycache__
+**/*.pyc
+.venv
+venv

.env.local.example

@@ -0,0 +1,10 @@
+# Google Maps (outbreak map)
+NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_key_here
+
+# Phone on same Wi‑Fi — use http:// not https://  (example: http://192.168.0.223:3050)
+# Optional: only if you still see a blank page after fixing firewall / same Wi‑Fi:
+# NEXT_DEV_ALLOWED_ORIGINS=192.168.1.42
+# (Run: ipconfig getifaddr en0 — must match exactly; restart `npm run dev` after changing.)
+#
+# If the outbreak map stays blank on the phone, add an HTTP referrer for that URL in
+# Google Cloud Console → APIs & Services → Credentials → your browser key → Website restrictions.

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/ci.yml

@@ -0,0 +1,33 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  web:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm ci
+      - run: npm run lint
+      - run: npx tsc --noEmit
+      - run: npm run build
+
+  python:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+          cache: pip
+          cache-dependency-path: ml/requirements-inference.txt
+      - run: pip install -r ml/requirements-inference.txt pytest httpx scikit-learn pandas
+      # Model weights are not committed; tests marked needs_model auto-skip.
+      - run: python -m pytest tests/ -v

.gitignore

@@ -0,0 +1,62 @@
+# Dependencies
+node_modules/
+/.pnp
+.pnp.js
+
+# Testing
+/coverage
+
+# Next.js
+/.next/
+/out/
+
+# Production
+/build
+
+# Misc
+.DS_Store
+*.pem
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Local env files
+.env*.local
+.env
+
+# Vercel
+.vercel
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+env/
+venv/
+ENV/
+.venv
+.conda-py311/
+.venv311/
+
+# ML specific
+ml/models/
+ml/models_pretrained/
+ml/data/
+ml/logs/
+uploads/
+# Runtime prediction audit log (the inference service creates data/ at startup)
+/data/
+*.h5
+*.keras
+*.tflite
+
+# Training artifacts / release archives (large binaries — distribute out-of-band)
+cropintel-models*.zip
+nohup.out
+
+# TS incremental build cache
+tsconfig.tsbuildinfo

Dockerfile

@@ -0,0 +1,48 @@
+# CropIntel: Next.js + Python inference (no Kaggle needed if CROPINTEL_MODELS_URL is set)
+FROM python:3.11-slim-bookworm
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ca-certificates curl \
+    && curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
+    && apt-get install -y --no-install-recommends nodejs \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+COPY ml/requirements-inference.txt ml/
+RUN pip install --no-cache-dir -r ml/requirements-inference.txt supervisor
+
+COPY . .
+
+# NEXT_PUBLIC_* values are inlined into the client bundle at build time, so the
+# Maps key must be present during `npm run build` (not just at runtime). Passed
+# as a build arg — empty by default, which simply disables the outbreak map.
+# On Hugging Face Spaces, set it as a build-time Variable; with compose, see the
+# build.args block in docker-compose.prod.yml.
+ARG NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=""
+ENV NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=$NEXT_PUBLIC_GOOGLE_MAPS_API_KEY
+
+RUN npm run build
+
+RUN chmod +x docker/entrypoint.sh
+
+# Some hosts (e.g. Hugging Face Spaces) run the container as a non-root UID 1000.
+# The image is built as root, so make the dirs written at runtime — model fetch,
+# prediction audit log, and the Next.js server cache — writable by any user.
+RUN mkdir -p ml/models data \
+    && chmod -R 777 ml/models data .next
+
+ENV NODE_ENV=production
+ENV PYTHONUNBUFFERED=1
+# Inference service bind address. Default 127.0.0.1 keeps it internal (the
+# all-in-one VPS deploy proxies it via the Next.js app). Set to 0.0.0.0 to
+# expose it directly — e.g. on Hugging Face as a backend for a Vercel frontend.
+ENV INFERENCE_BIND_HOST=127.0.0.1
+
+EXPOSE 3050
+
+ENTRYPOINT ["/app/docker/entrypoint.sh"]
+CMD ["supervisord", "-c", "/app/docker/supervisord.conf"]

Dockerfile.ml

@@ -0,0 +1,19 @@
+# ML training / inference only (Next.js app is not in this image).
+FROM python:3.11-slim-bookworm
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libgomp1 \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+COPY ml/requirements.txt /app/ml/requirements.txt
+RUN pip install --no-cache-dir -r /app/ml/requirements.txt
+
+COPY ml /app/ml
+
+ENV PYTHONPATH=/app
+ENV TF_CPP_MIN_LOG_LEVEL=2
+
+# Override with e.g. docker compose run ... python -m ml.training.train_crop --crop corn
+CMD ["python", "-m", "ml.scripts.create_synthetic_dataset", "--help"]

GOOGLE_MAPS_SETUP.md

@@ -0,0 +1,102 @@
+# Google Maps API Setup Guide
+
+## Overview
+The outbreak reporting map now uses Google Maps API for a more accurate and interactive map experience.
+
+## Getting Your Google Maps API Key
+
+### Step 1: Create a Google Cloud Project
+1. Go to [Google Cloud Console](https://console.cloud.google.com/)
+2. Click "Select a project" → "New Project"
+3. Enter a project name (e.g., "CropIntel")
+4. Click "Create"
+
+### Step 2: Enable Google Maps JavaScript API
+1. In your project, go to "APIs & Services" → "Library"
+2. Search for "Maps JavaScript API"
+3. Click on it and press "Enable"
+
+### Step 3: Create API Key
+1. Go to "APIs & Services" → "Credentials"
+2. Click "Create Credentials" → "API Key"
+3. Copy your API key
+4. **Important**: Click "Restrict Key" to secure it:
+   - Under "Application restrictions", select **"Websites"**
+   - Click "Add an item" and add your domains:
+     - `http://localhost:3040/*` (for development on port 3040)
+     - `http://localhost:*/*` (for all local ports - optional)
+     - `https://yourdomain.com/*` (for production - replace with your domain)
+   - Under "API restrictions", select "Restrict key"
+   - Choose "Maps JavaScript API"
+   - Click "Save"
+
+## Configuration
+
+### Step 4: Add API Key to Your Project
+1. Create or edit `.env.local` in your project root:
+```bash
+NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_api_key_here
+```
+
+2. Replace `your_api_key_here` with your actual API key
+
+### Step 5: Restart Development Server
+```bash
+# Stop the current server (Ctrl+C)
+# Then restart:
+npm run dev -- -p 3040
+```
+
+## Features
+
+✅ **Interactive Google Maps** - Full Google Maps functionality
+✅ **Click to Report** - Click anywhere on the map to report outbreaks
+✅ **Custom Markers** - Color-coded markers based on severity
+✅ **Info Windows** - Click markers to see outbreak details
+✅ **Zoom & Pan** - Full map navigation controls
+✅ **Accurate Locations** - Real geographic coordinates
+
+## Fallback Behavior
+
+If no API key is configured:
+- The map will show an error message
+- You'll be prompted to add the API key
+- The app will still function, but the map won't load
+
+## Cost Information
+
+Google Maps JavaScript API has a free tier:
+- **$200 free credit per month**
+- After free credit: ~$7 per 1,000 map loads
+- For most development/testing: **FREE**
+
+## Security Notes
+
+⚠️ **Important**:
+- Never commit your API key to git (`.env.local` is already in `.gitignore`)
+- Always restrict your API key to specific domains
+- Use different keys for development and production
+- Monitor your API usage in Google Cloud Console
+
+## Troubleshooting
+
+### Map Not Loading?
+1. Check that `NEXT_PUBLIC_GOOGLE_MAPS_API_KEY` is set in `.env.local`
+2. Restart the dev server after adding the key
+3. Verify the API key is not restricted incorrectly
+4. Check browser console for specific error messages
+
+### "This page can't load Google Maps correctly"?
+- Your API key might not be restricted correctly
+- Make sure `http://localhost:3040/*` is added under "Websites" restrictions
+- Check that "Maps JavaScript API" is enabled
+- Verify you're using `http://` (not `https://`) for localhost
+
+### API Key Invalid?
+- Verify you copied the full key (no spaces)
+- Check that the API is enabled in Google Cloud Console
+- Ensure billing is enabled (free tier still requires billing account)
+
+## Need Help?
+
+Check the [Google Maps JavaScript API Documentation](https://developers.google.com/maps/documentation/javascript)

ML_Architecture_Explanation.md

@@ -0,0 +1,117 @@
+# CropIntel Machine Learning Architecture
+
+## Overview
+
+CropIntel employs a sophisticated deep learning pipeline built on EfficientNet architecture to achieve accurate, real-time crop disease detection. The system processes crop leaf images through multiple stages, transforming raw pixel data into actionable disease diagnoses with confidence scores.
+
+## Architecture Pipeline
+
+### Stage 1: Image Acquisition & Input Processing
+
+**Input Format**: The system accepts crop leaf images in common formats (JPEG, PNG) uploaded by farmers through a web interface. Images can vary in resolution, quality, and environmental conditions (field photos, laboratory images, different lighting conditions).
+
+**Initial Validation**: Upon upload, the system performs basic validation checks including file format verification, size constraints (typically 5-10MB maximum), and basic image integrity checks to ensure the file is not corrupted.
+
+### Stage 2: Preprocessing Pipeline
+
+The preprocessing stage standardizes input images for optimal model performance:
+
+**Format Normalization**: All images are converted to a standardized RGB format, ensuring consistent color space representation regardless of input format variations.
+
+**Resolution Standardization**: Images are resized to 224×224 pixels, the standard input size for EfficientNet models. The resizing process maintains aspect ratio using intelligent cropping or padding to prevent distortion of critical disease features.
+
+**Color Normalization**: RGB pixel values are normalized from the standard 0-255 range to a 0-1 floating-point range. This normalization improves neural network training stability and convergence speed.
+
+**Quality Enhancement**: The preprocessing pipeline applies subtle enhancements including contrast adjustment, noise reduction, and brightness normalization to improve feature visibility while preserving authentic disease characteristics.
+
+**Data Augmentation (Training Phase)**: During model training, additional augmentation techniques are applied including random rotation (±15°), horizontal flipping, brightness/contrast variation, and color jittering to improve model generalization across diverse real-world conditions.
+
+### Stage 3: EfficientNet-B0 Convolutional Neural Network
+
+**Architecture Selection**: EfficientNet-B0 was selected as the core architecture due to its superior balance between accuracy and computational efficiency. The model achieves state-of-the-art performance while maintaining inference speeds suitable for real-time web applications.
+
+**Transfer Learning Foundation**: The model leverages transfer learning, initialized with weights pre-trained on ImageNet (1.4 million images, 1000 classes). This foundation provides robust feature extraction capabilities learned from diverse visual patterns, which are then fine-tuned for agricultural disease detection.
+
+**Feature Extraction Layers**: The convolutional backbone consists of multiple Mobile Inverted Bottleneck Convolution (MBConv) blocks that progressively extract hierarchical features:
+- **Early Layers (Blocks 1-3)**: Detect low-level features including edges, textures, and basic color patterns
+- **Middle Layers (Blocks 4-6)**: Identify complex patterns such as leaf structures, lesion shapes, and discoloration patterns
+- **Deep Layers (Blocks 7-9)**: Recognize high-level semantic features including disease-specific characteristics, symptom combinations, and spatial relationships
+
+**Global Average Pooling**: After feature extraction, spatial dimensions are reduced through Global Average Pooling, which converts the feature maps into a fixed-size vector while preserving critical feature information. This operation reduces model parameters and prevents overfitting.
+
+**Classification Head**: The pooled features pass through fully connected layers that map extracted features to disease categories. The final layer uses softmax activation to produce a probability distribution across all possible disease classes for the specific crop type.
+
+**TensorFlow Lite Conversion**: After training, Keras models are converted to TensorFlow Lite format using TFLiteConverter. This conversion optimizes the model for production deployment by:
+- **Quantization**: Reducing model size through 8-bit integer quantization (optional)
+- **Optimization**: Applying graph optimizations for faster inference
+- **Mobile/Edge Ready**: Enabling deployment on mobile devices and edge computing platforms
+- **Reduced Memory**: Smaller model footprint (~5-10MB vs ~20MB for Keras format)
+- **Faster Inference**: Optimized operations for production environments
+
+### Stage 4: Crop-Specific Model Routing
+
+**Multi-Model Architecture**: Rather than a single universal model, CropIntel employs crop-specific models (one each for corn, soybean, wheat, and rice). This specialization allows each model to focus on disease patterns specific to that crop, improving accuracy.
+
+**Model Selection**: Based on user-selected crop type, the system routes the preprocessed image to the appropriate specialized TensorFlow Lite model. The TFLitePredictor class loads the corresponding .tflite model file and uses the TensorFlow Lite Interpreter for inference, ensuring optimal disease detection for each agricultural context.
+
+**TensorFlow Lite Inference**: The prediction process uses TensorFlow Lite's optimized interpreter:
+- **Model Loading**: TFLite models are loaded into memory using `tf.lite.Interpreter`
+- **Input Tensor Setup**: Preprocessed images are set as input tensors with proper dtype conversion
+- **Invoke Inference**: The interpreter's `invoke()` method executes optimized inference operations
+- **Output Extraction**: Probability distributions are extracted from output tensors
+- **Fallback Support**: System can fall back to Keras models if TFLite models are unavailable
+
+### Stage 5: Post-Processing & Confidence Scoring
+
+**Confidence Calculation**: The model outputs probability scores for each disease class. The maximum probability becomes the prediction confidence score, ranging from 0% to 100%.
+
+**Threshold Filtering**: Predictions below a minimum confidence threshold (typically 60%) are flagged as uncertain. Low-confidence predictions trigger user warnings and recommendations to capture additional images or consult experts.
+
+**Health Status Determination**: If no disease class exceeds the confidence threshold, the crop is classified as "healthy." This binary health assessment provides immediate actionable information.
+
+**Severity Assessment**: Based on the detected disease and confidence level, the system assigns severity ratings (low, medium, high) to guide treatment urgency and resource allocation.
+
+### Stage 6: Result Generation & Output
+
+**Structured Output**: The system generates comprehensive results including:
+- **Disease Identification**: Specific disease name with scientific accuracy
+- **Confidence Percentage**: Numerical confidence score (e.g., "87% confident")
+- **Health Status**: Binary healthy/diseased classification
+- **Treatment Recommendations**: Evidence-based treatment options specific to the detected disease
+- **Prevention Strategies**: Long-term prevention measures to reduce future risk
+- **Severity Level**: Risk assessment (low/medium/high) for treatment prioritization
+
+**Response Time**: The entire pipeline, from image upload to result display, completes in under 2 seconds, enabling real-time field decision-making.
+
+## Model Training & Optimization
+
+**Dataset Composition**: Models are trained on curated datasets containing thousands of labeled crop disease images. Datasets are balanced across disease classes to prevent model bias toward common conditions.
+
+**Training Methodology**: Fine-tuning employs a two-phase approach: (1) freezing early layers to preserve general feature extraction, (2) training final layers with agricultural disease data. This approach leverages ImageNet knowledge while adapting to domain-specific patterns.
+
+**Hyperparameter Optimization**: Learning rates, batch sizes, and regularization parameters are tuned through systematic experimentation. Early stopping prevents overfitting by monitoring validation loss.
+
+**Performance Metrics**: Models achieve 87-92% accuracy across crop types, with precision and recall balanced to minimize both false positives (unnecessary treatments) and false negatives (missed diseases).
+
+## Technical Specifications
+
+- **Framework**: TensorFlow Lite (TFLite) for production inference
+- **Model Format**: Optimized TensorFlow Lite models (.tflite) converted from Keras models
+- **Model Size**: EfficientNet-B0 (~5.3M parameters, ~5-10MB in TFLite format)
+- **Input Dimensions**: 224×224×3 (RGB)
+- **Inference Engine**: TensorFlow Lite Interpreter for optimized runtime performance
+- **Inference Speed**: <2 seconds per image
+- **Accuracy Range**: 87-92% depending on crop type
+- **Supported Crops**: Corn, Soybean, Wheat, Rice (expandable)
+
+## Innovation & Advantages
+
+**Efficiency**: EfficientNet architecture provides superior accuracy-to-efficiency ratio compared to traditional CNNs, enabling real-time performance on standard hardware.
+
+**Accessibility**: Optimized model size and inference speed make advanced AI accessible to farmers using basic smartphones and standard internet connections.
+
+**Scalability**: Modular architecture allows easy addition of new crop types and diseases without retraining entire models.
+
+**Reliability**: Transfer learning foundation provides robust feature extraction, while crop-specific fine-tuning ensures domain accuracy.
+
+This architecture represents a production-ready, scalable solution that brings state-of-the-art AI capabilities to agricultural disease detection, balancing accuracy, speed, and accessibility for real-world deployment.

README copy.md

@@ -0,0 +1,109 @@
+# CropIntel - AI-Powered Crop Disease Classification
+
+A modern web application for detecting crop diseases using deep learning.
+
+## Features
+
+- 🌾 Support for multiple crops (Corn, Soybean, Wheat, Rice)
+- 🤖 AI-powered disease detection using EfficientNet
+- 📱 Modern, responsive web interface built with Next.js
+- ⚡ Fast inference using TensorFlow Lite
+- 🎨 Beautiful UI with Tailwind CSS
+
+## Prerequisites
+
+- Python 3.8+
+- Node.js 18+
+- npm or yarn
+
+## Installation
+
+### 1. Install Python Dependencies
+
+```bash
+pip install -r ml/requirements.txt
+```
+
+### 2. Install Node.js Dependencies
+
+```bash
+npm install
+```
+
+## Running the Application
+
+### Development Mode
+
+1. Start the Next.js development server:
+
+```bash
+npm run dev
+```
+
+2. Open [http://localhost:3000](http://localhost:3000) in your browser
+
+### Production Mode
+
+1. Build the application:
+
+```bash
+npm run build
+```
+
+2. Start the production server:
+
+```bash
+npm start
+```
+
+## Training Models
+
+Before using the web app, you need to train models for the crops you want to classify:
+
+```bash
+# Train a single crop model
+python3 -m ml.training.train_crop --crop corn --epochs 40
+
+# Train all crops
+python3 -m ml.training.train_all_crops --epochs 40
+```
+
+## Project Structure
+
+```
+cropintel/
+├── app/                    # Next.js app directory
+│   ├── api/               # API routes
+│   ├── globals.css        # Global styles
+│   ├── layout.tsx         # Root layout
+│   └── page.tsx           # Home page
+├── components/            # React components
+│   ├── ImageUpload.tsx
+│   ├── CropSelector.tsx
+│   └── PredictionResults.tsx
+├── ml/                    # Machine learning code
+│   ├── training/          # Training scripts
+│   ├── inference/         # Inference modules
+│   └── utils/             # Utilities
+├── scripts/               # Utility scripts
+│   └── predict.py        # Python prediction script
+└── package.json           # Node.js dependencies
+```
+
+## Usage
+
+1. Upload a crop leaf image
+2. Select the crop type (Corn, Soybean, Wheat, or Rice)
+3. Click "Analyze Disease"
+4. View the prediction results with confidence scores
+
+## Technologies
+
+- **Frontend**: Next.js 14, React, TypeScript, Tailwind CSS
+- **Backend**: Python, Flask (via API route)
+- **ML**: TensorFlow, EfficientNet, TensorFlow Lite
+- **Image Processing**: PIL/Pillow
+
+## License
+
+MIT

README.md

@@ -0,0 +1,93 @@
+---
+title: CropIntel
+emoji: 🌾
+colorFrom: green
+colorTo: blue
+sdk: docker
+app_port: 3050
+pinned: false
+---
+
+<!-- The YAML block above configures the Hugging Face Space (Docker SDK,
+     public port 3050). Required by HF; ignored by GitHub. See docs/DEPLOYMENT.md. -->
+
+# CropIntel
+
+Crop leaf-disease classifier for 5 crops (corn, soybean, wheat, rice, tomato),
+EfficientNetB0 → TensorFlow Lite, served behind a Next.js UI. One Docker
+container runs the web app and a persistent Python inference service together.
+
+## Quick start (run the whole thing)
+
+You do **not** need Kaggle, training, or any model files — the trained models
+(~38 MB) are fetched automatically from the GitHub Release on first start.
+
+```bash
+git clone https://github.com/rakshithj09/CropIntel.git
+cd CropIntel
+docker compose -f docker-compose.prod.yml up -d --build
+curl -fsS http://localhost:3050/api/health    # {"web":"ok","inference":{"ready":true,...}}
+```
+
+Open [http://localhost:3050](http://localhost:3050). That's it.
+
+Optional environment (drop a `.env` next to the compose file):
+
+```bash
+NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=...               # only for the outbreak map
+CROPINTEL_ADMIN_TOKEN=$(openssl rand -hex 16)     # only to guard POST /admin/reload
+CROPINTEL_MODELS_URL=...                           # override the default v1 model bundle
+```
+
+For a real domain + TLS, monitoring, and model promotion/rollback, see
+[docs/DEPLOYMENT.md](docs/DEPLOYMENT.md).
+
+## Local development (no Docker)
+
+The web app forwards predictions to the inference service, so run both:
+
+```bash
+# 1) fetch models once (into ml/models/, gitignored)
+pip install -r ml/requirements-inference.txt
+export CROPINTEL_MODELS_URL='https://github.com/rakshithj09/CropIntel/releases/download/v1/cropintel-models-mobile.zip'
+python3 -m ml.scripts.fetch_models
+
+# 2) start the inference service (terminal A)
+python3 -m uvicorn ml.serve.inference_app:app --host 127.0.0.1 --port 8000
+
+# 3) start the web app (terminal B)
+npm install && npm run dev
+```
+
+Open [http://localhost:3050](http://localhost:3050). The UI calls `/api/predict`,
+which forwards to the inference service at `INFERENCE_URL` (default
+`http://127.0.0.1:8000`).
+
+## Train it yourself (needs Kaggle data)
+
+See [ml/README.md](ml/README.md) for the Kaggle API setup and training scripts
+(`pip install -r ml/requirements.txt`). Models are gated on an **external**
+(out-of-distribution) eval before promotion — see
+`ml/scripts/test_external.py` and `ml/scripts/promote_model.py`.
+
+## Maintainer: ship updated models
+
+After training/promoting, repackage and replace the release bundle:
+
+```bash
+python3 -m ml.scripts.package_models --tflite-only -o cropintel-models-mobile.zip
+gh release upload v1 cropintel-models-mobile.zip -R rakshithj09/CropIntel --clobber
+# on a running server: rm ml/models/.cropintel-fetch-ok && docker compose -f docker-compose.prod.yml restart
+```
+
+## Project layout
+
+- `app/` — Next.js UI + `/api/predict` (forwards to the inference service) + `/api/health`
+- `ml/serve/inference_app.py` — FastAPI inference service (loads every crop model once)
+- `ml/` — training (`training/`), predictors (`inference/`), config, scripts
+- `docker-compose.prod.yml`, `docker/`, `docs/DEPLOYMENT.md` — production deploy
+- `tests/` — pytest suite (`.github/workflows/ci.yml` runs web + Python checks)
+
+## License
+
+See repository.

SECURITY_CHANGES_SUMMARY.md

@@ -0,0 +1,101 @@
+# Security Hardening - Implementation Complete ✅
+
+## Summary
+
+Security measures follow OWASP best practices. The application is hardened against common vulnerabilities while maintaining backward compatibility for core features.
+
+## ✅ Completed Security Measures
+
+### 1. Rate Limiting
+- **File**: `lib/security/rateLimiter.ts`
+- IP-based rate limiting for API routes
+- Configurable thresholds (e.g. 20/min for predictions)
+- HTTP 429 responses with Retry-After headers
+- Rate limit status headers in responses
+
+### 2. Input Validation & Sanitization
+- **File**: `lib/security/validation.ts`
+- Zod schema-based validation
+- Strict type checking
+- File upload validation (size, type, content)
+- Filename sanitization (path traversal prevention)
+- Crop type whitelist validation
+
+### 3. File Upload Security
+- **File**: `app/api/predict/route.ts`
+- 10MB file size limit
+- MIME type whitelist validation
+- Filename sanitization
+- Temporary file cleanup
+- Server-side content validation
+
+### 4. Security Headers
+- **Files**:
+  - `lib/security/headers.ts`
+  - `middleware.ts` (applies to all routes)
+- Content-Security-Policy
+- X-Frame-Options
+- X-Content-Type-Options
+- Referrer-Policy
+- Permissions-Policy
+- Strict-Transport-Security (production)
+
+### 5. Error Handling
+- Generic error messages (no information disclosure)
+- Detailed errors logged server-side only
+- Secure error responses
+
+## 📁 Security-related files
+
+```
+lib/security/
+├── rateLimiter.ts      # Rate limiting middleware
+├── validation.ts       # Input validation schemas
+└── headers.ts          # Security headers
+
+middleware.ts           # Security headers middleware
+SECURITY_IMPLEMENTATION.md  # Detailed documentation
+```
+
+## 🔄 Modified core files
+
+- `app/api/predict/route.ts` — Security measures for ML prediction uploads
+- `next.config.js` — Disabled X-Powered-By header (if configured)
+
+## 🔐 Environment variables
+
+**`.env.local` example** (see `.env.local.example`):
+
+```bash
+NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_key
+```
+
+## ✅ OWASP alignment
+
+| Requirement | Status | Implementation |
+|------------|--------|----------------|
+| Rate Limiting | ✅ | IP-based, configurable thresholds |
+| Input Validation | ✅ | Schema-based, strict validation |
+| File Upload Security | ✅ | Size limits, type validation, sanitization |
+| Security Headers | ✅ | CSP, X-Frame-Options, etc. |
+| Error Handling | ✅ | No information disclosure |
+
+## 🧪 Testing
+
+1. **Rate limiting**: Send 21+ rapid requests to `/api/predict`
+2. **Input validation**: Send invalid crop type or oversized file
+
+## 📚 Documentation
+
+- **SECURITY_IMPLEMENTATION.md**: Security documentation
+- **SECURITY.md**: Security analysis (if present)
+
+## 🚀 Next steps
+
+1. Test rate limiting and validation
+2. Review CSP for your deployment (CDNs, analytics, etc.)
+3. Consider Redis for rate limiting in production (multi-instance)
+
+---
+
+**Status**: ✅ Complete

app/api/health/route.ts

@@ -0,0 +1,32 @@
+/**
+ * Health API Route
+ *
+ * Single URL for the compose healthcheck, uptime monitors, and humans.
+ * Reports web-tier liveness plus the inference service's readiness
+ * (per-crop model load status from /readyz).
+ */
+
+import { createSecureResponse } from '@/lib/security/headers'
+
+const INFERENCE_URL = process.env.INFERENCE_URL || 'http://127.0.0.1:8000'
+
+export async function GET() {
+  let inference: any = null
+  let healthy = false
+
+  try {
+    const upstream = await fetch(`${INFERENCE_URL}/readyz`, {
+      signal: AbortSignal.timeout(5_000),
+      cache: 'no-store',
+    })
+    inference = await upstream.json()
+    healthy = upstream.ok
+  } catch {
+    inference = { ready: false, error: 'inference service unreachable' }
+  }
+
+  return createSecureResponse(
+    { web: 'ok', inference },
+    healthy ? 200 : 503
+  )
+}

app/api/predict/route.ts

@@ -0,0 +1,206 @@
+/**
+ * Prediction API Route
+ *
+ * Secure API endpoint for crop disease prediction.
+ * Implements comprehensive security measures following OWASP best practices.
+ *
+ * Security Features:
+ * - Rate limiting (IP-based)
+ * - Input validation and sanitization
+ * - File upload security (size limits, type validation)
+ * - Security headers
+ * - Secure error handling
+ *
+ * OWASP Compliance:
+ * - A01:2021 (Broken Access Control) - Rate limiting
+ * - A03:2021 (Injection) - Input validation
+ * - A05:2021 (Security Misconfiguration) - Security headers
+ * - A07:2021 (Identification and Authentication Failures) - Input validation
+ *
+ * Inference is served by the persistent Python service (ml/serve/inference_app.py)
+ * over localhost HTTP — models stay loaded in memory between requests.
+ */
+
+import { NextRequest } from 'next/server'
+import { rateLimit, getRateLimitHeaders } from '@/lib/security/rateLimiter'
+import { validatePredictionRequest } from '@/lib/security/validation'
+import { createSecureResponse, addSecurityHeaders } from '@/lib/security/headers'
+import { ZodError } from 'zod'
+
+/**
+ * Maximum file size: 10MB
+ * Prevents DoS attacks via large file uploads
+ */
+const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB
+
+/**
+ * Allowed image MIME types (whitelist approach)
+ * Prevents malicious file uploads
+ */
+const ALLOWED_MIME_TYPES = [
+  'image/jpeg',
+  'image/jpg',
+  'image/png',
+  'image/webp',
+  'image/gif',
+]
+
+/** Base URL of the Python inference service (never exposed publicly). */
+const INFERENCE_URL = process.env.INFERENCE_URL || 'http://127.0.0.1:8000'
+
+/** Upstream timeout — model inference is fast; this guards a hung service. */
+const INFERENCE_TIMEOUT_MS = 30_000
+
+/**
+ * Validate file content by checking MIME type
+ * Additional security layer beyond client-side validation
+ *
+ * @param file - File object to validate
+ * @returns true if file is valid image, false otherwise
+ */
+function validateFileContent(file: File): boolean {
+  // Check MIME type against whitelist
+  if (!ALLOWED_MIME_TYPES.includes(file.type)) {
+    return false
+  }
+
+  // Check file size
+  if (file.size > MAX_FILE_SIZE) {
+    return false
+  }
+
+  // Check file is not empty
+  if (file.size === 0) {
+    return false
+  }
+
+  return true
+}
+
+export async function POST(request: NextRequest) {
+  // ========== RATE LIMITING ==========
+  // Apply rate limiting before processing request
+  // OWASP: Fail securely by blocking excessive requests
+  const rateLimitResponse = rateLimit(request, '/api/predict')
+  if (rateLimitResponse) {
+    return addSecurityHeaders(rateLimitResponse)
+  }
+
+  try {
+    // ========== INPUT VALIDATION ==========
+    // Parse and validate form data using schema-based validation
+    // OWASP: Prevents injection attacks via strict validation
+    const formData = await request.formData()
+
+    let validatedData
+    try {
+      validatedData = await validatePredictionRequest(formData)
+    } catch (error) {
+      // Handle validation errors gracefully
+      if (error instanceof ZodError) {
+        const errorMessages = error.issues.map((e) => e.message).join(', ')
+        return createSecureResponse(
+          { error: `Validation failed: ${errorMessages}` },
+          400
+        )
+      }
+      throw error // Re-throw unexpected errors
+    }
+
+    const { image, crop } = validatedData
+
+    // ========== FILE CONTENT VALIDATION ==========
+    // Additional server-side validation beyond schema validation
+    // OWASP: Defense in depth - multiple validation layers
+    if (!validateFileContent(image)) {
+      return createSecureResponse(
+        {
+          error: 'Invalid file. Must be a valid image (JPEG, PNG, WebP, GIF) under 10MB.',
+        },
+        400
+      )
+    }
+
+    // ========== INFERENCE SERVICE CALL ==========
+    // Forward the validated upload to the persistent inference service.
+    const upstreamForm = new FormData()
+    upstreamForm.append('image', image)
+    upstreamForm.append('crop', crop)
+
+    let upstream: Response
+    try {
+      upstream = await fetch(`${INFERENCE_URL}/predict`, {
+        method: 'POST',
+        body: upstreamForm,
+        signal: AbortSignal.timeout(INFERENCE_TIMEOUT_MS),
+      })
+    } catch (error) {
+      // Service down or timed out — operators should check the inference process.
+      console.error('Inference service unreachable:', error)
+      return createSecureResponse(
+        { error: 'Prediction service unavailable. Please try again shortly.' },
+        503
+      )
+    }
+
+    let result: any
+    try {
+      result = await upstream.json()
+    } catch {
+      console.error('Inference service returned non-JSON, status:', upstream.status)
+      return createSecureResponse(
+        { error: 'Prediction failed. Please try again later.' },
+        500
+      )
+    }
+
+    if (!upstream.ok) {
+      const errorMessage: string = result?.error || 'Prediction failed'
+      const msg = errorMessage.toLowerCase()
+
+      // User-actionable image problems (quality checks) — pass through as-is.
+      if (
+        msg.includes('retake the image') ||
+        msg.includes('clear plant leaf') ||
+        msg.includes('appears blurry')
+      ) {
+        return createSecureResponse({ error: errorMessage }, 400)
+      }
+
+      // Model-not-ready — tell operators to train/fetch models.
+      if (msg.includes('no trained models found') || msg.includes('model not found')) {
+        return createSecureResponse(
+          { error: 'Model not ready. Please train or install a model for this crop before running analysis.' },
+          503
+        )
+      }
+
+      console.error('Unhandled inference error:', upstream.status, errorMessage)
+      return createSecureResponse(
+        { error: 'Prediction failed. Please try again later.' },
+        upstream.status >= 500 ? 500 : 400
+      )
+    }
+
+    // ========== SUCCESS RESPONSE ==========
+    // Return result with security headers and rate limit info
+    const response = createSecureResponse(result, 200)
+
+    // Add rate limit headers to successful response
+    const rateLimitHeaders = getRateLimitHeaders(request, '/api/predict')
+    Object.entries(rateLimitHeaders).forEach(([key, value]) => {
+      response.headers.set(key, value)
+    })
+
+    return response
+  } catch (error: any) {
+    // ========== ERROR HANDLING ==========
+    // Log detailed error server-side but return generic message to client
+    // OWASP: Prevent information disclosure
+    console.error('Prediction error:', error)
+    return createSecureResponse(
+      { error: 'Prediction failed. Please try again later.' },
+      500
+    )
+  }
+}

app/globals.css

@@ -0,0 +1,108 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Hide Google Maps "For development purposes only" watermark */
+.gm-style-cc,
+.gm-style-cc div,
+.gm-style-cc a,
+a[href^="https://developers.google.com/maps"],
+.gm-bundled-control .gm-style-cc,
+div[title*="For development purposes only"] {
+  display: none !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
+  height: 0 !important;
+  width: 0 !important;
+}
+
+/* Hide Google Maps default POI marker images only (scope to .gm-style — unscoped img rules break non-map UI) */
+.gm-style img[src*="poi"],
+.gm-style img[src*="place"],
+.gm-style img[src*="marker"][src*="default"] {
+  display: none !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
+  height: 0 !important;
+  width: 0 !important;
+  pointer-events: none !important;
+}
+
+/* Leaflet map styles */
+.leaflet-container {
+  height: 100%;
+  width: 100%;
+  z-index: 0;
+}
+
+.leaflet-popup-content-wrapper {
+  border-radius: 8px;
+}
+
+.custom-marker {
+  background: transparent !important;
+  border: none !important;
+}
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+* {
+  @apply antialiased;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background:
+    radial-gradient(1200px 600px at 20% 0%, rgba(112, 152, 112, 0.18), transparent 55%),
+    radial-gradient(900px 500px at 90% 10%, rgba(120, 160, 120, 0.16), transparent 60%),
+    linear-gradient(180deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%);
+  min-height: 100vh;
+  min-height: 100dvh;
+  overflow-x: hidden;
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
+
+/* Ensure images display correctly */
+img {
+  display: block !important;
+  max-width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+
+/* Prevent images from showing as broken icons */
+img[src=""],
+img:not([src]) {
+  display: none !important;
+}
+
+/* Ensure image containers don't collapse */
+.image-container,
+[class*="image"] {
+  min-height: 100px;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+  
+  .glass {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  
+  .gradient-text {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-blue-600;
+  }
+
+  .surface {
+    @apply bg-white border border-slate-200/80 shadow-sm;
+  }
+}

app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata, Viewport } from 'next'
+import './globals.css'
+import { ThemeProvider } from '@/components/ui/theme-provider'
+
+export const metadata: Metadata = {
+  title: 'CropIntel - AI-Powered Crop Disease Classification',
+  description: 'Upload crop leaf images to detect diseases using AI',
+}
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  viewportFit: 'cover',
+  themeColor: '#f8fafc',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="light"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}

app/outbreaks/page.tsx

@@ -0,0 +1,5 @@
+import OutbreakMap from '@/components/OutbreakMap'
+
+export default function OutbreaksPage() {
+  return <OutbreakMap />
+}

app/page.tsx

@@ -0,0 +1,554 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import dynamic from 'next/dynamic'
+import Image from 'next/image'
+import { Bell, MapPin, Sparkles, History as HistoryIcon, ArrowRight, Loader2, Camera, ArrowLeftRight } from 'lucide-react'
+import ImageUpload from '@/components/ImageUpload'
+import CropSelector from '@/components/CropSelector'
+import StateSelector from '@/components/StateSelector'
+import PredictionResults from '@/components/PredictionResults'
+import DiseaseInfo from '@/components/DiseaseInfo'
+import PredictionHistory from '@/components/PredictionHistory'
+import ExportResults from '@/components/ExportResults'
+import TipsAndGuidelines from '@/components/TipsAndGuidelines'
+import Diagnosis from '@/components/Diagnosis'
+import NotificationSystem from '@/components/NotificationSystem'
+import FarmerRegistration from '@/components/FarmerRegistration'
+import FarmerVerificationBadge from '@/components/FarmerVerificationBadge'
+import HealthComparisonPanel from '@/components/HealthComparisonPanel'
+import { savePredictionToHistory } from '@/components/PredictionHistory'
+import { CROPS } from '@/lib/crops'
+import type { OutbreakReport } from '@/lib/outbreakReport'
+import { loadFarmerProfile, saveFarmerProfile, type StoredFarmerProfile } from '@/lib/farmerProfile'
+import {
+  applyRegionalPrior,
+  getRelevantDiseasesForCropState,
+  type PredictionPayload,
+} from '@/lib/stateDiseaseMap'
+
+const USOutbreakMap = dynamic(() => import('@/components/USOutbreakMap'), {
+  ssr: false,
+  loading: () => (
+    <div className="flex min-h-[280px] w-full items-center justify-center rounded-xl border border-slate-200 bg-slate-50 sm:min-h-[420px]">
+      <Loader2 className="h-8 w-8 animate-spin text-primary-700" aria-label="Loading map" />
+    </div>
+  ),
+})
+
+export default function Home() {
+  const [selectedImage, setSelectedImage] = useState<File | null>(null)
+  const [selectedCrop, setSelectedCrop] = useState<string>('corn')
+  const [selectedState, setSelectedState] = useState<string>('IA')
+  const [photoMode, setPhotoMode] = useState<'single' | 'compare'>('single')
+  const [farmerProfile, setFarmerProfile] = useState<StoredFarmerProfile | null>(null)
+  const [prediction, setPrediction] = useState<any>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [imageUrl, setImageUrl] = useState<string | null>(null)
+  const [activeView, setActiveView] = useState<'diagnose' | 'history' | 'outbreaks'>('diagnose')
+  // Initialize with a sample outbreak in Russellville, Arkansas
+  const [outbreakReports, setOutbreakReports] = useState<OutbreakReport[]>([
+    {
+      id: 'russellville-outbreak-1',
+      lat: 35.2784,
+      lng: -93.1338,
+      crop: 'corn',
+      disease: 'Common Rust',
+      severity: 'high',
+      date: new Date().toISOString(),
+      description: 'Severe rust outbreak detected in corn fields. Multiple farms affected in the area.',
+      reporterVerified: false,
+    },
+    {
+      id: 'high-severity-130-miles',
+      lat: 33.6234, // Exactly 130 miles south of farmer-1 (35.5, -93.2)
+      lng: -93.2,
+      crop: 'corn',
+      disease: 'Southern Corn Leaf Blight',
+      severity: 'high',
+      date: new Date().toISOString(),
+      description: 'CRITICAL: Severe southern corn leaf blight outbreak detected. Immediate action required. Multiple farms at risk within 150-mile radius.',
+      reporterVerified: false,
+    },
+    {
+      id: 'california-outbreak-1',
+      lat: 36.7783,
+      lng: -119.4179,
+      crop: 'wheat',
+      disease: 'Leaf Rust',
+      severity: 'high',
+      date: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
+      description: 'Widespread leaf rust detected in wheat fields across Central Valley.',
+    },
+    {
+      id: 'texas-outbreak-1',
+      lat: 31.9686,
+      lng: -99.9018,
+      crop: 'corn',
+      disease: 'Gray Leaf Spot',
+      severity: 'medium',
+      date: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
+      description: 'Gray leaf spot spreading in corn crops. Farmers advised to monitor closely.',
+    },
+    {
+      id: 'iowa-outbreak-1',
+      lat: 41.8780,
+      lng: -93.0977,
+      crop: 'soybean',
+      disease: 'Powdery Mildew',
+      severity: 'medium',
+      date: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
+      description: 'Powdery mildew detected in soybean fields. Early treatment recommended.',
+    },
+    {
+      id: 'illinois-outbreak-1',
+      lat: 40.3495,
+      lng: -88.9861,
+      crop: 'corn',
+      disease: 'Common Rust',
+      severity: 'low',
+      date: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
+      description: 'Minor rust outbreak in isolated corn fields. Monitoring in progress.',
+    },
+    {
+      id: 'kansas-outbreak-1',
+      lat: 38.5729,
+      lng: -98.3833,
+      crop: 'wheat',
+      disease: 'Stripe Rust',
+      severity: 'high',
+      date: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString(),
+      description: 'Severe stripe rust outbreak affecting wheat crops. Immediate action required.',
+    },
+    {
+      id: 'nebraska-outbreak-1',
+      lat: 41.4925,
+      lng: -99.9018,
+      crop: 'corn',
+      disease: 'Northern Corn Leaf Blight',
+      severity: 'medium',
+      date: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000).toISOString(),
+      description: 'Northern corn leaf blight detected. Fungicide application recommended.',
+    },
+    {
+      id: 'minnesota-outbreak-1',
+      lat: 46.7296,
+      lng: -94.6859,
+      crop: 'soybean',
+      disease: 'Bacterial Blight',
+      severity: 'low',
+      date: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
+      description: 'Bacterial blight found in soybean fields. Isolated cases reported.',
+    },
+    {
+      id: 'north-carolina-outbreak-1',
+      lat: 35.2271,
+      lng: -80.8431,
+      crop: 'corn',
+      disease: 'Southern Corn Leaf Blight',
+      severity: 'high',
+      date: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
+      description: 'Severe southern corn leaf blight outbreak. Multiple counties affected.',
+    },
+    {
+      id: 'missouri-outbreak-1',
+      lat: 38.5729,
+      lng: -92.1893,
+      crop: 'soybean',
+      disease: 'Sudden Death Syndrome',
+      severity: 'medium',
+      date: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString(),
+      description: 'Sudden death syndrome detected in soybean crops. Root health monitoring advised.',
+    },
+    {
+      id: 'indiana-outbreak-1',
+      lat: 39.7684,
+      lng: -86.1581,
+      crop: 'corn',
+      disease: 'Common Rust',
+      severity: 'low',
+      date: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
+      description: 'Minor rust spots detected. Early stage monitoring.',
+    },
+    {
+      id: 'ohio-outbreak-1',
+      lat: 40.3888,
+      lng: -82.7649,
+      crop: 'corn',
+      disease: 'Gray Leaf Spot',
+      severity: 'medium',
+      date: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
+      description: 'Gray leaf spot spreading in corn fields. Weather conditions favorable for spread.',
+    },
+  ])
+  const [farmerLocation, setFarmerLocation] = useState<{ lat: number; lng: number; crops: string[] } | null>(null)
+
+  useEffect(() => {
+    const p = loadFarmerProfile()
+    if (p) {
+      setFarmerProfile(p)
+      setFarmerLocation({ lat: p.lat, lng: p.lng, crops: p.crops })
+    }
+  }, [])
+
+  const applyRegionalFilter = useCallback(
+    (raw: PredictionPayload) => applyRegionalPrior(raw, selectedCrop, selectedState),
+    [selectedCrop, selectedState]
+  )
+
+  const regionNote =
+    getRelevantDiseasesForCropState(selectedCrop, selectedState) !== null
+      ? `Regional adjustment: results are gently nudged toward diseases common for ${selectedCrop} in ${selectedState} (illustrative; capped so it never overrides the model). Other states or crops show the model's raw output.`
+      : undefined
+
+  const handlePredict = async () => {
+    if (!selectedImage) {
+      setError('Please select an image first')
+      return
+    }
+
+    setLoading(true)
+    setError(null)
+    setPrediction(null)
+
+    try {
+      const formData = new FormData()
+      formData.append('image', selectedImage)
+      formData.append('crop', selectedCrop)
+
+      const response = await fetch('/api/predict', {
+        method: 'POST',
+        body: formData,
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.error || 'Prediction failed')
+      }
+
+      const data = await response.json()
+      const rawPayload: PredictionPayload = {
+        disease: data.disease,
+        confidence: data.confidence,
+        is_healthy: data.is_healthy,
+        meets_threshold: data.meets_threshold,
+        all_predictions: data.all_predictions,
+      }
+      const filtered = applyRegionalFilter(rawPayload)
+      const merged = { ...data, ...filtered }
+      setPrediction(merged)
+
+      // Save to history
+      if (imageUrl) {
+        const confidencePercent =
+          typeof merged.confidence === 'number' && merged.confidence <= 1
+            ? merged.confidence * 100
+            : merged.confidence
+        savePredictionToHistory(selectedCrop, merged.disease, confidencePercent, imageUrl)
+      }
+    } catch (err: any) {
+      setError(err.message || 'An error occurred')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleClear = () => {
+    setSelectedImage(null)
+    setPrediction(null)
+    setError(null)
+    setImageUrl(null)
+  }
+
+  const handleImageSelect = (file: File | null) => {
+    setSelectedImage(file)
+    if (file) {
+      const url = URL.createObjectURL(file)
+      setImageUrl(url)
+    } else {
+      setImageUrl(null)
+    }
+  }
+
+  const handleHistorySelect = (record: any) => {
+    // Load image from history
+    setImageUrl(record.imageUrl)
+    setSelectedCrop(record.crop)
+    // Note: We can't reload the File object from URL, but we can show the prediction
+    // In a real app, you might want to store more data in history
+  }
+
+  const handleOutbreakReport = (report: OutbreakReport) => {
+    setOutbreakReports([...outbreakReports, report])
+  }
+
+  const handleFarmerRegister = (location: {
+    lat: number
+    lng: number
+    crops: string[]
+    name: string
+    email?: string
+    usdaFarmCode?: string
+    verifiedFarmer: boolean
+  }) => {
+    const profile: StoredFarmerProfile = {
+      name: location.name,
+      email: location.email,
+      lat: location.lat,
+      lng: location.lng,
+      crops: location.crops,
+      usdaFarmCode: location.usdaFarmCode,
+      verifiedFarmer: location.verifiedFarmer,
+    }
+    saveFarmerProfile(profile)
+    setFarmerProfile(profile)
+    setFarmerLocation({
+      lat: location.lat,
+      lng: location.lng,
+      crops: location.crops,
+    })
+    alert(
+      `Farm "${location.name}" registered! You'll now receive alerts for outbreaks within 250 miles.${
+        location.verifiedFarmer ? ' You are marked as a Verified farmer.' : ''
+      }`
+    )
+  }
+
+  return (
+    <main className="min-h-screen min-h-[100dvh] px-3 sm:px-4 py-4 sm:py-6 pb-[max(1.25rem,env(safe-area-inset-bottom))]">
+      <div className="mx-auto max-w-7xl">
+        {/* Top bar */}
+        <header className="sticky top-0 z-40 -mx-3 sm:-mx-4 px-3 sm:px-4 pt-[max(0.5rem,env(safe-area-inset-top))] pb-3 border-b border-slate-200/60 bg-white/95">
+          <div className="mx-auto max-w-7xl flex items-center justify-between gap-2 sm:gap-3">
+            <div className="flex items-center gap-2 sm:gap-3 min-w-0">
+              <div className="w-10 h-10 shrink-0 rounded-2xl bg-gradient-to-br from-primary-600 to-primary-700 text-white flex items-center justify-center shadow-sm overflow-hidden">
+                <Image
+                  src="/brand/wheat-mark-transparent.png"
+                  alt="CropIntel"
+                  width={22}
+                  height={44}
+                  className="opacity-95 object-contain drop-shadow-[0_1px_0_rgba(0,0,0,0.08)]"
+                  priority
+                />
+              </div>
+              <div className="leading-tight min-w-0">
+                <div className="text-sm font-semibold text-slate-900 truncate">CropIntel</div>
+                <div className="text-[11px] sm:text-xs text-slate-500 leading-snug">Crop health insights</div>
+              </div>
+            </div>
+
+            <nav className="hidden md:flex items-center gap-2">
+              <a
+                href="/"
+                className="px-3 py-2 rounded-xl text-sm font-semibold text-slate-700 hover:text-slate-900 hover:bg-slate-100 transition-colors"
+              >
+                Diagnose
+              </a>
+            </nav>
+
+            <div className="flex items-center gap-1.5 sm:gap-2 flex-nowrap shrink-0 justify-end">
+              {farmerProfile && (
+                <FarmerVerificationBadge verified={farmerProfile.verifiedFarmer} compact />
+              )}
+              <div className="hidden sm:block">
+                <FarmerRegistration onRegister={handleFarmerRegister} crops={Object.keys(CROPS)} />
+              </div>
+              <div className="relative z-50">
+                <NotificationSystem outbreaks={outbreakReports} currentFarmerLocation={farmerLocation || undefined} />
+              </div>
+            </div>
+          </div>
+        </header>
+
+        {/* Hero */}
+        <section className="mt-5 sm:mt-8 mb-5 sm:mb-6">
+          <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
+            <div className="max-w-2xl">
+              <h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold text-slate-900 tracking-tight text-balance">
+                Diagnose crop issues from a photo
+              </h1>
+              <p className="mt-2 text-sm sm:text-base text-slate-600">
+                Upload a leaf image, pick the crop, and get a ranked set of labels with confidence.
+              </p>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="px-3 py-2 rounded-xl border border-slate-200 bg-white/80 text-sm text-slate-700 flex items-center gap-2">
+                <Bell className="w-4 h-4 text-primary-700" />
+                Outbreak alerts
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Views */}
+        <div className="grid grid-cols-3 gap-2 mb-5 sm:mb-6 sm:flex sm:flex-wrap sm:items-center">
+          {(
+            [
+              { id: 'diagnose', label: 'Diagnose', icon: Sparkles },
+              { id: 'history', label: 'History', icon: HistoryIcon },
+              { id: 'outbreaks', label: 'Outbreaks', icon: MapPin },
+            ] as const
+          ).map(({ id, label, icon: Icon }) => (
+            <button
+              key={id}
+              type="button"
+              onClick={() => setActiveView(id)}
+              className={`touch-manipulation min-h-[44px] px-2 sm:px-4 py-2 rounded-xl border text-xs sm:text-sm font-semibold transition-all flex items-center justify-center gap-1.5 sm:gap-2 ${
+                activeView === id
+                  ? 'bg-primary-700 text-white border-primary-700'
+                  : 'bg-white/70 text-slate-700 border-slate-200 hover:bg-white hover:border-primary-300'
+              }`}
+            >
+              <Icon className="w-4 h-4 shrink-0" />
+              <span className="truncate">{label}</span>
+            </button>
+          ))}
+        </div>
+
+        {activeView === 'diagnose' && (
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="lg:col-span-2 space-y-6">
+              <section className="surface rounded-2xl p-4 sm:p-6">
+                <div className="flex items-start justify-between gap-4 flex-wrap">
+                  <div>
+                    <h2 className="text-base font-semibold text-slate-900">Photo analysis</h2>
+                    <p className="text-sm text-slate-600 mt-1">Best results with a sharp, well-lit close-up.</p>
+                  </div>
+                  <div className="text-xs text-slate-500">
+                    Step <span className="font-semibold text-slate-700">1</span> of 3
+                  </div>
+                </div>
+
+                <div className="mt-5 flex flex-wrap gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setPhotoMode('single')}
+                    className={`touch-manipulation min-h-[44px] px-4 py-2 rounded-xl border text-sm font-semibold flex items-center gap-2 transition-all ${
+                      photoMode === 'single'
+                        ? 'bg-primary-700 text-white border-primary-700'
+                        : 'bg-white text-slate-700 border-slate-200 hover:border-primary-300'
+                    }`}
+                  >
+                    <Camera className="w-4 h-4" />
+                    Single photo
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setPhotoMode('compare')}
+                    className={`touch-manipulation min-h-[44px] px-4 py-2 rounded-xl border text-sm font-semibold flex items-center gap-2 transition-all ${
+                      photoMode === 'compare'
+                        ? 'bg-primary-700 text-white border-primary-700'
+                        : 'bg-white text-slate-700 border-slate-200 hover:border-primary-300'
+                    }`}
+                  >
+                    <ArrowLeftRight className="w-4 h-4" />
+                    Past vs current
+                  </button>
+                </div>
+
+                <div className="mt-5 space-y-5">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <CropSelector crops={Object.keys(CROPS)} selectedCrop={selectedCrop} onCropChange={setSelectedCrop} />
+                    <StateSelector selectedState={selectedState} onStateChange={setSelectedState} />
+                  </div>
+
+                  {photoMode === 'single' && (
+                    <>
+                      <ImageUpload selectedImage={selectedImage} onImageSelect={handleImageSelect} onClear={handleClear} />
+                      <div className="flex items-end">
+                        <button
+                          type="button"
+                          onClick={handlePredict}
+                          disabled={!selectedImage || loading}
+                          className="touch-manipulation min-h-[48px] w-full md:max-w-md inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-primary-700 text-white font-semibold shadow-sm hover:bg-primary-800 disabled:bg-slate-400 disabled:cursor-not-allowed transition-colors"
+                        >
+                          {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <ArrowRight className="w-4 h-4" />}
+                          {loading ? 'Analyzing…' : 'Run analysis'}
+                        </button>
+                      </div>
+                    </>
+                  )}
+
+                  {photoMode === 'compare' && (
+                    <HealthComparisonPanel crop={selectedCrop} applyRegionalFilter={applyRegionalFilter} />
+                  )}
+
+                  {error && (
+                    <div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-rose-900">
+                      <div className="text-sm font-semibold">Something went wrong</div>
+                      <div className="text-sm mt-1">{error}</div>
+                    </div>
+                  )}
+
+                  {photoMode === 'single' && prediction && (
+                    <>
+                      <PredictionResults prediction={prediction} regionNote={regionNote} />
+                      <Diagnosis
+                        disease={prediction.disease}
+                        crop={selectedCrop}
+                        confidence={
+                          typeof prediction.confidence === 'number' && prediction.confidence <= 1
+                            ? prediction.confidence * 100
+                            : prediction.confidence
+                        }
+                        isHealthy={prediction.is_healthy}
+                      />
+                      <DiseaseInfo diseaseName={prediction.disease} crop={selectedCrop} />
+                      <ExportResults prediction={prediction} crop={selectedCrop} imageUrl={imageUrl} />
+                    </>
+                  )}
+                </div>
+              </section>
+            </div>
+
+            <aside className="lg:col-span-1 space-y-6">
+              <TipsAndGuidelines />
+
+              <div className="surface rounded-2xl p-4 sm:p-6">
+                <h3 className="text-base font-semibold text-slate-900">Alerts</h3>
+                <p className="text-sm text-slate-600 mt-1">
+                  Register a farm location to receive outbreak notifications within 250 miles.
+                </p>
+                <div className="mt-4 sm:hidden space-y-3">
+                  {farmerProfile && (
+                    <FarmerVerificationBadge verified={farmerProfile.verifiedFarmer} />
+                  )}
+                  <FarmerRegistration onRegister={handleFarmerRegister} crops={Object.keys(CROPS)} />
+                </div>
+              </div>
+            </aside>
+          </div>
+        )}
+
+        {activeView === 'history' && (
+          <section className="surface rounded-2xl p-4 sm:p-6">
+            <PredictionHistory onSelectHistory={handleHistorySelect} />
+          </section>
+        )}
+
+        {activeView === 'outbreaks' && (
+          <section className="rounded-2xl border border-slate-200/80 bg-white p-4 sm:p-6 shadow-sm">
+            <div className="mb-4">
+              <h2 className="text-base font-semibold text-slate-900">Outbreak map</h2>
+              <p className="text-sm text-slate-600 mt-1">
+                Tap or click to report a potential outbreak and help track disease spread.
+              </p>
+            </div>
+            <div className="bg-white rounded-xl p-2 sm:p-4 border border-slate-200 -mx-1 sm:mx-0">
+              <USOutbreakMap
+                reports={outbreakReports}
+                onReportSubmit={handleOutbreakReport}
+                reporterVerified={farmerProfile?.verifiedFarmer ?? false}
+              />
+            </div>
+          </section>
+        )}
+
+        <footer className="text-center mt-10 mb-6 text-slate-500">
+          <p className="text-xs">Models: EfficientNet / TensorFlow Lite</p>
+        </footer>
+      </div>
+    </main>
+  )
+}

combined_training_logs.csv

@@ -0,0 +1,81 @@
+crop,epoch,phase,accuracy,val_accuracy,loss,val_loss,learning_rate
+corn,0,Phase 1,0.25993428306022465,0.32931297537843107,2.0369233289997704,1.4760412881077356,9.999999747378752e-05
+corn,1,Phase 1,0.2785918925391422,0.3290567562794731,1.9325749075275322,1.4272191047162242,9.999999747378752e-05
+corn,2,Phase 1,0.3256681278871456,0.36849512867216616,1.8422305728166553,1.317687358398529,9.999999747378752e-05
+corn,3,Phase 1,0.37453213281585807,0.3722218831433424,1.7569642956246365,1.2496958294442122,9.999999747378752e-05
+corn,4,Phase 1,0.3707456467557967,0.42340147466631173,1.6220998743537631,1.2866345053173707,9.999999747378752e-05
+corn,5,Phase 1,0.4021031536738457,0.47007986324021656,1.5840402569204328,1.2503222691756168,9.999999747378752e-05
+corn,6,Phase 1,0.46972732768554293,0.478413822186777,1.5210070222602126,1.1154118152174743,9.999999747378752e-05
+corn,7,Phase 1,0.4848489445210191,0.5425199363913403,1.5209015655871811,1.1056910197405077,9.999999747378752e-05
+corn,8,Phase 1,0.4914679407818278,0.5565654845152547,1.4092328622226922,1.0100982296477032,9.999999747378752e-05
+corn,9,Phase 1,0.543065807934812,0.596316665606969,1.2279064334441658,0.8962624942144805,9.999999747378752e-05
+corn,10,Phase 1,0.5543034317694093,0.6236886906474505,1.2562691331500764,0.8830903157695725,9.999999747378752e-05
+corn,11,Phase 1,0.5856143691168193,0.706340668871421,1.1448173141275542,0.8784244173668655,9.999999747378752e-05
+corn,12,Phase 1,0.6311253881821108,0.7025974429756874,1.0542318216011057,0.7362333406374846,9.999999747378752e-05
+corn,13,Phase 1,0.6211253881821108,0.715285451180532,1.0426682295264806,0.7527588789330977,9.999999747378752e-05
+corn,14,Phase 1,0.6545021432256612,0.7864628502909176,0.9876408846772684,0.4800414944873253,9.999999747378752e-05
+corn,15,Phase 1,0.7091119278536683,0.7791673613386373,0.9066614079763144,0.5300414944873253,9.999999747378752e-05
+corn,16,Phase 1,0.7314582345943652,0.8413337885273565,0.7421430193274062,0.4883852102025515,9.999999747378752e-05
+corn,17,Phase 1,0.789356982215525,0.8315353964388699,0.6926497701640111,0.4055845428167646,9.999999747378752e-05
+corn,18,Phase 1,0.7962687326157611,0.8777373602277004,0.6486800539947837,0.36162500271624837,9.999999747378752e-05
+corn,19,Phase 1,0.8175403186620454,0.9418105882122555,0.6049006322487571,0.19416057170884385,9.999999747378752e-05
+corn,20,Phase 2,0.8457863926887512,0.937873363494873,0.5561233758926392,0.2935390174388885,9.999999747378752e-05
+corn,21,Phase 2,0.903787076473236,0.9462365508079528,0.388371080160141,0.262035459280014,9.999999747378752e-05
+corn,22,Phase 2,0.9225520491600036,0.9462365508079528,0.3230624198913574,0.254949539899826,9.999999747378752e-05
+corn,23,Phase 2,0.9303991794586182,0.9498208165168762,0.2902830243110657,0.2342860549688339,9.999999747378752e-05
+corn,24,Phase 2,0.937563955783844,0.9569892287254332,0.2600772082805633,0.2179587632417678,9.999999747378752e-05
+corn,25,Phase 2,0.9474582076072692,0.9569892287254332,0.2290883213281631,0.2086362540721893,9.999999747378752e-05
+corn,26,Phase 2,0.955646514892578,0.958184003829956,0.2177858054637909,0.2032181024551391,9.999999747378752e-05
+corn,27,Phase 2,0.9539406299591064,0.9569892287254332,0.2127372920513153,0.1997936218976974,9.999999747378752e-05
+corn,28,Phase 2,0.960764229297638,0.9557945132255554,0.1953231990337371,0.2101073563098907,9.999999747378752e-05
+corn,29,Phase 2,0.9638348817825316,0.9641577005386353,0.1763510555028915,0.1987897753715515,9.999999747378752e-05
+corn,30,Phase 2,0.9679290056228638,0.959378719329834,0.1671520769596099,0.2080786377191543,9.999999747378752e-05
+corn,31,Phase 2,0.9672466516494752,0.9629629850387572,0.1688824594020843,0.1954573094844818,9.999999747378752e-05
+corn,32,Phase 2,0.9723643660545348,0.966547191143036,0.1588789671659469,0.1971011310815811,9.999999747378752e-05
+corn,33,Phase 2,0.973387897014618,0.965352475643158,0.1644280403852462,0.1916911602020263,9.999999747378752e-05
+corn,34,Phase 2,0.9706584811210632,0.959378719329834,0.1582569330930709,0.2046691477298736,9.999999747378752e-05
+corn,35,Phase 2,0.976799726486206,0.9605734944343568,0.1445048004388809,0.1973313093185424,9.999999747378752e-05
+corn,36,Phase 2,0.9761173725128174,0.966547191143036,0.1439969688653946,0.1956245303153991,9.999999747378752e-05
+corn,37,Phase 2,0.9805527329444884,0.9629629850387572,0.1321845948696136,0.2232125252485275,9.999999747378752e-05
+corn,38,Phase 2,0.9832821488380432,0.9629629850387572,0.125231996178627,0.226840078830719,9.999999747378752e-05
+corn,39,Phase 2,0.9808939099311828,0.959378719329834,0.1315742135047912,0.217746764421463,4.999999873689376e-05
+rice,0,Full Training,0.6245828866958618,0.7251461744308472,1.1133992671966553,0.8908655643463135,9.999999747378752e-05
+rice,1,Full Training,0.753615140914917,0.8167641162872314,0.77748042345047,0.6302634477615356,9.999999747378752e-05
+rice,2,Full Training,0.7975528240203857,0.8538011908531189,0.6093147993087769,0.4765673279762268,9.999999747378752e-05
+rice,3,Full Training,0.8387096524238586,0.9064327478408812,0.5588080883026123,0.3105555772781372,9.999999747378752e-05
+rice,4,Full Training,0.8520578145980835,0.92592591047287,0.459932804107666,0.2514636218547821,9.999999747378752e-05
+rice,5,Full Training,0.8876529335975647,0.9512670636177064,0.3976957499980926,0.2131340056657791,9.999999747378752e-05
+rice,6,Full Training,0.8943270444869995,0.9512670636177064,0.3720048069953918,0.1891122162342071,9.999999747378752e-05
+rice,7,Full Training,0.9048943519592284,0.9688109159469604,0.3332550823688507,0.1626372188329696,9.999999747378752e-05
+rice,8,Full Training,0.9104560613632202,0.9727095365524292,0.3271945714950561,0.1407057493925094,9.999999747378752e-05
+rice,9,Full Training,0.9265850782394408,0.9727095365524292,0.3011743426322937,0.1404629349708557,9.999999747378752e-05
+rice,10,Full Training,0.9249165654182434,0.9785575270652772,0.2785957753658294,0.1359473615884781,9.999999747378752e-05
+rice,11,Full Training,0.931034505367279,0.9824561476707458,0.2625192403793335,0.1228999197483062,9.999999747378752e-05
+rice,12,Full Training,0.9427141547203064,0.988304078578949,0.2276329547166824,0.1142292022705078,9.999999747378752e-05
+rice,13,Full Training,0.9421579241752625,0.9824561476707458,0.2399077266454696,0.1122083067893982,9.999999747378752e-05
+rice,14,Full Training,0.9566184878349304,0.9863547682762146,0.1969229727983474,0.1022859513759613,9.999999747378752e-05
+rice,15,Full Training,0.9382647275924684,0.988304078578949,0.2329556792974472,0.1052324697375297,9.999999747378752e-05
+rice,16,Full Training,0.9605116844177246,0.988304078578949,0.1990869343280792,0.1037070974707603,9.999999747378752e-05
+rice,17,Full Training,0.9521690607070924,0.9941520690917968,0.2017015367746353,0.0948290079832077,9.999999747378752e-05
+rice,18,Full Training,0.9610678553581238,0.9805068373680116,0.2004568725824356,0.1194441244006156,9.999999747378752e-05
+rice,19,Full Training,0.969410479068756,0.9922027587890624,0.1614497154951095,0.0929179117083549,9.999999747378752e-05
+soybean,0,Full Training,0.555831253528595,0.800000011920929,1.2680233716964722,0.833808958530426,9.999999747378752e-05
+soybean,1,Full Training,0.774193525314331,0.8608695864677429,0.7881004810333252,0.6341260075569153,9.999999747378752e-05
+soybean,2,Full Training,0.8287841081619263,0.895652174949646,0.4845375418663025,0.4956668317317962,9.999999747378752e-05
+soybean,3,Full Training,0.8610422015190125,0.8782608509063721,0.4177505373954773,0.4525479972362518,9.999999747378752e-05
+soybean,4,Full Training,0.8858560919761658,0.8782608509063721,0.3343152105808258,0.4741407930850982,9.999999747378752e-05
+soybean,5,Full Training,0.9007444381713868,0.904347836971283,0.3207309544086456,0.3701974749565124,9.999999747378752e-05
+soybean,6,Full Training,0.9205955266952516,0.939130425453186,0.2717101573944092,0.3247621357440948,9.999999747378752e-05
+soybean,7,Full Training,0.9305210709571838,0.947826087474823,0.2848432958126068,0.2357503920793533,9.999999747378752e-05
+soybean,8,Full Training,0.9478908181190492,0.95652174949646,0.2768489122390747,0.241691917181015,9.999999747378752e-05
+soybean,9,Full Training,0.9503722190856934,0.95652174949646,0.2016389966011047,0.236976757645607,9.999999747378752e-05
+soybean,10,Full Training,0.9578163623809814,0.95652174949646,0.1939270496368408,0.248374804854393,9.999999747378752e-05
+soybean,11,Full Training,0.9677419066429138,0.9652174115180968,0.1636942774057388,0.278547078371048,9.999999747378752e-05
+soybean,12,Full Training,0.9652605652809144,0.9652174115180968,0.1644345670938491,0.2483182996511459,9.999999747378752e-05
+soybean,13,Full Training,0.9652605652809144,0.9652174115180968,0.1477585434913635,0.2468210905790329,4.999999873689376e-05
+soybean,14,Full Training,0.9826302528381348,0.9652174115180968,0.1358078271150589,0.2343208342790603,4.999999873689376e-05
+soybean,15,Full Training,0.9801489114761353,0.9652174115180968,0.1375887989997863,0.2198337763547897,4.999999873689376e-05
+soybean,16,Full Training,0.9677419066429138,0.9652174115180968,0.1382406949996948,0.2439783215522766,4.999999873689376e-05
+soybean,17,Full Training,0.9826302528381348,0.9652174115180968,0.1264931112527847,0.2558887302875519,4.999999873689376e-05
+soybean,18,Full Training,0.9826302528381348,0.9652174115180968,0.1234887540340423,0.2484913766384124,4.999999873689376e-05
+soybean,19,Full Training,0.9727047085762024,0.9652174115180968,0.1350847035646438,0.2422107458114624,4.999999873689376e-05

compare.sh

@@ -0,0 +1,8 @@
+#!/bin/zsh
+# Launch the local drag-and-drop model-compare tool.
+#   ./compare.sh
+# Then open http://localhost:8050
+cd "$(dirname "$0")"
+PY=.conda-py311/bin/python
+# Flask is required (one-time): $PY -m pip install flask
+exec "$PY" -m ml.serve.compare_app

components/CropSelector.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { Leaf } from 'lucide-react'
+
+interface CropSelectorProps {
+  crops: string[]
+  selectedCrop: string
+  onCropChange: (crop: string) => void
+}
+
+export default function CropSelector({
+  crops,
+  selectedCrop,
+  onCropChange,
+}: CropSelectorProps) {
+  return (
+    <div>
+      <label
+        htmlFor="crop-select"
+        className="block text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2"
+      >
+        <Leaf className="w-4 h-4 text-primary-700" />
+        Crop
+      </label>
+      <select
+        id="crop-select"
+        value={selectedCrop}
+        onChange={(e) => onCropChange(e.target.value)}
+        className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-4 focus:ring-primary-200/60 focus:border-primary-400 text-base font-semibold bg-white shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer"
+      >
+        {crops.map((crop) => (
+          <option key={crop} value={crop}>
+            {crop.charAt(0).toUpperCase() + crop.slice(1)}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}

components/Diagnosis.tsx

@@ -0,0 +1,322 @@
+'use client'
+
+import { useState } from 'react'
+import { AlertCircle, CheckCircle, AlertTriangle, Lightbulb, Shield, Calendar, Droplet } from 'lucide-react'
+import { getDiseaseInfo } from '@/lib/diseaseInfo'
+
+interface DiagnosisProps {
+  disease: string
+  crop: string
+  confidence: number
+  isHealthy: boolean
+}
+
+export default function Diagnosis({ disease, crop, confidence, isHealthy }: DiagnosisProps) {
+  const [activeTab, setActiveTab] = useState<'assessment' | 'treatment' | 'prevention'>('assessment')
+  
+  const diseaseInfo = getDiseaseInfo(disease, crop)
+
+  if (isHealthy) {
+    return (
+      <div className="mt-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl border-2 border-green-300 p-8 shadow-xl">
+        <div className="flex items-start gap-4">
+          <div className="p-3 bg-green-100 rounded-xl">
+            <CheckCircle className="w-8 h-8 text-green-600" />
+          </div>
+          <div className="flex-1">
+            <h3 className="text-2xl font-extrabold text-green-900 mb-3">Diagnosis: Healthy Plant</h3>
+            <p className="text-green-800 mb-4">
+              Great news! Your {crop} plant appears to be healthy with no signs of disease detected.
+            </p>
+            <div className="bg-white/60 rounded-xl p-5 border border-green-200">
+              <h4 className="font-bold text-green-900 mb-3 flex items-center gap-2">
+                <Shield className="w-5 h-5" />
+                Maintenance Recommendations
+              </h4>
+              <ul className="space-y-2 text-green-800">
+                {diseaseInfo?.prevention.map((tip, index) => (
+                  <li key={index} className="flex items-start gap-2">
+                    <span className="text-green-600 mt-1">✓</span>
+                    <span>{tip}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const getSeverityLevel = () => {
+    if (diseaseInfo?.severity === 'high') return 'Critical'
+    if (diseaseInfo?.severity === 'medium') return 'Moderate'
+    return 'Mild'
+  }
+
+  const getSeverityColor = () => {
+    if (diseaseInfo?.severity === 'high') return 'text-red-600 bg-red-100 border-red-300'
+    if (diseaseInfo?.severity === 'medium') return 'text-orange-600 bg-orange-100 border-orange-300'
+    return 'text-yellow-600 bg-yellow-100 border-yellow-300'
+  }
+
+  const getConfidenceLevel = () => {
+    if (confidence >= 90) return { level: 'Very High', color: 'text-green-600' }
+    if (confidence >= 75) return { level: 'High', color: 'text-blue-600' }
+    if (confidence >= 60) return { level: 'Moderate', color: 'text-yellow-600' }
+    return { level: 'Low', color: 'text-orange-600' }
+  }
+
+  const confidenceInfo = getConfidenceLevel()
+
+  return (
+    <div className="mt-6 bg-gradient-to-br from-white to-gray-50 rounded-2xl border-2 border-gray-200/50 p-4 shadow-xl sm:p-8">
+      <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <h3 className="flex items-center gap-2 text-2xl font-extrabold text-gray-900 sm:gap-3 sm:text-3xl">
+          <AlertCircle className="h-7 w-7 shrink-0 text-primary-600 sm:h-8 sm:w-8" />
+          <span className="min-w-0 leading-tight">Detailed Diagnosis</span>
+        </h3>
+        <div
+          className={`w-fit shrink-0 rounded-xl border-2 px-3 py-1.5 text-xs font-bold sm:px-4 sm:py-2 sm:text-sm ${getSeverityColor()}`}
+        >
+          {getSeverityLevel()} Severity
+        </div>
+      </div>
+
+      {/* Confidence & Assessment */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+        <div className="bg-white rounded-xl p-5 border-2 border-gray-200 shadow-md">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm font-semibold text-gray-600 uppercase">Confidence Level</span>
+            <span className={`text-lg font-bold ${confidenceInfo.color}`}>
+              {confidenceInfo.level}
+            </span>
+          </div>
+          <div className="w-full bg-gray-200 rounded-full h-3">
+            <div
+              className={`h-3 rounded-full transition-all duration-500 ${
+                confidence >= 90 ? 'bg-green-500' :
+                confidence >= 75 ? 'bg-blue-500' :
+                confidence >= 60 ? 'bg-yellow-500' : 'bg-orange-500'
+              }`}
+              style={{ width: `${confidence}%` }}
+            />
+          </div>
+          <p className="text-xs text-gray-500 mt-2">
+            AI confidence: {confidence.toFixed(1)}%
+          </p>
+        </div>
+
+        <div className="bg-white rounded-xl p-5 border-2 border-gray-200 shadow-md">
+          <div className="flex items-center gap-3 mb-2">
+            <Calendar className="w-5 h-5 text-primary-600" />
+            <span className="text-sm font-semibold text-gray-600 uppercase">Recommended Action</span>
+          </div>
+          <p className="text-lg font-bold text-gray-900">
+            {diseaseInfo?.severity === 'high' ? 'Immediate Treatment Required' :
+             diseaseInfo?.severity === 'medium' ? 'Monitor & Treat Soon' :
+             'Preventive Measures Recommended'}
+          </p>
+        </div>
+      </div>
+
+      {/* Tabs — grid keeps all three inside the card on narrow screens */}
+      <div className="-mx-1 mb-6 border-b-2 border-gray-200 px-1 sm:mx-0 sm:px-0">
+        <div className="grid w-full grid-cols-3 gap-1 sm:gap-2">
+          {[
+            { id: 'assessment', label: 'Assessment', icon: AlertCircle },
+            { id: 'treatment', label: 'Treatment', icon: Droplet },
+            { id: 'prevention', label: 'Prevention', icon: Shield },
+          ].map(({ id, label, icon: Icon }) => (
+            <button
+              key={id}
+              type="button"
+              onClick={() => setActiveTab(id as 'assessment' | 'treatment' | 'prevention')}
+              className={`flex min-h-[3.25rem] min-w-0 touch-manipulation flex-col items-center justify-center gap-0.5 rounded-t-lg px-1.5 py-2 text-center text-[11px] font-semibold leading-tight transition-all duration-300 sm:flex-row sm:gap-2 sm:rounded-t-xl sm:px-4 sm:py-3 sm:text-sm ${
+                activeTab === id
+                  ? 'bg-primary-600 text-white shadow-lg'
+                  : 'text-gray-600 hover:bg-gray-100 hover:text-primary-600'
+              }`}
+            >
+              <Icon className="h-4 w-4 shrink-0 sm:h-5 sm:w-5" />
+              <span className="break-words">{label}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      <div className="min-h-[300px]">
+        {activeTab === 'assessment' && (
+          <div className="space-y-6">
+            <div className="bg-white/80 rounded-xl p-6 border-2 border-gray-200">
+              <h4 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
+                <AlertTriangle className="w-6 h-6 text-orange-600" />
+                Disease Assessment
+              </h4>
+              <p className="text-gray-700 mb-4 leading-relaxed">
+                {diseaseInfo?.description || `Based on the AI analysis, your ${crop} plant shows signs of ${disease}.`}
+              </p>
+              
+              {diseaseInfo?.symptoms && diseaseInfo.symptoms.length > 0 && (
+                <div className="mt-5">
+                  <h5 className="font-bold text-gray-900 mb-3">Expected Symptoms:</h5>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    {diseaseInfo.symptoms.map((symptom, index) => (
+                      <div key={index} className="flex items-start gap-2 bg-orange-50 rounded-lg p-3 border border-orange-200">
+                        <span className="text-orange-600 mt-1">•</span>
+                        <span className="text-sm text-gray-700">{symptom}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              <div className="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
+                <div className="flex items-start gap-3">
+                  <Lightbulb className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
+                  <div>
+                    <p className="text-sm font-semibold text-blue-900 mb-1">Diagnostic Tip</p>
+                    <p className="text-sm text-blue-800">
+                      Compare the visual symptoms on your plant with the expected symptoms listed above. 
+                      If symptoms match closely, the diagnosis is likely accurate. For confirmation, 
+                      consider consulting with an agricultural extension service.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'treatment' && (
+          <div className="space-y-6">
+            <div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-6 border-2 border-blue-200">
+              <h4 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
+                <Droplet className="w-6 h-6 text-blue-600" />
+                Treatment Plan
+              </h4>
+              
+              {diseaseInfo?.treatment && diseaseInfo.treatment.length > 0 ? (
+                <div className="space-y-4">
+                  <p className="text-gray-700 font-semibold mb-4">
+                    Immediate treatment steps for {disease}:
+                  </p>
+                  <div className="space-y-3">
+                    {diseaseInfo.treatment.map((step, index) => (
+                      <div key={index} className="bg-white rounded-lg p-4 border border-blue-200 shadow-sm">
+                        <div className="flex items-start gap-3">
+                          <div className="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">
+                            {index + 1}
+                          </div>
+                          <p className="text-gray-800 flex-1">{step}</p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <p className="text-gray-700">
+                  Treatment recommendations are being prepared. Please consult with an agricultural expert 
+                  for specific treatment options for {disease} in {crop}.
+                </p>
+              )}
+
+              <div className="mt-6 p-4 bg-yellow-50 rounded-lg border border-yellow-300">
+                <div className="flex items-start gap-3">
+                  <AlertTriangle className="w-5 h-5 text-yellow-700 flex-shrink-0 mt-0.5" />
+                  <div>
+                    <p className="text-sm font-bold text-yellow-900 mb-1">Important</p>
+                    <p className="text-sm text-yellow-800">
+                      Always follow label instructions when applying any treatments. Consider environmental 
+                      impact and use Integrated Pest Management (IPM) practices. For severe cases, 
+                      consult with certified agricultural professionals.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'prevention' && (
+          <div className="space-y-6">
+            <div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-6 border-2 border-green-200">
+              <h4 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
+                <Shield className="w-6 h-6 text-green-600" />
+                Prevention Strategy
+              </h4>
+              
+              {diseaseInfo?.prevention && diseaseInfo.prevention.length > 0 ? (
+                <div className="space-y-4">
+                  <p className="text-gray-700 font-semibold mb-4">
+                    Long-term prevention measures to protect your {crop} crops:
+                  </p>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {diseaseInfo.prevention.map((prevention, index) => (
+                      <div key={index} className="bg-white rounded-lg p-4 border border-green-200 shadow-sm flex items-start gap-3">
+                        <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
+                        <p className="text-gray-800 text-sm">{prevention}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <p className="text-gray-700">
+                  Prevention strategies are being developed. General best practices include crop rotation, 
+                  proper spacing, and regular monitoring.
+                </p>
+              )}
+
+              <div className="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
+                <div className="flex items-start gap-3">
+                  <Calendar className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
+                  <div>
+                    <p className="text-sm font-bold text-blue-900 mb-1">Monitoring Schedule</p>
+                    <p className="text-sm text-blue-800">
+                      Regular monitoring is key to early detection. Check your {crop} fields weekly, 
+                      especially during critical growth stages. Early intervention is more effective 
+                      and cost-efficient than treating advanced disease.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Action Summary */}
+      <div className="mt-6 p-5 bg-gradient-to-r from-primary-50 to-blue-50 rounded-xl border-2 border-primary-200">
+        <h4 className="font-bold text-gray-900 mb-3 flex items-center gap-2">
+          <Lightbulb className="w-5 h-5 text-primary-600" />
+          Quick Action Summary
+        </h4>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+          <div>
+            <p className="font-semibold text-gray-700 mb-1">1. Immediate</p>
+            <p className="text-gray-600">
+              {diseaseInfo?.severity === 'high' 
+                ? 'Apply treatment within 24-48 hours'
+                : diseaseInfo?.severity === 'medium'
+                ? 'Monitor closely and prepare treatment'
+                : 'Implement preventive measures'}
+            </p>
+          </div>
+          <div>
+            <p className="font-semibold text-gray-700 mb-1">2. Short-term</p>
+            <p className="text-gray-600">
+              Follow treatment plan and monitor progress over next 7-14 days
+            </p>
+          </div>
+          <div>
+            <p className="font-semibold text-gray-700 mb-1">3. Long-term</p>
+            <p className="text-gray-600">
+              Implement prevention strategies to avoid future occurrences
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

components/DiseaseInfo.tsx

@@ -0,0 +1,121 @@
+'use client'
+
+import { getDiseaseInfo } from '@/lib/diseaseInfo'
+
+interface DiseaseInfoProps {
+  diseaseName: string
+  crop: string
+}
+
+export default function DiseaseInfo({ diseaseName, crop }: DiseaseInfoProps) {
+  const info = getDiseaseInfo(diseaseName, crop)
+
+  if (!info) return null
+
+  const severityColors = {
+    low: 'bg-green-100 text-green-800 border-green-300',
+    medium: 'bg-yellow-100 text-yellow-800 border-yellow-300',
+    high: 'bg-red-100 text-red-800 border-red-300'
+  }
+
+  return (
+    <div className="mt-6 bg-gradient-to-br from-white to-gray-50 rounded-2xl border-2 border-gray-200/50 p-8 shadow-xl">
+      <h3 className="text-3xl font-extrabold text-gray-900 mb-6 flex items-center gap-3">
+        <svg className="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+        </svg>
+        Disease Information
+      </h3>
+      
+      {/* Description */}
+      <div className="mb-6">
+        <h4 className="text-lg font-semibold text-gray-700 mb-2">Description</h4>
+        <p className="text-gray-600">{info.description}</p>
+      </div>
+
+      {/* Severity Badge */}
+      {!info.name.toLowerCase().includes('healthy') && (
+        <div className="mb-6">
+          <span className={`inline-flex items-center gap-2 px-5 py-2.5 rounded-xl border-2 font-bold text-sm shadow-md ${severityColors[info.severity]}`}>
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+            </svg>
+            Severity: {info.severity.toUpperCase()}
+          </span>
+        </div>
+      )}
+
+      {/* Symptoms */}
+      {info.symptoms.length > 0 && (
+        <div className="mb-6 bg-white/60 rounded-xl p-5 border border-gray-200">
+          <h4 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
+            <svg className="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            Symptoms
+          </h4>
+          <ul className="space-y-3 text-gray-700">
+            {info.symptoms.map((symptom, index) => (
+              <li key={index} className="flex items-start gap-3">
+                <span className="text-red-500 mt-1">•</span>
+                <span>{symptom}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Treatment */}
+      {info.treatment.length > 0 && (
+        <div className="mb-6 bg-white/60 rounded-xl p-5 border border-gray-200">
+          <h4 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
+            <svg className="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            Treatment
+          </h4>
+          <ul className="space-y-3 text-gray-700">
+            {info.treatment.map((treatment, index) => (
+              <li key={index} className="flex items-start gap-3">
+                <span className="text-blue-500 mt-1">•</span>
+                <span>{treatment}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Prevention */}
+      {info.prevention.length > 0 && (
+        <div className="mb-6 bg-white/60 rounded-xl p-5 border border-gray-200">
+          <h4 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
+            <svg className="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+            Prevention
+          </h4>
+          <ul className="space-y-3 text-gray-700">
+            {info.prevention.map((prevention, index) => (
+              <li key={index} className="flex items-start gap-3">
+                <span className="text-green-500 mt-1">•</span>
+                <span>{prevention}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Disclaimer */}
+      <div className="mt-6 p-5 bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-xl shadow-md">
+        <div className="flex items-start gap-3">
+          <svg className="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <p className="text-sm text-blue-900 font-medium">
+            <strong>Note:</strong> This information is for reference only. Always consult with agricultural experts or extension services for specific treatment recommendations for your region.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

components/ExportResults.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+interface ExportResultsProps {
+  prediction: any
+  crop: string
+  imageUrl: string | null
+}
+
+export default function ExportResults({ prediction, crop, imageUrl }: ExportResultsProps) {
+  const exportToJSON = () => {
+    const data = {
+      crop,
+      disease: prediction.disease,
+      confidence: prediction.confidence,
+      isHealthy: prediction.is_healthy,
+      timestamp: new Date().toISOString(),
+      allPredictions: prediction.all_predictions
+    }
+
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `cropintel_${crop}_${Date.now()}.json`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  const exportToCSV = () => {
+    const headers = ['Disease', 'Confidence (%)', 'Is Healthy']
+    const rows = prediction.all_predictions.map((p: any) => [
+      p.disease,
+      p.confidence.toFixed(2),
+      prediction.is_healthy ? 'Yes' : 'No'
+    ])
+
+    const csv = [
+      headers.join(','),
+      ...rows.map((row: any[]) => row.join(','))
+    ].join('\n')
+
+    const blob = new Blob([csv], { type: 'text/csv' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `cropintel_${crop}_${Date.now()}.csv`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  const shareResults = async () => {
+    const text = `CropIntel Analysis Results:\nCrop: ${crop}\nDisease: ${prediction.disease}\nConfidence: ${prediction.confidence.toFixed(1)}%\n\nAnalyzed with CropIntel AI`
+
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: 'CropIntel Analysis Results',
+          text: text,
+        })
+      } catch (err) {
+        console.error('Error sharing:', err)
+      }
+    } else {
+      // Fallback: copy to clipboard
+      navigator.clipboard.writeText(text)
+      alert('Results copied to clipboard!')
+    }
+  }
+
+  return (
+    <div className="mt-6 bg-gradient-to-br from-white to-gray-50 rounded-2xl border-2 border-gray-200/50 p-6 shadow-xl">
+      <h3 className="text-2xl font-extrabold text-gray-900 mb-5 flex items-center gap-3">
+        <svg className="w-7 h-7 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+        </svg>
+        Export Results
+      </h3>
+      <div className="flex flex-wrap gap-4">
+        <button
+          onClick={exportToJSON}
+          className="px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-300 flex items-center gap-2 font-semibold shadow-lg hover:shadow-xl transform hover:scale-105"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          Export JSON
+        </button>
+        <button
+          onClick={exportToCSV}
+          className="px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-xl hover:from-green-700 hover:to-green-800 transition-all duration-300 flex items-center gap-2 font-semibold shadow-lg hover:shadow-xl transform hover:scale-105"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          Export CSV
+        </button>
+        <button
+          onClick={shareResults}
+          className="px-6 py-3 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-xl hover:from-purple-700 hover:to-purple-800 transition-all duration-300 flex items-center gap-2 font-semibold shadow-lg hover:shadow-xl transform hover:scale-105"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+          </svg>
+          Share
+        </button>
+      </div>
+    </div>
+  )
+}

components/FarmerRegistration.tsx

@@ -0,0 +1,280 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { MapPin, Save, X } from 'lucide-react'
+import { mockValidateUsdaFarmCode } from '@/lib/farmerProfile'
+
+interface FarmerRegistrationProps {
+  onRegister: (location: {
+    lat: number
+    lng: number
+    crops: string[]
+    name: string
+    email?: string
+    usdaFarmCode?: string
+    verifiedFarmer: boolean
+  }) => void
+  crops: string[]
+}
+
+export default function FarmerRegistration({ onRegister, crops }: FarmerRegistrationProps) {
+  const [mounted, setMounted] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    lat: '',
+    lng: '',
+    usdaFarmCode: '',
+    selectedCrops: [] as string[],
+  })
+
+  useEffect(() => setMounted(true), [])
+
+  useEffect(() => {
+    if (!isOpen) return
+    const prev = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.body.style.overflow = prev
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    if (!isOpen) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsOpen(false)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [isOpen])
+
+  const handleGetLocation = () => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          setFormData((prev) => ({
+            ...prev,
+            lat: position.coords.latitude.toFixed(6),
+            lng: position.coords.longitude.toFixed(6),
+          }))
+        },
+        (error) => {
+          alert('Unable to get your location. Please enter it manually.')
+          console.error('Geolocation error:', error)
+        }
+      )
+    } else {
+      alert('Geolocation is not supported by your browser.')
+    }
+  }
+
+  const handleCropToggle = (crop: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      selectedCrops: prev.selectedCrops.includes(crop)
+        ? prev.selectedCrops.filter((c) => c !== crop)
+        : [...prev.selectedCrops, crop],
+    }))
+  }
+
+  const handleSubmit = () => {
+    const missing: string[] = []
+    if (!formData.name.trim()) missing.push('Farm name (green section at top of form)')
+    const latOk = formData.lat.trim() !== '' && !Number.isNaN(parseFloat(formData.lat))
+    const lngOk = formData.lng.trim() !== '' && !Number.isNaN(parseFloat(formData.lng))
+    if (!latOk) missing.push('Latitude')
+    if (!lngOk) missing.push('Longitude')
+    if (formData.selectedCrops.length === 0) missing.push('At least one crop')
+
+    if (missing.length > 0) {
+      alert(`Please complete the following:\n\n• ${missing.join('\n• ')}`)
+      return
+    }
+
+    const code = formData.usdaFarmCode.trim()
+    const verifiedFarmer = code.length > 0 ? mockValidateUsdaFarmCode(code) : false
+
+    onRegister({
+      lat: parseFloat(formData.lat),
+      lng: parseFloat(formData.lng),
+      crops: formData.selectedCrops,
+      name: formData.name,
+      email: formData.email.trim() || undefined,
+      usdaFarmCode: code || undefined,
+      verifiedFarmer,
+    })
+
+    setIsOpen(false)
+    setFormData({
+      name: '',
+      email: '',
+      lat: '',
+      lng: '',
+      usdaFarmCode: '',
+      selectedCrops: [],
+    })
+  }
+
+  return (
+    <>
+      <button
+        onClick={() => setIsOpen(true)}
+        className="px-4 py-2 bg-primary-700 hover:bg-primary-800 text-white rounded-xl font-semibold transition-colors flex items-center gap-2 shadow-sm"
+      >
+        <MapPin className="w-4 h-4" />
+        Register Your Farm
+      </button>
+
+      {mounted &&
+        isOpen &&
+        createPortal(
+              <div
+                key="farm-registration-fullpage"
+                className="fixed inset-0 z-[9999] flex h-[100dvh] w-screen flex-col overflow-hidden bg-white"
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby="farm-registration-title"
+              >
+            <div className="flex items-center justify-between gap-4 px-5 sm:px-10 lg:px-16 py-4 sm:py-6 border-b border-slate-200 flex-shrink-0 bg-white">
+              <h2
+                id="farm-registration-title"
+                className="text-xl sm:text-2xl font-bold text-slate-900 flex items-center gap-3 min-w-0"
+              >
+                <MapPin className="w-7 h-7 text-primary-600 shrink-0" />
+                <span>Register your farm</span>
+              </h2>
+              <button
+                type="button"
+                onClick={() => setIsOpen(false)}
+                className="text-slate-500 hover:text-slate-900 transition-colors p-3 hover:bg-slate-100 rounded-xl shrink-0 border border-slate-200"
+                aria-label="Close"
+              >
+                <X className="w-6 h-6" />
+              </button>
+            </div>
+
+            <div className="px-5 sm:px-10 lg:px-16 py-5 sm:py-6 bg-primary-50/90 border-b border-primary-100 flex-shrink-0">
+              <label className="block text-base font-bold text-slate-800 mb-2" htmlFor="farm-registration-name">
+                Farm name <span className="text-red-600">*</span>
+              </label>
+              <input
+                id="farm-registration-name"
+                type="text"
+                value={formData.name}
+                onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
+                placeholder="e.g., Smith Family Farm"
+                autoComplete="organization"
+                className="w-full max-w-3xl px-5 py-4 border-2 border-primary-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-400 focus:border-primary-600 bg-white text-lg"
+              />
+            </div>
+
+            <div className="flex-1 overflow-y-auto overscroll-contain px-5 sm:px-10 lg:px-16 py-6 sm:py-8 space-y-6 sm:space-y-8 min-h-0">
+              <div>
+                <label className="block text-base font-semibold text-slate-700 mb-2">
+                  Email (optional)
+                </label>
+                <input
+                  type="email"
+                  value={formData.email}
+                  onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value }))}
+                  placeholder="farmer@example.com"
+                  className="w-full max-w-3xl px-5 py-4 border-2 border-slate-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-300 focus:border-primary-600 transition-all text-lg"
+                />
+              </div>
+
+              <div>
+                <label className="block text-base font-semibold text-slate-700 mb-2">
+                  USDA farm / tract code (optional)
+                </label>
+                <input
+                  type="text"
+                  value={formData.usdaFarmCode}
+                  onChange={(e) => setFormData((prev) => ({ ...prev, usdaFarmCode: e.target.value }))}
+                  placeholder="e.g., 12345-67890"
+                  className="w-full max-w-3xl px-5 py-4 border-2 border-slate-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-300 focus:border-primary-600 transition-all font-mono text-lg"
+                />
+                <p className="text-sm text-slate-600 mt-2 max-w-3xl">
+                  If provided and format looks valid, you&apos;ll be marked as a <strong>Verified farmer</strong>{' '}
+                  (demo validation only).
+                </p>
+              </div>
+
+              <div>
+                <label className="block text-base font-semibold text-slate-700 mb-2">
+                  Location <span className="text-red-500">*</span>
+                </label>
+                <div className="flex flex-col sm:flex-row gap-3 mb-3 max-w-3xl">
+                  <input
+                    type="number"
+                    step="any"
+                    value={formData.lat}
+                    onChange={(e) => setFormData((prev) => ({ ...prev, lat: e.target.value }))}
+                    placeholder="Latitude"
+                    className="flex-1 min-w-0 px-5 py-4 border-2 border-slate-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-300 focus:border-primary-600 transition-all text-lg"
+                  />
+                  <input
+                    type="number"
+                    step="any"
+                    value={formData.lng}
+                    onChange={(e) => setFormData((prev) => ({ ...prev, lng: e.target.value }))}
+                    placeholder="Longitude"
+                    className="flex-1 min-w-0 px-5 py-4 border-2 border-slate-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-300 focus:border-primary-600 transition-all text-lg"
+                  />
+                </div>
+                <button
+                  type="button"
+                  onClick={handleGetLocation}
+                  className="w-full max-w-3xl px-5 py-4 bg-primary-100 hover:bg-primary-200 text-primary-900 rounded-xl font-semibold transition-colors flex items-center justify-center gap-2 text-lg"
+                >
+                  <MapPin className="w-5 h-5" />
+                  Use My Current Location
+                </button>
+              </div>
+
+              <div>
+                <label className="block text-base font-semibold text-slate-700 mb-3">
+                  Crops you grow <span className="text-red-500">*</span>
+                </label>
+                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 max-w-4xl">
+                  {crops.map((crop) => (
+                    <button
+                      type="button"
+                      key={crop}
+                      onClick={() => handleCropToggle(crop)}
+                      className={`px-4 py-5 sm:py-6 rounded-xl font-bold transition-all border-2 text-lg ${
+                        formData.selectedCrops.includes(crop)
+                          ? 'bg-primary-700 text-white border-primary-700 shadow-md'
+                          : 'bg-slate-100 text-slate-800 border-slate-300 hover:border-primary-400'
+                      }`}
+                    >
+                      {crop.charAt(0).toUpperCase() + crop.slice(1)}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 sm:p-5 max-w-3xl">
+                <p className="text-sm sm:text-base text-primary-900">
+                  <strong>Note:</strong> You&apos;ll receive alerts for disease outbreaks within 250 miles of your registered location for the crops you select.
+                </p>
+              </div>
+            </div>
+
+            <div className="flex-shrink-0 border-t border-slate-200 px-5 sm:px-10 lg:px-16 py-5 sm:py-6 bg-slate-50">
+              <button
+                type="button"
+                onClick={handleSubmit}
+                className="w-full max-w-3xl mx-auto bg-gradient-to-r from-primary-700 to-primary-800 hover:from-primary-800 hover:to-primary-900 text-white font-bold py-4 sm:py-5 px-8 rounded-xl transition-all flex items-center justify-center gap-3 shadow-md text-lg"
+              >
+                <Save className="w-6 h-6" />
+                Register Farm
+              </button>
+            </div>
+          </div>,
+          document.body
+        )}
+    </>
+  )
+}

components/FarmerVerificationBadge.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { BadgeCheck, User } from 'lucide-react'
+
+type Props = {
+  verified: boolean
+  compact?: boolean
+}
+
+export default function FarmerVerificationBadge({ verified, compact }: Props) {
+  if (verified) {
+    return (
+      <span
+        className={`inline-flex items-center gap-1.5 rounded-full border font-semibold bg-emerald-50 text-emerald-900 border-emerald-200 ${
+          compact ? 'px-2 py-0.5 text-xs' : 'px-3 py-1 text-sm'
+        }`}
+      >
+        <BadgeCheck className={compact ? 'w-3.5 h-3.5' : 'w-4 h-4'} />
+        Verified farmer
+      </span>
+    )
+  }
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full border font-semibold bg-slate-100 text-slate-700 border-slate-200 ${
+        compact ? 'px-2 py-0.5 text-xs' : 'px-3 py-1 text-sm'
+      }`}
+    >
+      <User className={compact ? 'w-3.5 h-3.5' : 'w-4 h-4'} />
+      Unverified
+    </span>
+  )
+}

components/GoogleMap.tsx

@@ -0,0 +1,385 @@
+'use client'
+
+import { useLoadScript, GoogleMap, Marker, InfoWindow } from '@react-google-maps/api'
+import { useState, useCallback, useEffect } from 'react'
+import { MapPin } from 'lucide-react'
+import type { OutbreakReport } from '@/lib/outbreakReport'
+
+const libraries: ('places' | 'drawing' | 'geometry' | 'visualization')[] = ['places']
+
+interface GoogleMapProps {
+  reports?: OutbreakReport[]
+  onMapClick?: (lat: number, lng: number) => void
+  center?: { lat: number; lng: number }
+  zoom?: number
+  /** When false, hides the floating “click map” hint (parent may show its own). Default true. */
+  showMapClickHint?: boolean
+  /** Called when the Google Map instance is ready (e.g. to trigger resize after layout changes). */
+  onMapReady?: (map: google.maps.Map) => void
+  /** Maps API fullscreen control; set false when the parent provides its own fullscreen. Default true. */
+  fullscreenControl?: boolean
+}
+
+const mapContainerStyle = {
+  width: '100%',
+  height: '100%',
+}
+
+const defaultCenter = {
+  lat: 39.8283, // Center of US
+  lng: -98.5795,
+}
+
+const defaultZoom = 4
+
+export default function GoogleMapComponent({
+  reports = [],
+  onMapClick,
+  center = defaultCenter,
+  zoom = defaultZoom,
+  showMapClickHint = true,
+  onMapReady,
+  fullscreenControl = true,
+}: GoogleMapProps) {
+  const [selectedReport, setSelectedReport] = useState<OutbreakReport | null>(null)
+  const [mapCenter, setMapCenter] = useState(center)
+  const [loadingTimeout, setLoadingTimeout] = useState(false)
+
+  const apiKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || ''
+
+  const { isLoaded, loadError } = useLoadScript({
+    googleMapsApiKey: apiKey,
+    libraries,
+  })
+
+  // Add timeout to prevent infinite loading
+  useEffect(() => {
+    if (!isLoaded && !loadError && apiKey) {
+      const timer = setTimeout(() => {
+        setLoadingTimeout(true)
+      }, 8000) // 8 second timeout
+      return () => clearTimeout(timer)
+    } else {
+      setLoadingTimeout(false)
+    }
+  }, [isLoaded, loadError, apiKey])
+
+  const handleMapClick = useCallback(
+    (e: google.maps.MapMouseEvent) => {
+      if (e.latLng && onMapClick) {
+        onMapClick(e.latLng.lat(), e.latLng.lng())
+      }
+    },
+    [onMapClick]
+  )
+
+  const handleMapLoad = useCallback(
+    (map: google.maps.Map) => {
+      onMapReady?.(map)
+    },
+    [onMapReady]
+  )
+
+  const getSeverityColor = (severity: string) => {
+    switch (severity) {
+      case 'high':
+        return '#ef4444'
+      case 'medium':
+        return '#f97316'
+      case 'low':
+        return '#eab308'
+      default:
+        return '#64748b'
+    }
+  }
+
+  // Create marker icons - only create when map is loaded
+  const createMarkerIcon = useCallback((color: string) => {
+    if (!isLoaded || typeof google === 'undefined' || !google.maps) {
+      return undefined
+    }
+    
+    // Create a canvas-based circle icon - most reliable method
+    const canvas = document.createElement('canvas')
+    canvas.width = 24
+    canvas.height = 24
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return undefined
+    
+    // Draw filled circle
+    ctx.beginPath()
+    ctx.arc(12, 12, 10, 0, 2 * Math.PI)
+    ctx.fillStyle = color
+    ctx.fill()
+    
+    // Draw white border
+    ctx.strokeStyle = '#ffffff'
+    ctx.lineWidth = 3
+    ctx.stroke()
+    
+    const dataUrl = canvas.toDataURL()
+    
+    return {
+      url: dataUrl,
+      scaledSize: new google.maps.Size(24, 24),
+      anchor: new google.maps.Point(12, 12),
+    }
+  }, [isLoaded])
+
+  if (loadError || loadingTimeout) {
+    return (
+      <div className="flex h-full min-h-[280px] w-full items-center justify-center rounded-xl border-2 border-slate-200 bg-slate-50 sm:min-h-[400px]">
+        <div className="text-center p-6">
+          <MapPin className="w-12 h-12 text-slate-400 mx-auto mb-4" />
+          <p className="text-slate-700 font-semibold mb-2 text-lg">Map Unavailable</p>
+          <p className="text-slate-500 text-sm mb-1">
+            {apiKey 
+              ? 'Google Maps API key may be invalid or restricted'
+              : 'Google Maps API key not configured'}
+          </p>
+          <p className="text-slate-400 text-xs mt-4">Outbreak reporting will work once the map loads</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!isLoaded) {
+    return (
+      <div className="flex h-full min-h-[280px] w-full items-center justify-center rounded-xl border-2 border-blue-200 bg-blue-50 sm:min-h-[400px]">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-blue-600 font-semibold">Loading Google Maps...</p>
+          {!apiKey && (
+            <p className="text-blue-500 text-xs mt-2">No API key configured</p>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative h-full min-h-0 w-full overflow-hidden rounded-xl">
+      <style dangerouslySetInnerHTML={{
+        __html: `
+          /* Hide Google Maps watermark and "For development purposes only" text */
+          .gm-style-cc,
+          .gm-style-cc div,
+          .gm-style-cc a,
+          a[href^="https://developers.google.com/maps"],
+          .gm-bundled-control .gm-style-cc,
+          div[title*="For development purposes only"],
+          div[aria-label*="For development purposes only"] {
+            display: none !important;
+            visibility: hidden !important;
+            opacity: 0 !important;
+            height: 0 !important;
+            width: 0 !important;
+            overflow: hidden !important;
+          }
+          /* Hide default POI marker images only (avoid div[style*="place"] etc. — it breaks map controls) */
+          .gm-style img[src*="poi"],
+          .gm-style img[src*="place"],
+          .gm-style img[src*="marker"][src*="default"] {
+            display: none !important;
+            visibility: hidden !important;
+            opacity: 0 !important;
+            height: 0 !important;
+            width: 0 !important;
+            pointer-events: none !important;
+          }
+        `
+      }} />
+      <GoogleMap
+        mapContainerStyle={mapContainerStyle}
+        center={mapCenter}
+        zoom={zoom}
+        onLoad={handleMapLoad}
+        onClick={handleMapClick}
+        options={{
+          disableDefaultUI: false,
+          zoomControl: true,
+          streetViewControl: false,
+          mapTypeControl: true,
+          fullscreenControl,
+          gestureHandling: 'greedy',
+          clickableIcons: false, // Disable clickable POI icons
+          restriction: {
+            latLngBounds: {
+              north: 49.38,
+              south: 24.40,
+              west: -125.0,
+              east: -66.93,
+            },
+            strictBounds: false,
+          },
+          styles: [
+            {
+              featureType: 'poi',
+              elementType: 'all',
+              stylers: [{ visibility: 'off' }],
+            },
+            {
+              featureType: 'poi',
+              elementType: 'labels',
+              stylers: [{ visibility: 'off' }],
+            },
+            {
+              featureType: 'poi',
+              elementType: 'geometry',
+              stylers: [{ visibility: 'off' }],
+            },
+            {
+              featureType: 'poi.business',
+              elementType: 'all',
+              stylers: [{ visibility: 'off' }],
+            },
+            {
+              featureType: 'poi.attraction',
+              elementType: 'all',
+              stylers: [{ visibility: 'off' }],
+            },
+            {
+              featureType: 'poi.place_of_worship',
+              elementType: 'all',
+              stylers: [{ visibility: 'off' }],
+            },
+            {
+              featureType: 'poi.school',
+              elementType: 'all',
+              stylers: [{ visibility: 'off' }],
+            },
+            {
+              featureType: 'poi.sports_complex',
+              elementType: 'all',
+              stylers: [{ visibility: 'off' }],
+            },
+          ],
+        }}
+      >
+        {reports.map((report) => {
+          const color = getSeverityColor(report.severity)
+          
+          // Create icon directly here to ensure it's created when map is ready
+          if (!isLoaded || typeof google === 'undefined' || !google.maps) {
+            return null
+          }
+          
+          // Create canvas icon on the fly
+          const canvas = document.createElement('canvas')
+          canvas.width = 24
+          canvas.height = 24
+          const ctx = canvas.getContext('2d')
+          if (!ctx) return null
+          
+          // Draw colored circle
+          ctx.beginPath()
+          ctx.arc(12, 12, 10, 0, 2 * Math.PI)
+          ctx.fillStyle = color
+          ctx.fill()
+          ctx.strokeStyle = '#ffffff'
+          ctx.lineWidth = 3
+          ctx.stroke()
+          
+          const iconUrl = canvas.toDataURL()
+          
+          return (
+            <Marker
+              key={report.id}
+              position={{ lat: report.lat, lng: report.lng }}
+              icon={{
+                url: iconUrl,
+                scaledSize: new google.maps.Size(24, 24),
+                anchor: new google.maps.Point(12, 12),
+              }}
+              clickable={true}
+              cursor="pointer"
+              title={`${report.crop} - ${report.disease} (${report.severity} severity)`}
+              onClick={() => {
+                setSelectedReport(report)
+              }}
+              animation={google.maps.Animation.DROP}
+            />
+          )
+        })}
+
+        {selectedReport && (
+          <InfoWindow
+            position={{ lat: selectedReport.lat, lng: selectedReport.lng }}
+            onCloseClick={() => setSelectedReport(null)}
+            options={{
+              pixelOffset: new google.maps.Size(0, -10),
+            }}
+          >
+            <div className="p-3 min-w-[min(18rem,calc(100vw-3rem))] max-w-[min(300px,calc(100vw-2rem))]">
+              <div className="flex items-start justify-between mb-2">
+                <h3 className="font-bold text-lg text-gray-900">
+                  {selectedReport.crop.charAt(0).toUpperCase() + selectedReport.crop.slice(1)} - {selectedReport.disease}
+                </h3>
+                <button
+                  onClick={() => setSelectedReport(null)}
+                  className="text-gray-400 hover:text-gray-600 ml-2"
+                  aria-label="Close"
+                >
+                  ×
+                </button>
+              </div>
+              
+              <div className="mb-3">
+                <span
+                  className={`inline-block px-3 py-1 rounded-full text-xs font-bold ${
+                    selectedReport.severity === 'high'
+                      ? 'bg-red-100 text-red-800 border-2 border-red-300'
+                      : selectedReport.severity === 'medium'
+                      ? 'bg-orange-100 text-orange-800 border-2 border-orange-300'
+                      : 'bg-yellow-100 text-yellow-800 border-2 border-yellow-300'
+                  }`}
+                >
+                  {selectedReport.severity.toUpperCase()} SEVERITY
+                </span>
+              </div>
+              
+              {selectedReport.description && (
+                <p className="text-sm text-gray-700 mb-3 leading-relaxed">
+                  {selectedReport.description}
+                </p>
+              )}
+              
+              {selectedReport.reporterVerified !== undefined && (
+                <div className="mb-3">
+                  <span
+                    className={`inline-block text-xs font-bold px-2.5 py-1 rounded-full border ${
+                      selectedReport.reporterVerified
+                        ? 'bg-emerald-100 text-emerald-900 border-emerald-300'
+                        : 'bg-slate-100 text-slate-700 border-slate-300'
+                    }`}
+                  >
+                    {selectedReport.reporterVerified ? 'Verified farmer report' : 'Unverified farmer report'}
+                  </span>
+                </div>
+              )}
+
+              <div className="border-t border-gray-200 pt-2 mt-2">
+                <p className="text-xs text-gray-500">
+                  <span className="font-semibold">Location:</span> {selectedReport.lat.toFixed(4)}, {selectedReport.lng.toFixed(4)}
+                </p>
+                <p className="text-xs text-gray-500 mt-1">
+                  <span className="font-semibold">Reported:</span> {new Date(selectedReport.date).toLocaleString()}
+                </p>
+              </div>
+            </div>
+          </InfoWindow>
+        )}
+      </GoogleMap>
+
+      {/* Click instruction overlay */}
+      {showMapClickHint && (
+        <div className="absolute bottom-3 left-3 right-3 sm:left-6 sm:right-auto sm:bottom-6 bg-gradient-to-r from-blue-600 to-blue-700 text-white px-3 py-2.5 sm:px-5 sm:py-3 rounded-lg shadow-xl z-10 border border-blue-800 pointer-events-none">
+          <p className="text-xs sm:text-sm font-semibold flex items-center gap-2">
+            <MapPin className="w-4 h-4 sm:w-5 sm:h-5 shrink-0" />
+            Tap or click the map to report an outbreak
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

components/HealthComparisonPanel.tsx

@@ -0,0 +1,226 @@
+'use client'
+
+import { useState } from 'react'
+import { ArrowLeftRight, Loader2, TrendingDown, TrendingUp, Minus } from 'lucide-react'
+import ImageUpload from '@/components/ImageUpload'
+import { compareHealthTrend, trendLabel, type HealthTrend } from '@/lib/healthComparison'
+import type { PredictionPayload } from '@/lib/stateDiseaseMap'
+
+type Props = {
+  crop: string
+  applyRegionalFilter: (raw: PredictionPayload) => PredictionPayload
+}
+
+async function runPredict(file: File, crop: string): Promise<PredictionPayload> {
+  const formData = new FormData()
+  formData.append('image', file)
+  formData.append('crop', crop)
+  const response = await fetch('/api/predict', { method: 'POST', body: formData })
+  if (!response.ok) {
+    const err = await response.json().catch(() => ({}))
+    throw new Error(err.error || 'Prediction failed')
+  }
+  const data = await response.json()
+  return {
+    disease: data.disease,
+    confidence: data.confidence,
+    is_healthy: data.is_healthy,
+    meets_threshold: data.meets_threshold,
+    all_predictions: data.all_predictions,
+  }
+}
+
+function trendStyles(t: HealthTrend) {
+  switch (t) {
+    case 'improving':
+      return {
+        border: 'border-emerald-300',
+        bg: 'bg-emerald-50',
+        text: 'text-emerald-900',
+        Icon: TrendingUp,
+      }
+    case 'worsening':
+      return {
+        border: 'border-rose-300',
+        bg: 'bg-rose-50',
+        text: 'text-rose-900',
+        Icon: TrendingDown,
+      }
+    default:
+      return {
+        border: 'border-slate-300',
+        bg: 'bg-slate-50',
+        text: 'text-slate-800',
+        Icon: Minus,
+      }
+  }
+}
+
+export default function HealthComparisonPanel({ crop, applyRegionalFilter }: Props) {
+  const [pastFile, setPastFile] = useState<File | null>(null)
+  const [currentFile, setCurrentFile] = useState<File | null>(null)
+  const [pastUrl, setPastUrl] = useState<string | null>(null)
+  const [currentUrl, setCurrentUrl] = useState<string | null>(null)
+  const [pastPred, setPastPred] = useState<PredictionPayload | null>(null)
+  const [currentPred, setCurrentPred] = useState<PredictionPayload | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const onPastSelect = (file: File | null) => {
+    setPastFile(file)
+    setPastUrl((prev) => {
+      if (prev) URL.revokeObjectURL(prev)
+      return file ? URL.createObjectURL(file) : null
+    })
+    setPastPred(null)
+  }
+
+  const onCurrentSelect = (file: File | null) => {
+    setCurrentFile(file)
+    setCurrentUrl((prev) => {
+      if (prev) URL.revokeObjectURL(prev)
+      return file ? URL.createObjectURL(file) : null
+    })
+    setCurrentPred(null)
+  }
+
+  const clearPast = () => onPastSelect(null)
+  const clearCurrent = () => onCurrentSelect(null)
+
+  const handleCompare = async () => {
+    if (!pastFile || !currentFile) {
+      setError('Please upload both a past and a current photo.')
+      return
+    }
+    setLoading(true)
+    setError(null)
+    setPastPred(null)
+    setCurrentPred(null)
+    try {
+      const [rawPast, rawCurrent] = await Promise.all([
+        runPredict(pastFile, crop),
+        runPredict(currentFile, crop),
+      ])
+      setPastPred(applyRegionalFilter(rawPast))
+      setCurrentPred(applyRegionalFilter(rawCurrent))
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Comparison failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const trend =
+    pastPred && currentPred
+      ? compareHealthTrend(
+          { disease: pastPred.disease, crop, is_healthy: pastPred.is_healthy },
+          { disease: currentPred.disease, crop, is_healthy: currentPred.is_healthy }
+        )
+      : null
+
+  const ts = trend ? trendStyles(trend) : null
+
+  return (
+    <div className="mt-8 pt-8 border-t border-slate-200">
+      <h3 className="text-base font-semibold text-slate-900 flex items-center gap-2">
+        <ArrowLeftRight className="w-5 h-5 text-primary-700" />
+        Compare past vs current
+      </h3>
+      <p className="text-sm text-slate-600 mt-1 mb-5">
+        Upload an older leaf photo and a current one (same crop). We run both through the same model and summarize the
+        trend.
+      </p>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Past</p>
+          <ImageUpload
+            selectedImage={pastFile}
+            onImageSelect={onPastSelect}
+            onClear={clearPast}
+            title="Past photo"
+            hint="Older image for comparison."
+          />
+        </div>
+        <div>
+          <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Current</p>
+          <ImageUpload
+            selectedImage={currentFile}
+            onImageSelect={onCurrentSelect}
+            onClear={clearCurrent}
+            title="Current photo"
+            hint="Most recent image."
+          />
+        </div>
+      </div>
+
+      <button
+        type="button"
+        onClick={handleCompare}
+        disabled={!pastFile || !currentFile || loading}
+        className="touch-manipulation mt-6 min-h-[48px] w-full md:w-auto inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-slate-900 text-white font-semibold shadow-sm hover:bg-slate-800 disabled:bg-slate-400 disabled:cursor-not-allowed transition-colors"
+      >
+        {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <ArrowLeftRight className="w-4 h-4" />}
+        {loading ? 'Analyzing both…' : 'Compare photos'}
+      </button>
+
+      {error && (
+        <div className="mt-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-900">{error}</div>
+      )}
+
+      {pastPred && currentPred && trend && ts && (
+        <div className="mt-8 space-y-6">
+          <div
+            className={`flex flex-col sm:flex-row items-center justify-center gap-4 rounded-2xl border-2 px-6 py-5 ${ts.border} ${ts.bg}`}
+          >
+            <ts.Icon className={`w-10 h-10 shrink-0 ${ts.text}`} />
+            <div className="text-center sm:text-left">
+              <p className={`text-xs font-semibold uppercase tracking-wide ${ts.text} opacity-80`}>Comparison</p>
+              <p className={`text-2xl font-bold ${ts.text}`}>{trendLabel(trend)}</p>
+              <p className="text-sm text-slate-600 mt-1 max-w-md">
+                Based on estimated severity from each diagnosis (not a substitute for scouting or lab tests).
+              </p>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <ComparisonCard label="Past" imageUrl={pastUrl} prediction={pastPred} accent="border-slate-200" />
+            <ComparisonCard label="Current" imageUrl={currentUrl} prediction={currentPred} accent="border-primary-200" />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ComparisonCard({
+  label,
+  imageUrl,
+  prediction,
+  accent,
+}: {
+  label: string
+  imageUrl: string | null
+  prediction: PredictionPayload
+  accent: string
+}) {
+  return (
+    <div className={`rounded-2xl border-2 bg-white overflow-hidden shadow-sm ${accent}`}>
+      <div className="px-4 py-2 bg-slate-50 border-b border-slate-200">
+        <span className="text-sm font-bold text-slate-800">{label}</span>
+      </div>
+      {imageUrl && (
+        <div className="h-44 w-full bg-slate-100 flex items-center justify-center p-2">
+          <img src={imageUrl} alt="" className="max-h-full max-w-full object-contain rounded-lg" />
+        </div>
+      )}
+      <div className="p-4">
+        <p className="text-xs text-slate-500 uppercase font-semibold">Prediction</p>
+        <p className="text-lg font-semibold text-slate-900 mt-0.5">{prediction.disease}</p>
+        <p className="text-sm text-primary-800 font-semibold mt-2 tabular-nums">
+          Confidence {typeof prediction.confidence === 'number' ? prediction.confidence.toFixed(1) : '—'}%
+        </p>
+      </div>
+    </div>
+  )
+}

components/ImageUpload.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import { useState, useRef } from 'react'
+import { Image as ImageIcon, Upload, X } from 'lucide-react'
+
+interface ImageUploadProps {
+  selectedImage: File | null
+  onImageSelect: (file: File | null) => void
+  onClear: () => void
+  /** Override default upload prompt (e.g. "Past photo") */
+  title?: string
+  hint?: string
+}
+
+export default function ImageUpload({
+  selectedImage,
+  onImageSelect,
+  onClear,
+  title = 'Upload a leaf photo',
+  hint = 'Drag & drop, choose a file, or take a photo.',
+}: ImageUploadProps) {
+  const [dragActive, setDragActive] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const cameraInputRef = useRef<HTMLInputElement>(null)
+
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.type === 'dragenter' || e.type === 'dragover') {
+      setDragActive(true)
+    } else if (e.type === 'dragleave') {
+      setDragActive(false)
+    }
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setDragActive(false)
+
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      handleFile(e.dataTransfer.files[0])
+    }
+  }
+
+  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      handleFile(e.target.files[0])
+    }
+  }
+
+  const handleFile = (file: File) => {
+    if (file.type.startsWith('image/')) {
+      onImageSelect(file)
+    }
+  }
+
+  const imageUrl = selectedImage ? URL.createObjectURL(selectedImage) : null
+
+  return (
+    <div>
+      {!imageUrl ? (
+        <div
+          className={`border border-dashed rounded-2xl p-6 sm:p-10 text-center transition-all duration-200 bg-slate-50/60 ${
+            dragActive
+              ? 'border-primary-500 bg-white shadow-md'
+              : 'border-slate-300 hover:border-slate-400 hover:bg-white'
+          }`}
+          onDragEnter={handleDrag}
+          onDragLeave={handleDrag}
+          onDragOver={handleDrag}
+          onDrop={handleDrop}
+        >
+          <div className="mx-auto w-12 h-12 rounded-2xl bg-white border border-slate-200 shadow-sm flex items-center justify-center mb-4">
+            <ImageIcon className="w-6 h-6 text-primary-700" />
+          </div>
+          <p className="text-base font-semibold text-slate-900 mb-1">{title}</p>
+          <p className="text-sm text-slate-600 mb-5">{hint}</p>
+          <div className="flex flex-col sm:flex-row gap-2 justify-center items-stretch sm:items-center max-w-md mx-auto w-full">
+            <button
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              className="touch-manipulation inline-flex items-center justify-center gap-2 min-h-[44px] px-5 py-2.5 bg-slate-900 text-white rounded-xl font-semibold hover:bg-slate-800 transition-colors shadow-sm"
+            >
+              <Upload className="w-4 h-4 shrink-0" />
+              Choose file
+            </button>
+            <button
+              type="button"
+              onClick={() => cameraInputRef.current?.click()}
+              className="touch-manipulation inline-flex items-center justify-center gap-2 min-h-[44px] px-5 py-2.5 bg-white text-slate-900 border-2 border-slate-200 rounded-xl font-semibold hover:bg-slate-50 transition-colors shadow-sm"
+            >
+              <ImageIcon className="w-4 h-4 shrink-0" />
+              Take photo
+            </button>
+          </div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            onChange={handleFileInput}
+            className="hidden"
+          />
+          <input
+            ref={cameraInputRef}
+            type="file"
+            accept="image/*"
+            capture="environment"
+            onChange={handleFileInput}
+            className="hidden"
+          />
+        </div>
+      ) : (
+        <div className="relative group bg-white rounded-2xl p-4 border border-slate-200 shadow-sm">
+          <div className="relative w-full h-auto max-h-[520px] flex items-center justify-center bg-slate-50 rounded-xl overflow-hidden border border-slate-200">
+            <img
+              src={imageUrl}
+              alt="Crop image preview"
+              className="w-full h-auto max-h-[500px] object-contain rounded-lg"
+              style={{ display: 'block', maxWidth: '100%', height: 'auto' }}
+              onError={(e) => {
+                console.error('Image failed to load:', imageUrl)
+                e.currentTarget.style.display = 'none'
+              }}
+            />
+          </div>
+          <button
+            type="button"
+            onClick={onClear}
+            className="touch-manipulation absolute top-3 right-3 sm:top-6 sm:right-6 min-h-[44px] min-w-[44px] px-3 py-2 bg-white/90 hover:bg-white text-slate-900 rounded-xl transition-colors shadow-sm border border-slate-200 flex items-center justify-center gap-2 font-semibold text-sm"
+          >
+            <X className="w-4 h-4" />
+            Remove
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

components/LeafletMap.tsx

@@ -0,0 +1,138 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from 'react-leaflet'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+
+// Fix for default marker icons in Next.js
+if (typeof window !== 'undefined') {
+  delete (L.Icon.Default.prototype as any)._getIconUrl
+  L.Icon.Default.mergeOptions({
+    iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png',
+    iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png',
+    shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png',
+  })
+}
+
+interface OutbreakReport {
+  id: string
+  lat: number
+  lng: number
+  crop: string
+  disease: string
+  severity: 'low' | 'medium' | 'high'
+  date: string
+  description: string
+}
+
+interface LeafletMapProps {
+  reports?: OutbreakReport[]
+  onMapClick?: (lat: number, lng: number) => void
+}
+
+// Component to handle map clicks
+function MapClickHandler({ onClick }: { onClick: (lat: number, lng: number) => void }) {
+  useMapEvents({
+    click: (e) => {
+      if (onClick) {
+        onClick(e.latlng.lat, e.latlng.lng)
+      }
+    },
+  })
+  return null
+}
+
+export default function LeafletMap({ reports = [], onMapClick }: LeafletMapProps) {
+  useEffect(() => {
+    // Ensure we're in the browser
+    if (typeof window === 'undefined') return
+  }, [])
+
+  const getSeverityColor = (severity: string) => {
+    switch (severity) {
+      case 'high':
+        return '#ef4444'
+      case 'medium':
+        return '#f97316'
+      case 'low':
+        return '#eab308'
+      default:
+        return '#64748b'
+    }
+  }
+
+  const createMarkerIcon = (severity: string) => {
+    const color = getSeverityColor(severity)
+    return L.divIcon({
+      className: 'custom-marker',
+      html: `<div style="
+        width: 20px;
+        height: 20px;
+        background-color: ${color};
+        border: 3px solid white;
+        border-radius: 50%;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+      "></div>`,
+      iconSize: [20, 20],
+      iconAnchor: [10, 10],
+    })
+  }
+
+  return (
+    <MapContainer
+      center={[39.8283, -98.5795]} // Center of US
+      zoom={4}
+      style={{ height: '100%', width: '100%', zIndex: 0 }}
+      maxBounds={[
+        [24.39, -125], // Southwest corner
+        [49.38, -66.93], // Northeast corner
+      ]}
+      minZoom={4}
+      maxZoom={10}
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      
+      <MapClickHandler onClick={onMapClick || (() => {})} />
+
+      {/* Markers for existing reports */}
+      {reports.map((report) => (
+        <Marker
+          key={report.id}
+          position={[report.lat, report.lng]}
+          icon={createMarkerIcon(report.severity)}
+        >
+          <Popup>
+            <div className="p-2">
+              <h3 className="font-bold text-lg mb-1">
+                {report.crop} - {report.disease}
+              </h3>
+              <p className="text-sm text-gray-600 mb-1">
+                <span
+                  className={`px-2 py-1 rounded text-xs font-bold ${
+                    report.severity === 'high'
+                      ? 'bg-red-100 text-red-800'
+                      : report.severity === 'medium'
+                      ? 'bg-orange-100 text-orange-800'
+                      : 'bg-yellow-100 text-yellow-800'
+                  }`}
+                >
+                  {report.severity.toUpperCase()}
+                </span>
+              </p>
+              {report.description && (
+                <p className="text-sm text-gray-700 mt-2">{report.description}</p>
+              )}
+              <p className="text-xs text-gray-500 mt-2">
+                {new Date(report.date).toLocaleString()}
+              </p>
+            </div>
+          </Popup>
+        </Marker>
+      ))}
+    </MapContainer>
+  )
+}

components/NotificationSystem.tsx

@@ -0,0 +1,480 @@
+'use client'
+
+import { useState, useEffect, useMemo, useRef } from 'react'
+import { Bell, X, AlertTriangle, MapPin, Check } from 'lucide-react'
+import {
+  findAffectedFarmers,
+  generateNotificationMessage,
+  type OutbreakLocation,
+  type FarmerLocation,
+  type Notification,
+} from '@/lib/notifications'
+import type { OutbreakReport } from '@/lib/outbreakReport'
+
+interface NotificationSystemProps {
+  outbreaks: OutbreakReport[]
+  currentFarmerLocation?: { lat: number; lng: number; crops: string[] }
+}
+
+const SEVERITY_SORT = { high: 0, medium: 1, low: 2 } as const
+
+export default function NotificationSystem({
+  outbreaks,
+  currentFarmerLocation,
+}: NotificationSystemProps) {
+  const [notifications, setNotifications] = useState<Notification[]>([])
+  const [isOpen, setIsOpen] = useState(false)
+  /** Outbreak IDs the user dismissed — otherwise the sync effect recreates them */
+  const [dismissedOutbreakIds, setDismissedOutbreakIds] = useState<Set<string>>(() => new Set())
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!isOpen) return
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsOpen(false)
+    }
+    // Bubble-phase click avoids capture-phase pointer handlers stealing taps before button onClick runs.
+    const onDocumentClick = (e: MouseEvent) => {
+      const root = rootRef.current
+      if (root && !root.contains(e.target as Node)) setIsOpen(false)
+    }
+    window.addEventListener('keydown', onKeyDown)
+    document.addEventListener('click', onDocumentClick)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+      document.removeEventListener('click', onDocumentClick)
+    }
+  }, [isOpen])
+
+  /** Demo persona when no farm is registered — must match `findAffectedFarmers` ids */
+  const DEMO_FARMER_ID = 'farmer-1'
+
+  // Recompute when registration changes (useState initializer only runs once)
+  const farmers = useMemo<FarmerLocation[]>(() => [
+    // Arkansas area farmers
+    {
+      id: 'farmer-1',
+      name: 'John Smith',
+      email: 'john@example.com',
+      lat: 35.5, // Near Russellville, AR (~20 miles)
+      lng: -93.2,
+      crops: ['corn', 'wheat', 'soybean'],
+      radius: 250,
+    },
+    {
+      id: 'farmer-2',
+      name: 'Sarah Johnson',
+      email: 'sarah@example.com',
+      lat: 35.1, // Within 250 miles of Russellville (~30 miles)
+      lng: -92.8,
+      crops: ['corn', 'rice'],
+      radius: 250,
+    },
+    {
+      id: 'farmer-3',
+      name: 'Mike Davis',
+      email: 'mike@example.com',
+      lat: 36.0, // Within 250 miles of Russellville (~50 miles)
+      lng: -93.5,
+      crops: ['corn', 'wheat', 'soybean'],
+      radius: 250,
+    },
+    {
+      id: 'farmer-4',
+      name: 'Arkansas Farm Co.',
+      email: 'info@arkfarm.com',
+      lat: 34.7, // Little Rock area - within 250 miles (~80 miles)
+      lng: -92.3,
+      crops: ['corn', 'soybean'],
+      radius: 250,
+    },
+    // California farmers
+    {
+      id: 'farmer-5',
+      name: 'Central Valley Farms',
+      email: 'contact@cvfarms.com',
+      lat: 36.5, // Near Fresno, CA
+      lng: -119.5,
+      crops: ['wheat', 'corn'],
+      radius: 250,
+    },
+    {
+      id: 'farmer-6',
+      name: 'Golden State Agriculture',
+      email: 'info@gsag.com',
+      lat: 37.0, // Near Modesto, CA
+      lng: -120.5,
+      crops: ['wheat', 'corn', 'soybean'],
+      radius: 250,
+    },
+    // Texas farmers
+    {
+      id: 'farmer-7',
+      name: 'Lone Star Crops',
+      email: 'hello@lonestarcrops.com',
+      lat: 32.0, // Near Abilene, TX
+      lng: -99.5,
+      crops: ['corn', 'wheat'],
+      radius: 250,
+    },
+    {
+      id: 'farmer-8',
+      name: 'Texas Grain Co.',
+      email: 'info@texasgrain.com',
+      lat: 31.5, // Near San Angelo, TX
+      lng: -100.0,
+      crops: ['corn', 'soybean'],
+      radius: 250,
+    },
+    // Iowa farmers
+    {
+      id: 'farmer-9',
+      name: 'Iowa Corn Growers',
+      email: 'contact@iowacorn.com',
+      lat: 41.5, // Near Des Moines, IA
+      lng: -93.0,
+      crops: ['corn', 'soybean'],
+      radius: 250,
+    },
+    {
+      id: 'farmer-10',
+      name: 'Midwest Agriculture',
+      email: 'info@midwestag.com',
+      lat: 42.0, // Near Cedar Rapids, IA
+      lng: -91.5,
+      crops: ['corn', 'soybean', 'wheat'],
+      radius: 250,
+    },
+    // Illinois farmers
+    {
+      id: 'farmer-11',
+      name: 'Prairie Farms',
+      email: 'hello@prairiefarms.com',
+      lat: 40.0, // Near Champaign, IL
+      lng: -88.5,
+      crops: ['corn', 'soybean'],
+      radius: 250,
+    },
+    // Kansas farmers
+    {
+      id: 'farmer-12',
+      name: 'Kansas Wheat Growers',
+      email: 'info@kswheat.com',
+      lat: 38.5, // Near Wichita, KS
+      lng: -98.0,
+      crops: ['wheat', 'corn'],
+      radius: 250,
+    },
+    {
+      id: 'farmer-13',
+      name: 'Sunflower State Farms',
+      email: 'contact@sunflowerfarms.com',
+      lat: 39.0, // Near Topeka, KS
+      lng: -95.5,
+      crops: ['wheat', 'corn', 'soybean'],
+      radius: 250,
+    },
+    // Nebraska farmers
+    {
+      id: 'farmer-14',
+      name: 'Cornhusker Agriculture',
+      email: 'info@cornhuskerag.com',
+      lat: 41.0, // Near Lincoln, NE
+      lng: -96.5,
+      crops: ['corn', 'soybean'],
+      radius: 250,
+    },
+    // North Carolina farmers
+    {
+      id: 'farmer-15',
+      name: 'Carolina Crops',
+      email: 'hello@carolinacrops.com',
+      lat: 35.5, // Near Charlotte, NC
+      lng: -80.5,
+      crops: ['corn', 'soybean'],
+      radius: 250,
+    },
+    // Ohio farmers
+    {
+      id: 'farmer-16',
+      name: 'Buckeye Farms',
+      email: 'info@buckeyefarms.com',
+      lat: 40.0, // Near Columbus, OH
+      lng: -83.0,
+      crops: ['corn', 'soybean', 'wheat'],
+      radius: 250,
+    },
+    // Add current user if location is available
+    ...(currentFarmerLocation
+      ? [
+          {
+            id: 'current-user',
+            name: 'You',
+            lat: currentFarmerLocation.lat,
+            lng: currentFarmerLocation.lng,
+            crops: currentFarmerLocation.crops,
+            radius: 250,
+          } as FarmerLocation,
+        ]
+      : []),
+  ], [currentFarmerLocation])
+
+  const toOutbreakLocation = (report: OutbreakReport): OutbreakLocation => ({
+    id: report.id,
+    lat: report.lat,
+    lng: report.lng,
+    crop: report.crop,
+    disease: report.disease,
+    severity: report.severity,
+    date: report.date,
+    description: report.description,
+  })
+
+  useEffect(() => {
+    if (outbreaks.length === 0) {
+      setNotifications([])
+      return
+    }
+
+    const targetFarmerId = currentFarmerLocation ? 'current-user' : DEMO_FARMER_ID
+
+    setNotifications((prev) => {
+      const readByOutbreak = new Map<string, boolean>()
+      const createdByOutbreak = new Map<string, string>()
+      for (const n of prev) {
+        if (n.read) readByOutbreak.set(n.outbreakId, true)
+        createdByOutbreak.set(n.outbreakId, n.createdAt)
+      }
+
+      const next: Notification[] = []
+      for (const report of outbreaks) {
+        if (dismissedOutbreakIds.has(report.id)) continue
+
+        const outbreakLocation = toOutbreakLocation(report)
+        const affected = findAffectedFarmers(outbreakLocation, farmers)
+        const match = affected.find((a) => a.farmer.id === targetFarmerId)
+        if (!match) continue
+
+        const verifiedTail =
+          report.reporterVerified === true
+            ? ' (verified farmer report)'
+            : report.reporterVerified === false
+              ? ' (unverified farmer report)'
+              : ' (community report)'
+
+        next.push({
+          id: `${report.id}-${targetFarmerId}`,
+          farmerId: targetFarmerId,
+          outbreakId: report.id,
+          distance: match.distance,
+          message: `${generateNotificationMessage(outbreakLocation, match.distance)}${verifiedTail}`,
+          severity: outbreakLocation.severity,
+          read: readByOutbreak.get(report.id) ?? false,
+          createdAt: createdByOutbreak.get(report.id) ?? new Date().toISOString(),
+        })
+      }
+
+      next.sort((a, b) => {
+        const s = SEVERITY_SORT[a.severity] - SEVERITY_SORT[b.severity]
+        if (s !== 0) return s
+        return a.distance - b.distance
+      })
+
+      return next
+    })
+  }, [outbreaks, farmers, currentFarmerLocation, dismissedOutbreakIds])
+
+  const markAsRead = (notificationId: string) => {
+    setNotifications((prev) =>
+      prev.map((notif) =>
+        notif.id === notificationId ? { ...notif, read: true } : notif
+      )
+    )
+  }
+
+  const markAllAsRead = () => {
+    setNotifications((prev) => prev.map((notif) => ({ ...notif, read: true })))
+  }
+
+  const deleteNotification = (notificationId: string) => {
+    setNotifications((prev) => {
+      const n = prev.find((x) => x.id === notificationId)
+      if (n) {
+        setDismissedOutbreakIds((s) => new Set(s).add(n.outbreakId))
+      }
+      return prev.filter((x) => x.id !== notificationId)
+    })
+  }
+
+  const unreadCount = notifications.filter((n) => !n.read).length
+
+  return (
+    <div
+      ref={rootRef}
+      className="relative z-[200] inline-flex shrink-0 items-center justify-center self-center"
+    >
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="touch-manipulation relative flex min-h-[44px] min-w-[44px] items-center justify-center rounded-xl border-2 border-slate-200 bg-white p-2 shadow-sm transition-all hover:border-primary-400 hover:shadow-md"
+        aria-label="Notifications"
+        aria-expanded={isOpen}
+        aria-haspopup="dialog"
+      >
+        <Bell className="h-6 w-6 text-slate-700" />
+        {unreadCount > 0 && (
+          <span className="absolute -right-1 -top-1 flex h-6 w-6 items-center justify-center rounded-full border-2 border-white bg-red-600 text-xs font-bold text-white">
+            {unreadCount > 9 ? '9+' : unreadCount}
+          </span>
+        )}
+      </button>
+      {isOpen && (
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="disease-alerts-title"
+          className="absolute right-0 top-[calc(100%+10px)] flex max-h-[min(420px,70dvh)] w-[min(22rem,calc(100vw-1.5rem))] flex-col overflow-hidden rounded-2xl border border-slate-300 bg-white shadow-xl ring-1 ring-slate-900/10"
+        >
+              <div className="flex shrink-0 items-start justify-between gap-3 border-b border-slate-200 bg-white p-4">
+                <div className="min-w-0 flex-1">
+                  <h3
+                    id="disease-alerts-title"
+                    className="flex flex-wrap items-center gap-x-2 gap-y-1.5 text-lg font-bold leading-tight text-slate-900 sm:text-xl"
+                  >
+                    <span className="inline-flex shrink-0 items-center gap-2">
+                      <Bell className="h-5 w-5 shrink-0 text-primary-700" />
+                      <span>Disease Alerts</span>
+                    </span>
+                    {unreadCount > 0 && (
+                      <span className="inline-flex shrink-0 items-center rounded-full bg-red-600 px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide text-white shadow-sm">
+                        {unreadCount} new
+                      </span>
+                    )}
+                  </h3>
+                </div>
+                <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
+                  {unreadCount > 0 && (
+                    <button
+                      type="button"
+                      onClick={markAllAsRead}
+                      className="whitespace-nowrap rounded-lg px-2 py-1.5 text-xs font-semibold text-primary-700 transition-colors hover:bg-primary-50"
+                    >
+                      Mark all read
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    onClick={() => setIsOpen(false)}
+                    className="rounded-lg p-2 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-800"
+                    aria-label="Close notifications"
+                  >
+                    <X className="h-5 w-5" />
+                  </button>
+                </div>
+              </div>
+
+              <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain bg-white p-2">
+                {notifications.length === 0 ? (
+                  <div className="py-10 text-center text-slate-600">
+                    <Bell className="mx-auto mb-3 h-12 w-12 text-slate-400" />
+                    <p className="font-semibold text-slate-800">No alerts yet</p>
+                    <p className="mt-1 text-sm text-slate-500">
+                      You&apos;ll be notified when outbreaks occur within 250 miles
+                    </p>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {notifications.map((notification) => {
+                      const outbreak = outbreaks.find((o) => o.id === notification.outbreakId) as
+                        | OutbreakReport
+                        | undefined
+                      return (
+                        <div
+                          key={notification.id}
+                          className={`rounded-xl border p-4 transition-all ${
+                            notification.read
+                              ? 'border-slate-200 bg-slate-50'
+                              : 'border-red-200 bg-red-50/95 shadow-sm'
+                          }`}
+                        >
+                          <div className="flex items-start justify-between gap-3">
+                            <div className="min-w-0 flex-1">
+                              <div className="mb-2 flex gap-2">
+                                <AlertTriangle
+                                  className={`mt-0.5 h-5 w-5 shrink-0 ${
+                                    notification.severity === 'high'
+                                      ? 'text-red-600'
+                                      : notification.severity === 'medium'
+                                        ? 'text-orange-600'
+                                        : 'text-yellow-600'
+                                  }`}
+                                />
+                                <p className="text-sm font-bold leading-snug text-slate-900">
+                                  {notification.message}
+                                </p>
+                              </div>
+                              {outbreak && (
+                                <div className="mt-2 space-y-1 pl-0 sm:pl-7">
+                                  {outbreak.reporterVerified !== undefined && (
+                                    <p className="text-xs">
+                                      <span
+                                        className={`inline-block rounded-md border px-2 py-0.5 font-bold ${
+                                          outbreak.reporterVerified
+                                            ? 'border-emerald-200 bg-emerald-100 text-emerald-900'
+                                            : 'border-slate-200 bg-slate-100 text-slate-700'
+                                        }`}
+                                      >
+                                        {outbreak.reporterVerified ? 'Verified farmer' : 'Unverified farmer'}
+                                      </span>
+                                    </p>
+                                  )}
+                                  <p className="flex items-center gap-1 text-xs text-slate-600">
+                                    <MapPin className="h-3 w-3 shrink-0" />
+                                    {notification.distance.toFixed(1)} miles away
+                                  </p>
+                                  <p className="text-xs text-slate-500">
+                                    {new Date(notification.createdAt).toLocaleString()}
+                                  </p>
+                                </div>
+                              )}
+                            </div>
+                            <div className="flex shrink-0 items-start gap-1">
+                              {!notification.read && (
+                                <button
+                                  type="button"
+                                  onClick={() => markAsRead(notification.id)}
+                                  className="rounded-lg p-1.5 text-green-700 transition-colors hover:bg-white"
+                                  title="Mark as read"
+                                >
+                                  <Check className="h-4 w-4" />
+                                </button>
+                              )}
+                              <button
+                                type="button"
+                                onClick={() => deleteNotification(notification.id)}
+                                className="rounded-lg p-1.5 text-slate-500 transition-colors hover:bg-white hover:text-slate-800"
+                                title="Delete"
+                              >
+                                <X className="h-4 w-4" />
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                )}
+              </div>
+
+              {notifications.length > 0 && (
+                <div className="shrink-0 border-t border-slate-200 bg-slate-100/90 p-3">
+                  <p className="text-center text-xs text-slate-600">
+                    Alerts within 250 miles of your farm (or demo location). Dismissed alerts stay hidden until refresh.
+                  </p>
+                </div>
+              )}
+        </div>
+      )}
+    </div>
+  )
+}

components/OutbreakMap.tsx

@@ -0,0 +1,297 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { WorldMap } from '@/components/ui/world-map'
+import { MapPin, AlertTriangle, X, Plus, Save } from 'lucide-react'
+import { motion } from 'framer-motion'
+
+interface OutbreakReport {
+  id: string
+  lat: number
+  lng: number
+  crop: string
+  disease: string
+  severity: 'low' | 'medium' | 'high'
+  date: string
+  description: string
+}
+
+export default function OutbreakMap() {
+  const [reports, setReports] = useState<OutbreakReport[]>([])
+  const [selectedLocation, setSelectedLocation] = useState<{ lat: number; lng: number } | null>(null)
+  const [showReportForm, setShowReportForm] = useState(false)
+  const [formData, setFormData] = useState({
+    crop: '',
+    disease: '',
+    severity: 'medium' as 'low' | 'medium' | 'high',
+    description: '',
+  })
+
+  // Convert reports to map dots format
+  const mapDots = reports.map((report) => ({
+    start: { lat: report.lat, lng: report.lng, label: report.disease },
+    end: { lat: report.lat, lng: report.lng, label: report.disease },
+  }))
+
+  const handleMapClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    // Find the map container
+    const mapContainer = e.currentTarget.querySelector('[class*="aspect-[2/1]"]')
+    if (!mapContainer) return
+
+    const rect = mapContainer.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    
+    // Convert pixel coordinates to lat/lng (map is 800x400 viewBox)
+    const lng = (x / rect.width) * 360 - 180
+    const lat = 90 - (y / rect.height) * 180
+    
+    // Clamp values to valid ranges
+    const clampedLat = Math.max(-90, Math.min(90, lat))
+    const clampedLng = Math.max(-180, Math.min(180, lng))
+    
+    setSelectedLocation({ lat: clampedLat, lng: clampedLng })
+    setShowReportForm(true)
+  }
+
+  const handleSubmitReport = () => {
+    if (!selectedLocation || !formData.crop || !formData.disease) {
+      alert('Please fill in all required fields')
+      return
+    }
+
+    const newReport: OutbreakReport = {
+      id: Date.now().toString(),
+      lat: selectedLocation.lat,
+      lng: selectedLocation.lng,
+      crop: formData.crop,
+      disease: formData.disease,
+      severity: formData.severity,
+      date: new Date().toISOString(),
+      description: formData.description,
+    }
+
+    setReports([...reports, newReport])
+    setShowReportForm(false)
+    setSelectedLocation(null)
+    setFormData({
+      crop: '',
+      disease: '',
+      severity: 'medium',
+      description: '',
+    })
+  }
+
+  const getSeverityColor = (severity: string) => {
+    switch (severity) {
+      case 'high':
+        return 'text-red-600 bg-red-50 border-red-200'
+      case 'medium':
+        return 'text-orange-600 bg-orange-50 border-orange-200'
+      case 'low':
+        return 'text-yellow-600 bg-yellow-50 border-yellow-200'
+      default:
+        return 'text-gray-600 bg-gray-50 border-gray-200'
+    }
+  }
+
+  return (
+    <div className="min-h-screen min-h-[100dvh] bg-gradient-to-br from-slate-50 via-blue-50 to-slate-100 py-6 sm:py-8 px-3 sm:px-4 pb-[max(1.5rem,env(safe-area-inset-bottom))] pt-[max(0.75rem,env(safe-area-inset-top))]">
+      <div className="container mx-auto max-w-7xl">
+        {/* Header */}
+        <div className="mb-8 text-center">
+          <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-3">
+            Outbreak Reporting System
+          </h1>
+          <p className="text-lg text-slate-600 max-w-2xl mx-auto">
+            Click on the map to report potential crop disease outbreaks in your area
+          </p>
+        </div>
+
+        {/* Map Container */}
+        <div className="bg-white rounded-xl shadow-lg p-6 mb-6 border border-slate-200">
+          <div className="relative">
+            <WorldMap dots={mapDots} lineColor="#ef4444" />
+            {/* Clickable overlay for map interaction */}
+            <div
+              onClick={handleMapClick}
+              className="absolute inset-0 cursor-crosshair z-10"
+              style={{ pointerEvents: 'auto' }}
+            />
+            {selectedLocation && (
+              <div className="absolute top-4 right-4 bg-white rounded-lg shadow-lg p-4 border border-slate-200 z-20">
+                <p className="text-sm font-semibold text-slate-900 mb-1">Selected Location</p>
+                <p className="text-xs text-slate-600">
+                  Lat: {selectedLocation.lat.toFixed(4)}, Lng: {selectedLocation.lng.toFixed(4)}
+                </p>
+              </div>
+            )}
+            <div className="absolute bottom-4 left-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg z-20">
+              <p className="text-sm font-semibold flex items-center gap-2">
+                <MapPin className="w-4 h-4" />
+                Click on map to report outbreak
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Report Form Modal — avoid motion opacity on full-screen layer (invisible overlays still capture clicks). */}
+        {showReportForm && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+            <div
+              role="presentation"
+              className="absolute inset-0"
+              onClick={() => {
+                setShowReportForm(false)
+                setSelectedLocation(null)
+              }}
+            />
+            <div
+              role="dialog"
+              aria-modal="true"
+              onClick={(e) => e.stopPropagation()}
+              className="relative z-10 max-h-[90dvh] w-full max-w-md overflow-y-auto overscroll-contain rounded-xl border border-slate-200 bg-white p-6 shadow-2xl"
+            >
+                <div className="flex items-center justify-between mb-4">
+                  <h2 className="text-2xl font-bold text-slate-900 flex items-center gap-2">
+                    <AlertTriangle className="w-6 h-6 text-orange-500" />
+                    Report Outbreak
+                  </h2>
+                  <button
+                    onClick={() => {
+                      setShowReportForm(false)
+                      setSelectedLocation(null)
+                    }}
+                    className="text-slate-400 hover:text-slate-600 transition-colors"
+                  >
+                    <X className="w-5 h-5" />
+                  </button>
+                </div>
+
+                <div className="space-y-4">
+                  <div>
+                    <label className="block text-sm font-semibold text-slate-700 mb-2">
+                      Crop Type *
+                    </label>
+                    <input
+                      type="text"
+                      value={formData.crop}
+                      onChange={(e) => setFormData({ ...formData, crop: e.target.value })}
+                      placeholder="e.g., Corn, Wheat, Rice"
+                      className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-semibold text-slate-700 mb-2">
+                      Disease Name *
+                    </label>
+                    <input
+                      type="text"
+                      value={formData.disease}
+                      onChange={(e) => setFormData({ ...formData, disease: e.target.value })}
+                      placeholder="e.g., Rust, Blight, Mosaic"
+                      className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-semibold text-slate-700 mb-2">
+                      Severity *
+                    </label>
+                    <select
+                      value={formData.severity}
+                      onChange={(e) =>
+                        setFormData({
+                          ...formData,
+                          severity: e.target.value as 'low' | 'medium' | 'high',
+                        })
+                      }
+                      className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    >
+                      <option value="low">Low</option>
+                      <option value="medium">Medium</option>
+                      <option value="high">High</option>
+                    </select>
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-semibold text-slate-700 mb-2">
+                      Description
+                    </label>
+                    <textarea
+                      value={formData.description}
+                      onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                      placeholder="Additional details about the outbreak..."
+                      rows={3}
+                      className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    />
+                  </div>
+
+                  <button
+                    onClick={handleSubmitReport}
+                    className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors flex items-center justify-center gap-2 shadow-lg"
+                  >
+                    <Save className="w-5 h-5" />
+                    Submit Report
+                  </button>
+                </div>
+            </div>
+          </div>
+        )}
+
+        {/* Reports List */}
+        <div className="bg-white rounded-xl shadow-lg p-6 border border-slate-200">
+          <h2 className="text-2xl font-bold text-slate-900 mb-4 flex items-center gap-2">
+            <MapPin className="w-6 h-6 text-blue-600" />
+            Reported Outbreaks ({reports.length})
+          </h2>
+
+          {reports.length === 0 ? (
+            <div className="text-center py-12 text-slate-500">
+              <MapPin className="w-12 h-12 mx-auto mb-4 text-slate-300" />
+              <p>No outbreaks reported yet. Click on the map to report one.</p>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {reports.map((report) => (
+                <motion.div
+                  key={report.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="border border-slate-200 rounded-lg p-4 hover:shadow-md transition-shadow"
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3 mb-2">
+                        <h3 className="text-lg font-semibold text-slate-900">
+                          {report.crop} - {report.disease}
+                        </h3>
+                        <span
+                          className={`px-3 py-1 rounded-full text-xs font-semibold border ${getSeverityColor(
+                            report.severity
+                          )}`}
+                        >
+                          {report.severity.toUpperCase()}
+                        </span>
+                      </div>
+                      <p className="text-sm text-slate-600 mb-2">
+                        Location: {report.lat.toFixed(4)}, {report.lng.toFixed(4)}
+                      </p>
+                      {report.description && (
+                        <p className="text-sm text-slate-700">{report.description}</p>
+                      )}
+                      <p className="text-xs text-slate-500 mt-2">
+                        Reported: {new Date(report.date).toLocaleString()}
+                      </p>
+                    </div>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

components/PredictionHistory.tsx

@@ -0,0 +1,199 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+interface PredictionRecord {
+  id: string
+  timestamp: string
+  crop: string
+  disease: string
+  confidence: number
+  imageUrl: string
+}
+
+interface PredictionHistoryProps {
+  onSelectHistory: (record: PredictionRecord) => void
+}
+
+export default function PredictionHistory({ onSelectHistory }: PredictionHistoryProps) {
+  const [history, setHistory] = useState<PredictionRecord[]>([])
+  const [isOpen, setIsOpen] = useState(false)
+
+  useEffect(() => {
+    // Load history from localStorage (only in browser)
+    if (typeof window === 'undefined') return
+    
+    try {
+      const saved = localStorage.getItem('cropintel_history')
+      if (saved) {
+        const parsed = JSON.parse(saved)
+        // Validate it's an array
+        if (Array.isArray(parsed)) {
+          setHistory(parsed)
+        }
+      }
+    } catch (e) {
+      console.error('Failed to load history:', e)
+      // Clear corrupted data
+      localStorage.removeItem('cropintel_history')
+    }
+  }, [])
+
+  const clearHistory = () => {
+    if (typeof window === 'undefined') return
+    if (confirm('Are you sure you want to clear all prediction history?')) {
+      localStorage.removeItem('cropintel_history')
+      setHistory([])
+    }
+  }
+
+  if (history.length === 0) {
+    return (
+      <div className="bg-white rounded-2xl border-2 border-slate-200 p-6 shadow-xl">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-xl font-extrabold text-gray-900 flex items-center gap-2">
+            <svg className="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            Prediction History
+          </h3>
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className="text-primary-600 hover:text-primary-700 font-semibold px-3 py-1 rounded-lg hover:bg-primary-50 transition-colors"
+          >
+            {isOpen ? 'Hide' : 'Show'}
+          </button>
+        </div>
+        {isOpen && (
+          <p className="text-gray-600 text-center py-4">No predictions yet. Your prediction history will appear here.</p>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-white rounded-2xl border-2 border-slate-200 p-6 shadow-xl">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-xl font-extrabold text-gray-900 flex items-center gap-2">
+          <svg className="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          Prediction History ({history.length})
+        </h3>
+        <div className="flex gap-3">
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className="text-primary-600 hover:text-primary-700 font-semibold px-4 py-2 rounded-lg hover:bg-primary-50 transition-colors"
+          >
+            {isOpen ? 'Hide' : 'Show'}
+          </button>
+          <button
+            onClick={clearHistory}
+            className="text-red-600 hover:text-red-700 font-semibold px-4 py-2 rounded-lg hover:bg-red-50 transition-colors"
+          >
+            Clear
+          </button>
+        </div>
+      </div>
+
+      {isOpen && (
+        <div className="space-y-3 max-h-96 overflow-y-auto">
+          {history.map((record) => (
+            <div
+              key={record.id}
+              onClick={() => onSelectHistory(record)}
+              className="p-5 bg-white/80 rounded-xl border-2 border-gray-200 hover:border-primary-400 hover:bg-gradient-to-r hover:from-primary-50 hover:to-blue-50 cursor-pointer transition-all duration-300 shadow-md hover:shadow-xl transform hover:scale-[1.02]"
+            >
+              <div className="flex items-center gap-4">
+                <div className="relative">
+                  <img
+                    src={record.imageUrl}
+                    alt="History"
+                    className="w-20 h-20 object-cover rounded-xl border-2 border-gray-300 shadow-md"
+                    style={{ display: 'block' }}
+                    onError={(e) => {
+                      console.error('Image failed to load:', record.imageUrl)
+                    }}
+                  />
+                  <div className="absolute -top-1 -right-1 w-6 h-6 bg-primary-600 rounded-full border-2 border-white flex items-center justify-center">
+                    <span className="text-white text-xs font-bold">{Math.round(record.confidence)}</span>
+                  </div>
+                </div>
+                <div className="flex-1">
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="font-bold text-gray-900 text-lg">{record.disease}</span>
+                    <span className="text-xs text-gray-500 font-medium">
+                      {new Date(record.timestamp).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <span className="text-sm font-semibold text-gray-700 capitalize bg-gray-100 px-3 py-1 rounded-lg">
+                      {record.crop}
+                    </span>
+                    <span className="text-sm font-bold text-primary-600">
+                      {record.confidence.toFixed(1)}% confidence
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function savePredictionToHistory(
+  crop: string,
+  disease: string,
+  confidence: number,
+  imageUrl: string
+) {
+  // Only run in browser
+  if (typeof window === 'undefined') return
+
+  try {
+    const record: PredictionRecord = {
+      id: Date.now().toString(),
+      timestamp: new Date().toISOString(),
+      crop,
+      disease,
+      confidence,
+      imageUrl
+    }
+
+    const saved = localStorage.getItem('cropintel_history')
+    let history: PredictionRecord[] = []
+    
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved)
+        // Validate it's an array
+        if (Array.isArray(parsed)) {
+          history = parsed
+        } else {
+          // If corrupted, start fresh
+          history = []
+        }
+      } catch (e) {
+        console.error('Failed to parse history:', e)
+        // Clear corrupted data and start fresh
+        localStorage.removeItem('cropintel_history')
+        history = []
+      }
+    }
+
+    // Add new record at the beginning
+    history.unshift(record)
+    
+    // Keep only last 50 records
+    if (history.length > 50) {
+      history = history.slice(0, 50)
+    }
+
+    localStorage.setItem('cropintel_history', JSON.stringify(history))
+  } catch (e) {
+    console.error('Failed to save prediction to history:', e)
+  }
+}

components/PredictionResults.tsx

@@ -0,0 +1,168 @@
+'use client'
+
+import { AlertTriangle, CheckCircle2 } from 'lucide-react'
+
+interface Prediction {
+  disease: string
+  confidence: number
+  is_healthy: boolean
+  meets_threshold: boolean
+  /** True when the model can't confidently match any disease in our catalog. */
+  not_in_catalog?: boolean
+  /** Farmer-facing explanation shown when not_in_catalog is true. */
+  catalog_message?: string
+  all_predictions: Array<{
+    disease: string
+    confidence: number
+  }>
+}
+
+interface PredictionResultsProps {
+  prediction: Prediction
+  /** Shown when regional disease filter was applied */
+  regionNote?: string
+}
+
+/** Model may send 0–1 or 0–100; UI always shows percent to one decimal. */
+function toConfidencePercent(value: number): number {
+  if (value > 0 && value <= 1) return value * 100
+  return value
+}
+
+export default function PredictionResults({
+  prediction,
+  regionNote,
+}: PredictionResultsProps) {
+  const getStatusColor = () => {
+    if (prediction.not_in_catalog) {
+      return 'bg-amber-50 text-amber-900 border-amber-200'
+    }
+    if (prediction.is_healthy) {
+      return 'bg-emerald-50 text-emerald-900 border-emerald-200'
+    }
+    if (prediction.meets_threshold) {
+      return 'bg-rose-50 text-rose-900 border-rose-200'
+    }
+    return 'bg-amber-50 text-amber-900 border-amber-200'
+  }
+
+  const getStatusText = () => {
+    if (prediction.not_in_catalog) {
+      return 'No match in catalog'
+    }
+    if (prediction.is_healthy) {
+      return 'Healthy'
+    }
+    if (prediction.meets_threshold) {
+      return 'Disease detected'
+    }
+    return 'Low confidence'
+  }
+
+  return (
+    <div className="mt-8 p-6 bg-white rounded-2xl border border-slate-200/80 shadow-sm">
+      <h2 className="text-lg font-semibold text-slate-900 mb-5 flex items-center gap-2">
+        <svg className="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        Results
+      </h2>
+      {regionNote && (
+        <p className="text-xs text-slate-600 mb-4 -mt-2 px-1 py-2 rounded-lg bg-sky-50 border border-sky-100">
+          {regionNote}
+        </p>
+      )}
+
+      {/* Main Result */}
+      <div className="rounded-xl p-5 mb-6 border border-slate-200 bg-slate-50/60">
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wide">
+              Top label
+            </h3>
+            <p className="text-2xl font-semibold text-slate-900 mt-1">
+              {prediction.disease}
+            </p>
+          </div>
+          <div className="text-right">
+            <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wide">
+              Confidence
+            </h3>
+            <p className="text-2xl font-semibold text-primary-700 mt-1 tabular-nums">
+              {Math.min(100, Math.max(0, toConfidencePercent(prediction.confidence))).toFixed(1)}%
+            </p>
+          </div>
+        </div>
+
+        {/* Status Badge */}
+        <div
+          className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-xl border font-semibold text-sm ${getStatusColor()}`}
+        >
+          {prediction.is_healthy ? (
+            <CheckCircle2 className="w-4 h-4" />
+          ) : (
+            <AlertTriangle className="w-4 h-4" />
+          )}
+          {getStatusText()}
+        </div>
+      </div>
+
+      {/* Not-in-catalog notice: model couldn't confidently match any known disease */}
+      {prediction.not_in_catalog && (
+        <div className="rounded-xl p-4 mb-6 border border-amber-200 bg-amber-50 text-amber-900">
+          <div className="flex items-start gap-2">
+            <AlertTriangle className="w-5 h-5 shrink-0 mt-0.5" />
+            <div>
+              <p className="font-semibold text-sm">This may not be a disease we detect</p>
+              <p className="text-sm mt-1 leading-snug">
+                {prediction.catalog_message ||
+                  "The image doesn't clearly match any disease in our catalog for this crop. The labels below are the closest guesses, shown for reference only — treat with caution and consider an agricultural expert."}
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* All Predictions */}
+      <div>
+        <h3 className="text-sm font-semibold text-slate-900 mb-3 flex items-center gap-2">
+          <svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+          </svg>
+          Other labels
+        </h3>
+        <div className="space-y-3">
+          {prediction.all_predictions.map((pred, index) => {
+            const pctRaw = toConfidencePercent(pred.confidence)
+            const pctClamped = Math.min(100, Math.max(0, pctRaw))
+            const pctOneDecimal = pctClamped.toFixed(1)
+            return (
+              <div
+                key={index}
+                className="bg-white rounded-xl border border-slate-200 p-4 transition-all duration-200 hover:border-primary-300 hover:bg-slate-50/50"
+              >
+                {/* Stacked on phones; row layout from md up */}
+                <div className="flex flex-col gap-3 md:flex-row md:items-center md:gap-4">
+                  <p className="min-w-0 flex-1 text-left text-sm font-medium leading-snug text-slate-900 md:text-base">
+                    {pred.disease}
+                  </p>
+                  <div className="flex w-full min-w-0 items-center gap-3 md:max-w-md md:flex-[1_1_40%]">
+                    <div className="min-h-2 min-w-0 flex-1 overflow-hidden rounded-full bg-slate-200">
+                      <div
+                        className="h-2 max-w-full rounded-full bg-gradient-to-r from-primary-600 to-blue-600 transition-all duration-500"
+                        style={{ width: `${pctClamped}%` }}
+                      />
+                    </div>
+                    <span className="min-w-[4.5rem] shrink-0 text-right text-sm font-semibold tabular-nums text-slate-700 md:text-base">
+                      {pctOneDecimal}%
+                    </span>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

components/StateSelector.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { MapPinned } from 'lucide-react'
+import { US_STATES } from '@/lib/stateDiseaseMap'
+
+interface StateSelectorProps {
+  selectedState: string
+  onStateChange: (code: string) => void
+}
+
+export default function StateSelector({ selectedState, onStateChange }: StateSelectorProps) {
+  return (
+    <div>
+      <label
+        htmlFor="state-select"
+        className="block text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2"
+      >
+        <MapPinned className="w-4 h-4 text-primary-700" />
+        State
+      </label>
+      <select
+        id="state-select"
+        value={selectedState}
+        onChange={(e) => onStateChange(e.target.value)}
+        className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-4 focus:ring-primary-200/60 focus:border-primary-400 text-base font-semibold bg-white shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer"
+      >
+        {US_STATES.map(({ code, name }) => (
+          <option key={code} value={code}>
+            {name} ({code})
+          </option>
+        ))}
+      </select>
+      <p className="text-xs text-slate-500 mt-1.5">
+        Regional filter applies when we have a disease list for this crop and state; otherwise all labels are shown.
+      </p>
+    </div>
+  )
+}

components/TipsAndGuidelines.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { useState } from 'react'
+import { Camera, ChevronDown, CheckCircle2, TriangleAlert } from 'lucide-react'
+
+export default function TipsAndGuidelines() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <div className="bg-white rounded-2xl border border-slate-200/80 p-4 sm:p-6 shadow-sm">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center justify-between w-full text-left group gap-4"
+      >
+        <h3 className="text-base font-semibold text-slate-900 flex items-center gap-2">
+          <span className="p-2 rounded-xl bg-primary-50 border border-primary-100">
+            <Camera className="w-4 h-4 text-primary-700" />
+          </span>
+          <span>Capture tips</span>
+        </h3>
+        <ChevronDown
+          className={`w-5 h-5 text-slate-600 transition-transform duration-200 group-hover:text-primary-700 ${isOpen ? 'rotate-180' : ''}`}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="mt-5 space-y-4 text-slate-700">
+          <div className="rounded-xl p-4 border border-slate-200 bg-slate-50/60">
+            <h4 className="font-semibold text-slate-900 mb-3 flex items-center gap-2">
+              <Camera className="w-4 h-4 text-primary-700" />
+              Image quality
+            </h4>
+            <ul className="space-y-2">
+              {['Use clear, well-lit photos', 'Ensure the leaf/disease area is in focus', 'Avoid blurry or dark images', 'Take photos in natural daylight when possible'].map((tip, i) => (
+                <li key={i} className="flex items-start gap-2">
+                  <CheckCircle2 className="w-4 h-4 text-primary-700 mt-0.5 flex-shrink-0" />
+                  <span>{tip}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="rounded-xl p-4 border border-slate-200 bg-slate-50/60">
+            <h4 className="font-semibold text-slate-900 mb-3 flex items-center gap-2">
+              <span className="inline-flex items-center justify-center w-6 h-6 rounded-lg bg-white border border-slate-200 text-xs font-bold text-slate-700">
+                2
+              </span>
+              What to capture
+            </h4>
+            <ul className="space-y-2">
+              {['Focus on the affected area of the plant', 'Include enough context (entire leaf or affected region)', 'Capture both sides of leaves if symptoms are visible', 'Avoid including too much background'].map((tip, i) => (
+                <li key={i} className="flex items-start gap-2">
+                  <CheckCircle2 className="w-4 h-4 text-primary-700 mt-0.5 flex-shrink-0" />
+                  <span>{tip}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="rounded-xl p-4 border border-slate-200 bg-slate-50/60">
+            <h4 className="font-semibold text-slate-900 mb-3 flex items-center gap-2">
+              <span className="inline-flex items-center justify-center w-6 h-6 rounded-lg bg-white border border-slate-200 text-xs font-bold text-slate-700">
+                3
+              </span>
+              Best practices
+            </h4>
+            <ul className="space-y-2">
+              {['Take multiple photos from different angles', 'Include healthy parts for comparison if possible', 'Note the crop type and growth stage', 'Check predictions match visual symptoms'].map((tip, i) => (
+                <li key={i} className="flex items-start gap-2">
+                  <CheckCircle2 className="w-4 h-4 text-primary-700 mt-0.5 flex-shrink-0" />
+                  <span>{tip}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="p-4 bg-amber-50 border border-amber-200 rounded-xl">
+            <div className="flex items-start gap-3">
+              <TriangleAlert className="w-5 h-5 text-amber-700 flex-shrink-0 mt-0.5" />
+              <p className="text-sm text-amber-900">
+                <span className="font-semibold">Reminder:</span> Predictions support field decisions—confirm with local agronomists or extension services before treatment.
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

components/USMap.tsx

@@ -0,0 +1,138 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { MapPin } from 'lucide-react'
+
+interface USMapProps {
+  onLocationClick: (lat: number, lng: number) => void
+  markers?: Array<{ lat: number; lng: number; label?: string }>
+}
+
+export default function USMap({ onLocationClick, markers = [] }: USMapProps) {
+  const mapRef = useRef<HTMLDivElement>(null)
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  const handleMapClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!mapRef.current) return
+
+    const rect = mapRef.current.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+
+    // US map bounds (approximate)
+    // Latitude: 24.396308 to 49.384358
+    // Longitude: -125.0 to -66.93457
+    const mapWidth = rect.width
+    const mapHeight = rect.height
+
+    // Convert pixel coordinates to lat/lng for US
+    const lng = -125 + (x / mapWidth) * 58 // -125 to -67
+    const lat = 49.38 - (y / mapHeight) * 25 // 49.38 to 24.39
+
+    // Clamp to US bounds
+    const clampedLat = Math.max(24.39, Math.min(49.38, lat))
+    const clampedLng = Math.max(-125, Math.min(-66.93, lng))
+
+    onLocationClick(clampedLat, clampedLng)
+  }
+
+  const projectPoint = (lat: number, lng: number, width: number, height: number) => {
+    const x = ((lng + 125) / 58) * width
+    const y = ((49.38 - lat) / 25) * height
+    return { x, y }
+  }
+
+  return (
+    <div className="w-full h-full relative bg-gradient-to-br from-blue-50 to-green-50 rounded-lg border-2 border-slate-300 overflow-hidden">
+      {/* US Map SVG */}
+      <div
+        ref={mapRef}
+        onClick={handleMapClick}
+        className="w-full h-full cursor-crosshair relative"
+        style={{ minHeight: '500px' }}
+      >
+        <svg
+          viewBox="0 0 1000 600"
+          className="w-full h-full"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          {/* Simplified US Map Outline */}
+          <path
+            d="M 100 200 L 150 180 L 200 190 L 250 200 L 300 210 L 350 220 L 400 230 L 450 240 L 500 250 L 550 260 L 600 270 L 650 280 L 700 290 L 750 300 L 800 310 L 850 320 L 900 330 L 950 340 L 900 380 L 850 400 L 800 420 L 750 440 L 700 460 L 650 480 L 600 500 L 550 520 L 500 540 L 450 550 L 400 560 L 350 570 L 300 580 L 250 580 L 200 570 L 150 550 L 100 520 L 80 480 L 70 440 L 65 400 L 70 360 L 80 320 L 90 280 L 95 240 Z"
+            fill="#e0f2fe"
+            stroke="#0284c7"
+            strokeWidth="2"
+          />
+          
+          {/* State boundaries (simplified) */}
+          <path
+            d="M 200 200 L 250 210 L 300 220 L 350 230 L 400 240 L 450 250 L 500 260 L 550 270 L 600 280 L 650 290 L 700 300 L 750 310 L 800 320 L 850 330 L 900 340 L 850 380 L 800 400 L 750 420 L 700 440 L 650 460 L 600 480 L 550 500 L 500 520 L 450 530 L 400 540 L 350 550 L 300 560 L 250 560 L 200 550 L 150 530 L 100 500 L 80 460 L 70 420 L 65 380 L 70 340 L 80 300 L 90 260 L 100 230 Z"
+            fill="none"
+            stroke="#94a3b8"
+            strokeWidth="1"
+            opacity="0.3"
+          />
+
+          {/* Markers */}
+          {isClient &&
+            markers.map((marker, i) => {
+              const { x, y } = projectPoint(
+                marker.lat,
+                marker.lng,
+                1000,
+                600
+              )
+              return (
+                <g key={i}>
+                  <circle
+                    cx={x}
+                    cy={y}
+                    r="6"
+                    fill="#ef4444"
+                    stroke="white"
+                    strokeWidth="2"
+                  />
+                  <circle
+                    cx={x}
+                    cy={y}
+                    r="6"
+                    fill="#ef4444"
+                    opacity="0.5"
+                  >
+                    <animate
+                      attributeName="r"
+                      from="6"
+                      to="16"
+                      dur="2s"
+                      begin="0s"
+                      repeatCount="indefinite"
+                    />
+                    <animate
+                      attributeName="opacity"
+                      from="0.5"
+                      to="0"
+                      dur="2s"
+                      begin="0s"
+                      repeatCount="indefinite"
+                    />
+                  </circle>
+                </g>
+              )
+            })}
+        </svg>
+
+        {/* Click instruction overlay */}
+        <div className="absolute bottom-4 left-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg z-10">
+          <p className="text-sm font-semibold flex items-center gap-2">
+            <MapPin className="w-4 h-4" />
+            Click on map to report outbreak
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

components/USOutbreakMap.tsx

@@ -0,0 +1,418 @@
+'use client'
+
+import { useState, useEffect, useRef, useCallback } from 'react'
+import dynamic from 'next/dynamic'
+import { MapPin, AlertTriangle, X, Save, Maximize2, Minimize2 } from 'lucide-react'
+import type { OutbreakReport } from '@/lib/outbreakReport'
+
+// Dynamically import Google Maps component to avoid SSR issues
+const GoogleMapComponent = dynamic(() => import('./GoogleMap'), {
+  ssr: false,
+  loading: () => (
+    <div className="flex h-full min-h-[280px] w-full items-center justify-center rounded-xl border-2 border-slate-300 bg-white sm:min-h-[400px]">
+      <div className="px-4 text-center">
+        <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-blue-600"></div>
+        <p className="text-sm font-semibold text-blue-600 sm:text-base">Loading Google Maps...</p>
+      </div>
+    </div>
+  ),
+})
+
+interface USOutbreakMapProps {
+  reports?: OutbreakReport[]
+  onReportSubmit?: (report: OutbreakReport) => void
+  /** Reporter status for new submissions from this browser */
+  reporterVerified: boolean
+}
+
+function triggerMapResize(map: google.maps.Map | null) {
+  if (!map || typeof google === 'undefined') return
+  window.setTimeout(() => {
+    google.maps.event.trigger(map, 'resize')
+  }, 120)
+}
+
+function getFullscreenElement(): Element | null {
+  const doc = document as Document & {
+    webkitFullscreenElement?: Element | null
+  }
+  return document.fullscreenElement ?? doc.webkitFullscreenElement ?? null
+}
+
+async function requestElementFullscreen(el: HTMLElement): Promise<boolean> {
+  const anyEl = el as HTMLElement & {
+    webkitRequestFullscreen?: () => void
+  }
+  try {
+    if (el.requestFullscreen) {
+      await el.requestFullscreen()
+      return true
+    }
+  } catch {
+    /* try webkit */
+  }
+  try {
+    if (anyEl.webkitRequestFullscreen) {
+      anyEl.webkitRequestFullscreen()
+      return true
+    }
+  } catch {
+    /* fall through */
+  }
+  return false
+}
+
+async function exitDocumentFullscreen(): Promise<void> {
+  const doc = document as Document & { webkitExitFullscreen?: () => void }
+  try {
+    if (document.fullscreenElement && document.exitFullscreen) {
+      await document.exitFullscreen()
+      return
+    }
+  } catch {
+    /* try webkit */
+  }
+  try {
+    if (doc.webkitExitFullscreen) {
+      doc.webkitExitFullscreen()
+    }
+  } catch {
+    /* ignore */
+  }
+}
+
+export default function USOutbreakMap({ reports = [], onReportSubmit, reporterVerified }: USOutbreakMapProps) {
+  const [selectedLocation, setSelectedLocation] = useState<{ lat: number; lng: number } | null>(null)
+  const [showReportForm, setShowReportForm] = useState(false)
+  const mapCardRef = useRef<HTMLDivElement>(null)
+  const mapInstanceRef = useRef<google.maps.Map | null>(null)
+  const [browserFullscreen, setBrowserFullscreen] = useState(false)
+  /** iOS / browsers without element fullscreen */
+  const [layoutFullscreen, setLayoutFullscreen] = useState(false)
+
+  const expanded = browserFullscreen || layoutFullscreen
+
+  const handleMapReady = useCallback((map: google.maps.Map) => {
+    mapInstanceRef.current = map
+  }, [])
+
+  useEffect(() => {
+    const syncFs = () => {
+      const fsEl = getFullscreenElement()
+      setBrowserFullscreen(fsEl === mapCardRef.current)
+    }
+    syncFs()
+    document.addEventListener('fullscreenchange', syncFs)
+    document.addEventListener('webkitfullscreenchange', syncFs)
+    return () => {
+      document.removeEventListener('fullscreenchange', syncFs)
+      document.removeEventListener('webkitfullscreenchange', syncFs)
+    }
+  }, [])
+
+  useEffect(() => {
+    triggerMapResize(mapInstanceRef.current)
+  }, [expanded])
+
+  useEffect(() => {
+    const onResize = () => triggerMapResize(mapInstanceRef.current)
+    window.addEventListener('orientationchange', onResize)
+    window.addEventListener('resize', onResize)
+    return () => {
+      window.removeEventListener('orientationchange', onResize)
+      window.removeEventListener('resize', onResize)
+    }
+  }, [])
+
+  const exitAllFullscreen = useCallback(async () => {
+    if (getFullscreenElement()) {
+      await exitDocumentFullscreen()
+    }
+    setLayoutFullscreen(false)
+  }, [])
+
+  const toggleFullscreen = useCallback(async () => {
+    const el = mapCardRef.current
+    if (!el) return
+
+    if (expanded) {
+      await exitAllFullscreen()
+      triggerMapResize(mapInstanceRef.current)
+      return
+    }
+
+    const enteredFs = await requestElementFullscreen(el)
+    if (enteredFs) {
+      triggerMapResize(mapInstanceRef.current)
+      return
+    }
+
+    setLayoutFullscreen(true)
+    triggerMapResize(mapInstanceRef.current)
+  }, [expanded, exitAllFullscreen])
+
+  useEffect(() => {
+    if (!layoutFullscreen && !browserFullscreen) return
+    const prev = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.body.style.overflow = prev
+    }
+  }, [layoutFullscreen, browserFullscreen])
+
+  useEffect(() => {
+    if (!expanded) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') void exitAllFullscreen()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [expanded, exitAllFullscreen])
+
+  useEffect(() => {
+    return () => {
+      document.body.style.removeProperty('overflow')
+      void exitDocumentFullscreen()
+    }
+  }, [])
+
+  // Ensure modal closes on mount/unmount to prevent stuck overlays
+  useEffect(() => {
+    return () => {
+      setShowReportForm(false)
+      setSelectedLocation(null)
+    }
+  }, [])
+
+  const [formData, setFormData] = useState({
+    crop: '',
+    disease: '',
+    severity: 'medium' as 'low' | 'medium' | 'high',
+    description: '',
+  })
+
+  const handleMapClick = (lat: number, lng: number) => {
+    // Restrict to US bounds
+    const clampedLat = Math.max(24.39, Math.min(49.38, lat))
+    const clampedLng = Math.max(-125, Math.min(-66.93, lng))
+    
+    setSelectedLocation({ lat: clampedLat, lng: clampedLng })
+    setShowReportForm(true)
+  }
+
+  const handleSubmitReport = () => {
+    if (!selectedLocation || !formData.crop || !formData.disease) {
+      alert('Please fill in all required fields')
+      return
+    }
+
+    const newReport: OutbreakReport = {
+      id: Date.now().toString(),
+      lat: selectedLocation.lat,
+      lng: selectedLocation.lng,
+      crop: formData.crop,
+      disease: formData.disease,
+      severity: formData.severity,
+      date: new Date().toISOString(),
+      description: formData.description,
+      reporterVerified,
+    }
+
+    if (onReportSubmit) {
+      onReportSubmit(newReport)
+    }
+
+    setShowReportForm(false)
+    setSelectedLocation(null)
+    setFormData({
+      crop: '',
+      disease: '',
+      severity: 'medium',
+      description: '',
+    })
+  }
+
+  return (
+    <div className="relative w-full">
+      {/* Map card: explicit height so the map fills the area (no aspect-ratio gap) */}
+      <div
+        ref={mapCardRef}
+        className={`flex w-full flex-col overflow-hidden rounded-xl border-2 border-slate-300 bg-white shadow-lg ${
+          layoutFullscreen
+            ? 'fixed inset-0 z-[5000] h-[100dvh] max-h-[100dvh] min-h-0 w-full max-w-none rounded-none border-slate-300 pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]'
+            : ''
+        } ${expanded ? 'h-full min-h-0' : ''}`}
+      >
+        <div
+          className={`relative flex w-full min-h-0 flex-col ${
+            expanded ? 'h-full min-h-0 flex-1' : ''
+          }`}
+        >
+          <div
+            className={`relative min-h-0 w-full overflow-hidden ${
+              expanded
+                ? 'min-h-0 flex-1'
+                : 'h-[min(52dvh,560px)] min-h-[280px] sm:min-h-[420px]'
+            }`}
+          >
+            <GoogleMapComponent
+              reports={reports}
+              onMapClick={handleMapClick}
+              center={{ lat: 39.8283, lng: -98.5795 }}
+              zoom={4}
+              showMapClickHint={false}
+              fullscreenControl
+              onMapReady={handleMapReady}
+            />
+
+            <div className="pointer-events-auto absolute right-2 top-2 z-[1001] flex gap-1 sm:right-3 sm:top-3">
+              <button
+                type="button"
+                onClick={() => void toggleFullscreen()}
+                className="touch-manipulation rounded-lg border border-slate-200 bg-white/95 px-2.5 py-2 text-slate-800 shadow-md backdrop-blur-sm transition hover:bg-white sm:px-3"
+                aria-label={expanded ? 'Exit fullscreen map' : 'Fullscreen map'}
+                title={expanded ? 'Exit fullscreen' : 'Fullscreen'}
+              >
+                {expanded ? (
+                  <Minimize2 className="h-5 w-5 sm:h-5 sm:w-5" />
+                ) : (
+                  <Maximize2 className="h-5 w-5 sm:h-5 sm:w-5" />
+                )}
+              </button>
+            </div>
+
+            {selectedLocation && !showReportForm && (
+              <div className="pointer-events-none absolute left-2 top-12 z-[1000] max-w-[calc(100%-4rem)] rounded-lg border-2 border-blue-200 bg-white p-2 shadow-xl sm:left-3 sm:top-14 sm:p-3">
+                <p className="mb-0.5 text-[11px] font-bold text-slate-900 sm:text-xs">📍 Selected</p>
+                <p className="break-all font-mono text-[10px] text-slate-600 sm:text-xs">
+                  {selectedLocation.lat.toFixed(4)}, {selectedLocation.lng.toFixed(4)}
+                </p>
+              </div>
+            )}
+          </div>
+
+          <div className="flex shrink-0 items-center gap-2 border-t border-slate-200 bg-slate-50 px-3 py-2.5 sm:px-4 sm:py-3">
+            <MapPin className="h-4 w-4 shrink-0 text-blue-700" />
+            <p className="text-xs font-semibold leading-snug text-slate-800 sm:text-sm">
+              Tap or click the map to report an outbreak
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Report Form Modal — no AnimatePresence exit on full-screen layer (opacity-0 still captures clicks). */}
+      {showReportForm && (
+        <div className="fixed inset-0 z-[6000] flex items-end justify-center sm:items-center sm:p-4">
+          <div
+            role="presentation"
+            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+            onClick={() => {
+              setShowReportForm(false)
+              setSelectedLocation(null)
+            }}
+          />
+          <div
+            onClick={(e) => e.stopPropagation()}
+            className="relative z-10 max-h-[90dvh] w-full max-w-md overflow-y-auto overscroll-contain rounded-t-2xl border border-slate-200 bg-white p-5 pb-[max(1.25rem,env(safe-area-inset-bottom))] shadow-2xl sm:rounded-2xl sm:p-6 sm:pb-6"
+          >
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-2xl font-bold text-slate-900 flex items-center gap-3">
+                  <div className="p-2 bg-orange-100 rounded-lg">
+                    <AlertTriangle className="w-6 h-6 text-orange-600" />
+                  </div>
+                  Report Outbreak
+                </h2>
+                <button
+                  onClick={() => {
+                    setShowReportForm(false)
+                    setSelectedLocation(null)
+                  }}
+                  className="text-slate-400 hover:text-slate-600 transition-colors p-1 hover:bg-slate-100 rounded-lg"
+                >
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+
+              {selectedLocation && (
+                <div className="mb-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
+                  <p className="text-xs text-blue-700 font-semibold mb-1">Location</p>
+                  <p className="text-sm text-blue-900 font-mono">
+                    {selectedLocation.lat.toFixed(4)}, {selectedLocation.lng.toFixed(4)}
+                  </p>
+                </div>
+              )}
+
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-semibold text-slate-700 mb-2">
+                    Crop Type <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.crop}
+                    onChange={(e) => setFormData({ ...formData, crop: e.target.value })}
+                    placeholder="e.g., Corn, Wheat, Rice"
+                    className="w-full px-4 py-2.5 border-2 border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-semibold text-slate-700 mb-2">
+                    Disease Name <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.disease}
+                    onChange={(e) => setFormData({ ...formData, disease: e.target.value })}
+                    placeholder="e.g., Rust, Blight, Mosaic"
+                    className="w-full px-4 py-2.5 border-2 border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-semibold text-slate-700 mb-2">
+                    Severity <span className="text-red-500">*</span>
+                  </label>
+                  <select
+                    value={formData.severity}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        severity: e.target.value as 'low' | 'medium' | 'high',
+                      })
+                    }
+                    className="w-full px-4 py-2.5 border-2 border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all bg-white"
+                  >
+                    <option value="low">🟡 Low</option>
+                    <option value="medium">🟠 Medium</option>
+                    <option value="high">🔴 High</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-semibold text-slate-700 mb-2">
+                    Description
+                  </label>
+                  <textarea
+                    value={formData.description}
+                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                    placeholder="Additional details about the outbreak..."
+                    rows={3}
+                    className="w-full px-4 py-2.5 border-2 border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all resize-none"
+                  />
+                </div>
+
+                <button
+                  onClick={handleSubmitReport}
+                  className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-3 px-6 rounded-lg transition-all flex items-center justify-center gap-2 shadow-lg hover:shadow-xl transform hover:scale-[1.02]"
+                >
+                  <Save className="w-5 h-5" />
+                  Submit Report
+                </button>
+              </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

components/ui/theme-provider.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

components/ui/world-map.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import { useRef } from "react";
+import { motion } from "framer-motion";
+import DottedMap from "dotted-map";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+
+interface MapProps {
+  dots?: Array<{
+    start: { lat: number; lng: number; label?: string };
+    end: { lat: number; lng: number; label?: string };
+  }>;
+  lineColor?: string;
+}
+
+export function WorldMap({
+  dots = [],
+  lineColor = "#0ea5e9",
+}: MapProps) {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const map = new DottedMap({ height: 100, grid: "diagonal" });
+
+  const { theme } = useTheme();
+
+  const svgMap = map.getSVG({
+    radius: 0.22,
+    color: theme === "dark" ? "#FFFFFF40" : "#00000040",
+    shape: "circle",
+    backgroundColor: theme === "dark" ? "black" : "white",
+  });
+
+  const projectPoint = (lat: number, lng: number) => {
+    const x = (lng + 180) * (800 / 360);
+    const y = (90 - lat) * (400 / 180);
+    return { x, y };
+  };
+
+  const createCurvedPath = (
+    start: { x: number; y: number },
+    end: { x: number; y: number }
+  ) => {
+    const midX = (start.x + end.x) / 2;
+    const midY = Math.min(start.y, end.y) - 50;
+    return `M ${start.x} ${start.y} Q ${midX} ${midY} ${end.x} ${end.y}`;
+  };
+
+  return (
+    <div className="w-full aspect-[2/1] dark:bg-black bg-white rounded-lg  relative font-sans">
+      <Image
+        src={`data:image/svg+xml;utf8,${encodeURIComponent(svgMap)}`}
+        className="h-full w-full [mask-image:linear-gradient(to_bottom,transparent,white_10%,white_90%,transparent)] pointer-events-none select-none"
+        alt="world map"
+        height="495"
+        width="1056"
+        draggable={false}
+      />
+      <svg
+        ref={svgRef}
+        viewBox="0 0 800 400"
+        className="w-full h-full absolute inset-0 pointer-events-none select-none"
+      >
+        {dots.map((dot, i) => {
+          const startPoint = projectPoint(dot.start.lat, dot.start.lng);
+          const endPoint = projectPoint(dot.end.lat, dot.end.lng);
+          return (
+            <g key={`path-group-${i}`}>
+              <motion.path
+                d={createCurvedPath(startPoint, endPoint)}
+                fill="none"
+                stroke="url(#path-gradient)"
+                strokeWidth="1"
+                initial={{
+                  pathLength: 0,
+                }}
+                animate={{
+                  pathLength: 1,
+                }}
+                transition={{
+                  duration: 1,
+                  delay: 0.5 * i,
+                  ease: "easeOut",
+                }}
+                key={`start-upper-${i}`}
+              ></motion.path>
+            </g>
+          );
+        })}
+
+        <defs>
+          <linearGradient id="path-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="white" stopOpacity="0" />
+            <stop offset="5%" stopColor={lineColor} stopOpacity="1" />
+            <stop offset="95%" stopColor={lineColor} stopOpacity="1" />
+            <stop offset="100%" stopColor="white" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+
+        {dots.map((dot, i) => (
+          <g key={`points-group-${i}`}>
+            <g key={`start-${i}`}>
+              <circle
+                cx={projectPoint(dot.start.lat, dot.start.lng).x}
+                cy={projectPoint(dot.start.lat, dot.start.lng).y}
+                r="2"
+                fill={lineColor}
+              />
+              <circle
+                cx={projectPoint(dot.start.lat, dot.start.lng).x}
+                cy={projectPoint(dot.start.lat, dot.start.lng).y}
+                r="2"
+                fill={lineColor}
+                opacity="0.5"
+              >
+                <animate
+                  attributeName="r"
+                  from="2"
+                  to="8"
+                  dur="1.5s"
+                  begin="0s"
+                  repeatCount="indefinite"
+                />
+                <animate
+                  attributeName="opacity"
+                  from="0.5"
+                  to="0"
+                  dur="1.5s"
+                  begin="0s"
+                  repeatCount="indefinite"
+                />
+              </circle>
+            </g>
+            <g key={`end-${i}`}>
+              <circle
+                cx={projectPoint(dot.end.lat, dot.end.lng).x}
+                cy={projectPoint(dot.end.lat, dot.end.lng).y}
+                r="2"
+                fill={lineColor}
+              />
+              <circle
+                cx={projectPoint(dot.end.lat, dot.end.lng).x}
+                cy={projectPoint(dot.end.lat, dot.end.lng).y}
+                r="2"
+                fill={lineColor}
+                opacity="0.5"
+              >
+                <animate
+                  attributeName="r"
+                  from="2"
+                  to="8"
+                  dur="1.5s"
+                  begin="0s"
+                  repeatCount="indefinite"
+                />
+                <animate
+                  attributeName="opacity"
+                  from="0.5"
+                  to="0"
+                  dur="1.5s"
+                  begin="0s"
+                  repeatCount="indefinite"
+                />
+              </circle>
+            </g>
+          </g>
+        ))}
+      </svg>
+    </div>
+  );
+}

cropintel_model_metrics_overall.csv

@@ -0,0 +1,5 @@
+crop,version,accuracy,precision,recall,f1_score
+corn,v1_20260118_144945,0.9476190476190476,0.9472791410761335,0.9476190476190476,0.9473238418683883
+rice,v1_20260118_161225,0.9922480620155039,0.9923664191106051,0.9922480620155039,0.9922153632970051
+soybean,v1_20260118_225345,0.9661016949152542,0.9693502824858756,0.9661016949152542,0.9613091759205145
+wheat,v1_20260118_234239,0.9293893129770993,0.9321654830534337,0.9293893129770993,0.9291718787641892

cropintel_model_metrics_per_class.csv

@@ -0,0 +1,22 @@
+crop,version,class_name,support,precision,recall,f1_score
+corn,v1_20260118_144945,Blight,115,0.9145299145299145,0.9304347826086956,0.9224137931034483
+corn,v1_20260118_144945,Common Rust,131,0.9624060150375939,0.9770992366412213,0.9696969696969697
+corn,v1_20260118_144945,Gray Leaf Spot,57,0.8703703703703703,0.8245614035087719,0.8468468468468469
+corn,v1_20260118_144945,Healthy,117,1.0,0.9914529914529915,0.9957081545064378
+rice,v1_20260118_161225,Bacterial Leaf Blight,64,0.9846153846153847,1.0,0.9922480620155039
+rice,v1_20260118_161225,Brown Spot,65,0.9848484848484849,1.0,0.9923664122137404
+rice,v1_20260118_161225,Healthy,66,1.0,1.0,1.0
+rice,v1_20260118_161225,Rice Blast,63,1.0,0.9682539682539683,0.9838709677419355
+soybean,v1_20260118_225345,D Mossaic Virus,2,1.0,0.5,0.6666666666666666
+soybean,v1_20260118_225345,D septoria,2,1.0,0.5,0.6666666666666666
+soybean,v1_20260118_225345,Southern blight,7,0.875,1.0,0.9333333333333333
+soybean,v1_20260118_225345,Sudden Death Syndrone,11,1.0,1.0,1.0
+soybean,v1_20260118_225345,Yellow Mosaic,11,1.0,1.0,1.0
+soybean,v1_20260118_225345,bacterial_blight,5,1.0,1.0,1.0
+soybean,v1_20260118_225345,ferrugen,7,1.0,1.0,1.0
+soybean,v1_20260118_225345,powdery_mildew,14,0.9333333333333333,1.0,0.9655172413793104
+wheat,v1_20260118_234239,Healthy,100,0.9433962264150944,1.0,0.970873786407767
+wheat,v1_20260118_234239,Leaf Rust,127,0.9272727272727272,0.8031496062992126,0.8607594936708861
+wheat,v1_20260118_234239,Powdery Mildew,108,0.981651376146789,0.9907407407407407,0.9861751152073732
+wheat,v1_20260118_234239,Stem Rust,58,0.7121212121212122,0.8103448275862069,0.7580645161290323
+wheat,v1_20260118_234239,Stripe (Yellow) Rust,131,0.9849624060150376,1.0,0.9924242424242424

docker-compose.ml.yml

@@ -0,0 +1,28 @@
+# CropIntel ML stack: reproducible Python + TensorFlow without touching host Python.
+# Data and trained weights live in mounted volumes (still gitignored on the host).
+#
+# Quick smoke test (no Kaggle):
+#   docker compose -f docker-compose.ml.yml build
+#   docker compose -f docker-compose.ml.yml run --rm ml \
+#     python -m ml.scripts.create_synthetic_dataset --crop corn --force
+#   docker compose -f docker-compose.ml.yml run --rm ml \
+#     python -m ml.training.train_crop --crop corn --epochs 2 --no-fine-tune
+#
+# With Kaggle (mount token; dataset terms must be accepted on the website):
+#   docker compose -f docker-compose.ml.yml run --rm -v "$HOME/.kaggle:/root/.kaggle:ro" ml \
+#     python -m ml.scripts.download_datasets
+
+services:
+  ml:
+    build:
+      context: .
+      dockerfile: Dockerfile.ml
+    image: cropintel-ml:local
+    working_dir: /app
+    environment:
+      PYTHONPATH: /app
+    volumes:
+      - ./ml/data:/app/ml/data
+      - ./ml/models:/app/ml/models
+      # Optional Kaggle token (only if downloading inside Docker):
+      #   docker compose -f docker-compose.ml.yml run --rm -v ~/.kaggle:/root/.kaggle:ro ml ...

docker-compose.prod.yml

@@ -0,0 +1,42 @@
+# CropIntel production stack (single VPS).
+#
+# Differences from docker-compose.yml (dev):
+#   - no repo bind-mount: the image is the artifact (next build baked in)
+#   - supervisord runs both the Next.js server and the Python inference service
+#   - restart policy, healthcheck, and log rotation for unattended operation
+#
+# Usage:
+#   export CROPINTEL_MODELS_URL='https://github.com/rakshithj09/CropIntel/releases/download/v1/cropintel-models-mobile.zip'
+#   docker compose -f docker-compose.prod.yml up -d --build
+#
+# See docs/DEPLOYMENT.md for the full runbook (reverse proxy, backups, promotion).
+
+services:
+  app:
+    build:
+      context: .
+      args:
+        # NEXT_PUBLIC_* is inlined at build time, so the outbreak map needs the
+        # key baked into the image — not just present in `environment` at runtime.
+        - NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=${NEXT_PUBLIC_GOOGLE_MAPS_API_KEY:-}
+    ports:
+      - "3050:3050"
+    environment:
+      - CROPINTEL_MODELS_URL=${CROPINTEL_MODELS_URL:-https://github.com/rakshithj09/CropIntel/releases/download/v1/cropintel-models-mobile.zip}
+      - NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=${NEXT_PUBLIC_GOOGLE_MAPS_API_KEY:-}
+      - CROPINTEL_ADMIN_TOKEN=${CROPINTEL_ADMIN_TOKEN:-}
+    volumes:
+      - ./ml/models:/app/ml/models
+      - ./data:/app/data
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-fsS", "http://localhost:3050/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 90s
+    logging:
+      driver: json-file
+      options:
+        max-size: "20m"
+        max-file: "5"

docker-compose.yml

@@ -0,0 +1,22 @@
+# CropIntel local stack — no Kaggle if you set CROPINTEL_MODELS_URL to a .zip of ml/models/
+#
+# Usage:
+#   export CROPINTEL_MODELS_URL='https://github.com/ORG/REPO/releases/download/v1/cropintel-models.zip'
+#   docker compose up --build
+#
+# Or bind-mount models you already have on the host:
+#   docker compose run --rm -v ./ml/models:/app/ml/models app npm run dev
+
+services:
+  app:
+    build: .
+    ports:
+      - "3050:3050"
+    environment:
+      - CROPINTEL_MODELS_URL=${CROPINTEL_MODELS_URL:-}
+      - NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=${NEXT_PUBLIC_GOOGLE_MAPS_API_KEY:-}
+    volumes:
+      - ./ml/models:/app/ml/models
+      - ./:/app
+      - /app/node_modules
+      - /app/.next

docker/entrypoint.sh

@@ -0,0 +1,17 @@
+#!/bin/sh
+set -e
+cd /app
+
+if [ -n "${CROPINTEL_MODELS_URL}" ]; then
+  if [ ! -f ml/models/.cropintel-fetch-ok ]; then
+    echo "Fetching pre-built models from CROPINTEL_MODELS_URL…"
+    python3 -m ml.scripts.fetch_models --url "${CROPINTEL_MODELS_URL}"
+    touch ml/models/.cropintel-fetch-ok
+  else
+    echo "Models already present (ml/models/.cropintel-fetch-ok); skip fetch."
+  fi
+else
+  echo "Note: CROPINTEL_MODELS_URL not set. Place models under ml/models/ or predictions will fail."
+fi
+
+exec "$@"

docker/supervisord.conf

@@ -0,0 +1,29 @@
+[supervisord]
+nodaemon=true
+logfile=/dev/null
+logfile_maxbytes=0
+pidfile=/tmp/supervisord.pid
+
+[program:inference]
+command=python3 -m uvicorn ml.serve.inference_app:app --host %(ENV_INFERENCE_BIND_HOST)s --port 8000
+directory=/app
+autorestart=true
+startretries=10
+stopsignal=TERM
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stderr
+stderr_logfile_maxbytes=0
+environment=CROPINTEL_BACKEND="tflite",CROPINTEL_PREDICTION_LOG="/app/data/predictions.jsonl"
+
+[program:web]
+command=node node_modules/.bin/next start -H 0.0.0.0 -p 3050
+directory=/app
+autorestart=true
+startretries=10
+stopsignal=TERM
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stderr
+stderr_logfile_maxbytes=0
+environment=NODE_ENV="production",INFERENCE_URL="http://127.0.0.1:8000"

docs/CURSOR_AND_COLLABORATORS.md

@@ -0,0 +1,5 @@
+# Notes for Cursor / new contributors
+
+- **Kaggle is optional.** Cloning the repo does not include `ml/models/` (gitignored). Without models, `/api/predict` fails.
+- **Fix:** Set `CROPINTEL_MODELS_URL` to a direct HTTPS link to a `.zip` built from `ml/models/` (see `python3 -m ml.scripts.package_models`), then run `python3 -m ml.scripts.fetch_models`, or use **Docker Compose** with that env var (see root `README.md`).
+- **Training / accuracy:** Reproducing paper-style metrics requires downloading Kaggle datasets per `ml/scripts/download_datasets.py` and training locally; that path is separate from “run the app.”

docs/DEPLOYMENT.md

@@ -0,0 +1,156 @@
+# CropIntel Production Deployment (single VPS)
+
+One Docker container runs both the Next.js web app and the Python inference
+service (supervisord manages the two processes). Models are fetched once at
+container start from a release zip. Right-sized for a single server — no
+Kubernetes, no Redis, no external model registry.
+
+## Architecture
+
+```
+internet ── Caddy (TLS, :443) ── Next.js (:3050, public)
+                                    │  POST /api/predict  ──►  FastAPI inference
+                                    │  GET  /api/health   ──►  service (127.0.0.1:8000,
+                                    │                          never exposed)
+                                    └─ models: ml/models/<crop>/<version>/model.tflite
+                                       audit log: data/predictions.jsonl
+```
+
+- `app/api/predict/route.ts` validates + rate-limits, then forwards the upload
+  to the inference service (`ml/serve/inference_app.py`), which keeps all crop
+  models loaded in memory (TFLite, ~9 MB per crop).
+- `GET /api/health` aggregates web liveness + per-crop model readiness — point
+  the compose healthcheck and your uptime monitor at it.
+
+## Prerequisites
+
+- VPS with 2 vCPU / 4 GB RAM (TFLite backend; Keras would need ~4× more)
+- Docker + compose plugin
+- A domain pointed at the VPS (for TLS)
+
+## First deploy
+
+```bash
+git clone <repo> /opt/cropintel && cd /opt/cropintel
+
+# .env — models bundle + optional secrets
+cat > .env <<'EOF'
+CROPINTEL_MODELS_URL=https://github.com/rakshithj09/CropIntel/releases/download/v1/cropintel-models-mobile.zip
+NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=...
+CROPINTEL_ADMIN_TOKEN=<random string>   # protects POST /admin/reload
+EOF
+
+docker compose -f docker-compose.prod.yml up -d --build
+curl -fsS http://localhost:3050/api/health   # expect {"web":"ok","inference":{"ready":true,...}}
+```
+
+The models zip is produced by:
+```bash
+python -m ml.scripts.package_models --tflite-only -o cropintel-models-mobile.zip
+```
+and uploaded to a GitHub Release (or any direct-download URL).
+
+### Reverse proxy (TLS)
+
+Caddy on the host is the simplest option:
+
+```
+# /etc/caddy/Caddyfile
+yourdomain.example {
+    reverse_proxy 127.0.0.1:3050
+}
+```
+
+Caddy sets `X-Forwarded-For` automatically. The in-memory rate limiter keys on
+the client IP — behind any proxy that does NOT set `X-Forwarded-For`, all
+clients share one bucket. Verify your proxy sets it.
+
+## Updating
+
+| What changed | Do |
+|---|---|
+| Code | `git pull && docker compose -f docker-compose.prod.yml up -d --build` |
+| Models (new bundle) | update `CROPINTEL_MODELS_URL`, then `rm ml/models/.cropintel-fetch-ok && docker compose -f docker-compose.prod.yml restart` |
+| Models (promote a version already on disk) | see below |
+
+**Gotcha:** `ml/models/.cropintel-fetch-ok` is a sentinel that suppresses
+re-downloading the models bundle on every container start. A new bundle URL is
+silently ignored until you delete this file.
+
+## Model promotion / rollback
+
+Versions live in `ml/models/<crop>/v1_YYYYMMDD_HHMMSS/`. The serving version is
+pinned by `ml/models/<crop>/production.json`; without it, the latest complete
+version serves (legacy behavior).
+
+```bash
+# status of every crop (serving version, test + external accuracy)
+python -m ml.scripts.promote_model --status
+
+# promote (gated on metrics.json accuracy + a passing external_eval.json)
+python -m ml.scripts.promote_model --crop rice --version v1_20260612_103000
+
+# instant rollback to the previous pointer
+python -m ml.scripts.promote_model --crop rice --rollback
+
+# apply without restarting the container
+curl -X POST -H "X-Admin-Token: $CROPINTEL_ADMIN_TOKEN" localhost:8000/admin/reload
+```
+
+The promotion gate requires an external evaluation (out-of-training-distribution
+images), produced with:
+
+```bash
+python -m ml.scripts.test_external --crop rice --path ml/field_test/rice --save-json
+```
+
+Never promote on in-dataset test accuracy alone — the rice and soybean models
+both scored 100% in-dataset while failing badly on external images (shortcut
+learning). The honest number is external accuracy.
+
+## Monitoring & logs
+
+- **Uptime**: point an external pinger (UptimeRobot / healthchecks.io free tier)
+  at `https://yourdomain.example/api/health` every minute. An on-box monitor
+  cannot alert you when the box itself dies.
+- **Process restarts**: `restart: unless-stopped` + supervisord auto-restart
+  handle crashes; the compose healthcheck flags a wedged container.
+- **Process logs**: `docker compose -f docker-compose.prod.yml logs -f`
+  (json-file driver rotates at 20 MB × 5 files).
+- **Prediction audit log**: `data/predictions.jsonl` — one line per request
+  (crop, model version, disease, confidence, entropy, verification status,
+  image quality, latency, image sha256; no image bytes). Use it for drift
+  analysis: a rising `not_in_catalog`/`unknown` rate for a crop means the field
+  distribution is moving away from training.
+
+  Rotate it with host logrotate — `/etc/logrotate.d/cropintel`:
+  ```
+  /opt/cropintel/data/predictions.jsonl {
+      size 50M
+      rotate 10
+      copytruncate
+      compress
+      missingok
+  }
+  ```
+
+## Backups
+
+```bash
+# nightly at 03:00 — models + pointers + audit log, keep 7
+0 3 * * * /opt/cropintel/scripts/ops/backup.sh /opt/cropintel /var/backups/cropintel
+```
+
+Models are also re-fetchable from the release zip, so this is cheap insurance,
+not a disaster-recovery plan. Add an `rclone copy` of `/var/backups/cropintel`
+to object storage if you want offsite copies.
+
+## Troubleshooting
+
+| Symptom | Check |
+|---|---|
+| `/api/health` 503 | `curl localhost:8000/readyz` inside the container — shows per-crop load errors |
+| "Model not ready" for one crop | that crop has no complete version dir; fetch models or train |
+| Predictions slow / queueing | the service is single-worker by design (TFLite interpreters are not thread-safe); sustained load beyond ~10 req/s needs a second look |
+| New models bundle ignored | delete `ml/models/.cropintel-fetch-ok` and restart |
+| Rate limiting all users together | proxy not setting `X-Forwarded-For` |