A modern web application for detecting and classifying cotton leaf diseases using a fine-tuned ResNet50 deep learning model. The application features real-time AI-powered disease detection with 97.89% validation accuracy, deployed with a React frontend that communicates directly with a HuggingFace Space model.
Live Demo: https://cottonguard.vercel.app/
IPYNB Implementation of Experiments: Github Repository with Notebook Implementations
- Real-time cotton leaf disease detection and classification
- Support for 7 disease classes including healthy leaves
- Interactive drag-and-drop image upload
- Example images for quick testing
- Detailed probability distribution visualization
- Dark mode support with responsive design
- Comprehensive model information and training details
- Direct integration with HuggingFace Space (no backend server required)
- Healthy Leaf
- Bacterial Blight
- Curl Virus
- Herbicide Damage
- Leaf Hopper Jassids
- Leaf Reddening
- Leaf Variegation
CottonGuard/
├── components/ # React components
│ ├── Header.tsx # App header with dark mode toggle
│ ├── UploadSection.tsx # Image upload and analysis interface
│ ├── ResultsSection.tsx # Disease diagnosis and probability display
│ ├── ExamplesSection.tsx # Example images gallery
│ ├── ModelInfo.tsx # Model specifications and abstract
│ └── Footer.tsx # Footer with links
├── public/ # Public static assets
│ └── images/ # Example leaf disease images
├── App.tsx # Main application component
├── index.tsx # Application entry point
├── types.ts # TypeScript type definitions
├── diseaseInfo.ts # Disease metadata and treatment info
├── index.html # HTML template
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Project dependencies
- React 19.2.3: Modern UI library with hooks
- TypeScript 5.8.2: Type-safe development
- Vite 6.2.0: Fast build tool and dev server
- Tailwind CSS (CDN): Utility-first CSS framework
- Lucide React: Icon library
- @gradio/client 2.0.2: Direct HuggingFace Space integration
- Architecture: ResNet50 (fine-tuned, last 40 layers)
- Validation Accuracy: 97.89%
- Precision: 0.9762
- Recall: 0.9769
- F1-Score: 0.9766
- Input Size: 224×224 RGB images
- Training Dataset: CLD-B (2,137 images, 7 classes)
- Hosting: HuggingFace Spaces
- Node.js 18+ and npm
- Modern web browser
- Clone the repository:
git clone https://github.com/shoaibramim/CottonGuard.git
cd CottonGuard- Install dependencies:
npm install- Start development server:
npm run devThe application will be available at http://localhost:5173
npm run buildThe built files will be in the dist/ directory.
- Push your code to GitHub
- Import the project in Vercel
- Configure build settings:
- Build Command:
npm run build - Output Directory:
dist
- Build Command:
- Deploy
The application requires no environment variables and works out of the box.
The app can be deployed on any static hosting service (Netlify, GitHub Pages, etc.) as it's a client-side only application.
The ResNet50 model was trained with the following specifications:
- Transfer Learning: ImageNet pre-trained weights
- Fine-tuning Strategy: Last 40 layers unfrozen
- Augmentation: Dual augmentation (zoom, contrast, flip, rotation)
- Class Imbalance Handling: Class weighting
- Optimizer: Adam
- Learning Rate: Staged (0.001 → 1e-4)
- Dropout: 0.4
- Batch Size: 32
- Epochs: 30 (10 frozen + 20 fine-tuned)
- Dataset Source: CLD-B Dataset
- Upload Image: Drag and drop or click to upload a cotton leaf image
- Analyze: Click the "Analyze Leaf" button to get predictions
- View Results: See the predicted disease class, confidence level, severity, and treatment recommendations
- Try Examples: Click on example images to quickly test the model
Toggle between light and dark themes for comfortable viewing in any lighting condition.
Displays elapsed time during analysis and informs users about HuggingFace Space wake-up time.
Shows top 3 disease probabilities with visual bar charts and percentage values.
Optimized for all screen sizes from mobile to ultra-wide displays (up to 1920px).
The fine-tuned ResNet50 model achieves state-of-the-art performance on the CLD-B dataset, outperforming baseline Inception V3 architecture. The model demonstrates:
- Consistent high performance across all 7 disease classes
- Balanced precision and recall metrics
- Effective handling of class imbalance through weighted training
- Robust generalization through dual augmentation strategies
For complete research details, refer to the Model Information section in the application.
This application is based on research investigating deep learning architectures for cotton leaf disease detection. The employed ResNet50 architecture demonstrates superior performance through:
- Residual connections enabling stable deep network optimization
- Dual augmentation pipeline simulating real-world field conditions
- Class weighting for balanced learning across imbalanced categories
- Two-stage training strategy for effective transfer learning
Complete implementation code, including preprocessing, augmentation, model training, and evaluation scripts: https://github.com/shoaibramim/CLDD
Contributions are welcome. Please open an issue or submit a pull request for any improvements.
MIT
For questions or collaboration opportunities, please open an issue on GitHub.
- HuggingFace for model hosting infrastructure
- CLD-B dataset contributors
- Open source community for tools and libraries used in this project