DEV Community

Cover image for LeafPace - Touch grass
Sparsh Kumbhare
Sparsh Kumbhare

Posted on AI-assisted

LeafPace - Touch grass

#devchallenge #hf26challenge #ai #webdev

LeafPace πŸƒ

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

The screen must be the shortest part of the experience. 30 seconds on your phone β†’ 45 minutes on the trail.

What I Built

LeafPace is a zero-backend progressive web app that gets runners, walkers, and hikers off the screen and into the wild β€” in under 30 seconds:

  1. Nature-biased loop synthesis β€” pick πŸƒ Run / 🚢 Walk / πŸ₯Ύ Hike, a distance (1–15 km), and a greenery bias (Dense Canopy / Park Hopper / Dirt Trail). LeafPace queries OpenStreetMap for real parks, woods, and nature reserves around you, projects a loop through them, and snaps it to the actual pedestrian network (OSRM foot, with the Valhalla open engine as fallback). Standard nav apps route you down the noisiest asphalt; LeafPace routes you under the trees.
  2. Solar & shade advisory β€” computes the sun's azimuth/elevation for your exact coordinates and time, and flags when you'll be running into blinding low sun versus cool canopy.
  3. GPX hand-off β€” one tap exports a GPX 1.1 file (200–300 trackpoints) for Garmin, Apple Watch, Strava, Organic Maps β€” or share it straight to your watch.
  4. Screen off. Touch grass. β€” after export, the screen dims and simply says: pocket your phone.

Who it's for: anyone who wants their run or hike to happen outside the algorithm β€” and whose home address shouldn't be uploaded to a fitness social network to do it.

Privacy by architecture: there is no backend. Your GPS coordinates never leave your device β€” every network call LeafPace makes (OSM Overpass, Nominatim, OSRM/Valhalla) is a location-independent public API query, and the AI runs 100% on-device.

Demo

πŸ”— Live app: https://big0boy.github.io/LeafPace/ (GitHub Pages, zero hosting cost)

Try it on your phone: open the link, tap πŸƒ Synthesize Trail, then πŸ“± Lock Phone & Touch Grass.

Code

πŸ“¦ Repo: https://github.com/Big0boy/LeafPace β€” every dependency is open source, every data source is an open commons.

Stack: React 18 + TypeScript + Vite + Tailwind, Leaflet, @mlc-ai/web-llm (lazy-loaded), SunCalc, Vitest, plus a dependency-free CDP smoke-test harness (scripts/smoke.mjs) that drives the real app in headless Chromium β€” fake GPS lock, route synthesis, GPX download and XML validation included.

The part I'm proudest of is the green-space lookup, because public open infrastructure is flaky and the app must never fail β€” it races three Overpass mirrors in parallel, hedges to Nominatim (a completely separate OSM service) if none answers in 2.5 s, retries, and only then falls back to synthetic parks:

// First usable answer wins; a broken mirror can never stall route generation.
const winner = await firstSuccess<GreenSpaceLookup>([overpassWave, nominatimWave]);
if (winner) {
  console.info(`${winner.source === 'overpass' ? 'Overpass' : 'Nominatim'} green-space lookup succeeded (${winner.spaces.length} results)`);
  return winner.spaces;
}
Enter fullscreen mode Exit fullscreen mode

How I Built It

The AI core is open-weight models running natively on the phone's GPU via WebLLM (WebGPU):

  • Model: SmolLM2-360M-Instruct (quantized, ~250 MB cached in the browser) β€” swappable to Qwen2.5-0.5B/1.5B-Instruct by changing one constant in src/services/webgpu-llm.ts.
  • Prompt architecture: the app builds a structured JSON digest (activity, distance, green spaces traversed, surface mix, sun angle, time of day) and the on-device model turns it into a 3-part naturalist briefing: foliage highlight, surface & footing advice, mindset cue ("leave the earbuds behind…").
  • Never blocks: if WebGPU is unavailable or the model isn't downloaded yet, a deterministic template generator produces the briefing instantly β€” the 30-second budget is sacred. Once weights are cached in IndexedDB, briefings work fully offline on the trail.

Around the model sits the open geospatial pipeline: Overpass API + Nominatim (green-space discovery), OSRM foot + Valhalla (pedestrian snapping), SunCalc (solar geometry), and a hand-rolled GPX 1.1 serializer. All of it is a static PWA with a service worker β€” deployable anywhere, free forever.

Testing: 29 vitest unit tests (loop geometry, polyline decoding, GPX, mirror-race fallbacks) plus the headless-browser smoke test, both run in CI on every push.

Why Does Open Innovation Matter?

Because both halves of LeafPace only exist because of open infrastructure, and each has a closed-API twin that would be worse for the user:

  • Open geospatial commons: proprietary map APIs bill per request and optimize for cars. OpenStreetMap has the unpaved path through the woods that Google never ranked. When the main Overpass mirror rate-limited me mid-build, I could race two community mirrors and a second open service (Nominatim) instead of reading a credit-card bill β€” resilience built by the commons, from the commons.
  • Open-weight models: your running route starts at your front door. Sending that prompt to a closed LLM API means uploading a precise home-coordinate fingerprint with it. WebGPU + open weights keep the entire inference β€” and the entire location history β€” physically on your phone, and keep working when you're already out of cell range.
  • Zero server, zero cost: no database of user tracks to leak, no bill to shut down. An open-source PWA on free static hosting is a complete product.

Prize Categories

Entering every category this touches β€” please verify final category names against the challenge page:

  • Open-Weight AI β€” SmolLM2 / Qwen2.5 run via WebLLM, fully on-device
  • Edge / Local Inference β€” WebGPU in the mobile browser, offline-capable after first model download
  • Privacy & Data Sovereignty β€” zero backend; location never leaves the device
  • Open Geospatial Commons β€” OpenStreetMap Overpass/Nominatim + OSRM/Valhalla

Use of AI

AI was used to create this project. The on-device briefing model (SmolLM2-360M-Instruct) is an open-weight model distributed by its creators β€” no closed or proprietary LLM API was used at any point, since the app's premise is that location data must never leave the device.

Top comments (1)

Collapse
 
marcusykim profile image
Marcus Kim •

The synthetic-parks fallback deserves a different UI state from a route verified against the pedestrian network. If Overpass and Nominatim both fail, I'd keep GPX export disabled until the route has trustworthy map data, rather than letting resilience turn an invented park into a destination. Your smoke test already covers GPX XML validation; an additional case could force every lookup to fail and assert that no export becomes available. A responsive app can still say it cannot produce a reliable route yet.