cd /news/generative-ai/leaf-pixels · home › topics › generative-ai › article
[ARTICLE · art-148932] src=dev.to ↗ pub= topic=generative-ai verified=true sentiment=↑ positive

Leaf Pixels

A developer built Leaf Pixels, a Next.js app that uses two open-weight models to turn any picture into a printable 24×24 colour-by-letter pixel-art sheet for kids to colour outside. The pipeline has gpt-oss-120b on Groq validate that a subject is kid-friendly and drawable, write an image prompt and a fun fact, then FLUX.1 [schnell] on Cloudflare Workers AI draws a flat icon that the developer's own code converts into a six-colour autumn palette grid, with the browser assembling a two-page PDF via jsPDF. The hardest step was the grid conversion, which required pixel voting to kill colour fringes, hue-based classification to stop colour mismatches, and morphological opening to preserve thin details like masts and bird legs.

by read5 min views1 publishedOct 10, 2026

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

#

What I Built

Leaf Pixels turns any picture into a printable colour-by-letter pixel-art sheet that kids take outside and colour in.

  1. Pick a picture: a fox, an owl, a pumpkin, a rocket… (or type your own).
  2. Choose a paper size (A5, A4, A3 or Letter) and print it.
  3. Grab some crayons or pencils and head outside: the park, the garden, a picnic blanket, the front steps. Colour each square to match its letter until the picture appears.

The sheet is a 24×24 grid with Battleship-style coordinates (A1, B7…), a letter in every square (R for red, O for orange, and so on) and a colour key. Page 2 has a fun fact about the subject ("Owls can turn their heads almost all the way around!") and a space to draw or stick a photo of where you coloured it.

It's made for kids, parents and teachers who want a screen-free activity. Pixel art is calm and satisfying, and it quietly practises colour matching, counting and grid coordinates. The name comes from the autumn palette: every pattern uses the colours of October leaves. The screen part takes about a minute; the colouring happens offline, outdoors.

#

Demo

#

Code

Pixel art you build outside, one leaf at a time.

Pick a picture (a fox, an owl, a pumpkin…), print the pattern, then go outside, collect fallen leaves and lay them on the ground, one leaf per square, until the picture appears. The screen part takes a minute; the rest happens outdoors.

Built for the Hacktoberfest Open-Source AI Challenge, Week 1: Touch Grass.

How it works #

gpt-oss-120b (open-weight, Apache 2.0), served byGroq , checks that the subject is kid-friendly and drawable, writes an image prompt, and comes up with a fun fact. 2. FLUX.1 [schnell] (open-weight, Apache 2.0), served byCloudflare Workers AI , draws a simple flat icon. 3. The server turns the drawing into a 24×24 grid in a fixed autumn palette (red, orange, yellow, green, brown, black). Each square gets the colour most of its pixels have, thin parts like stems and legs…

#

How I Built It

Leaf Pixels is a Next.js app with two open-weight models at its core:

| Step | Model | Licence | Where it runs | | Check the subject, write the drawing prompt, write a fun fact | gpt-oss-120b | Apache 2.0 | Groq | | Draw the picture | FLUX.1 [schnell] | Apache 2.0 | Cloudflare Workers AI |

The pipeline:

gpt-oss-120b decides whether the subject is kid-friendly and drawable. "Fox" is fine, but "my tax return" gets a friendly*"Try a happy animal or a yummy fruit!"* . It then writes a strict prompt for a flat icon in autumn colours, plus a one-line fun fact for a 6-year-old. 2. FLUX.1 [schnell] draws the icon in about 2–4 seconds. 3. My own code turns the drawing into a 24×24 grid using a six-colour autumn palette (red, orange, yellow, green, brown and black), so you only need a small box of crayons. 4. The browser builds a two-page printable PDF with jsPDF .

The hardest part was step 3. A naive downscale gave messy results, so it went through a few rounds:

Colour fringes: averaging pixels made a yellow halo around every shape. I switched to avote : each square takes the colour most of its pixels have. #

Wrong colours: matching pixels to the nearest palette colour turned a red sail orange and grey edges green. Classifying byhue fixed it, since the soft edge of a red shape is still red. #

Vanishing details: a thin mast or a bird's legs covered too little of a square to win the vote, so they disappeared. A morphological opening finds parts thinner than half a square and thickens them before voting. #

Clean-up: a bounding-box crop centres the subject even when the drawing has a faint drop shadow, and a connected-components pass removes stray specks.

There are no accounts and no database, and nothing is stored. A small rate limit keeps the free tiers alive.

#

Why Does Open Innovation Matter?

I changed models twice in one week, and each change took one line.

  • I first planned to run FLUX on Hugging Face. When I checked, the free tier there had changed. Because the weights are open , I moved the same model to Cloudflare Workers AI, which has a free daily allowance. With a closed model, I'd have been stuck with one vendor's pricing.
  • The Llama model I'd planned to use on Groq was no longer available. I swapped in gpt-oss-120b by changing a single model name. The text step uses the OpenAI-compatible API format, soGROQ_BASE_URL andGROQ_MODEL can point atany host of an open model : Ollama on your own laptop, vLLM on a school server, or OpenRouter.

That flexibility matters for this audience:

Kids' data: a school or library could self-host both models and keep everything on their own hardware, with no third party involved. #

Cost: both models are Apache 2.0, and both run on free tiers. Making a pattern costs nothing, which is the point for a free family activity. #

Control: the models' behaviour lives in my own prompt and my own code. Nothing changes under me when a vendor updates a closed model.

── more in #generative-ai 4 stories · sorted by recency
── more on @leaf pixels 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
→ Live at https://your-agent.zahid.host ✓
Get free account → Pricing
from €0/mo · no card required
LIVE [news/leaf-pixels] indexed:0 read:5min 2026-10-10 · —