DEV Community

Cover image for GrassLock: An In-Browser Open-Weight AI that Forces You to Touch Grass" published: true
1dharode
1dharode

Posted on

GrassLock: An In-Browser Open-Weight AI that Forces You to Touch Grass" published: true

What I Built

For the Hacktoberfest 2026 Week 1 "Touch Grass" challenge, I built GrassLock—a minimalist web utility designed to make screen time intentionally short.

The concept is simple: instead of doom-scrolling, you open GrassLock on your phone or laptop. The app blocks access to reward states until you physically walk outside and point the camera at live grass, a houseplant, or a tree. Once a nature object is recognized, the lock clears and records that you completed your outdoor break.

Demo & Code

Why Open-Source AI Matters Here

I chose to run an open-weight model directly in the client runtime rather than calling a closed commercial API (like OpenAI or Claude) for three key reasons:

  1. Complete Data Privacy: The camera feed never leaves the user's device. No image frames or GPS coordinates are sent to an external server. Everything is evaluated directly in the browser's JavaScript engine via open-source MobileNet.
  2. Zero Hosting & API Costs: Running open-source weights locally means zero server bills, zero token pricing, and no dependency on paid API keys.
  3. Works Anywhere: Because inference executes client-side using WebGL, users can load the web app and head out into trails or remote parks without needing high-speed mobile data.

How I Built It

  • Model: Open-weight MobileNet vision model loaded via TensorFlow.js.
  • Frontend: Vanilla HTML/JS with real-time frame classification every 1.2 seconds.
  • Detection Logic: The app scans top classification probabilities for botanical and nature keywords (grass, leaves, flora, trees) and switches states immediately upon confirmation.

Top comments (0)