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.

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 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 https://dev.to/challenges/hacktoberfest-week1-2026-10-05 . How it works 1. gpt-oss-120b open-weight, Apache 2.0 , served by Groq https://groq.com , 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 https://developers.cloudflare.com/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.