<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Sparsh Kumbhare</title>
    <description>The latest articles on DEV Community by Sparsh Kumbhare (@big0boy).</description>
    <link>https://dev.to/big0boy</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4164649%2Fc533647f-9f74-446f-b6ed-5dff91a0d577.png</url>
      <title>DEV Community: Sparsh Kumbhare</title>
      <link>https://dev.to/big0boy</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/big0boy"/>
    <language>en</language>
    <item>
      <title>LeafPace - Touch grass</title>
      <dc:creator>Sparsh Kumbhare</dc:creator>
      <pubDate>Fri, 09 Oct 2026 21:20:25 +0000</pubDate>
      <link>https://dev.to/big0boy/leafpace-touch-grass-516l</link>
      <guid>https://dev.to/big0boy/leafpace-touch-grass-516l</guid>
      <description>&lt;h1&gt;
  
  
  LeafPace 🍃
&lt;/h1&gt;

&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/hacktoberfest-week1-2026-10-05"&gt;Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;The screen must be the shortest part of the experience.&lt;/strong&gt; 30 seconds on your phone → 45 minutes on the trail.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;LeafPace&lt;/strong&gt; is a zero-backend progressive web app that gets runners, walkers, and hikers off the screen and into the wild — in under 30 seconds:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Nature-biased loop synthesis&lt;/strong&gt; — pick 🏃 Run / 🚶 Walk / 🥾 Hike, a distance (1–15 km), and a greenery bias (Dense Canopy / Park Hopper / Dirt Trail). LeafPace queries &lt;strong&gt;OpenStreetMap&lt;/strong&gt; 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.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Solar &amp;amp; shade advisory&lt;/strong&gt; — 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.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;GPX hand-off&lt;/strong&gt; — 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.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Screen off. Touch grass.&lt;/strong&gt; — after export, the screen dims and simply says: pocket your phone.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Who it's for:&lt;/strong&gt; anyone who wants their run or hike to happen &lt;em&gt;outside&lt;/em&gt; the algorithm — and whose home address shouldn't be uploaded to a fitness social network to do it.&lt;/p&gt;

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




&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;🔗 &lt;strong&gt;Live app: &lt;a href="https://big0boy.github.io/LeafPace/" rel="noopener noreferrer"&gt;https://big0boy.github.io/LeafPace/&lt;/a&gt;&lt;/strong&gt; (GitHub Pages, zero hosting cost)&lt;/p&gt;

&lt;p&gt;Try it on your phone: open the link, tap &lt;strong&gt;🍃 Synthesize Trail&lt;/strong&gt;, then &lt;strong&gt;📱 Lock Phone &amp;amp; Touch Grass&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;

&lt;p&gt;📦 &lt;strong&gt;Repo: &lt;a href="https://github.com/Big0boy/LeafPace" rel="noopener noreferrer"&gt;https://github.com/Big0boy/LeafPace&lt;/a&gt;&lt;/strong&gt; — every dependency is open source, every data source is an open commons.&lt;/p&gt;

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

&lt;p&gt;The part I'm proudest of is the green-space lookup, because public open infrastructure is &lt;em&gt;flaky&lt;/em&gt; 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:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// First usable answer wins; a broken mirror can never stall route generation.&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;winner&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;firstSuccess&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;GreenSpaceLookup&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="nx"&gt;overpassWave&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;nominatimWave&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;winner&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;info&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;winner&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;source&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;overpass&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Overpass&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Nominatim&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; green-space lookup succeeded (&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;winner&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;spaces&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; results)`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;winner&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;spaces&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  How I Built It
&lt;/h2&gt;

&lt;p&gt;The AI core is &lt;strong&gt;open-weight models running natively on the phone's GPU&lt;/strong&gt; via &lt;a href="https://webllm.mlc.ai/" rel="noopener noreferrer"&gt;WebLLM&lt;/a&gt; (WebGPU):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Model:&lt;/strong&gt; &lt;code&gt;SmolLM2-360M-Instruct&lt;/code&gt; (quantized, ~250 MB cached in the browser) — swappable to &lt;code&gt;Qwen2.5-0.5B/1.5B-Instruct&lt;/code&gt; by changing one constant in &lt;code&gt;src/services/webgpu-llm.ts&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Prompt architecture:&lt;/strong&gt; 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: &lt;em&gt;foliage highlight&lt;/em&gt;, &lt;em&gt;surface &amp;amp; footing advice&lt;/em&gt;, &lt;em&gt;mindset cue&lt;/em&gt; ("leave the earbuds behind…").&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Never blocks:&lt;/strong&gt; 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 &lt;strong&gt;fully offline&lt;/strong&gt; on the trail.&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;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.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why Does Open Innovation Matter?
&lt;/h2&gt;

&lt;p&gt;Because &lt;strong&gt;both halves of LeafPace only exist because of open infrastructure&lt;/strong&gt;, and each has a closed-API twin that would be &lt;em&gt;worse for the user&lt;/em&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Open geospatial commons:&lt;/strong&gt; 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 &lt;em&gt;by&lt;/em&gt; the commons, &lt;em&gt;from&lt;/em&gt; the commons.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Open-weight models:&lt;/strong&gt; 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.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Zero server, zero cost:&lt;/strong&gt; no database of user tracks to leak, no bill to shut down. An open-source PWA on free static hosting is a complete product.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Prize Categories
&lt;/h2&gt;

&lt;p&gt;Entering every category this touches — please verify final category names against the &lt;a href="https://dev.to/challenges/hacktoberfest-week1-2026-10-05"&gt;challenge page&lt;/a&gt;:&lt;/p&gt;

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




&lt;h2&gt;
  
  
  Use of AI
&lt;/h2&gt;

&lt;p&gt;AI was used to create this project. The on-device briefing model (&lt;code&gt;SmolLM2-360M-Instruct&lt;/code&gt;) 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.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>hf26challenge</category>
      <category>ai</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
