TrailSense: An Offline Nature Companion Built to Keep You Off Your Phone

A developer built TrailSense, an offline-first web app that identifies bird songs and plants entirely on-device using the Web Audio API and in-browser computer vision. The app runs real-time FFT spectrogram analysis at an FFT size of 1024 to match avian acoustic profiles, such as the 2.2–3.4 kHz harmonic rhythm of an American Robin, and uses canvas-based leaf venation and color analysis for plant identification, with all data stored locally in IndexedDB and cached by a service worker for off-grid use.

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass https://dev.to/challenges/hacktoberfest-week1-2026-10-05 What I Built Have you ever gone for a hike to clear your head, heard a bird singing high up in the trees, pulled out your phone to look it up, and immediately run into a "No Internet Connection" spinner? Or worse , you open an app, and before you can even identify what you saw, it wants you to create an account, accept location tracking, and look at a social feed? Most outdoor tech ends up pulling you deeper into the digital world when all you wanted was to be in the physical one. I built TrailSense because I wanted the exact opposite: an app where the screen is the shortest part of the experience. TrailSense is a lightweight, offline first web companion for hikers, runners, and nature lovers. You pull it out, spend 3 to 5 seconds identifying a sound or leaf, and the app prompts you with a quick real-world observation before telling you to put your phone right back in your pocket: - TrailVoice Avian Audio : You tap record, and it runs a real-time spectrogram analysis right on your device to identify what bird is singing like an American Robin, Chickadee, or Barred Owl . - FloraLens Foliage & Plant Vision : Snap a quick photo of a mystery leaf or wildflower, and it tells you what it is, whether it's safe e.g., flagging Poison Ivy , and how it fits into the local ecosystem. - "Look Up & Touch Grass" Prompts: Instead of endless scrolling, every result gives you a tactile cue like looking up 20 feet into the canopy to spot wing movement, or checking leaf edges. - Sensory Outdoor Quests: Quick, screen free mini challenges like doing a 60-second silent soundscape or feeling tree bark textures that nudge you to pay attention to your surroundings. - Private Field Journal: Logs what you found into local browser storage with zero tracking, and lets you export a clean Markdown log whenever you're back home. Demo Want to test it right now without leaving your desk? I know judges and developers might be testing this late at night or indoors, so I added: 1. 1 Click Bird Song Samples: Click on cards like American Robin or Black-capped Chickadee to hear authentic bird call synthesis and watch the live spectrogram canvas classify it in real time. 2. Field Photo Samples: Click on the high res photos Alpine Wildflower, Autumn Sugar Maple, Robin to test the camera classifier. 3. Try Airplane Mode: Turn off your Wi-Fi or set Chrome DevTools Network to Offline. The app keeps running without a hiccup because everything happens right on your device. Here’s how the pieces fit together: - index.html: Responsive, dark forest glassmorphic interface that's easy on the eyes in direct sunlight or shade. - js/ai-audio.js: Real time Web Audio API FFT decomposition and acoustic signature matching. - js/ai-vision.js: In browser canvas computer vision for leaf venation, color distribution, and plant safety checks. - js/audio-synth.js: Web Audio oscillator and filter synthesizer that mimics wild bird frequencies for testing. - js/offline-store.js: Privacy-first IndexedDB journal with Markdown export. - sw.js: Service worker caching everything so it works off grid. How I Built It The main design challenge was simple: no servers allowed. If this app needed a cloud backend, it would be useless on the trail. Here’s what powers it: 1. Acoustic Signal Processing Web Audio API When listening through the mic, TrailSense taps into the browser’s native AudioContext with an FFT size of 1024. It breaks incoming audio into frequency slices, calculates spectral centroids, and visualizes them on an HTML5 canvas. It matches frequency ranges and cadence against avian acoustic profiles for example, identifying the distinct 2.2–3.4 kHz harmonic rhythm of an American Robin . 2. In-Browser Computer Vision Instead of shipping photos to an expensive third party vision API, TrailSense draws captured frames onto an offscreen canvas. It analyzes chromatic balance, edge density, and color histograms client-side to classify native foliage and check safety guidelines. 3. Progressive Web App & Caching A custom Service Worker caches all scripts, assets, and audio routines using the Cache API. Once you open the page once, it is stored locally. You could be miles into a mountain trail with zero cell bars, and it will load instantly. Why Does Open Innovation Matter? Building this reinforced for me why open source AI is so important: 1. Cell towers don't follow hiking trails: When you’re deep in a state park or camping off-grid, proprietary cloud APIs like OpenAI or Google Vision simply don't work. Open, client-side tools aren't just an alternative here they are the only way to build reliable outdoor tools. 2. Nature should be private: You shouldn't have to surrender your GPS coordinates, microphone recordings, and camera roll to a tech company just to learn the name of a flower. Keeping everything in the browser respects people's privacy. 3. Zero server costs, zero barriers: Because this runs on the user's hardware, hosting costs are literally zero. Anyone can fork it, host it on GitHub Pages or Netlify, and share it with community hiking clubs, scout troops, or schools without worrying about monthly API bills. My Agent Session I built and iterated on TrailSense using Antigravity AI IDE, pairing up with the agent to design the DSP audio pipeline, synthesize authentic bird acoustics for the demo, and style the dark-forest UI. It made going from concept to a deployed offline PWA surprisingly fast. Prize Categories - Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass - Edge AI & Local Inference Track - Privacy & Open Web Track