🌐 AI-Powered Plant Health Analysis | 📱 Progressive Web App
LensFolia is a cutting-edge Progressive Web Application (PWA) that leverages AI and computer vision to revolutionize plant disease detection and management. Built with Next.js 15 and powered by AI Agents, LensFolia provides instant, accurate plant health analysis through smartphone photography.
The platform combines real-time plant disease detection with a comprehensive knowledge base, community forum, and personalized recommendations system, making plant care accessible to everyone from home gardeners to agricultural professionals.
- 🚀 Next.js 15: App Router with SSR optimization and React 19
- 🤖 AI-Powered Two-Stage Detection: YOLOv8 + MobileNetV2 for accurate disease identification
- ⚡ Multi-Agent System: LangGraph-based workflow for comprehensive analysis
- 🎨 Modern UI: shadcn/ui components with responsive design
- 📱 PWA Ready: Offline capabilities and mobile app experience
- 🔒 Type Safe: Full TypeScript coverage with strict mode
- 🌙 Dark Mode: Theme switching support
- 🔄 Real-time Updates: Push notifications and live data synchronization
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 15.3.2 | React Framework with App Router |
| React | 19.0.0 | UI Library |
| TypeScript | 5.0+ | Type Safety |
| Tailwind CSS | 4.0 | Utility-first CSS Framework |
| shadcn/ui | Latest | Pre-built UI Components |
| Framer Motion | 12+ | Animations and Transitions |
| Radix UI | Latest | Accessible UI Primitives |
| Supabase | 2.53.0 | Backend as a Service |
| Technology | Purpose |
|---|---|
| Python & FastAPI | Backend Services |
| YOLOv8 | Object Detection |
| MobileNetV2 | Image Classification |
| LangGraph | Multi-Agent AI Workflow |
| LangChain | LLM Integration |
| Google Gemini | Language Models |
| Tavily | Web Search Integration |
| Technology | Purpose |
|---|---|
| Docker | Containerization |
| Google Cloud | Cloud Deployment |
| Serwist | Service Worker & PWA |
| ESLint | Code Linting |
| Prettier | Code Formatting |
- Node.js 18+ (recommended: 20+)
- pnpm (recommended) or npm
- Python 3.11+ (for AI services)
- Git
# Clone repository
git clone https://github.com/SalamPS/lensfolia.git
cd lensfolia-secomp2025/next
# Install dependencies
pnpm install
# Copy environment variables
cp .env.example .env.local# .env.local
NEXT_PUBLIC_API_URL=your_api_url
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_key
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_maps_key
# For AI Services
GOOGLE_API_KEY=your_google_key
TAVILY_API_KEY=your_tavily_key
SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_key# Start Next.js development server
pnpm dev
# Build for production
pnpm build
# Run linting
pnpm lintFollow AI service documentation here
lensfolia-secomp2025/
├── next/ # Next.js Frontend Application
│ ├── app/ # Next.js App Router
│ │ ├── detect/ # Plant disease detection interface
│ │ ├── forum/ # Community discussion platform
│ │ ├── encyclopedia/ # Plant knowledge base (Lensiklopedia)
│ │ ├── bookmarks/ # User bookmarks management
│ │ ├── result/ # Detection results display
│ │ ├── api/ # API routes and endpoints
│ │ ├── actions/ # Server actions
│ │ ├── test-push/ # Push notification testing
│ │ ├── globals.css # Global styles
│ │ ├── layout.tsx # Root layout component
│ │ ├── page.tsx # Landing page
│ │ └── manifest.ts # PWA manifest
│ ├── components/ # Reusable React components
│ │ ├── ui/ # shadcn/ui base components
│ │ ├── auth/ # Authentication components
│ │ ├── detect/ # Disease detection components
│ │ ├── forum/ # Forum and discussion components
│ │ ├── encyclopedia/ # Knowledge base components
│ │ ├── bookmarks/ # Bookmark management components
│ │ ├── home/ # Landing page components
│ │ ├── pwa/ # PWA-related components
│ │ └── lang/ # Language and localization
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility libraries
│ │ ├── supabase.ts # Database client
│ │ ├── utils.ts # Helper functions
│ │ └── notifications.ts # Push notification utilities
│ ├── public/ # Static assets
│ │ ├── pwa/ # PWA icons and assets
│ │ └── examples/ # Example images
│ ├── middleware.ts # Route protection middleware
│ └── next.config.ts # Next.js configuration
├── services/ # Backend AI Services
│ ├── diagnosis/ # Plant disease detection service
│ │ ├── src/
│ │ │ └── agent/ # Multi-agent AI system
│ │ │ ├── graph.py # LangGraph workflow
│ │ │ ├── pipeline.py # Detection pipeline
│ │ │ ├── tools.py # AI tools and utilities
│ │ │ └── models/ # AI model files
│ │ ├── Dockerfile # Container configuration
│ │ └── pyproject.toml # Python dependencies
│ └── chatbot/ # AI chatbot service
│ ├── main.py # FastAPI application
│ ├── rag.py # RAG implementation
│ └── Dockerfile # Container configuration
└── README.md # Project documentation
- Supabase-based authentication system
- User profiles and session management
- Protected routes and middleware
- Real-time Analysis: Upload or capture plant leaf images for instant disease identification
- Multi-Stage Pipeline: YOLOv8 object detection + MobileNetV2 classification
- Confidence Scoring: Accuracy metrics for AI predictions with detailed confidence levels
- Annotated Results: Visual highlighting of detected disease areas on plant images
- Multi-class Support: Detection of various plant diseases, pests, and health conditions
- Multi-Agent System: LangGraph-orchestrated workflow with specialized agents
- Image Analysis Agent: Initial plant leaf validation and disease screening
- Detection Agent: Computer vision-based disease identification
- Overview Agent: Comprehensive disease analysis and explanation
- Treatment Agent: Medical treatment recommendations
- Recommendation Agent: Product and care suggestions
- Retrieval-Augmented Generation: Enhanced responses using plant disease knowledge base
- Web Search Integration: Real-time information retrieval for up-to-date plant care advice
- Comprehensive plant knowledge database
- Disease information and care guides
- Searchable plant species directory
- Treatment protocols and preventive measures
- Interactive discussion platform
- Category-based organization (General, Diseases, Pests)
- User post creation and management
- Community-driven knowledge sharing
- Notification system for forum updates
- Save detection results and plant information
- Organize favorite forum posts and encyclopedia entries
- Quick access to personal plant care history
- Offline Capabilities: Core functionality available without internet
- Mobile App Experience: Native app-like interface and interactions
- Push Notifications: Real-time updates and reminders
- Install Prompts: Add to home screen functionality
- Service Worker: Background sync and caching strategies
- Responsive Design: Optimized for all device sizes
- Dark/Light Mode: Automatic and manual theme switching
- Touch-Optimized: Mobile-first interface design
- Loading States: Smooth animations and progress indicators
- Error Handling: Graceful degradation and user-friendly error messages
- TypeScript: Full type safety across the application
- Component Library: shadcn/ui + Radix UI primitives
- Animation System: Framer Motion for smooth interactions
- Code Quality: ESLint + Prettier configuration
- Hot Reload: Fast development with Next.js dev server
# Diagnosis Service
cd lensfolia/services/diagnosis
docker build -t lensfolia-diagnosis .
docker run -p 8000:8000 lensfolia-diagnosis
# Chatbot Service
cd lensfolia/services/chatbot
docker build -t lensfolia-chatbot .
docker run -p 8001:8001 lensfolia-chatbot# Deploy Next.js app to Vercel
cd lensfolia/next
vercel
# Or connect GitHub repository for auto-deployment# Deploy using provided deployment scripts
cd lensfolia-secomp2025/services/diagnosis
./deploy.sh
cd ../chatbot
./deploy.sh- Fork the repository
- Create feature branch:
git checkout -b feature/amazing-feature - Make changes and test thoroughly
- Commit:
git commit -m "feat: add amazing feature" - Push and create Pull Request
- TypeScript: Strict mode with comprehensive type coverage
- ESLint + Prettier: Consistent code formatting and linting
- Component Structure: Follow established patterns in
/components - Mobile Responsiveness: Test on multiple device sizes
- Accessibility: WCAG 2.1 AA compliance
- Performance: Optimize images and lazy load components
- Testing: Write unit tests for critical functionality
- Use semantic commit messages (feat, fix, docs, style, refactor, test, chore)
- Follow the existing folder structure and naming conventions
- Document complex functions and components
- Ensure PWA functionality works offline
- Test AI detection pipeline thoroughly before merging
- Lighthouse Score: 95+ across all metrics
- Core Web Vitals: Optimized for excellent user experience
- Bundle Size: Optimized with Next.js automatic code splitting
- Image Optimization: Automatic WebP conversion and responsive images
- Caching Strategy: Aggressive caching for AI models and static assets
- Repository: GitHub - lensfolia
- Issues: GitHub Issues
- Documentation: Available in repository Wiki
When reporting bugs, please include:
- Device and browser information
- Steps to reproduce the issue
- Screenshots or screen recordings
- Console error messages (if any)
- Use GitHub Issues with
enhancementlabel - Provide detailed use case and expected behavior
- Consider implementation complexity and user impact
MIT License
