<?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: Yohan Ahmad</title>
    <description>The latest articles on DEV Community by Yohan Ahmad (@yohan_21).</description>
    <link>https://dev.to/yohan_21</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%2F4173029%2F7cadbb8d-b77c-43a9-ae81-98b10ce4d673.jpg</url>
      <title>DEV Community: Yohan Ahmad</title>
      <link>https://dev.to/yohan_21</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/yohan_21"/>
    <language>en</language>
    <item>
      <title>Trailmind: Browser-Based AI That Helps You Touch Grass</title>
      <dc:creator>Yohan Ahmad</dc:creator>
      <pubDate>Fri, 09 Oct 2026 11:10:21 +0000</pubDate>
      <link>https://dev.to/yohan_21/trailmind-browser-based-ai-that-helps-you-touch-grass-5ekg</link>
      <guid>https://dev.to/yohan_21/trailmind-browser-based-ai-that-helps-you-touch-grass-5ekg</guid>
      <description>&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;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;Trailmind: Browser-Based AI That Helps You Touch Grass&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3ebpox6fctgvo5sj6wax.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3ebpox6fctgvo5sj6wax.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I built &lt;strong&gt;Trailmind&lt;/strong&gt;, an AI-powered outdoor activity planner with a simple goal: &lt;strong&gt;help people spend less time deciding what to do and more time outside.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Going outdoors does not always need to mean planning a hike or travelling somewhere new. Sometimes, all you have is twenty minutes and a nearby park. Trailmind turns that small window into a manageable outdoor activity.&lt;/p&gt;

&lt;p&gt;Users choose:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Their mood:&lt;/strong&gt; Curious, Calm, Restless, or Tired.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Available time:&lt;/strong&gt; Between 10 and 60 minutes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Their surroundings:&lt;/strong&gt; A nearby park, garden or courtyard, or familiar neighbourhood.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Personal preferences:&lt;/strong&gt; Such as a seated activity, no equipment, or an interest in observing birds.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The AI generates an adventure card with a short description, three to five steps, and suggested items to bring.&lt;/p&gt;

&lt;p&gt;Once the plan is ready, users can start a &lt;strong&gt;screen-away timer&lt;/strong&gt;, put their device aside, and enjoy the activity. When they return, a &lt;strong&gt;field journal&lt;/strong&gt; lets them save something they noticed—a sound, a colour, or a small moment worth remembering.&lt;/p&gt;

&lt;p&gt;Trailmind is intended for students, people taking a break from work, and anyone who wants an easy starting point for spending more time outdoors.&lt;/p&gt;

&lt;p&gt;The idea is simple: &lt;strong&gt;make the screen the starting point, then give people a reason to leave it.&lt;/strong&gt;&lt;/p&gt;

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

&lt;p&gt;🌿 &lt;strong&gt;&lt;a href="https://yohan21-arch.github.io/Trailmind/" rel="noopener noreferrer"&gt;Try Trailmind&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffbg66k3f5bpdsf99ocwl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffbg66k3f5bpdsf99ocwl.png" alt=" " width="800" height="382"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To explore the experience:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Choose your mood, available time, and surroundings.&lt;/li&gt;
&lt;li&gt;Add any preferences.&lt;/li&gt;
&lt;li&gt;Click &lt;strong&gt;Load AI &amp;amp; plan my adventure&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Review the suggestion and start screen-away time.&lt;/li&gt;
&lt;li&gt;Return and save a reflection in the field journal.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;For a quick preview, click &lt;strong&gt;Explore a sample (no AI)&lt;/strong&gt;. This loads a clearly labelled example without downloading the AI model.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Before trying AI generation:&lt;/strong&gt; use a WebGPU-capable browser and device. The first run downloads model files, which can take several minutes. There is no Ollama installation, account, or API key to configure.&lt;/p&gt;

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

&lt;p&gt;💻 &lt;strong&gt;&lt;a href="https://github.com/Yohan21-arch/Trailmind" rel="noopener noreferrer"&gt;GitHub repository&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The browser version uses HTML, CSS, and JavaScript. Its main components are the planning form, browser AI integration, adventure cards, timer, and local journal.&lt;/p&gt;

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

&lt;p&gt;I built Trailmind using &lt;strong&gt;HTML, CSS, and vanilla JavaScript&lt;/strong&gt;, with &lt;strong&gt;WebLLM&lt;/strong&gt; running an &lt;strong&gt;open-weight Qwen2.5 0.5B Instruct model&lt;/strong&gt; inside the browser.&lt;/p&gt;

