🌱 PlantAid - AI Plant Disease Detection

Final Term Project - CSBU103: Website Design and Development

📋 Overview

PlantAid uses AI to identify plant diseases from leaf images and provides treatment recommendations. Upload a photo of a plant leaf and get instant disease detection, severity assessment, and actionable treatment suggestions.

🌐 Live: plantaid.live

📑 Table of Contents

• Key Features
• Screenshots
• Tech Stack
• Project Structure
• Docker Deployment
• Local Development
• Team
• Course Information
• Acknowledgments

✨ Key Features

Feature	Description
🔐 Authentication	User registration, login, password recovery with email reset
📸 AI Detection	Powered by Google Gemma 3 27B vision model via Hugging Face
🎯 Smart Analysis	Disease identification, confidence scores, severity rating (Low/Medium/High)
💊 Treatment	AI-generated actionable treatment recommendations (3-4 steps)
📊 Dashboard	Diagnosis history with filtering (All/Diseased/Healthy/No-Leaf)
📱 Responsive	Optimized for desktop, tablet, and mobile devices

📸 Screenshots

Dashboard	Detection Results

🛠️ Tech Stack

Layer	Technology	Purpose
Frontend	React.js (Vite)	Fast, modern UI development
	Tailwind CSS	Utility-first styling
	React Router	Client-side navigation
Backend	Node.js + Express	REST API server
	Supabase	PostgreSQL database + Auth
AI	Hugging Face API	ML model inference
	Google Gemma 3 27B	Vision-language model
DevOps	Docker	Containerization
	DigitalOcean	Cloud hosting

📁 Project Structure

plantaid/
├── client/                 # React frontend (Vite)
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   ├── contexts/       # React Context (Auth)
│   │   ├── pages/          # Route pages
│   │   └── utils/          # Helper functions
│   └── Dockerfile
├── server/                 # Express backend
│   ├── controllers/        # Route handlers
│   ├── models/             # Database operations
│   ├── routes/             # API routes
│   ├── services/           # AI integration
│   └── Dockerfile
└── docker-compose.yml

🐳 Docker Deployment

Container Architecture

Service	Image	Port	Description
client	nginx:alpine	80	Serves React build via Nginx
server	node:22-alpine	3000	Express API server

Quick Deploy

# 1. Clone repository
git clone https://github.com/onecot/plantaid.git
cd plantaid

# 2. Configure environment
touch server/.env
# Edit server/.env with your credentials

# 3. Build and run
docker compose up -d

# 4. Verify
docker compose ps
docker compose logs -f

Docker Commands

Command	Description
docker compose up -d	Start containers (background)
docker compose down	Stop containers
docker compose logs -f	View live logs
docker compose pull	Pull latest images
docker compose restart	Restart containers

Environment Variables

Variable	Required	Description
SUPABASE_URL	✅	Supabase project URL
SUPABASE_ANON_KEY	✅	Supabase public key
SUPABASE_SERVICE_ROLE_KEY	✅	Supabase service key
HF_TOKEN	✅	Hugging Face API token
ALLOWED_ORIGIN	✅	CORS allowed origins

🚀 Local Development

# Terminal 1 - Backend
cd server
npm install
npm start  # Runs on http://localhost:3000

# Terminal 2 - Frontend
cd client
npm install
npm run dev  # Runs on http://localhost:5173

👥 Team

Name	Student ID	Role
Lê Minh Tân	25560052	Full-stack Developer
Nguyễn Kim Thư	25560057	Full-stack Developer

📅 Course Information

Course	CSBU103 - Website Design and Development
Term	1st Term, 2025
Lecturers	Đặng Lê Bảo Chương, Văn Thiên Luân

🙏 Acknowledgments

Thanks to the GitHub Student Developer Pack for providing:

• $200 DigitalOcean credits - Cloud hosting
• Free .live domain - Custom domain from Name.com

---

This project is for educational purposes only.