Dev.to AI πŸ€– Ai πŸ‘ 0 πŸ“– 4 min read

LeafPace - Touch grass

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.

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;
}

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.

πŸ“° Read the original article on Dev.to AI

Originally published by Dev.to AI. Aggregated on AIWithGhost for educational purposes β€” full credit and traffic to the original publisher.