Skip to content

AI-powered farming assistant built with React + Flask that helps farmers through multilingual chat, voice, and image-based crop disease detection using Google Gemini and Groq APIs.

License

Notifications You must be signed in to change notification settings

Hrishhii/AgroBot

Repository files navigation

🌾 AgroBot - AI Farming Assistant

React Flask Tailwind Gemini License

🎯 Your Smart Farming Companion

Talk, Type, or Upload for Instant AI-Powered Agricultural Advice


📋 Overview

AgroBot is a modern, AI-powered farming assistant with a beautiful Gemini-style unified chat interface. Built for project expos and real-world agricultural applications, it provides farmers with instant, multilingual advice on crops, soil, irrigation, pest control, and plant disease detection.

✨ Key Features

🎤 Unified Chat Interface

  • Single conversation thread like ChatGPT/Gemini
  • Voice, text, and image inputs work seamlessly in one chat
  • Chat persistence - Messages saved across page refreshes
  • Audio playback with pause/resume/stop controls
  • Professional landing page with smooth navigation

🗣️ Voice Interaction

  • Speak in English, Hindi (हिंदी), or Telugu (తెలుగు)
  • Voice transcription displayed in chat
  • Automatic audio response for voice inputs
  • Multi-language speech synthesis

⌨️ Text Chat

  • Type farming queries for instant AI answers
  • Powered by Google Gemini 2.5 Flash
  • Responses translated to selected language
  • Optional audio playback (manual control)

🖼️ Image Analysis

  • Upload plant/crop photos for disease detection
  • Gemini Vision AI powered analysis
  • Treatment recommendations included
  • Visual feedback with image preview

🌐 Modern UI/UX

  • Landing page with hero section and features
  • Gemini-style bottom toolbar with all tools
  • Language selector integrated in chat
  • Back button to return to home
  • Responsive design for all devices
  • Smooth animations with Framer Motion

🏗️ Architecture

┌─────────────────────────────────────────┐
│      React Frontend (Port 3000)         │
│  ┌───────────────────────────────────┐  │
│  │  Landing Page                     │  │
│  │  • Hero Section                   │  │
│  │  • Features Showcase              │  │
│  │  • CTA Buttons                    │  │
│  └───────────────────────────────────┘  │
│  ┌───────────────────────────────────┐  │
│  │  Chat Interface (Gemini-style)    │  │
│  │  • Unified conversation view      │  │
│  │  • Voice/Text/Image tools         │  │
│  │  • Audio controls (pause/resume)  │  │
│  │  • Chat persistence (localStorage)│  │
│  │  • Language selector in toolbar   │  │
│  └───────────────────────────────────┘  │
└──────────────┬──────────────────────────┘
               │
               │ REST API (HTTP/JSON)
               │
┌──────────────▼──────────────────────────┐
│      Flask Backend (Port 5000)          │
├─────────────────────────────────────────┤
│  /api/chat        → Google Gemini AI    │
│  /api/transcribe  → Groq Whisper STT    │
│  /api/tts         → gTTS + Translation  │
│  /api/analyze-image → Gemini Vision     │
└─────────────────────────────────────────┘

🚀 Quick Start

Prerequisites

Installation

1️⃣ Setup Environment

# Copy environment template
copy .env.example .env

Edit .env and add your API keys:

GOOGLE_API_KEY=your_google_api_key_here
GROQ_API_KEY=your_groq_api_key_here

2️⃣ Install Dependencies

Option A - All at once (Recommended):

npm run setup

Option B - Separately:

# Install Python dependencies
pip install -r requirements.txt

# Install Node dependencies
npm run setup:frontend

3️⃣ Run the Application

Option A - Both servers together (Recommended):

npm start
# or
npm run dev

Option B - Run separately:

Terminal 1 - Backend:

npm run backend

Backend will run on http://localhost:5000

Terminal 2 - Frontend:

npm run frontend

Frontend will run on http://localhost:3000

4️⃣ Open in Browser

Navigate to http://localhost:3000 and start using AgroBot! 🎉


📦 NPM Commands

Command Description
npm run setup Install all dependencies (frontend + backend)
npm start or npm run dev Start both backend and frontend servers
npm run backend Start only Flask backend (port 5000)
npm run frontend Start only React frontend (port 3000)
npm run build Build frontend for production
npm run check Validate setup configuration

📁 Project Structure

