This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass.
🌿 What I Built
SketchWild is an outdoor sketching companion that helps you slow down, draw on paper, and notice more of the world around you.
Sometimes, “go outside” is too vague. You reach a park or garden, but still don’t know what to do. SketchWild gives you a small, concrete exercise: study a leaf’s edge, follow the overlap of flower petals, or sketch the empty spaces between tree branches.
You don’t need to be an artist. A nearby flower, a balcony plant, or a rock beside a path is enough. The aim is to pay attention, rather than produce a perfect picture.
After drawing, upload a photograph of your subject alongside a photograph of your paper sketch. Gemma 3, running locally through Ollama, compares the pictures and offers one detail to explore.
You can then return to the real subject, add a small drawing or annotation, and record what you noticed in your journal. The model supports the observation; your pencil and the real world remain at the centre of the experience.
Choose a mission. Draw outside. Look again. Keep your discovery.
SketchWild is for beginners who need a starting point, nature journalers who enjoy recording details, and people looking for a short outdoor break.
What you can do
- Choose a subject: Leaves, flowers, trees, bark, rocks, or outdoor scenes.
- Take an outdoor mission: Six exercises exploring shapes, overlap, texture, light, negative space, and depth.
- Make it fit your day: Filter missions by place and available time, or print the instructions.
- Get a second-look invitation: Compare your subject and sketch using local Gemma.
- Keep a field journal: Save reflections and follow-up drawings, revisit studies, and export a ZIP backup.
- Collect Field Passport stamps: Record self-reported outdoor participation without grading your art.
The screen provides a starting point and a moment of reflection. The drawing happens on paper, outside.
🚀 Demo
🌐 Public Website
Explore outdoor missions, upload pictures, save reflections, and try the journal.
Live model inference is disabled in the public preview. The site clearly links to local setup instructions, the video walkthrough, and a labelled feedback example.
▶️ Video Walkthrough
The walkthrough shows the sketching flow and a live Gemma comparison running locally through Ollama.
The uploaded pictures are generated samples used to demonstrate the workflow. The processing wait is shortened in the edit; this is not an outdoor participant trial.
💻 Code
The complete application and local setup instructions are available on GitHub.
View the SketchWild repository →
Application code is MIT licensed. Model weights and dependencies retain their own terms.
🛠️ How I Built It
I built SketchWild around two connected experiences: a guided outdoor sketching workflow and a local vision-model comparison.
The interface uses React and TypeScript. An Express backend prepares the uploaded pictures, calls Gemma 3 through Ollama, and checks the response before displaying it.
Missions, journal storage, and passport progress use ordinary application logic. The model compares the two pictures and suggests an observation.
Technology Stack
| Layer | Technology |
|---|---|
| Frontend | React 19, TypeScript, Vite |
| Styling | Custom responsive CSS |
| Icons | Lucide |
| Backend | Node.js, Express |
| Local vision model | Gemma 3 4B |
| Model runtime | Ollama |
| Image processing | Browser normalization, Sharp |
| Response validation | Zod |
| Journal storage | IndexedDB |
| ZIP export | fflate |
| Public hosting | Render |
| Demo narration | ElevenLabs |
System Architecture
Local version — live Gemma feedback
Browser: React interface
Missions · uploads · reflections
│
├── IndexedDB
│ Drafts · pictures · journal
│
▼
Local Express API
Validate and prepare both pictures
│
▼
Ollama → Gemma 3 4B
Compare subject and paper sketch
│
▼
Express validates the response
│
▼
Browser displays the coaching card
Public preview — hosted on Render
Visitor's browser
│
▼
Render: Express serves the React app
│
▼
Missions · uploads · reflections
│
▼
Journal saved in the visitor's IndexedDB
Live inference: disabled
Links: local setup · walkthrough · example
The public website does not automatically connect to a visitor’s Ollama installation. Live coaching requires running the application and model locally.
How the comparison works
- The user uploads the subject photograph and paper sketch.
- The backend validates and prepares both images.
- Ollama passes the pair to Gemma with explicit subject/drawing labels.
- The prompt asks for visible evidence from both pictures and one respectful observation.
- The backend validates the response before showing the coaching card.
Unclear pictures can produce uncertainty or a retake request. Failed requests show an error rather than silently substituting example feedback.
What I learned
Local CPU inference takes patience. One recorded sample comparison took approximately 146 seconds on my laptop.
I added elapsed-time feedback, cancellation, draft persistence, and an option to save without model feedback.
A GitHub Copilot review identified confusing preview wording and missing accessible dialog title associations. Both findings were checked and corrected.
The current build passes 17 automated tests, TypeScript checking, and the production build. These checks verify application behavior, not visual accuracy.
🔓 Why Does Open Innovation Matter?
Pictures can stay on your computer
In local mode, the selected pictures are processed by Ollama on the computer running SketchWild. A cloud model service is not required.
Journal entries stay in the current browser. There is no account synchronization, so ZIP export provides a way to keep a backup.
No model API key is needed locally
After downloading the dependencies and model, local comparison can run without a cloud inference connection.
There is no per-request cloud inference fee, although the laptop supplies the memory, processing time, and electricity.
The coaching can be changed
Open weights and application source let me edit the observation prompt, adjust image preparation, and swap compatible vision models.
This gives me a practical way to experiment with the coaching instead of depending on one closed service.
The tradeoffs are visible
CPU responses can be slow, and a model can misinterpret a drawing. A structurally valid answer is not necessarily an accurate observation.
My next priorities are evaluation with real subject photographs and paper sketches across all six categories, followed by an outdoor user trial.
🏆 Prize Categories
- Best Use of Gemma: Local subject-and-sketch observations using Gemma 3 4B through Ollama.
- Best Use of Render: Hosting the public frontend and backend preview.
- Best Use of ElevenLabs: Generating narration for the project walkthrough.
- Best Use of GitHub Copilot: Reviewing preview behavior and accessibility, with two findings checked and corrected.
The observation-first approach was informed by Bio Sketchbook and John Muir Laws’ nature journaling practices. SketchWild’s implementation, interface, and exercise prompts are original.
Top comments (0)