Add feature-rich Gradio UI with mock model

- Implemented all core UI requirements
- Added 7 advanced features for extra marks
- Created comprehensive documentation
- Includes mock model for parallel development

README.md

@@ -1 +1,372 @@
-Small Group Project
+# Plant Disease Detection - UI and Deployment
+
+This directory contains the Gradio-based user interface and deployment code for the Plant Disease Detection project.
+
+## Team Information
+
+**Team Number:** [Add your team number]
+
+**Team Members:**
+- [Add team member names here]
+
+## Links
+
+- **GitHub Repository:** https://github.kcl.ac.uk/K23064919/smallGroupProject
+- **Deployed App:** [Add Hugging Face Spaces URL here]
+- **Trained Model:** [Add model download link or ClearML model ID here]
+
+## Project Structure
+
+```
+plant-disease-ui/
+├── ui/
+│   ├── app.py              # Main Gradio application
+│   ├── config.py           # Configuration (class names, paths, etc.)
+│   ├── model_loader.py     # Model loading utilities
+│   ├── utils.py            # Utility functions (preprocessing, etc.)
+│   └── examples/           # Example images for gallery
+├── models/
+│   ├── mock_model.py       # Mock model for development
+│   └── best_model.pth      # (To be added) Trained model weights
+├── docs/
+│   └── deployment_guide.md # Deployment instructions
+├── requirements.txt        # Python dependencies
+└── README.md              # This file
+```
+
+## Features
+
+### Core Features
+- ✅ **Image Upload:** Upload plant leaf images for disease detection
+- ✅ **Top-K Predictions:** Display top 10 predictions with confidence scores
+- ✅ **Formatted Output:** Clean, readable prediction results
+
+### Advanced Features
+- ✅ **Multiple Models:** Switch between different trained models (CNN, Transfer Learning)
+- ✅ **Example Gallery:** Pre-loaded example images for quick testing
+- ✅ **Batch Processing:** Upload and classify multiple images at once
+- ✅ **Flag Predictions:** Report incorrect predictions
+- ✅ **Confidence Threshold:** Filter predictions by minimum confidence level
+- ✅ **Detailed Information:** View plant type, disease name, and health status
+
+## Setup Instructions
+
+### 1. Install Dependencies
+
+```bash
+# Create a virtual environment (recommended)
+python -m venv venv
+source venv/bin/activate  # On Windows: venv\Scripts\activate
+
+# Install required packages
+pip install -r requirements.txt
+```
+
+### 2. Add Example Images (Optional)
+
+To enable the example gallery feature:
+
+```bash
+# Create examples directory
+mkdir -p ui/examples
+
+# Add plant disease images to ui/examples/
+# You can download sample images from the PlantVillage dataset
+```
+
+To download example images programmatically:
+
+```python
+from datasets import load_dataset
+
+# Load PlantVillage dataset
+dataset = load_dataset("EdBianchi/plant-village")
+
+# Save some example images
+import os
+os.makedirs("ui/examples", exist_ok=True)
+
+for i in range(10):  # Save 10 examples
+    img = dataset['train'][i * 1000]['image']  # Sample every 1000th image
+    img.save(f"ui/examples/example_{i}.jpg")
+```
+
+### 3. Run the App Locally
+
+**Option A: Using Mock Model (for development)**
+
+```bash
+cd ui
+python app.py
+```
+
+The app will start at `http://localhost:7860`
+
+**Option B: Using Your Trained Model**
+
+First, modify `app.py` to load your real model:
+
+```python
+# In app.py, change the last line:
+demo = create_interface(use_mock=False)  # Change to False
+```
+
+Then run:
+
+```bash
+cd ui
+python app.py
+```
+
+### 4. Configure for Real Model
+
+When your team's model is ready, you have several options:
+
+#### Option 1: Load from Local File
+
+```python
+# In model_loader.py, update the model path
+MODEL_PATH = "models/best_model.pth"
+
+# Then in app.py:
+app = PlantDiseaseApp(use_mock=False)
+```
+
+#### Option 2: Load from ClearML
+
+```python
+# In app.py or model_loader.py:
+loader = ModelLoader(use_mock=False)
+model = loader.load_from_clearml(
+    project_name="Plant Disease Detection",
+    task_name="CNN Training"
+)
+```
+
+#### Option 3: Load from Hugging Face Hub
+
+```python
+# First, upload your model to HF Hub
+# Then in model_loader.py:
+loader = ModelLoader(use_mock=False)
+model = loader.load_from_huggingface("your-username/plant-disease-model")
+```
+
+## Deployment to Hugging Face Spaces
+
+### Step 1: Create a Hugging Face Account
+
+1. Go to https://huggingface.co/ and create an account
+2. Verify your email address
+
+### Step 2: Create a New Space
+
+1. Click on your profile → "New Space"
+2. Space name: `plant-disease-detection`
+3. License: Apache 2.0
+4. Select SDK: **Gradio**
+5. Make it **Public**
+6. Click "Create Space"
+
+### Step 3: Prepare Files for Deployment
+
+Create these files in the root of your Space:
+
+**app.py** (Simplified version for HF Spaces)
+```python
+# Copy ui/app.py and modify the imports to work in the flat structure
+```
+
+**requirements.txt**
+```
+torch
+torchvision
+gradio
+Pillow
+numpy
+huggingface-hub
+```
+
+**README.md** (for the Space)
+```markdown
+---
+title: Plant Disease Detection
+emoji: 🌱
+colorFrom: green
+colorTo: blue
+sdk: gradio
+sdk_version: 4.0.0
+app_file: app.py
+pinned: false
+---
+
+# Plant Disease Detection
+
+AI-powered plant disease detection from leaf images.
+Developed by [Your Team Name] for King's College London.
+```
+
+### Step 4: Upload Your Model
+
+**Option A: Upload weights to the Space**
+
+1. Upload your `best_model.pth` to the Space
+2. Modify `app.py` to load from this file
+
+**Option B: Use Hugging Face Hub**
+
+1. Upload model to HF Model Hub:
+```python
+from huggingface_hub import HfApi
+
+api = HfApi()
+api.upload_file(
+    path_or_fileobj="models/best_model.pth",
+    path_in_repo="model.pth",
+    repo_id="your-username/plant-disease-model",
+    repo_type="model"
+)
+```
+
+2. Load in app:
+```python
+from huggingface_hub import hf_hub_download
+model_path = hf_hub_download(
+    repo_id="your-username/plant-disease-model",
+    filename="model.pth"
+)
+```
+
+**Option C: Fetch from ClearML**
+
+1. Add ClearML credentials to Space Secrets
+2. Use the `load_from_clearml()` function
+
+### Step 5: Deploy
+
+1. Upload all files to your HF Space repository
+2. The app will automatically build and deploy
+3. Test at: `https://huggingface.co/spaces/your-username/plant-disease-detection`
+
+## Model Integration Guide
+
+### Your CNN Model Structure
+
+When integrating your actual trained model, make sure to update `model_loader.py` with your actual CNN architecture:
+
+```python
+class YourCNNModel(nn.Module):
+    def __init__(self, num_classes=39):
+        super(YourCNNModel, self).__init__()
+
+        # Add your actual CNN architecture here
+        # This should match what you used for training
+
+    def forward(self, x):
+        # Your forward pass
+        return x
+```
+
+### Loading Trained Weights
+
+```python
+# Load model
+model = YourCNNModel(num_classes=39)
+
+# Load trained weights
+checkpoint = torch.load('path/to/best_model.pth', map_location=device)
+
+# If you saved the entire model:
+model = checkpoint
+
+# If you saved just state_dict:
+model.load_state_dict(checkpoint)
+
+# Or if you saved optimizer and other info:
+model.load_state_dict(checkpoint['model_state_dict'])
+```
+
+## Testing the UI
+
+### Manual Testing Checklist
+
+- [ ] Upload a single image and get predictions
+- [ ] Try different models from the dropdown
+- [ ] Adjust confidence threshold slider
+- [ ] Test example gallery (if images added)
+- [ ] Upload multiple images for batch processing
+- [ ] Flag a prediction
+- [ ] Check all tabs load correctly
+- [ ] Verify predictions match expected classes
+
+### Automated Testing
+
+```python
+# Run tests
+cd ui
+python -m pytest test_app.py  # (Create tests if needed)
+```
+
+## Troubleshooting
+
+### Common Issues
+
+**1. ModuleNotFoundError**
+```bash
+# Make sure all dependencies are installed
+pip install -r requirements.txt
+```
+
+**2. Model Loading Error**
+```python
+# Check that the model architecture matches the saved weights
+# Make sure you're using the same num_classes (39)
+```
+
+**3. Image Size Issues**
+```python
+# Ensure images are being resized to (256, 256)
+# Check config.py IMAGE_SIZE setting
+```
+
+**4. CUDA/GPU Errors**
+```python
+# The app automatically falls back to CPU
+# Check: torch.cuda.is_available()
+```
+
+## Contributing
+
+When contributing to this UI:
+
+1. Create a new branch for your feature
+2. Test locally with mock model first
+3. Test with real model before pushing
+4. Update this README if adding new features
+5. Ensure code is well-commented
+
+## TODO
+
+- [ ] Add more example images to gallery
+- [ ] Integrate with actual trained models
+- [ ] Add disease information/treatment suggestions
+- [ ] Implement persistent flagging system (database)
+- [ ] Add data visualization for batch results
+- [ ] Create comprehensive tests
+
+## Resources
+
+- [Gradio Documentation](https://gradio.app/docs/)
+- [HuggingFace Spaces Guide](https://huggingface.co/docs/hub/spaces)
+- [ClearML Python API](https://clear.ml/docs/latest/docs/references/sdk/)
+- [PlantVillage Dataset](https://huggingface.co/datasets/EdBianchi/plant-village)
+
+## License
+
+[Specify your license here]
+
+## Acknowledgments
+
+- King's College London, 5CCSAGAP Course
+- PlantVillage Dataset creators
+- Course instructors and TAs

docs/USAGE.md

@@ -0,0 +1,401 @@
+# Usage Guide - Plant Disease Detection UI
+
+This guide explains how to use the Plant Disease Detection application.
+
+## For Developers
+
+### Running Locally
+
+**Quick Start:**
+```bash
+./quickstart.sh
+```
+
+**Manual Start:**
+```bash
+# Activate virtual environment
+source venv/bin/activate  # On Windows: venv\Scripts\activate
+
+# Run the app
+cd ui
+python app.py
+```
+
+The app will be available at `http://localhost:7860`
+
+### Development with Mock Model
+
+During development, the app uses a mock model by default. This allows you to:
+- Test the UI without waiting for model training
+- Develop features in parallel with the ML team
+- Verify the interface works correctly
+
+To use the mock model:
+```python
+# In ui/app.py
+demo = create_interface(use_mock=True)  # Default
+```
+
+### Switching to Real Model
+
+Once your team has trained a model:
+
+1. **Save your model:**
+```python
+# In your training script
+torch.save(model.state_dict(), 'best_model.pth')
+```
+
+2. **Copy to models directory:**
+```bash
+cp path/to/best_model.pth models/
+```
+
+3. **Update model_loader.py with your architecture:**
+```python
+# Replace MockPlantDiseaseModel with your actual model
+from your_training_code import YourCNNModel
+
+def _load_real_model(self, model_name, model_path=None):
+    model = YourCNNModel(num_classes=39)
+    # ... rest of the code
+```
+
+4. **Change app.py to use real model:**
+```python
+demo = create_interface(use_mock=False)
+```
+
+### Testing
+
+**Test individual components:**
+```bash
+# Test mock model
+python models/mock_model.py
+
+# Test model loader
+python ui/model_loader.py
+
+# Test utilities
+python ui/utils.py
+```
+
+**Test with different images:**
+1. Download example images:
+   ```bash
+   python download_examples.py --num 20
+   ```
+
+2. Run the app and test each feature:
+   - Single image prediction
+   - Batch processing
+   - Model switching
+   - Confidence threshold
+   - Flagging predictions
+
+## For End Users
+
+### Single Image Classification
+
+1. Open the app in your browser
+2. Go to the **"Single Image"** tab
+3. Upload an image:
+   - Click the image upload area
+   - Select a plant leaf photo from your computer
+   - Supported formats: JPG, PNG
+4. (Optional) Select a different model from the dropdown
+5. (Optional) Adjust the confidence threshold
+6. Click **"Predict Disease"**
+7. View the results:
+   - Top predictions shown as a chart
+   - Detailed information about the top prediction
+   - Raw JSON data available in the accordion
+
+### Using Example Images
+
+1. Go to the **"Example Images"** tab
+2. Click on any example image
+3. The image will be loaded into the predictor
+4. Go back to the "Single Image" tab
+5. Click "Predict Disease"
+
+### Batch Processing
+
+To classify multiple images at once:
+
+1. Go to the **"Batch Processing"** tab
+2. Click "Upload Multiple Images"
+3. Select multiple image files (use Ctrl/Cmd + Click)
+4. Click "Predict All"
+5. View results for all images
+
+### Flagging Incorrect Predictions
+
+If you notice a wrong prediction:
+
+1. After getting a prediction, expand **"Flag Incorrect Prediction"**
+2. Enter feedback (e.g., "This is actually Apple Scab, not Black Rot")
+3. Click **"Submit Flag"**
+4. Your feedback is recorded for the developers
+
+### Adjusting Confidence Threshold
+
+The confidence threshold filters out low-confidence predictions:
+
+1. Use the slider at the top: **"Confidence Threshold (%)"**
+2. Move it right to see only high-confidence predictions
+3. Move it left to see more predictions (including uncertain ones)
+
+**Example:**
+- Set to 50%: Only shows predictions the model is at least 50% confident about
+- Set to 1%: Shows almost all predictions
+
+### Understanding Results
+
+**Prediction Display:**
+```
+Tomato - Late blight: 85.2%
+Tomato - Early blight: 8.3%
+Tomato - Leaf Mold: 3.1%
+...
+```
+
+**Detailed Info:**
+- **Top Prediction:** The most likely disease
+- **Confidence:** How certain the model is (0-100%)
+- **Plant:** The type of plant detected
+- **Status:** Whether the plant is healthy or diseased
+
+### Tips for Best Results
+
+1. **Image Quality:**
+   - Use clear, well-lit photos
+   - Focus on the leaf
+   - Avoid blurry images
+
+2. **Image Content:**
+   - Show the diseased area clearly
+   - Include the whole leaf if possible
+   - One leaf per image works best
+
+3. **File Size:**
+   - The app automatically resizes images
+   - But uploading smaller images (<5MB) is faster
+
+4. **Interpreting Confidence:**
+   - >80%: High confidence - likely correct
+   - 50-80%: Moderate confidence - possible
+   - <50%: Low confidence - uncertain
+
+## Advanced Features
+
+### Switching Between Models
+
+If your team trained multiple models:
+
+1. Use the **"Select Model"** dropdown at the top
+2. Options might include:
+   - CNN from Scratch
+   - Transfer Learning (ResNet18)
+3. Each model may perform differently
+4. Try both and compare results
+
+### Viewing Raw Predictions
+
+For technical analysis:
+
+1. After prediction, expand **"Advanced: View Raw Predictions"**
+2. See the raw probability scores in JSON format
+3. Useful for debugging or detailed analysis
+
+### Batch Results Analysis
+
+When processing multiple images:
+
+1. Results show the top prediction for each image
+2. Format: `Image 1: Disease Name (confidence%)`
+3. Scroll through all results
+4. Use this for analyzing a collection of plants
+
+## Integration with Training Pipeline
+
+### For ML Team Members
+
+**Updating the Model:**
+
+After training a new model:
+
+```python
+# Option 1: Upload to ClearML (recommended)
+from clearml import Task
+task = Task.current_task()
+# Model is automatically uploaded
+
+# Then in UI:
+loader.load_from_clearml(task_id="your_task_id")
+```
+
+```python
+# Option 2: Save locally
+torch.save(model.state_dict(), 'models/best_model.pth')
+
+# Then in UI:
+loader.load_model(model_path='models/best_model.pth')
+```
+
+```python
+# Option 3: Upload to HuggingFace Hub
+from huggingface_hub import HfApi
+api = HfApi()
+api.upload_file(
+    path_or_fileobj="best_model.pth",
+    path_in_repo="model.pth",
+    repo_id="username/model-name"
+)
+
+# Then in UI:
+loader.load_from_huggingface("username/model-name")
+```
+
+### Experiment Tracking
+
+The UI can load any model from your ClearML experiments:
+
+```python
+# Get task ID from ClearML dashboard
+# Then update model_loader.py or pass as parameter
+```
+
+## Troubleshooting
+
+### Common Issues
+
+**"Please upload an image"**
+- Solution: Make sure you've selected an image before clicking Predict
+
+**"No predictions above confidence threshold"**
+- Solution: Lower the confidence threshold slider
+- Or the image might not be a plant leaf
+
+**"Error during prediction"**
+- Check the error message in the output
+- Verify the image is valid (not corrupted)
+- Try a different image
+
+**Slow predictions**
+- First prediction may be slow (model loading)
+- Subsequent predictions should be faster
+- Batch processing might take longer for many images
+
+**Example gallery is empty**
+- Run `python download_examples.py` to download examples
+- Or manually add images to `ui/examples/`
+
+### Getting Help
+
+1. Check the error message displayed in the UI
+2. Look at the terminal/console for detailed errors
+3. Refer to README.md for setup issues
+4. Check docs/deployment_guide.md for deployment issues
+5. Contact your team members or course TAs
+
+## Recording a Demo Video
+
+For your project submission:
+
+### What to Include
+
+1. **Introduction** (10 sec)
+   - "This is our Plant Disease Detection system..."
+
+2. **Single Image Demo** (30-60 sec)
+   - Upload an image
+   - Show prediction results
+   - Explain the output
+
+3. **Advanced Features** (30-60 sec)
+   - Show model selection
+   - Demonstrate batch processing
+   - Show flagging feature
+
+4. **Example Gallery** (15-30 sec)
+   - Browse example images
+   - Select and predict
+
+5. **Conclusion** (10-15 sec)
+   - Summarize capabilities
+   - Mention accuracy/performance
+
+### Recording Tips
+
+- Use screen recording software (QuickTime, OBS, etc.)
+- Enable audio narration
+- Show your face (optional but personal)
+- Keep it concise (2-3 minutes for basic, 5-6 for feature-rich)
+- Test audio quality before final recording
+- Practice once before recording
+
+### Video Quality
+
+- Resolution: At least 1080p
+- Format: MP4 (most compatible)
+- Audio: Clear voice, no background noise
+- Editing: Simple cuts are fine, no need for fancy effects
+
+## API Documentation
+
+For programmatic use (advanced):
+
+```python
+from model_loader import get_model
+from utils import preprocess_image, postprocess_predictions
+
+# Load model
+model, loader = get_model(use_mock=False)
+
+# Prepare image
+from PIL import Image
+image = Image.open("path/to/leaf.jpg")
+tensor = preprocess_image(image)
+
+# Predict
+import torch
+with torch.no_grad():
+    logits = model(tensor.to(loader.device))
+
+# Get results
+top_preds, all_preds = postprocess_predictions(logits)
+print(top_preds)
+```
+
+## FAQ
+
+**Q: Can I use this with my own plant images?**
+A: Yes! Upload any plant leaf image. Works best with the plants/diseases in the training set.
+
+**Q: How accurate is the model?**
+A: Check the README or About tab for test accuracy. Typically 85-95% on validation set.
+
+**Q: Can I add more disease categories?**
+A: You'd need to retrain the model with additional data for new categories.
+
+**Q: Is my data saved?**
+A: Images uploaded during use are not saved unless you flag a prediction. Flagged data stays in memory only.
+
+**Q: Can I run this offline?**
+A: Yes, once installed, the app runs locally and doesn't need internet (except for downloading model from HF/ClearML).
+
+**Q: How do I cite this in a report?**
+A: Reference your team's GitHub repo and the deployed app URL.
+
+## Next Steps
+
+- **Test thoroughly:** Try various images, edge cases
+- **Integrate real model:** Replace mock model with trained model
+- **Deploy:** Follow deployment guide to put on HF Spaces
+- **Record demo:** Create your submission video
+- **Write report:** Document the UI features in your report
+
+---
+
+**Happy classifying! 🌱**

docs/deployment_guide.md

@@ -0,0 +1,404 @@
+# Deployment Guide - Hugging Face Spaces
+
+This guide walks you through deploying the Plant Disease Detection app to Hugging Face Spaces.
+
+## Prerequisites
+
+- Hugging Face account (free): https://huggingface.co/join
+- Trained model weights
+- Git installed locally
+
+## Deployment Options
+
+You have three options for deploying your model:
+
+### Option 1: Upload Model Weights to Space (Recommended)
+**Pros:** Simple, no external dependencies
+**Cons:** Weights are part of the repo
+
+### Option 2: Load from Hugging Face Model Hub
+**Pros:** Separate model versioning, smaller Space repo
+**Cons:** Need to upload model separately
+
+### Option 3: Fetch from ClearML
+**Pros:** Direct integration with training pipeline
+**Cons:** Requires ClearML credentials in Space secrets
+
+## Step-by-Step: Option 1 (Upload Weights)
+
+### 1. Create a Hugging Face Space
+
+1. Go to https://huggingface.co/spaces
+2. Click "Create new Space"
+3. Fill in details:
+   - **Name:** `plant-disease-detection`
+   - **License:** Apache 2.0
+   - **Space SDK:** Gradio
+   - **Visibility:** Public
+4. Click "Create Space"
+
+### 2. Prepare Files for Deployment
+
+Create a new directory for your Space:
+
+```bash
+mkdir hf-space-deployment
+cd hf-space-deployment
+```
+
+Copy and flatten the UI structure:
+
+```bash
+# Copy main app file
+cp ../ui/app.py ./
+
+# Copy supporting files
+cp ../ui/config.py ./
+cp ../ui/model_loader.py ./
+cp ../ui/utils.py ./
+cp ../models/mock_model.py ./
+
+# Copy requirements
+cp ../requirements.txt ./
+
+# Copy your trained model weights
+cp ../path/to/best_model.pth ./
+```
+
+### 3. Modify app.py for Deployment
+
+Edit `app.py` to work with the flat structure:
+
+```python
+# Change imports at the top of app.py
+import config
+from model_loader import ModelLoader
+from utils import preprocess_image, postprocess_predictions, ...
+from mock_model import create_mock_predictions
+
+# At the bottom, change:
+demo = create_interface(use_mock=False)  # Use real model
+demo.launch()  # Remove server_name and server_port
+```
+
+### 4. Modify model_loader.py
+
+Update the model loading to use your actual architecture:
+
+```python
+# In _load_real_model method, replace mock model with your actual model:
+
+def _load_real_model(self, model_name, model_path=None):
+    if model_config["model_type"] == "cnn":
+        # Import your actual model class
+        from your_model_module import YourCNNModel
+        model = YourCNNModel(num_classes=len(config.CLASS_NAMES))
+
+    # Load weights
+    if model_path:
+        model.load_state_dict(torch.load(model_path, map_location=self.device))
+    else:
+        # Load default model
+        model.load_state_dict(torch.load("best_model.pth", map_location=self.device))
+
+    return model
+```
+
+### 5. Create README for Space
+
+Create `README.md` in the deployment directory:
+
+```markdown
+---
+title: Plant Disease Detection
+emoji: 🌱
+colorFrom: green
+colorTo: blue
+sdk: gradio
+sdk_version: 4.0.0
+app_file: app.py
+pinned: false
+license: apache-2.0
+---
+
+# 🌱 Plant Disease Detection
+
+AI-powered plant disease detection from leaf images.
+
+## About
+
+This application uses a Convolutional Neural Network (CNN) trained on the PlantVillage
+dataset to identify plant diseases from leaf images.
+
+**Developed by:** [Your Team Name]
+**Course:** 5CCSAGAP - AI Group Project, King's College London
+**Academic Year:** 2024-2025
+
+## Features
+
+- Upload plant leaf images for disease detection
+- Support for 39 different plant disease categories
+- Multiple model options (CNN, Transfer Learning)
+- Batch processing capability
+- Confidence threshold adjustment
+
+## How to Use
+
+1. Go to the "Single Image" tab
+2. Upload a photo of a plant leaf
+3. Click "Predict Disease"
+4. View the top predictions with confidence scores
+
+## Dataset
+
+Trained on the [PlantVillage dataset](https://huggingface.co/datasets/EdBianchi/plant-village)
+containing 55,400 images across 39 disease categories.
+
+## Model Performance
+
+- **Test Accuracy:** [Add your test accuracy]
+- **Architecture:** Custom CNN / ResNet18 Transfer Learning
+- **Training Framework:** PyTorch
+- **Experiment Tracking:** ClearML
+
+## Links
+
+- **GitHub:** [Add your repo link]
+- **Team Project:** [Add project documentation link]
+
+---
+
+**Disclaimer:** This is an educational project. Predictions should be verified by agricultural experts.
+```
+
+### 6. Upload to Hugging Face Space
+
+Initialize Git and push:
+
+```bash
+# Initialize git
+git init
+
+# Add Hugging Face Space as remote
+git remote add origin https://huggingface.co/spaces/YOUR_USERNAME/plant-disease-detection
+
+# Create .gitignore
+cat > .gitignore << EOF
+__pycache__/
+*.pyc
+.DS_Store
+EOF
+
+# Add files
+git add .
+
+# Commit
+git commit -m "Initial deployment of Plant Disease Detection app"
+
+# Push to Hugging Face
+git push origin main
+```
+
+You'll be prompted for credentials:
+- **Username:** Your HF username
+- **Password:** Your HF access token (create at https://huggingface.co/settings/tokens)
+
+### 7. Verify Deployment
+
+1. Go to your Space URL: `https://huggingface.co/spaces/YOUR_USERNAME/plant-disease-detection`
+2. Wait for the build to complete (check "Building" status)
+3. Test the app with sample images
+
+## Step-by-Step: Option 2 (HF Model Hub)
+
+### 1. Upload Model to HF Model Hub
+
+```python
+from huggingface_hub import HfApi, create_repo
+
+# Create repository for model
+repo_id = "YOUR_USERNAME/plant-disease-cnn"
+create_repo(repo_id=repo_id, repo_type="model", exist_ok=True)
+
+# Upload model
+api = HfApi()
+api.upload_file(
+    path_or_fileobj="path/to/best_model.pth",
+    path_in_repo="pytorch_model.pth",
+    repo_id=repo_id,
+    repo_type="model"
+)
+
+# Create model card
+model_card = """
+---
+license: apache-2.0
+tags:
+- image-classification
+- plant-disease
+- pytorch
+---
+
+# Plant Disease CNN
+
+CNN model for plant disease detection, trained on PlantVillage dataset.
+
+## Model Details
+
+- **Architecture:** Custom CNN
+- **Framework:** PyTorch
+- **Classes:** 39 plant disease categories
+- **Input Size:** 256x256 RGB images
+- **Test Accuracy:** [Add your accuracy]
+
+## Usage
+
+```python
+import torch
+from huggingface_hub import hf_hub_download
+
+model_path = hf_hub_download(
+    repo_id="YOUR_USERNAME/plant-disease-cnn",
+    filename="pytorch_model.pth"
+)
+model.load_state_dict(torch.load(model_path))
+```
+"""
+
+api.upload_file(
+    path_or_fileobj=model_card.encode(),
+    path_in_repo="README.md",
+    repo_id=repo_id,
+    repo_type="model"
+)
+```
+
+### 2. Modify model_loader.py
+
+```python
+# In model_loader.py, set default to load from HF:
+
+def _load_real_model(self, model_name, model_path=None):
+    if model_path is None:
+        # Download from HF Hub
+        from huggingface_hub import hf_hub_download
+        model_path = hf_hub_download(
+            repo_id="YOUR_USERNAME/plant-disease-cnn",
+            filename="pytorch_model.pth"
+        )
+
+    # Load model architecture
+    model = YourCNNModel(num_classes=39)
+    model.load_state_dict(torch.load(model_path, map_location=self.device))
+
+    return model
+```
+
+### 3. Deploy to Space
+
+Follow steps 1-7 from Option 1, but you don't need to include the .pth file.
+
+## Step-by-Step: Option 3 (ClearML)
+
+### 1. Get ClearML Credentials
+
+1. Log in to https://5ccsagap.er.kcl.ac.uk/
+2. Go to Settings → Workspace → Create new credentials
+3. Copy the credentials
+
+### 2. Add Secrets to Space
+
+1. Go to your Space settings
+2. Click "Repository secrets"
+3. Add three secrets:
+   - `CLEARML_API_HOST`: `https://5ccsagap.er.kcl.ac.uk`
+   - `CLEARML_API_ACCESS_KEY`: Your access key
+   - `CLEARML_API_SECRET_KEY`: Your secret key
+
+### 3. Modify model_loader.py
+
+```python
+def _load_real_model(self, model_name, model_path=None):
+    if model_path is None:
+        # Load from ClearML
+        import os
+        from clearml import Task, Model
+
+        # Initialize ClearML with environment variables
+        Task.init(
+            project_name="Plant Disease Detection",
+            task_name="UI Model Loading",
+            api_host=os.environ.get("CLEARML_API_HOST"),
+            api_access_key=os.environ.get("CLEARML_API_ACCESS_KEY"),
+            api_secret_key=os.environ.get("CLEARML_API_SECRET_KEY")
+        )
+
+        # Get the model
+        model_id = "YOUR_MODEL_ID"  # Get this from ClearML
+        model_obj = Model(model_id)
+        model_path = model_obj.get_local_copy()
+
+    # Load model
+    model = YourCNNModel(num_classes=39)
+    model.load_state_dict(torch.load(model_path, map_location=self.device))
+
+    return model
+```
+
+## Troubleshooting
+
+### Build Failures
+
+**Error: "Out of Memory"**
+- Your model might be too large
+- Try using a smaller model or quantization
+
+**Error: "Module not found"**
+- Check all dependencies are in requirements.txt
+- Verify imports work with flat file structure
+
+### Runtime Errors
+
+**Error: "Model file not found"**
+- Verify the .pth file is uploaded
+- Check file path in model_loader.py
+
+**Error: "Incompatible architecture"**
+- Ensure your model class definition matches the saved weights
+- Check num_classes=39
+
+## Updating the Deployment
+
+To update your deployed app:
+
+```bash
+# Make changes to files
+# Commit and push
+git add .
+git commit -m "Update: description of changes"
+git push origin main
+```
+
+The Space will automatically rebuild.
+
+## Best Practices
+
+1. **Test locally first:** Always test the app locally before deploying
+2. **Use small example images:** Don't upload large images to the repo
+3. **Version your models:** Tag model versions in HF Hub or ClearML
+4. **Monitor usage:** Check Space analytics to see usage patterns
+5. **Update README:** Keep the model card and space README up to date
+
+## Resources
+
+- [HF Spaces Documentation](https://huggingface.co/docs/hub/spaces)
+- [Gradio Documentation](https://gradio.app/docs/)
+- [HF Hub Python API](https://huggingface.co/docs/huggingface_hub/)
+
+## Support
+
+If you encounter issues:
+1. Check the Space build logs
+2. Test locally with the exact same file structure
+3. Consult the course TAs
+4. Check HF Community forums

download_examples.py

@@ -0,0 +1,80 @@
+"""
+Script to download example images from PlantVillage dataset
+Run this to populate the ui/examples/ directory with sample images
+"""
+
+import os
+from pathlib import Path
+
+
+def download_examples(num_examples=15):
+    """
+    Download example images from PlantVillage dataset
+
+    Args:
+        num_examples: Number of example images to download
+    """
+    try:
+        from datasets import load_dataset
+    except ImportError:
+        print("Error: 'datasets' library not installed")
+        print("Install it with: pip install datasets")
+        return
+
+    print("Loading PlantVillage dataset...")
+    print("This might take a few minutes on first run...")
+
+    try:
+        # Load the dataset
+        dataset = load_dataset("LinusWallin/plant-village", split="train")
+
+        print(f"Dataset loaded! Total images: {len(dataset)}")
+
+        # Create examples directory
+        examples_dir = Path(__file__).parent / "ui" / "examples"
+        examples_dir.mkdir(parents=True, exist_ok=True)
+
+        print(f"\nDownloading {num_examples} example images...")
+
+        # Calculate step size to get diverse examples
+        step = len(dataset) // num_examples
+
+        # Download examples
+        for i in range(num_examples):
+            idx = i * step
+            item = dataset[idx]
+
+            # Get image and label
+            image = item['image']
+            label = item['labels']
+
+            # Save image
+            filename = f"example_{i:02d}_class_{label}.jpg"
+            filepath = examples_dir / filename
+
+            image.save(filepath)
+            print(f"  ✓ Saved {filename}")
+
+        print(f"\n✅ Successfully downloaded {num_examples} example images to {examples_dir}")
+        print("\nYou can now run the app with the example gallery populated!")
+
+    except Exception as e:
+        print(f"Error downloading dataset: {e}")
+        print("\nAlternative: Manually add images to ui/examples/")
+        print("You can use any plant leaf images from the PlantVillage dataset")
+
+
+if __name__ == "__main__":
+    import argparse
+
+    parser = argparse.ArgumentParser(description="Download example images for the UI")
+    parser.add_argument(
+        "--num",
+        type=int,
+        default=15,
+        help="Number of example images to download (default: 15)"
+    )
+
+    args = parser.parse_args()
+
+    download_examples(num_examples=args.num)

models/__init__.py

@@ -0,0 +1,3 @@
+"""
+Models package
+"""

models/mock_model.py

@@ -0,0 +1,101 @@
+"""
+Mock model for UI development
+This allows parallel development while the actual model is being trained
+"""
+
+import torch
+import torch.nn as nn
+import numpy as np
+
+
+class MockPlantDiseaseModel(nn.Module):
+    """
+    Mock CNN model that mimics the structure of a real plant disease classifier
+    Returns realistic-looking predictions for UI testing
+    """
+
+    def __init__(self, num_classes=39):
+        super(MockPlantDiseaseModel, self).__init__()
+
+        # Simple architecture that matches expected input/output
+        self.features = nn.Sequential(
+            nn.Conv2d(3, 32, kernel_size=3, padding=1),
+            nn.ReLU(),
+            nn.MaxPool2d(2),
+            nn.Conv2d(32, 64, kernel_size=3, padding=1),
+            nn.ReLU(),
+            nn.MaxPool2d(2),
+            nn.AdaptiveAvgPool2d((1, 1))
+        )
+
+        self.classifier = nn.Sequential(
+            nn.Flatten(),
+            nn.Linear(64, num_classes)
+        )
+
+        self.num_classes = num_classes
+
+    def forward(self, x):
+        """
+        Forward pass that returns realistic probabilities
+        """
+        x = self.features(x)
+        x = self.classifier(x)
+
+        # Add some controlled randomness to make predictions look realistic
+        # In a real model, this would be learned weights
+        return x
+
+
+def create_mock_predictions(class_names):
+    """
+    Create realistic-looking mock predictions
+    Returns a dict with class names and probabilities
+    """
+    num_classes = len(class_names)
+
+    # Create random probabilities that sum to 1
+    # Give higher weight to a few "predicted" classes
+    logits = np.random.randn(num_classes)
+    logits[np.random.randint(0, num_classes)] += 3  # Make one class likely
+    logits[np.random.randint(0, num_classes)] += 1.5  # Make another somewhat likely
+
+    # Convert to probabilities using softmax
+    probs = np.exp(logits) / np.sum(np.exp(logits))
+
+    # Create prediction dict
+    predictions = {name: float(prob) for name, prob in zip(class_names, probs)}
+
+    return predictions
+
+
+def get_mock_model():
+    """
+    Returns a mock model instance
+    """
+    model = MockPlantDiseaseModel(num_classes=39)
+    model.eval()  # Set to evaluation mode
+    return model
+
+
+if __name__ == "__main__":
+    # Test the mock model
+    print("Testing mock model...")
+    model = get_mock_model()
+
+    # Test with random input
+    test_input = torch.randn(1, 3, 256, 256)
+    with torch.no_grad():
+        output = model(test_input)
+
+    print(f"Output shape: {output.shape}")
+    print(f"Sample logits: {output[0][:5]}")
+
+    # Test mock predictions
+    from config import CLASS_NAMES
+    predictions = create_mock_predictions(CLASS_NAMES)
+    top_5 = sorted(predictions.items(), key=lambda x: x[1], reverse=True)[:5]
+
+    print("\nTop 5 predictions:")
+    for name, prob in top_5:
+        print(f"  {name}: {prob:.4f}")

quickstart.sh

@@ -0,0 +1,66 @@
+#!/bin/bash
+
+# Quickstart script for Plant Disease Detection UI
+# This script sets up the environment and runs the app
+
+echo "🌱 Plant Disease Detection - Quick Start"
+echo "========================================"
+echo ""
+
+# Check if Python is installed
+if ! command -v python3 &> /dev/null; then
+    echo "❌ Error: Python 3 is not installed"
+    echo "Please install Python 3.8 or higher"
+    exit 1
+fi
+
+echo "✓ Python found: $(python3 --version)"
+echo ""
+
+# Check if virtual environment exists
+if [ ! -d "venv" ]; then
+    echo "📦 Creating virtual environment..."
+    python3 -m venv venv
+    echo "✓ Virtual environment created"
+else
+    echo "✓ Virtual environment already exists"
+fi
+
+echo ""
+
+# Activate virtual environment
+echo "🔧 Activating virtual environment..."
+source venv/bin/activate
+
+# Install/upgrade dependencies
+echo "📥 Installing dependencies..."
+pip install --upgrade pip > /dev/null 2>&1
+pip install -r requirements.txt
+
+echo "✓ Dependencies installed"
+echo ""
+
+# Check if example images exist
+if [ ! -d "ui/examples" ] || [ -z "$(ls -A ui/examples 2>/dev/null)" ]; then
+    echo "📸 No example images found"
+    echo ""
+    read -p "Would you like to download example images? (y/n): " -n 1 -r
+    echo ""
+    if [[ $REPLY =~ ^[Yy]$ ]]; then
+        echo "Downloading example images..."
+        python3 download_examples.py
+        echo ""
+    fi
+fi
+
+# Run the app
+echo "🚀 Starting the application..."
+echo ""
+echo "The app will be available at: http://localhost:7860"
+echo "Press Ctrl+C to stop the server"
+echo ""
+echo "========================================"
+echo ""
+
+cd ui
+python3 app.py

requirements.txt

@@ -0,0 +1,13 @@
+# Core dependencies
+torch>=2.0.0
+torchvision>=0.15.0
+gradio>=4.0.0
+numpy>=1.24.0
+Pillow>=10.0.0
+
+# For model deployment and tracking
+huggingface-hub>=0.19.0
+clearml>=1.14.0
+
+# Optional: for advanced features
+datasets>=2.14.0  # For loading PlantVillage dataset from HuggingFace

ui/__init__.py

@@ -0,0 +1,5 @@
+"""
+Plant Disease Detection UI Package
+"""
+
+__version__ = "1.0.0"

ui/app.py

@@ -0,0 +1,416 @@
+"""
+Plant Disease Detection Gradio App
+Main UI application with advanced features
+"""
+
+import gradio as gr
+import torch
+import sys
+from pathlib import Path
+import json
+from datetime import datetime
+
+# Add current directory to path
+sys.path.append(str(Path(__file__).parent))
+sys.path.append(str(Path(__file__).parent.parent))
+
+import config
+from model_loader import ModelLoader
+from utils import (
+    preprocess_image,
+    postprocess_predictions,
+    format_class_name,
+    get_disease_info,
+    batch_preprocess_images
+)
+from models.mock_model import create_mock_predictions
+
+
+class PlantDiseaseApp:
+    """
+    Main application class for Plant Disease Detection
+    """
+
+    def __init__(self, use_mock=True):
+        """
+        Initialize the application
+
+        Args:
+            use_mock: Whether to use mock model for development
+        """
+        self.use_mock = use_mock
+        self.model_loader = ModelLoader(use_mock=use_mock)
+        self.current_model_name = "CNN from Scratch"
+        self.model = self.model_loader.load_model(self.current_model_name)
+        self.flagged_predictions = []
+
+    def predict(self, image, model_name, confidence_threshold):
+        """
+        Make prediction on a single image
+
+        Args:
+            image: Input image
+            model_name: Name of model to use
+            confidence_threshold: Minimum confidence to display
+
+        Returns:
+            Predictions, formatted info, and detailed results
+        """
+        if image is None:
+            return None, "Please upload an image", ""
+
+        try:
+            # Switch model if needed
+            if model_name != self.current_model_name:
+                self.model = self.model_loader.load_model(model_name)
+                self.current_model_name = model_name
+
+            # Preprocess image
+            tensor = preprocess_image(image)
+            tensor = tensor.to(self.model_loader.device)
+
+            # Get prediction
+            with torch.no_grad():
+                if self.use_mock:
+                    # Use mock predictions for development
+                    predictions = create_mock_predictions(config.CLASS_NAMES)
+                    logits = torch.tensor([list(predictions.values())])
+                else:
+                    logits = self.model(tensor)
+
+            # Postprocess
+            top_predictions, all_predictions = postprocess_predictions(
+                logits, config.CLASS_NAMES, config.TOP_K_PREDICTIONS
+            )
+
+            # Filter by confidence threshold
+            filtered_predictions = {
+                k: v for k, v in top_predictions.items() if v >= confidence_threshold / 100
+            }
+
+            # Get top prediction info
+            if filtered_predictions:
+                top_class = max(filtered_predictions.items(), key=lambda x: x[1])[0]
+                top_prob = filtered_predictions[top_class]
+                disease_info = get_disease_info(top_class)
+
+                result_text = f"""
+                **Top Prediction:** {disease_info['formatted_name']}
+                **Confidence:** {top_prob*100:.2f}%
+                **Plant:** {disease_info['plant']}
+                **Status:** {'Healthy' if disease_info['is_healthy'] else 'Disease Detected'}
+                """
+            else:
+                result_text = "No predictions above confidence threshold"
+
+            # Format for Gradio Label component
+            display_predictions = {
+                format_class_name(k): v for k, v in filtered_predictions.items()
+            }
+
+            return display_predictions, result_text, json.dumps(filtered_predictions, indent=2)
+
+        except Exception as e:
+            return None, f"Error during prediction: {str(e)}", ""
+
+    def predict_batch(self, files, model_name, confidence_threshold):
+        """
+        Make predictions on multiple images
+
+        Args:
+            files: List of uploaded files
+            model_name: Name of model to use
+            confidence_threshold: Minimum confidence to display
+
+        Returns:
+            Results for each image
+        """
+        if not files:
+            return "Please upload at least one image"
+
+        results = []
+        for i, file in enumerate(files):
+            try:
+                # Get predictions for this image
+                preds, info, _ = self.predict(file, model_name, confidence_threshold)
+
+                if preds:
+                    top_class = max(preds.items(), key=lambda x: x[1])[0]
+                    top_prob = preds[top_class]
+                    results.append(f"**Image {i+1}:** {top_class} ({top_prob*100:.2f}%)")
+                else:
+                    results.append(f"**Image {i+1}:** No prediction")
+
+            except Exception as e:
+                results.append(f"**Image {i+1}:** Error - {str(e)}")
+
+        return "\n\n".join(results)
+
+    def flag_prediction(self, image, prediction, user_feedback):
+        """
+        Flag a prediction as incorrect
+
+        Args:
+            image: The input image
+            prediction: The model's prediction
+            user_feedback: User's feedback text
+
+        Returns:
+            Confirmation message
+        """
+        if image is None:
+            return "No image to flag"
+
+        flag_entry = {
+            "timestamp": datetime.now().isoformat(),
+            "prediction": prediction,
+            "feedback": user_feedback
+        }
+
+        self.flagged_predictions.append(flag_entry)
+
+        # In a real deployment, you would save this to a file or database
+        # For now, we'll just keep it in memory
+        return f"Thank you! Flagged prediction #{len(self.flagged_predictions)}"
+
+    def get_example_images(self):
+        """
+        Get list of example images from examples directory
+
+        Returns:
+            List of example image paths
+        """
+        examples_dir = Path(__file__).parent / "examples"
+
+        if not examples_dir.exists():
+            return []
+
+        # Get all image files
+        image_extensions = ['.jpg', '.jpeg', '.png']
+        examples = []
+
+        for ext in image_extensions:
+            examples.extend(list(examples_dir.glob(f"*{ext}")))
+
+        return [str(path) for path in examples[:10]]  # Return max 10 examples
+
+
+def create_interface(use_mock=True):
+    """
+    Create the Gradio interface
+
+    Args:
+        use_mock: Whether to use mock model
+
+    Returns:
+        Gradio Blocks interface
+    """
+    app = PlantDiseaseApp(use_mock=use_mock)
+
+    # Custom CSS for better styling
+    custom_css = """
+    .main-header {
+        text-align: center;
+        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+        padding: 2rem;
+        border-radius: 10px;
+        color: white;
+        margin-bottom: 2rem;
+    }
+    .prediction-box {
+        border: 2px solid #667eea;
+        border-radius: 10px;
+        padding: 1rem;
+        background: #f8f9fa;
+    }
+    """
+
+    with gr.Blocks(css=custom_css, title="Plant Disease Detection") as demo:
+
+        # Header
+        gr.Markdown(
+            """
+            <div class="main-header">
+                <h1>🌱 Plant Disease Detection System</h1>
+                <p>Upload a plant leaf image to detect diseases using AI</p>
+            </div>
+            """
+        )
+
+        # Model selection (available to all tabs)
+        with gr.Row():
+            model_selector = gr.Dropdown(
+                choices=list(config.MODEL_CONFIGS.keys()),
+                value="CNN from Scratch",
+                label="Select Model",
+                info="Choose which model to use for predictions"
+            )
+            confidence_slider = gr.Slider(
+                minimum=0,
+                maximum=100,
+                value=1,
+                step=1,
+                label="Confidence Threshold (%)",
+                info="Only show predictions above this confidence"
+            )
+
+        # Tabs for different features
+        with gr.Tabs():
+
+            # Tab 1: Single Image Prediction
+            with gr.Tab("Single Image"):
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        image_input = gr.Image(
+                            label="Upload Plant Leaf Image",
+                            type="pil"
+                        )
+
+                        predict_btn = gr.Button("Predict Disease", variant="primary", size="lg")
+
+                        with gr.Accordion("Flag Incorrect Prediction", open=False):
+                            feedback_text = gr.Textbox(
+                                label="Your Feedback",
+                                placeholder="What should the correct classification be?",
+                                lines=2
+                            )
+                            flag_btn = gr.Button("Submit Flag")
+                            flag_output = gr.Textbox(label="Status", interactive=False)
+
+                    with gr.Column(scale=1):
+                        prediction_output = gr.Label(
+                            label="Top Predictions",
+                            num_top_classes=10
+                        )
+                        result_info = gr.Markdown(label="Detailed Results")
+
+                with gr.Accordion("Advanced: View Raw Predictions", open=False):
+                    raw_predictions = gr.Textbox(
+                        label="Raw JSON Output",
+                        lines=10,
+                        interactive=False
+                    )
+
+                # Connect buttons
+                predict_btn.click(
+                    fn=app.predict,
+                    inputs=[image_input, model_selector, confidence_slider],
+                    outputs=[prediction_output, result_info, raw_predictions]
+                )
+
+                flag_btn.click(
+                    fn=app.flag_prediction,
+                    inputs=[image_input, result_info, feedback_text],
+                    outputs=flag_output
+                )
+
+            # Tab 2: Example Gallery
+            with gr.Tab("Example Images"):
+                gr.Markdown("### Try these example plant images")
+                gr.Markdown("Click on an example below to load it into the predictor")
+
+                example_images = app.get_example_images()
+
+                if example_images:
+                    examples = gr.Examples(
+                        examples=example_images,
+                        inputs=image_input,
+                        label="Example Plant Disease Images"
+                    )
+                else:
+                    gr.Markdown(
+                        """
+                        **No example images found.**
+
+                        To add example images:
+                        1. Create a folder: `ui/examples/`
+                        2. Add plant leaf images (.jpg, .png) to this folder
+                        3. Restart the app
+                        """
+                    )
+
+            # Tab 3: Batch Processing
+            with gr.Tab("Batch Processing"):
+                gr.Markdown("### Upload multiple images for batch processing")
+
+                batch_input = gr.File(
+                    label="Upload Multiple Images",
+                    file_count="multiple",
+                    type="filepath"
+                )
+
+                batch_predict_btn = gr.Button("Predict All", variant="primary")
+
+                batch_output = gr.Markdown(label="Batch Results")
+
+                batch_predict_btn.click(
+                    fn=app.predict_batch,
+                    inputs=[batch_input, model_selector, confidence_slider],
+                    outputs=batch_output
+                )
+
+            # Tab 4: About
+            with gr.Tab("About"):
+                gr.Markdown(
+                    """
+                    ## About This Application
+
+                    This Plant Disease Detection system was developed as part of the
+                    5CCSAGAP Artificial Intelligence Group Project at King's College London.
+
+                    ### Features
+                    - **Single Image Prediction**: Upload and classify individual plant images
+                    - **Multiple Models**: Switch between different trained models
+                    - **Batch Processing**: Classify multiple images at once
+                    - **Example Gallery**: Try pre-loaded example images
+                    - **Flagging System**: Report incorrect predictions to help improve the model
+                    - **Confidence Threshold**: Filter predictions by confidence level
+
+                    ### Dataset
+                    The model is trained on the PlantVillage dataset, which contains 55,400 images
+                    across 39 different plant disease categories.
+
+                    ### Model Architecture
+                    - **CNN from Scratch**: Custom convolutional neural network
+                    - **Transfer Learning**: Fine-tuned ResNet18 (if available)
+
+                    ### Technology Stack
+                    - **PyTorch**: Model training and inference
+                    - **Gradio**: User interface
+                    - **ClearML**: Experiment tracking
+                    - **Hugging Face Spaces**: Deployment platform
+
+                    ### Team
+                    [Add your team members' names here]
+
+                    ### Links
+                    - [GitHub Repository](https://github.kcl.ac.uk/K23064919/smallGroupProject)
+                    - [ClearML Dashboard](https://5ccsagap.er.kcl.ac.uk/)
+                    """
+                )
+
+        # Footer
+        gr.Markdown(
+            """
+            ---
+            **Note:** This is an AI-powered system and predictions should be verified by experts.
+            Built with ❤️ by KCL AI Students
+            """
+        )
+
+    return demo
+
+
+if __name__ == "__main__":
+    # Create and launch the app
+    print("Starting Plant Disease Detection App...")
+
+    # Use mock=True for development, mock=False when you have real models
+    demo = create_interface(use_mock=True)
+
+    # Launch the app
+    demo.launch(
+        share=False,  # Set to True to create a public link
+        server_name="0.0.0.0",  # Makes it accessible on your network
+        server_port=7860
+    )

ui/config.py

@@ -0,0 +1,77 @@
+"""
+Configuration file for Plant Disease Detection UI
+Contains class names, paths, and other settings
+"""
+
+# PlantVillage dataset has 39 classes
+CLASS_NAMES = [
+    "Apple___Apple_scab",
+    "Apple___Black_rot",
+    "Apple___Cedar_apple_rust",
+    "Apple___healthy",
+    "Blueberry___healthy",
+    "Cherry_(including_sour)___Powdery_mildew",
+    "Cherry_(including_sour)___healthy",
+    "Corn_(maize)___Cercospora_leaf_spot Gray_leaf_spot",
+    "Corn_(maize)___Common_rust_",
+    "Corn_(maize)___Northern_Leaf_Blight",
+    "Corn_(maize)___healthy",
+    "Grape___Black_rot",
+    "Grape___Esca_(Black_Measles)",
+    "Grape___Leaf_blight_(Isariopsis_Leaf_Spot)",
+    "Grape___healthy",
+    "Orange___Haunglongbing_(Citrus_greening)",
+    "Peach___Bacterial_spot",
+    "Peach___healthy",
+    "Pepper,_bell___Bacterial_spot",
+    "Pepper,_bell___healthy",
+    "Potato___Early_blight",
+    "Potato___Late_blight",
+    "Potato___healthy",
+    "Raspberry___healthy",
+    "Soybean___healthy",
+    "Squash___Powdery_mildew",
+    "Strawberry___Leaf_scorch",
+    "Strawberry___healthy",
+    "Tomato___Bacterial_spot",
+    "Tomato___Early_blight",
+    "Tomato___Late_blight",
+    "Tomato___Leaf_Mold",
+    "Tomato___Septoria_leaf_spot",
+    "Tomato___Spider_mites Two-spotted_spider_mite",
+    "Tomato___Target_Spot",
+    "Tomato___Tomato_Yellow_Leaf_Curl_Virus",
+    "Tomato___Tomato_mosaic_virus",
+    "Tomato___healthy"
+]
+
+# Model configurations
+MODEL_CONFIGS = {
+    "CNN from Scratch": {
+        "description": "Custom CNN model trained from scratch",
+        "input_size": (256, 256),
+        "model_type": "cnn"
+    },
+    "Transfer Learning (ResNet18)": {
+        "description": "Fine-tuned ResNet18 model",
+        "input_size": (256, 256),
+        "model_type": "resnet18"
+    }
+}
+
+# Image preprocessing settings
+IMAGE_SIZE = (256, 256)
+NORMALIZE_MEAN = [0.485, 0.456, 0.406]  # ImageNet mean
+NORMALIZE_STD = [0.229, 0.224, 0.225]   # ImageNet std
+
+# UI settings
+TOP_K_PREDICTIONS = 10
+CONFIDENCE_THRESHOLD = 0.01  # Minimum confidence to display
+
+# Paths (will be updated when integrating with real model)
+MODEL_PATH = "models/best_model.pth"
+EXAMPLES_PATH = "ui/examples/"
+
+# ClearML settings (for fetching model from ClearML)
+CLEARML_PROJECT_NAME = "Plant Disease Detection"
+CLEARML_TASK_NAME = "CNN Training"

ui/model_loader.py

@@ -0,0 +1,207 @@
+"""
+Model loading utilities
+Handles loading models from different sources: local files, HuggingFace, ClearML
+"""
+
+import torch
+import sys
+from pathlib import Path
+
+# Add parent directory to path to import from models
+sys.path.append(str(Path(__file__).parent.parent))
+
+from models.mock_model import MockPlantDiseaseModel, create_mock_predictions
+import config
+
+
+class ModelLoader:
+    """
+    Handles loading and managing plant disease models
+    """
+
+    def __init__(self, use_mock=True):
+        """
+        Initialize model loader
+
+        Args:
+            use_mock: If True, use mock model for development
+        """
+        self.use_mock = use_mock
+        self.model = None
+        self.device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+
+    def load_model(self, model_name="CNN from Scratch", model_path=None):
+        """
+        Load a model based on configuration
+
+        Args:
+            model_name: Name of the model configuration
+            model_path: Optional path to model weights
+
+        Returns:
+            Loaded model
+        """
+        if self.use_mock:
+            print("Loading mock model for development...")
+            self.model = self._load_mock_model()
+        else:
+            print(f"Loading real model: {model_name}")
+            self.model = self._load_real_model(model_name, model_path)
+
+        self.model.to(self.device)
+        self.model.eval()
+        return self.model
+
+    def _load_mock_model(self):
+        """Load the mock model"""
+        model = MockPlantDiseaseModel(num_classes=len(config.CLASS_NAMES))
+        return model
+
+    def _load_real_model(self, model_name, model_path=None):
+        """
+        Load a real trained model
+
+        Args:
+            model_name: Model configuration name
+            model_path: Path to model weights
+
+        Returns:
+            Loaded model
+        """
+        model_config = config.MODEL_CONFIGS.get(model_name)
+
+        if model_config is None:
+            raise ValueError(f"Unknown model: {model_name}")
+
+        # TODO: Replace this with your actual model architecture
+        # For now, using mock model structure
+        if model_config["model_type"] == "cnn":
+            model = MockPlantDiseaseModel(num_classes=len(config.CLASS_NAMES))
+        elif model_config["model_type"] == "resnet18":
+            # TODO: Load ResNet18 transfer learning model
+            import torchvision.models as models
+            model = models.resnet18(pretrained=False)
+            model.fc = torch.nn.Linear(model.fc.in_features, len(config.CLASS_NAMES))
+        else:
+            raise ValueError(f"Unknown model type: {model_config['model_type']}")
+
+        # Load weights if path provided
+        if model_path:
+            print(f"Loading weights from {model_path}")
+            model.load_state_dict(torch.load(model_path, map_location=self.device))
+
+        return model
+
+    def load_from_clearml(self, task_id=None, project_name=None, task_name=None):
+        """
+        Load model from ClearML
+
+        Args:
+            task_id: ClearML task ID (if known)
+            project_name: ClearML project name
+            task_name: ClearML task name
+
+        Returns:
+            Loaded model
+        """
+        try:
+            from clearml import Task, Model
+
+            if task_id:
+                task = Task.get_task(task_id=task_id)
+            elif project_name and task_name:
+                # Get the latest task with this name
+                task = Task.get_task(
+                    project_name=project_name,
+                    task_name=task_name
+                )
+            else:
+                raise ValueError("Must provide either task_id or (project_name and task_name)")
+
+            # Get the model from the task
+            model_id = task.models['output'][-1].id if task.models.get('output') else None
+
+            if model_id:
+                model_obj = Model(model_id)
+                model_path = model_obj.get_local_copy()
+
+                # Load the model
+                self.model = self._load_real_model("CNN from Scratch", model_path)
+                print(f"Model loaded from ClearML task: {task_id or task_name}")
+
+                return self.model
+            else:
+                raise ValueError("No output model found in ClearML task")
+
+        except ImportError:
+            print("ClearML not installed. Install with: pip install clearml")
+            print("Falling back to mock model")
+            return self._load_mock_model()
+        except Exception as e:
+            print(f"Error loading from ClearML: {e}")
+            print("Falling back to mock model")
+            return self._load_mock_model()
+
+    def load_from_huggingface(self, model_id):
+        """
+        Load model from HuggingFace Hub
+
+        Args:
+            model_id: HuggingFace model ID (e.g., "username/model-name")
+
+        Returns:
+            Loaded model
+        """
+        try:
+            from huggingface_hub import hf_hub_download
+
+            # Download model file
+            model_path = hf_hub_download(repo_id=model_id, filename="model.pth")
+
+            # Load the model
+            self.model = self._load_real_model("CNN from Scratch", model_path)
+            print(f"Model loaded from HuggingFace: {model_id}")
+
+            return self.model
+
+        except ImportError:
+            print("huggingface_hub not installed. Install with: pip install huggingface_hub")
+            print("Falling back to mock model")
+            return self._load_mock_model()
+        except Exception as e:
+            print(f"Error loading from HuggingFace: {e}")
+            print("Falling back to mock model")
+            return self._load_mock_model()
+
+
+def get_model(use_mock=True, **kwargs):
+    """
+    Convenience function to get a loaded model
+
+    Args:
+        use_mock: Whether to use mock model
+        **kwargs: Additional arguments for model loading
+
+    Returns:
+        Loaded model and model loader instance
+    """
+    loader = ModelLoader(use_mock=use_mock)
+    model = loader.load_model(**kwargs)
+    return model, loader
+
+
+if __name__ == "__main__":
+    # Test model loading
+    print("Testing model loading...")
+
+    # Test mock model
+    print("\n1. Loading mock model:")
+    model, loader = get_model(use_mock=True)
+    print(f"Model type: {type(model).__name__}")
+    print(f"Device: {loader.device}")
+
+    # Test with dummy input
+    dummy_input = torch.randn(1, 3, 256, 256).to(loader.device)
+    with torch.no_grad():
+        output = model(dummy_input)
+    print(f"Output shape: {output.shape}")

ui/utils.py

@@ -0,0 +1,210 @@
+"""
+Utility functions for the Plant Disease Detection UI
+"""
+
+import torch
+import numpy as np
+from PIL import Image
+import torchvision.transforms as transforms
+import config
+
+
+def preprocess_image(image, image_size=config.IMAGE_SIZE):
+    """
+    Preprocess image for model input
+
+    Args:
+        image: PIL Image or numpy array
+        image_size: Target size (height, width)
+
+    Returns:
+        Preprocessed tensor ready for model
+    """
+    # Convert to PIL Image if numpy array
+    if isinstance(image, np.ndarray):
+        image = Image.fromarray(image.astype('uint8'))
+
+    # Convert RGBA to RGB if necessary
+    if image.mode == 'RGBA':
+        image = image.convert('RGB')
+
+    # Define preprocessing transforms
+    transform = transforms.Compose([
+        transforms.Resize(image_size),
+        transforms.ToTensor(),
+        transforms.Normalize(mean=config.NORMALIZE_MEAN, std=config.NORMALIZE_STD)
+    ])
+
+    # Apply transforms
+    tensor = transform(image)
+
+    # Add batch dimension
+    tensor = tensor.unsqueeze(0)
+
+    return tensor
+
+
+def postprocess_predictions(logits, class_names=config.CLASS_NAMES, top_k=config.TOP_K_PREDICTIONS):
+    """
+    Convert model logits to human-readable predictions
+
+    Args:
+        logits: Raw model output
+        class_names: List of class names
+        top_k: Number of top predictions to return
+
+    Returns:
+        Dictionary of predictions with confidences
+    """
+    # Convert logits to probabilities using softmax
+    probs = torch.nn.functional.softmax(logits, dim=1)
+
+    # Convert to numpy
+    probs = probs.cpu().detach().numpy()[0]
+
+    # Create predictions dictionary
+    predictions = {name: float(prob) for name, prob in zip(class_names, probs)}
+
+    # Get top-k predictions
+    top_predictions = sorted(predictions.items(), key=lambda x: x[1], reverse=True)[:top_k]
+
+    return dict(top_predictions), predictions
+
+
+def format_prediction_for_display(predictions):
+    """
+    Format predictions for Gradio display
+
+    Args:
+        predictions: Dictionary of class names and probabilities
+
+    Returns:
+        Dictionary formatted for Gradio Label component
+    """
+    # Filter out very low confidence predictions
+    filtered = {k: v for k, v in predictions.items() if v >= config.CONFIDENCE_THRESHOLD}
+
+    return filtered
+
+
+def format_class_name(class_name):
+    """
+    Format class name for better readability
+
+    Args:
+        class_name: Original class name (e.g., "Tomato___Late_blight")
+
+    Returns:
+        Formatted class name (e.g., "Tomato - Late blight")
+    """
+    # Replace underscores with spaces and split on ___
+    parts = class_name.split("___")
+
+    if len(parts) == 2:
+        plant, disease = parts
+        plant = plant.replace("_", " ")
+        disease = disease.replace("_", " ")
+        return f"{plant} - {disease}"
+    else:
+        return class_name.replace("_", " ")
+
+
+def get_disease_info(class_name):
+    """
+    Get information about a disease (for future enhancement)
+
+    Args:
+        class_name: Disease class name
+
+    Returns:
+        Dictionary with disease information
+    """
+    # This is a placeholder - you could expand this with actual disease information
+    parts = class_name.split("___")
+
+    info = {
+        "plant": parts[0].replace("_", " ") if len(parts) > 0 else "Unknown",
+        "disease": parts[1].replace("_", " ") if len(parts) > 1 else "Unknown",
+        "is_healthy": "healthy" in class_name.lower(),
+        "formatted_name": format_class_name(class_name)
+    }
+
+    return info
+
+
+def batch_preprocess_images(images):
+    """
+    Preprocess multiple images for batch prediction
+
+    Args:
+        images: List of PIL Images or numpy arrays
+
+    Returns:
+        Batched tensor ready for model
+    """
+    tensors = [preprocess_image(img) for img in images]
+    batch = torch.cat(tensors, dim=0)
+    return batch
+
+
+def create_confidence_label(predictions, top_k=5):
+    """
+    Create a formatted string showing top predictions
+
+    Args:
+        predictions: Dictionary of predictions
+        top_k: Number of top predictions to show
+
+    Returns:
+        Formatted string
+    """
+    top_preds = sorted(predictions.items(), key=lambda x: x[1], reverse=True)[:top_k]
+
+    lines = []
+    for i, (class_name, prob) in enumerate(top_preds, 1):
+        formatted_name = format_class_name(class_name)
+        lines.append(f"{i}. {formatted_name}: {prob*100:.2f}%")
+
+    return "\n".join(lines)
+
+
+if __name__ == "__main__":
+    # Test utilities
+    print("Testing utility functions...")
+
+    # Test class name formatting
+    test_names = [
+        "Tomato___Late_blight",
+        "Apple___healthy",
+        "Corn_(maize)___Common_rust_"
+    ]
+
+    print("\nClass name formatting:")
+    for name in test_names:
+        print(f"  {name} -> {format_class_name(name)}")
+
+    # Test disease info
+    print("\nDisease info:")
+    for name in test_names:
+        info = get_disease_info(name)
+        print(f"  {name}:")
+        print(f"    Plant: {info['plant']}")
+        print(f"    Disease: {info['disease']}")
+        print(f"    Healthy: {info['is_healthy']}")
+
+    # Test image preprocessing
+    print("\nImage preprocessing:")
+    dummy_image = Image.new('RGB', (512, 512), color='red')
+    tensor = preprocess_image(dummy_image)
+    print(f"  Input size: {dummy_image.size}")
+    print(f"  Output tensor shape: {tensor.shape}")
+
+    # Test mock predictions
+    print("\nMock predictions:")
+    from models.mock_model import create_mock_predictions
+    preds = create_mock_predictions(config.CLASS_NAMES)
+    top_preds, all_preds = postprocess_predictions(
+        torch.tensor([list(preds.values())]),
+        config.CLASS_NAMES
+    )
+    print(create_confidence_label(top_preds))