This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass
What I Built
hyper-local digital naturalist, designed to reverse the "doomscrolling" trend and get people into the woods.
Instead of acting as a generic map or a chatty assistant, TerraScout generates a personalized "Nature Quest" (e.g., Find a red oak leaf, Spot a local songbird, Locate a quartz rock) based on your selected location. Once you hit the trail, the app is designed to be pocketed. The core feature is the Offline Field Guide: If you spot something interesting or need a hint to complete your quest, you can ask the app in natural language. Because the AI runs entirely locally in the browser memory, you can get instant answers deep in the woods or canyons where cellular service drops to zero. The screen is strictly a tool to facilitate physical exploration, not the destination itself.
Code
How I Built It
TerraScout was built within a highly constrained timeframe using the Google AntiGravity multi-agent IDE.
The Tech Stack & Open-Source AI:
Local AI Inference (The Core): The Offline Field Guide is powered by WebLLM leveraging the WebGPU API. It runs the open-weight gemma-2-2b-it-q4f16_1-MLC model entirely locally on the user's device (phone or laptop). The model is cached in IndexedDB via Service Workers, allowing it to initialize without a network connection.
Frontend PWA: Built with Next.js 16 (App Router) and Tailwind CSS. I used next-pwa to ensure the application shell caches correctly for offline reopening.
Backend & Data (The Pre-Hike Phase): Hosted on Render (frontend) and DigitalOcean (backend microservices). When the user is still on Wi-Fi, the app uses SerpApi to check trail conditions and TabPFN to analyze local tabular weather datasets (stored in TigerData) to predict the most likely flora/fauna to generate the quest. The AI orchestration was mapped using Entire.
Database & Dashboard: Completed quests sync back to MongoDB Atlas when the user reconnects, managed via a Backboard admin panel.
Development Tools: Rapidly prototyped the Gemma prompts using Tinker, and accelerated the Next.js boilerplate using GitHub Copilot alongside AntiGravity.
Why Does Open Innovation Matter?
By utilizing open-weight models like Gemma 2B and open frameworks like WebLLM, TerraScout achieves three things closed systems cannot:
Zero-Connectivity Execution: You can take the AI miles away from a cell tower. It processes your questions instantly on your device's GPU.
Absolute Privacy: Your location, queries, and trail habits never hit a remote server while you are exploring.
Zero Inference Cost: I don't pay a cent for API calls when users are chatting with the field guide on the trail.
My Agent Session
Google AntiGravity's autonomous agent workflows to handle the WebGPU boilerplate and Next.js PWA configuration.
Execute the autonomous build plan to implement TerraScout, a production-minded offline nature quest PWA. Spawn parallel subagents for terminal operations, file editing, and browser validation. Prioritize functional code, local WebGPU inference, and a highly polished mobile-first UI.
Critical Constraint: Do not claim a feature works unless you have implemented and verified it. Do not hallucinate API keys, remote backend dependencies, or unsupported WebLLM features.
Phase 0: Repository Initialization & Version Control
Phase 1: Environment Audit & Dependency Resolution
Phase 2: Core UI & Mock Quest Engine (app/page.tsx)
Phase 3: WebLLM Integration (Real Local Inference)
Phase 4: Validation & Finalization
Implemented and verified TerraScout, an offline nature scavenger hunt and wilderness reconnaissance Progressive Web Application (PWA) with on-device WebGPU inference via WebLLM.
Key Deliverables Across All Phases:
-
Phase 0 — Repository Setup & Version Control:
- Initialized Git repository with Next.js App Router structure and strict .gitignore.
- Enforced Scheduled Commit Protocol with atomic commits for each phase (86efaa5, c7ffeff, d25fcfb, 60c7a7e, dad71b2, 58b1234).
-
Phase 1 — Dependencies & PWA Offline Shell:
- Installed @mlc-ai/web-llm and configured @ducanh2912/next-pwa in next.config.mjs with 15MB cache limits to precache WebAssembly runtimes and the app shell.
- Generated PWA manifest.json and standalone icons (192x192, 512x512).
-
Phase 2 — Core UI & Mock Quest Engine:
- Built a mobile-first dark earthy backcountry palette (Deep Pine, Moss, Sage, Parchment).
- Implemented controlled location input with real-time validation and preset trailheads.
- Built procedural quest engine (lib/questEngine.ts) returning three contextual items per biome (Coniferous, Coastal, Montane, Desert, Urban, Woodland).
- Built interactive checklist with accessible checkboxes (role="checkbox", aria-checked) and real-time progress calculation.
- Added dedicated 4-card Offline Field Guide handbook.
-
Phase 3 — WebLLM On-Device WebGPU Inference:
- WebGPU capability detection with graceful fallback UI for unsupported browsers.
- Integrated CreateMLCEngine with primary target model gemma-2-2b-it-q4f16_1-MLC and low-memory Qwen2.5-0.5B-Instruct-q4f16_1-MLC fallback.
- Real-time initProgressCallback displaying true progress percentage and compilation stages.
- Silent system prompt injection (max 2 sentences, scout guidelines) with chat history sanitization.
- Functional state updates appending streaming tokens incrementally.
-
Phase 4 — Validation & Testing:
- Automated Unit Tests: 10/10 tests passed (npm test).
- Typecheck & Lint: Zero errors, zero warnings (tsc --noEmit, next lint).
- Production Build: Compiled cleanly with prerendering and service worker generation (npm run build).
- End-to-End Browser QA: Verified responsive viewports, validation edge cases, quest generation, checklist progress, and WebGPU detection.
- Comprehensive documentation in TERRASCOUT_SUMMARY.md.
Prize Categories
Github Copilot
Render
Tinker
Gemma
Top comments (0)