DEV Community

Cover image for Trail Sketch: a field-study guide for drawing and painting outdoors
Abisoye O
Abisoye O

Posted on Edited on AI-assisted

Trail Sketch: a field-study guide for drawing and painting outdoors

Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass Submission 🌿

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

What I Built

Trail Sketch is a phone map for choosing a plein-air drawing or painting spot, then leaving with a short plan.

Pick what you want to study. Nearby places line up as cards: a photo when Wikipedia has one, a feel word, and how far the walk is.

Nearby places in Trail Sketch, with photos, feel words, and walking distance

Use the map button tucks that list away. Hide leaves the pins.

The map after the place list is tucked away, with scene pins for water and trees

The same map after Hide. The pins stay on the water and the trees

Open a place and the photo stays beside the weather. Graphite and ink get a value plan. Watercolor and oil add three pigments. You decide what stays on the page. Accepting a place saves the date, medium, and weather on this phone, and marks the pin. A studied place can be deleted.

The High Park watercolor sheet: photo beside the weather, a value plan, and three pigments

Demo

trail-sketch.onrender.com

That is the app: the map, the place list, and /api/health. On Render's free plan the first visit can take a minute to wake.

Code

https://github.com/AbisoyeOnanuga/trail-sketch

How I Built It

One MapLibre map provides the opensource map library. OpenStreetMap lists what is nearby. Ranking stays on the phone. Open-Meteo describes the weather and lighting conditions. Gemma 4 writes the plan when you ask for one. ElevenLabs reads it aloud when an API key is present. A stored library of studied locations stays on the device.

Lenis scrolls the place list and the study sheet. The map keeps its own pan. The busy rings are recolored loaders from Uiverse Galaxy.

Two other Touch Grass projects inspire the focus of trail sketch to minimise screen dependency or use and encourage real-world interaction. Spotted names one thing and asks you to look up. fieldmemo leaves the phone in a pocket and writes the journal later, on your own machine. Trail Sketch uses that same restraint: the map does the choosing, and Gemma writes one plan when you ask, so you are ready to start studying the location with your pencil or paint.

Why Does Open Innovation Matter?

Trail Sketch is for choosing a place to draw, then leaving the screen. That choice should not depend on a closed map account or a model key. OpenStreetMap lists what is nearby. MapLibre and OpenFreeMap draw it. Wikimedia supplies a photo when one exists. Open-Meteo describes the light. The map and the search work with no keys, so the guide is usable before any paid service is connected.

The plan is the part that uses a model. Gemma is open-weight, so the same request can go to Google's endpoint or to a local process by changing a base URL. The wording of a study is not locked to one hosted model. Places already studied stay on the phone, not inside a closed map's saved list. Open source is what makes the guide available, and what keeps the painter's places and the plan's model from belonging to a single service.

My Agent Session snippet

Guiding map interactions, what data is kept for artists about their chosen locations, and improving some UI-scaling issues:

Trail Sketch mobile field explorer
You

Trail Sketch should suggest study places from the artist's interests when the phone loads, with visual previews. A feel word or a short description should rank the nearest walkable place. Accepting a place catalogues the date, medium, and weather, and marks the pin as studied. Google sign-in can key that library later. The light, middle, and dark boxes are a suggested plan, not a finished palette.

Agent

Nearby places come from an OpenStreetMap Overpass bbox query, ranked on the phone by feel, interests, and walking distance. A named place farther than a short ride is replaced with the nearest listed study. Gemma writes the accepted study as JSON. ElevenLabs is ready to narrate when its key is on the server. Studies stay in local storage, keyed by a Google subject once sign-in is configured.

You

On a phone the place list disappears, buttons are too large, and the top of the results card is cropped. Wide layout and vertical scroll are fine. Map pins should be more visual. The selected study should keep its preview beside the written plan and the narration. Update the Entire session and the unpublished DEV draft.

Agent

On a narrow screen the place sheet now starts below the search bar and the list scrolls inside it, one card per row. Wide screens keep a two-column list. Pins are small scene drawings for water, trees, viewpoints, buildings, and ridges. Medium, distance, near-me, and studied controls use the same kind of marks. The study sheet keeps the preview image next to the place name, the weather line, and the plan that can be read aloud.

Process snapshot. The checkpoint on the screenshot commit holds the session stored with that commit, so a viewer can read the project's process there.

Sponsor tools used

Gemma writes the study plan when you ask.

Render hosts the page and API access.

ElevenLabs reads the plan aloud and starts the process of stepping away from your screen.

Entire stores the checkpoint of the agent session used to build this.

Top comments (0)