DEV Community

Abdullah Bin Altaf
Abdullah Bin Altaf

Posted on AI-assisted

Leaf Pixels

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

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

Leaf Pixels 🍁

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

  1. gpt-oss-120b (open-weight, Apache 2.0), served by Groq, 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 by Cloudflare 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:

  1. 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 a vote: 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 by hue 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, so GROQ_BASE_URL and GROQ_MODEL can point at any 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.

Top comments (0)