NABTA AI System is a full-stack AI-powered platform designed for plant disease detection, analysis, and monitoring. The system integrates advanced computer vision models with modern web technologies to provide a complete intelligent pipeline for agricultural diagnostics.
The platform enables users to upload plant images and receive detailed AI-driven insights, including detection, classification, segmentation, and historical analytics.
- Object detection using YOLOv8 to localize plant regions
- Disease classification using deep convolutional neural networks
- Segmentation of infected regions using U-Net architecture
- Visual explainability using Grad-CAM
- Real-time inference and result visualization
- Persistent storage and analytics dashboard
- YOLOv8 for object detection
- CNN models (PyTorch and TensorFlow) for classification
- U-Net for segmentation
- Grad-CAM for interpretability
The system includes an AI-powered assistant built using Cohere LLM.
Key characteristics:
- Retrieval-Augmented Generation (RAG) pipeline
- Custom prompt engineering for plant-related queries
- Context-aware responses based on domain-specific knowledge
- Custom Retrieval-Augmented Generation (RAG) pipeline tailored for plant domain queries
- Designed to assist users with plant care, disease understanding, and recommendations
The assistant follows a structured pipeline to ensure secure, context-aware, and domain-specific responses:
- User sends query from frontend (AI Assistant)
- Request is forwarded to Firebase Function (secure proxy)
- Context is dynamically constructed (RAG-style)
- Prompt is injected with domain-specific knowledge
- Request is sent to Cohere API
- Response is returned securely to frontend
- React with Vite
- Modular component architecture
- Context API for state management
- Firebase Authentication
- Responsive UI design
- FastAPI for API development
- Python for AI processing
- Docker for containerization
- PyTorch
- TensorFlow / Keras
- OpenCV
- Albumentations
- Firebase (Authentication and Firestore database)
- Netlify for frontend deployment
- Plant disease detection pipeline
- Classification with explainability (Grad-CAM)
- Segmentation of infected areas
- AI assistant powered by LLM and RAG
- Historical tracking and analytics
- User profile management
- Premium system with custom dataset support
- Multi-language support
Login
Signup
Reset Password
The project is organized into two main parts:
- Backend functions (Firebase Cloud Functions)
- Frontend application (React-based UI)
functions/
│
├── .env # Stores environment variables (Gmail credentials, Cohere API key)
├── .eslintrc.js # ESLint configuration for code quality and formatting rules
├── .gitignore # Specifies files/folders to ignore in version control
├── index.js # Main entry point for all Firebase Cloud Functions
├── package.json # Project dependencies and scripts configuration
├── package-lock.json # Exact dependency versions for consistent installs
-
.env Contains sensitive configuration such as:
- Gmail credentials (used for sending emails)
- Cohere API key (used for LLM integration)
-
.eslintrc.js Defines linting rules to enforce clean and consistent JavaScript code.
-
index.js Core backend logic that includes:
-
sendWelcomeEmail
- Triggered via HTTPS callable function
- Sends a welcome email using Nodemailer and Gmail SMTP
- Requires authenticated user
-
keepHuggingFaceAlive
- Scheduled function (runs every 10 minutes)
- Sends a request (ping) to Hugging Face API
- Prevents model cold-start or sleep
-
cohereChat
- Secure proxy for Cohere LLM API
- Prevents exposing API key on frontend
- Supports chat-based interaction
- Integrated with RAG-style prompting
-
-
package.json / package-lock.json Manage dependencies such as:
- firebase-functions
- firebase-admin
- nodemailer
- node-fetch
src/
│
├── App.jsx # Root component that manages routing and layout structure
├── App.css # Global styles for the main app container
├── main.jsx # Entry point that mounts React app to the DOM
├── index.css # Base styling and resets
├── firebase.js # Firebase configuration (Auth + Firestore integration)
│
├── assets/
│ ├── fonts/
│ │ ├── Cairo-Bold.ttf # Custom font (bold)
│ │ └── Cairo-Regular.ttf # Custom font (regular)
│ │
│ ├── images/
│ │ └── (UI icons, backgrounds, plant images, reusable visual assets)
│ │
│ └── pdf/
│ └── vfs_fonts.js # PDF font support (used for report generation)
│
├── components/
│ ├── Dashboard/
│ │ ├── Dashboard.jsx # Main dashboard UI container
│ │ ├── Dashboard.css # Dashboard styling
│ │ ├── DashboardLayout.jsx # Layout wrapper for dashboard pages
│ │ └── DashboardNavbar.jsx # Top navigation bar inside dashboard
│ │
│ ├── Footer/
│ │ ├── Footer.jsx # General footer component
│ │ └── Footer.css # Footer styling
│ │
│ ├── LandingFooter/
│ │ ├── LandingFooter.jsx # Footer for landing pages
│ │ └── LandingFooter.css # Styling for landing footer
│ │
│ ├── layouts/
│ │ ├── LandingLayout.jsx # Layout for landing/public pages
│ │ ├── PublicLayout.jsx # Layout for authentication pages
│ │ └── ProtectedLayout.jsx # Layout for authenticated users
│ │
│ ├── Navbar/
│ │ ├── Navbar.jsx # Main navigation bar
│ │ └── Navbar.css # Navbar styling
│ │
│ ├── PlantModel/
│ │ └── PlantModel.jsx # Handles plant visualization (3D / UI representation)
│ │
│ ├── Premium/
│ │ ├── CustomDataButton.jsx # Button for uploading custom datasets
│ │ ├── PlanCard.jsx # Subscription plan UI card
│ │ ├── PricingModal.jsx # Pricing popup/modal
│ │ └── PremiumUpgrade.css # Styling for premium UI
│ │
│ └── Sidebar/
│ ├── Sidebar.jsx # Sidebar navigation inside dashboard
│ └── Sidebar.css # Sidebar styling
│
├── context/
│ └── LanguageContext.jsx # Manages multilingual support across the app
│
├── pages/
│ ├── dashboard/
│ │ ├── AIAssistant/
│ │ │ ├── AIAssistant.jsx # Chat interface (Cohere LLM + RAG integration)
│ │ │ └── AIAssistant.css # Styling for chat UI
│ │ │
│ │ ├── CustomData/
│ │ │ ├── CustomData.jsx # Upload and manage custom datasets (premium feature)
│ │ │ └── CustomData.css
│ │ │
│ │ ├── History/
│ │ │ ├── History.jsx # Displays past analysis results
│ │ │ └── History.css
│ │ │
│ │ ├── PlantAnalysis/
│ │ │ ├── PlantAnalysis.jsx # Core AI workflow (upload → detect → classify → segment)
│ │ │ └── PlantAnalysis.css
│ │ │
│ │ └── Profile/
│ │ ├── Profile.jsx # User profile and account management
│ │ └── Profile.css
│ │
│ ├── Landing/
│ │ ├── Landing.jsx # Main landing page
│ │ └── Landing.css
│ │
│ ├── Login/
│ │ ├── Login.jsx # Login page (Firebase Auth)
│ │ └── Login.css
│ │
│ ├── ResetPassword/
│ │ ├── ResetPassword.jsx # Password reset functionality
│ │ └── ResetPassword.css
│ │
│ └── signup/
│ ├── signup.jsx # User registration page
│ └── signup.css
│
└── routes/
└── ProtectedRoute.jsx # Middleware for route protection (auth guard)
The backend is built using Firebase Cloud Functions and provides three core services:
- Sends welcome emails after user registration
- Uses Nodemailer with Gmail SMTP
- Fully secured using environment variables
- Runs every 10 minutes using a scheduler
- Sends a request to Hugging Face hosted model
- Prevents cold start and improves performance
- Acts as a secure middleware between frontend and Cohere API
- Prevents exposing API keys
- Supports structured prompting and RAG-based responses
- Can be restricted to authenticated users only
The system follows a clean modular architecture:
- Frontend handles UI and user interaction
- Backend functions handle secure operations and external APIs
- AI models are consumed via external endpoints (Hugging Face)
- LLM integration is handled through a secure proxy layer
This design ensures:
- Security (no exposed API keys)
- Scalability (modular components)
- Maintainability (clear separation of concerns)
- Production readiness
To provide a comprehensive understanding of the system, the following UML diagrams illustrate the architecture from high-level user interactions to low-level implementation details.
These diagrams are organized from conceptual (Use Case) to procedural (Activity) to structural (Class) views of the system.
Represents the interaction between users, the system, and external services.
Illustrates the complete workflow of the system, from user actions to AI-driven processing and result generation.
Describes the internal structure of the system, including core components, relationships, and data flow.
- User uploads a plant image
- YOLOv8 detects plant regions
- CNN classifies disease type
- U-Net generates segmentation mask
- Grad-CAM provides visual explanation
- Results are stored and displayed in dashboard
- Over 120,000 images
- 102 classes
- Includes healthy and diseased plants
- Covers multiple lighting and environmental conditions
- Firebase Authentication
- Secure login and registration
- Route protection using custom middleware
- Mobile application version
- Advanced multilingual LLM support
- Expanded dataset coverage
- Edge deployment for real-time inference
- Model optimization for low-latency environments
Supervisor: Dr. Mourad Raafat
Meet the team behind NABTA AI System.
|
Armia Gamal AI BACKEND ENGINEER |
Sara Essam Computer Vision Engineer |
Sherif Karam ML Engineer |
Salsabel Esmail Data Science Engineer |
Ziad Walid Mokhtar ML Engineer |
Peter Bolbol Front-End Engineer |
Shada Ayman ElDin NLP Engineer |
This project represents a complete end-to-end AI system that combines computer vision, backend engineering, frontend development, and large language models.
It demonstrates the ability to build scalable, production-ready AI solutions that solve real-world problems in agriculture.