DEV Community

Cover image for Touch Grass: Snap Nature, Learn in Seconds, Get Back Outside 🌿
Sara Sinha
Sara Sinha

Posted on

Touch Grass: Snap Nature, Learn in Seconds, Get Back Outside 🌿

#devchallenge #hf26challenge #ai #webdev

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

What I Built

Most modern apps are engineered to maximize your screen time—rewarding infinite scrolling, intrusive notifications, and continuous engagement. Touch Grass is built with the opposite philosophy: a digital field companion designed to get you off your phone and back into the wild as quickly as possible.

When walking outdoors, you often encounter a strange wildflower, an unfamiliar bird, or a bizarre fungus on a tree trunk. Instead of getting lost in search engines or bloated plant-identifier apps loaded with paywalls and ads, Touch Grass keeps it simple:

  1. Snap a photo (or choose one from your camera roll).
  2. An open-weight vision model instantly analyzes the image and returns a concise, structured field-guide card:
    • Common & binomial scientific names
    • Classification & confidence rating (High / Medium / Low)
    • Key field recognition marks (visual cues to look for)
    • Lifespan, habitat, and global range
    • Fun ecological facts
    • Safety warnings (skin irritants, toxicity, stings, protected species)
    • Alternative look-alikes if confidence is not high.
  3. Once identified, the app presents a randomized outdoor prompt (e.g., "Phone away, eyes up. Spot the next one without the screen!") nudging you to pocket your phone and continue exploring.

Who Is It For?

  • Hikers, trail runners, and campers who want quick, private identification on the trail.
  • Families and curious learners exploring backyard biodiversity.
  • Privacy-conscious outdoor lovers who don't want their photos, GPS coordinates, or personal data harvested by commercial trackers.

Home

Demo

Code

The entire codebase is open source:

GitHub Repository: https://github.com/sarasinha1207/Touch-Grass

Architecture Highlights

  • Single Runtime Dependency: Built purely with Node.js and Express. No heavy frontend frameworks, no bundlers (Webpack/Vite), and no databases.
  • Pure Web Standards: Semantic HTML5, modern CSS3 custom properties with native dark mode, and vanilla ES6+ JavaScript.
  • Zero-Trust Security: Hardened with a strict Content-Security-Policy (CSP), and LLM text outputs are rendered solely via DOM textContent APIs to eliminate prompt-injection / XSS vulnerabilities.

How I Built It

1. Open-Weight Vision Model

The core intelligence is powered by open-weight multimodal vision models (such as Qwen2.5-VL:7B). Because the backend connects to an OpenAI-compatible /chat/completions endpoint, the app is completely model-agnostic:

  • Locally: Uses Ollama on localhost (ollama pull qwen2.5vl:7b).
  • In Production / Cloud: Connects to hosted open-weight endpoints (such as OpenRouter or Together AI) without requiring GPU hardware on the web server.

2. Client-Side Privacy & Compression

Before an image ever leaves the user's browser:

  • An HTML5 Canvas automatically resizes the image to a maximum dimension of $1024\text{ px}$ at 85% JPEG quality.
  • This strips all embedded EXIF metadata and GPS coordinates right on the device.
  • Upload payloads are reduced from $15\text{–}25\text{ MB}$ camera originals to lightweight $\sim 200\text{ KB}$ data strings, drastically accelerating model inference and saving mobile bandwidth.

3. Naturalist System Prompting & Resilient Parsing

A carefully structured field-naturalist prompt instructs the vision model to return strict, typed JSON. The server normalizes bounds, sanitizes array lengths, degrades confidence gracefully when images are blurry, and strips markdown code fences so model outputs parse cleanly every time.

Why Does Open Innovation Matter?

1. Privacy in the Wilderness

Closed, proprietary identification apps routinely store user photos on centralized servers, link them to exact GPS coordinates, and use them to train commercial models or sell telemetry. Open-weight models empower users to run the entire stack locally on a laptop or edge device with zero internet connection and zero data leaving their machine.

2. Eliminating Artificial Paywalls & Gatekeeping

Learning about the natural world around us should be free and accessible to all. Open innovation eliminates paywalls, per-scan microtransactions, and vendor lock-in.

3. Longevity & Portability

If a proprietary API changes its terms of service, quadruples its pricing, or discontinues a model, closed-source apps break. With open weights, developers can switch providers or self-host newer models with a single environment variable change.

My Agent Session

This project was built and audited using agentic pair programming:

  • Architecture & Code Hardening: Refactored backend JSON extraction to safely isolate markdown code fences and prevent denial-of-service edge cases.
  • Security Audit: Enforced strict Content-Security-Policy directives, validated canvas resizing pipelines to strip GPS metadata, and verified zero-dependency static delivery.
  • Deployment Engineering: Generated Render infrastructure-as-code blueprints (render.yaml) and created automated cross-environment test scripts.

Prize Categories

Best Use of Render

  • How it's used: Touch Grass is hosted and deployed as a live cloud service on Render (https://touch-grass-6ogh.onrender.com/).
  • Infrastructure as Code: The project utilizes a native render.yaml Blueprint to define the entire web service architecture—automating build and startup commands (npm install & npm start), configuring zero-downtime health checking via /healthz, managing environment variables (AI_BASE_URL, AI_MODEL, AI_API_KEY), and leveraging Render's reverse proxy integration (trust proxy 1) for reliable per-IP rate limiting.

Best Use of Gemma (Open-Weight Model)

  • How it's used: Touch Grass is built to support Google's open-weight Gemma model ecosystem for local edge inference. Users can run smaller open-weight vision models locally on their laptops via Ollama or private hosts without sending any data over the internet.

Now put your phone away, step outside, and go touch grass! 🌿

Top comments (0)