DEV Community

Prabakaran
Prabakaran

Posted on

Plant Care AI - Snap, Identify, Thrive.

#devchallenge #hf26challenge

Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass Submission 🌿

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

PlantCare AI — Turn Screen Time into Soil Time 🌿

What I Built

Modern life keeps us tethered to glowing rectangles. We spend hours typing into terminal prompts, doom-scrolling social feeds, and sitting under sterile fluorescent lighting. PlantCare AI was designed with a simple philosophy: use intelligent technology as a catalyst to get people off their screens and into the natural world.

PlantCare AI is an intelligent botanical companion that empowers anyone—from novice apartment dwellers to seasoned urban gardeners—to care for living green plants, step into their gardens, touch actual soil, and build a flourishing indoor or outdoor plant sanctuary.

How It Gets People "Touching Grass"

  1. Physical Sensory Engagement: Rather than an abstract digital tracker, PlantCare AI guides users through physical, tactile plant care routines—testing soil moisture with their fingertips 2 inches deep, inspecting the undersides of leaves, pruning dead foliage, wiping dust off foliage, and feeling root ball texture.
  2. Real-World Camera Exploration: Users step away from their desk, grab their phone, walk to balconies, windowsills, gardens, or neighborhood parks, and point their camera at real botanical specimens for instant species identification.
  3. Plant Doctor Symptom Diagnostics: When a plant shows yellowing leaves, drooping stems, or pests, users physically inspect the plant's stems and root ball, log observed physical symptoms, and perform concrete rescue protocols (aerating soil, bottom-watering, pruning rotted roots).
  4. Pet & Household Safety: Gives pet owners actionable knowledge to keep dogs and cats safe while bringing real nature indoors.

Demo

Experience the live application here:

Key Features in the Demo

  • Interactive Plant Sanctuary (Dashboard): View your physical plants with custom nicknames (Monty, Grace, Spike), current room locations, health indicators (Thriving, Needs Care, In Treatment), and dynamic moisture meters.
  • Direct Device Camera AI Scanner: Point your smartphone or laptop webcam directly at any plant to identify botanical species, confidence scores, care difficulty, and native habitats.
  • Plant Profile & Care Guides: Foot-candle lighting advice, soak-and-dry watering protocols, temperature/humidity tolerance, and ASPCA pet safety ratings.
  • Plant Doctor Diagnostic Wizard: Select leaf or root symptoms (spider mites, yellowing, fungal mold, root rot) to receive emergency triage and multi-week rehabilitation regimens.
  • Botanical Encyclopedia & Care Hub: In-depth horticultural guides on winter dormancy, lighting orientation, and natural pest remedies.

Code

The application is built with a modern TypeScript, React, Vite, and Express stack:

  • Source Code Entry Points:
    • src/App.tsx: Central state hub, schedule calculations, and responsive layout.
    • src/components/ScanIdentify.tsx: Direct camera capture (getUserMedia) and AI vision analysis.
    • src/components/DiagnosticTool.tsx: Interactive symptom checker and pathology solver.
    • src/components/PlantProfileModal.tsx: Comprehensive botanical care cards and care history timeline.
    • src/components/Dashboard.tsx: Plant grid with dynamic watering reminders and room filters.
    • server.ts: Server-side proxy handling botanical vision and diagnostic prompts via @google/genai.

How I Built It

PlantCare AI combines modern web standards, direct camera hardware access, and generative AI reasoning into a cohesive, responsive experience:

  1. AI Vision & Botanical Intelligence:

    • Integrated the modern @google/genai TypeScript SDK using gemini-3.8-flash on the server backend to analyze leaf margins, stem structures, and pathology symptoms from image uploads and camera frames.
    • Structured JSON schema validation (responseSchema with enums and strongly-typed care properties) ensures consistent, deterministic data for watering days, light tolerances, and pet toxicity.
    • Built-in offline fallback engine containing rich botanical data ensures that even without an active network connection or API quota, users can always identify species and diagnose plant health issues.

  2. Hardware Camera Integration:

    • Implemented real-time HTML5 video streaming (navigator.mediaDevices.getUserMedia) with environment-facing camera support, targeting reticles, scanline animations, and instantaneous canvas snapshot capture.

  3. Dynamic Care Math Engine:

    • Developed a calendar-aware schedule calculator (src/utils/careCalculations.ts) that calculates days elapsed since last soaking, flags overdue cycles, and renders smooth visual countdown meters.

  4. Lush Botanical Design System:

    • Styled with Tailwind CSS using a deep emerald, sage, and teal glassmorphic theme.
    • Clean typographic pairing: Fraunces editorial serif for botanical headers paired with Plus Jakarta Sans for clean, accessible mobile UI controls.
    • Zero-pill metadata design discipline and touch targets optimized for mobile browser ergonomics.

Why Does Open Innovation Matter?

Open innovation and open-source ecosystems are the foundation of accessible environmental and botanical education:

  1. Democratizing Botanical Knowledge: Horticultural expertise has historically been locked in expensive textbooks or proprietary agricultural tools. Open AI models and open-source frameworks make advanced plant care, pest diagnosis, and sustainable cultivation accessible to anyone with a smartphone and a potted plant.
  2. Local & Privacy-Preserving Care: Plant owners should not need to send their private photos to walled gardens or pay recurring subscriptions just to know if a houseplant is poisonous to their puppy. Open development allows for offline-capable, transparent care engines.
  3. Collective Stewardship of Living Ecosystems: Open-source tooling allows communities of gardeners, urban farmers, and community organizers to share native species datasets, regional frost dates, and eco-friendly organic remedies without platform gatekeeping.

My Agent Session

  • Built collaboratively using Google AI Studio Build agent workflows.
  • Architecture: Express full-stack server mounting Vite middlewares, @google/genai SDK integration, and responsive mobile-first React frontend.

Prize Categories

  • Touch Grass Challenge (Week 1): Directly inspires users to step away from digital screens, physically check soil moisture, step outdoors, and cultivate living green plants.
  • Most Impactful Use of AI: Applying computer vision and multimodal reasoning to practical everyday living—protecting pets from plant toxicity and preventing houseplant mortality.

Top comments (0)