{"slug": "florafind-grounded", "title": "🍀 FloraFind & Grounded", "summary": "A developer built FloraFind & Grounded, a gamified single-page web app that turns outdoor breaks into quests and uses Google AI Studio's open-weight Gemma 2 and Gemini Flash models to identify plants from text descriptions or leaf photos. The client-side app stores API keys only in browser LocalStorage, calls Google's generative language endpoints directly over HTTPS, and includes an offline simulator fallback plus a custom fetchWithTimeout wrapper with a 19-second deadline.", "body_md": "*This is a submission for the [Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass](https://dev.to/challenges/hacktoberfest-week1-2026-10-05)*\n\n## \n  \n  \n  What I Built\n\n**FloraFind & Grounded** is a gamified single-page web application (SPA) designed to solve a universal developer problem: terminal fatigue, continuous debugging burn-out, and excessive screen time. Built specifically for Week 1 of the **Hacktoberfest 2026 DEV Challenge (\"Touch Grass\")**, this project turns stepping away from the desk into an interactive, rewarding outdoor quest.\n\n## \n  \n  \n  🌟 Key Highlights:\n\n1. \n**🌿 \"Screen-Time Detox\" Quest Engine** :\n   - Generates real-world outdoor challenges (*\"Inspect Sidewalk Chlorophyll\"* ,*\"Locate 3-Leaf Hardware Redundancy\"* ,*\"Deep Canopy Sunlight Audit\"* ).\n  - Category filtering (*Quick 5-Min* ,*Flora Scavenger* ,*Deep Forest Debug* ).\n  - Logs outdoor uptime minutes, Grass XP points, and levels upon completion.\n2. \n**🤖 Cloud Open Innovation AI Identifier (\"FloraFind\")** :\n   - Accepts both natural language plant descriptions and direct leaf photo uploads via camera/file picker.\n  - Communicates with Google AI Studio open-weight models (**Gemma 2** and**Gemini Flash** ).\n  - Compiles plants into hilarious developer-centric botanical specifications (*Hardware Redundancy* ,*Photosynthesis SLA* ,*Developer Patch Notes* ).\n  - Features an **Interactive Percentage Loader** with dynamic 6-step ticker and anti-freeze timeouts.\n  - Includes an **Offline Simulator Fallback** mode if no API key is provided or network is offline.\n3. \n**📊 Outdoor Uptime & Streak Dashboard** :\n   - Tracks total outdoor minutes, active daily streaks, quests completed, and plant scans logged.\n  - Unlockable **Developer Grass Badges** (*Seedling Debugger* ,*Touch Grass Protocol* ,*Solar Streak* ,*Quantum Photosynthesis* ).\n  - Light & Dark mode theme engine with dynamic toggle.\n  - 100% persisted locally in browser `LocalStorage` .\n4. \n**🔒 Privacy-First Client Architecture** :\n   - No hardcoded API keys. User keys are stored **only** in the browser's`LocalStorage` .\n  - Direct HTTPS requests to Google AI Studio with zero intermediary backend servers.\n\n## \n  \n  \n  Demo\n\n🚀 **Live Application Demo**:\n\n[https://ujjwalgupta2021.github.io/FloraFind-and-Grounded/](https://ujjwalgupta2021.github.io/FloraFind-and-Grounded/)\n\n## \n  \n  \n  Code\n\n💻 **GitHub Repository**:\n\n[https://github.com/ujjwalgupta2021/FloraFind-and-Grounded](https://github.com/ujjwalgupta2021/FloraFind-and-Grounded)\n\n## \n  \n  \n  How I Built It\n\n### \n  \n  \n  🧠 Open-Source & Open-Weight AI Architecture\n\nThis application is built around Google AI Studio's open model endpoints, featuring **Google's Gemma open-weight series** (`gemma-2-27b-it`, `gemma-2-9b-it`) and fast multimodal models (` gemini-2.0-flash`, `gemini-1.5-flash`).\n\n1. \n**Automated Connection & Model Securer** :\n   - When a user inputs an API key, the app calls `ModelService.ListModels` (`https://generativelanguage.googleapis.com/v1beta/models` ) to discover authorized models.\n  - It runs an automated priority candidate test sweep to lock in a guaranteed 200 OK connection without requiring users to navigate complex dropdown settings.\n2. \n**AbortController Timeout Engine** :\n   - Built a custom `fetchWithTimeout()` wrapper with an optimal 19-second master deadline and 19-second direct fetch budget.\n  - Prevents browser requests from hanging indefinitely on slow or unresponsive endpoints.\n3. \n**Frontend Stack** :\n   - \n**Core** : Vanilla HTML5, Modern Modular JavaScript (ES6+)\n  - \n**Styling** : Tailwind CSS (Play CDN) + Vanilla CSS Glassmorphism & Keyframe Animations\n  - \n**Icons** : Lucide Icons\n  - \n**State Persistence** : Browser`LocalStorage`\n\n## \n  \n  \n  Why Does Open Innovation Matter?\n\nOpen innovation and open-weight models (such as Google's **Gemma** family) are fundamental to the future of software development:\n\n1. \n**Transparency & Sovereignty** : Open-weight models give developers full visibility into model behavior and parameter architectures, removing black-box dependency on proprietary closed APIs.\n2. \n**Client-Side Privacy Architecture** : Open endpoints allow applications like*FloraFind* to construct direct, peer-to-endpoint calls straight from the user's browser, enabling privacy-first architectures where user keys and personal data stay client-side.\n3. \n**Unlocking Creative Developer Tooling** : Open innovation allows developers to build specialized, niche AI experiences—like compiling real-world plants into hilarious developer SLA patch notes—without prohibitive licensing or API lock-in constraints.\n\n## \n  \n  \n  My Agent Session\n\nThis application was planned, architected, and built with the assistance of an autonomous agent swarm using **Antigravity 2.0**.\n\n## \n  \n  \n  Prize Categories\n\n- \n**🏆 Grand Prize / Open Innovation Track** : Best application leveraging open-weight AI models (Google Gemma / AI Studio).\n- \n**🌿 Touch Grass Week 1 Theme Track** : Best project encouraging physical outdoor interaction, screen-time detox, and real-world exploration.\n\n*Built with 💚 for the Hacktoberfest 2026 Week 1 DEV Challenge — Go Touch Grass!*", "url": "https://wpnews.pro/news/florafind-grounded", "canonical_source": "https://dev.to/ujjwalgupta2021/florafind-grounded-3pfn", "published_at": "2026-10-06 21:04:38+00:00", "updated_at": "2026-10-06 21:18:18.295823+00:00", "lang": "en", "topics": ["generative-ai", "ai-tools", "ai-products", "large-language-models", "computer-vision"], "entities": ["FloraFind & Grounded", "Google AI Studio", "Gemma 2", "Gemini Flash", "Hacktoberfest", "DEV Community", "Tailwind CSS", "GitHub"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/florafind-grounded", "markdown": "https://wpnews.pro/news/florafind-grounded.md", "text": "https://wpnews.pro/news/florafind-grounded.txt", "jsonld": "https://wpnews.pro/news/florafind-grounded.jsonld"}}