DEV Community

Aditya Sorathiya
Aditya Sorathiya

Posted on

I built an AI game that forces you to close this tab and go outside 🌿 (Built with Client-Side WASM)

#devchallenge #hf26challenge #ai #webdev

Every developer knows the feeling. You sit down to solve "one quick bug," and suddenly it's 11:00 PM, your eyes are bloodshot, and you haven't seen a tree in three days.

As a Class 10 student developer, I wanted to build something for the Hacktoberfest Week 1 "Touch Grass" challenge that addresses this head-on. Most software is engineered to trap your attention inside a viewport. I wanted to build an app where the screen's only job is to get you away from it.

Introducing NatureMate — Touch Grass Edition.

🎮 How the Game Works

Instead of generating a boring digital checklist, NatureMate turns the real world into an active gaming arena:

  1. Accept a Quest: The app randomly generates a real-world object for you to discover (a bicycle, a bench, a dog, a backpack).
  2. Step Outside: You actually have to stand up, open your door, and walk into your neighborhood or local park.
  3. Point & Verify: Use your mobile browser's camera to capture a frame of the target object.
  4. On-Device AI Verification: A localized computer vision model reviews the frame and rewards you with XP, coins, and streak multipliers if you found it!

🧠 Architecting Client-Side AI (No API Keys, Zero Server Costs)

When planning this app, I wanted to avoid a bulky cloud backend. Pulling inspiration from my previous encrypted project ecosystem (PasteDB), privacy and speed were my main priorities.

Instead of routing camera frames to an external API, NatureMate handles machine learning entirely inside the browser's execution thread:

  • The Engine: Built cleanly using Astro, modern CSS variables, and vanilla JavaScript.
  • The Core ML Layer: Powered by Transformers.js bound to an ONNX Runtime Web / WebAssembly (WASM) layer.
  • The Model: A lightweight, quantized YOLOS-tiny model that maps out 43 distinct object classes directly inside your device's memory footprint.

Because the analysis is 100% local, it functions seamlessly on mobile browsers without lagging out your cellular data or logging your camera stream to a server.

🚀 Gamifying Healthy Habits

To keep loops interesting, I built in real arcade mechanics:

  • ❤️ 3 Lives System: Skipping an unachievable object drops a life. Failing a snapshot doesn't. Hit 0 lives, and it's Game Over.
  • ⏱️ Touch Grass Run: A separate 10-minute sprint challenge where you are tasked with identifying a specific subset of objects before the countdown clock self-destructs.

🤝 Let's Connect!

I would love to get your feedback! Open up the live link on your phone, step outside your room for five minutes, and let me know if the model tags your targets correctly.

If you like the architecture, feel free to drop a ⭐ on the GitHub Repo or open an issue if you want to help me add custom object classes!

Top comments (0)