&lt;p&gt;The open AI components power the main feature: generating an activity from the user’s mood, time, surroundings, and preferences.&lt;/p&gt;

&lt;p&gt;The process works like this:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The app checks whether the browser exposes a compatible WebGPU adapter.&lt;/li&gt;
&lt;li&gt;WebLLM loads the model, selecting a compatible precision variant.&lt;/li&gt;
&lt;li&gt;The user’s preferences are passed to the model locally.&lt;/li&gt;
&lt;li&gt;The model returns a structured JSON response.&lt;/li&gt;
&lt;li&gt;JavaScript checks the response structure and displays the adventure card.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The prompt asks for short activities in familiar surroundings, with preparation and return included in the available time. It also asks the model to respect accessibility preferences and avoid inventing destinations, routes, or weather conditions.&lt;/p&gt;

&lt;p&gt;The app checks for missing fields, incomplete responses, and invalid output before displaying a plan. These checks validate the format; users still need to review whether an activity is appropriate for them.&lt;/p&gt;

&lt;p&gt;The journal uses the browser’s &lt;code&gt;localStorage&lt;/code&gt;, while the active timer uses elapsed clock time. It does not track GPS movement or claim to verify time spent outdoors.&lt;/p&gt;

&lt;p&gt;One important change during development was moving away from a version that required a separate Ollama installation. I wanted the entry point to be a webpage, so I switched to browser inference through WebLLM. The tradeoff is that visitors need compatible hardware and must download the model on first use.&lt;/p&gt;

&lt;p&gt;The main technologies behind the project are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;HTML and CSS&lt;/strong&gt; for the interface and responsive layout.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;JavaScript&lt;/strong&gt; for application behavior and local storage.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://github.com/mlc-ai/web-llm" rel="noopener noreferrer"&gt;WebLLM&lt;/a&gt;&lt;/strong&gt; for browser inference.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://huggingface.co/Qwen/Qwen2.5-0.5B-Instruct" rel="noopener noreferrer"&gt;Qwen2.5 0.5B Instruct&lt;/a&gt;&lt;/strong&gt; for activity generation.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;WebGPU&lt;/strong&gt; for local acceleration.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;GitHub Pages&lt;/strong&gt; for the demo website.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is an early prototype. It generates activity ideas rather than verified navigation instructions, and it does not include live weather or location lookup.&lt;/p&gt;

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

&lt;p&gt;Open innovation made it possible to build Trailmind around &lt;strong&gt;local inference, an inspectable implementation, and a downloadable model&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;First, personal preferences can stay on the device.&lt;/strong&gt; The application passes planning inputs to the browser’s model engine rather than sending them to a hosted AI API. Journal entries remain in browser storage and are not included in the model prompt.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Second, the core behavior can be changed.&lt;/strong&gt; I can inspect the prompt, adjust the response format, improve validation, or experiment with another compatible model. The project is not dependent on one proprietary inference endpoint.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Third, there is no per-request model API fee.&lt;/strong&gt; Generation uses the visitor’s hardware. That still involves bandwidth, memory, and electricity, but it avoids requiring an API key or funding a hosted inference service for every activity generated.&lt;/p&gt;

&lt;p&gt;A closed API could also generate outdoor plans, but it would not provide this same on-device architecture. For Trailmind, the open approach made a static website with local AI possible.&lt;/p&gt;

&lt;p&gt;There are tradeoffs: a small model can make mistakes, first-time downloads are substantial, and not every device supports the required GPU features. External hosts still deliver the runtime and model files, so local inference should not be confused with zero network activity. Reliable offline reload is not guaranteed in this version.&lt;/p&gt;

&lt;p&gt;For me, the value of open innovation is the ability to understand and change the system while giving users more control over where their inputs are processed.&lt;/p&gt;

&lt;h2&gt;
  
  
  My Agent Session
&lt;/h2&gt;

&lt;p&gt;I used ChatGPT/Codex as a coding assistant during development.&lt;/p&gt;

&lt;p&gt;The process included creating the initial interface, exploring an Ollama-based version, replacing that setup with browser AI through WebLLM, and separating the application into HTML, CSS, and JavaScript files.&lt;/p&gt;

&lt;p&gt;The assistant also helped with documentation, syntax checks, and mocked checks of the sample, timer, journal, and AI integration paths. Those checks are distinct from testing real-model performance on users’ devices.&lt;/p&gt;

&lt;p&gt;The key design decision was to reduce setup friction while keeping open-weight AI central to the experience.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Trailmind’s goal is a small one: help someone turn a little free time into a little more time outside.&lt;/strong&gt;&lt;/p&gt;

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