practice/
│
├── 📁 backend/                # Python/Flask Backend
│   ├── backend_api.py             # Flask REST API server (MAIN)
│   ├── agrobot_chat.py            # Gemini chat logic
│   ├── universal_stt.py           # Groq Whisper STT
│   ├── tts_engine.py              # gTTS + translation
│   └── image.py                   # Image analysis module
│
├── 📁 frontend/               # React Application
│   ├── src/
│   │   ├── App.jsx                # Main app component
│   │   ├── main.jsx               # Entry point
│   │   ├── index.css              # Tailwind styles
│   │   └── components/
│   │       ├── Header.jsx             # App header with language selector
│   │       ├── TabNavigation.jsx      # Tab switcher
│   │       ├── VoiceMode.jsx          # Voice recording & STT
│   │       ├── TextMode.jsx           # Text chat interface
│   │       ├── ImageAnalysis.jsx      # Image upload & analysis
│   │       └── Footer.jsx             # Footer with info
│   ├── index.html
│   ├── package.json
│   ├── vite.config.js
│   └── tailwind.config.js
│
├── 📁 docs/                   # Documentation
│   ├── QUICKSTART.md              # Quick setup guide for expo
│   ├── PRESENTATION_GUIDE.md      # Full presentation guide
│   ├── COMMANDS.md                # Command reference
│   └── PROJECT_SUMMARY.md         # Project overview
│
├── 📁 scripts/                # Setup & Automation
│   ├── setup.bat                  # One-click setup
│   ├── start.bat                  # One-click start
│   └── check_setup.py             # Pre-flight validation
│
├── 📄 Configuration
│   ├── requirements.txt           # Python dependencies
│   ├── .env                       # API keys (create from .env.example)
│   ├── .env.example               # Environment template
│   └── .gitignore                 # Git ignore rules
│
└── README.md                  # This file

🎨 Design Theme

AgroBot uses a modern agricultural theme with:

  • Primary Colors: Green shades (🌿 #22c55e) representing growth and nature
  • Secondary Colors: Earth tones (🌾 #bfa094) for warmth
  • Typography: Inter font family for clarity
  • Animations: Smooth transitions with Framer Motion
  • Responsive: Mobile-first design approach

🔌 API Endpoints

Backend REST API

Endpoint Method Description
/api/health GET Health check
/api/chat POST Get farming advice
/api/transcribe POST Convert speech to text
/api/tts POST Convert text to speech
/api/analyze-image POST Analyze plant disease

🛠️ Technology Stack

Frontend

  • React 18 - UI framework
  • Vite - Build tool
  • Tailwind CSS - Styling
  • Framer Motion - Animations
  • Axios - HTTP client
  • React Icons - Icon library

Backend

  • Flask - Web framework
  • Google Gemini - AI chat & vision
  • Groq Whisper - Speech-to-text
  • gTTS - Text-to-speech
  • Deep Translator - Multi-language support
  • Pillow - Image processing

🌍 Supported Languages

  • 🇬🇧 English (en)
  • 🇮🇳 Hindi (hi - हिंदी)
  • 🇮🇳 Telugu (te - తెలుగు)

Voice Mode

  • Real-time audio recording with visual feedback
  • Automatic transcription and AI response
  • Voice playback in selected language

Text Mode

  • Clean, chat-like interface
  • Example questions for quick start
  • Instant AI responses with audio

Image Analysis

  • Drag-and-drop image upload
  • Disease detection and identification
  • Organic treatment recommendations

🎯 Use Cases

  1. Crop Management - Get advice on planting, watering, and harvesting
  2. Disease Detection - Identify plant diseases from photos
  3. Pest Control - Learn organic and chemical pest management
  4. Soil Health - Understand soil improvement techniques
  5. Irrigation Planning - Optimize water usage

🔒 Security

  • API keys stored in .env (not in version control)
  • CORS enabled for frontend communication
  • Input validation on all endpoints
  • File size limits for uploads

🚀 Deployment

Production Build

Frontend:

cd frontend
npm run build
# Files in frontend/dist/

Backend:

gunicorn -w 4 -b 0.0.0.0:5000 backend_api:app

Deployment Options

  • Frontend: Vercel, Netlify, or GitHub Pages
  • Backend: Heroku, Railway, or AWS EC2
  • Full Stack: DigitalOcean, Render, or Docker

🤝 Contributing

Contributions are welcome! Feel free to:

  • Report bugs
  • Suggest features
  • Submit pull requests

📄 License

This project is licensed under the MIT License.

👨‍💻 Author


⭐ Star this repo if you find it useful!

About

AI-powered farming assistant built with React + Flask that helps farmers through multilingual chat, voice, and image-based crop disease detection using Google Gemini and Groq APIs.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published