{"slug": "leaf-pixels", "title": "Leaf Pixels", "summary": "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.", "body_md": "*This is a submission for the [Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass](https://dev.to/challenges/hacktoberfest-week1-2026-10-05)*\n\n## \n  \n  \n  What I Built\n\n**Leaf Pixels** turns any picture into a printable **colour-by-letter pixel-art sheet** that kids take **outside** and colour in.\n\n1. Pick a picture: a fox, an owl, a pumpkin, a rocket… (or type your own).\n2. Choose a paper size (A5, A4, A3 or Letter) and print it.\n3. 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.\n\nThe 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.\n\nIt'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.\n\n## \n  \n  \n  Demo\n\n## \n  \n  \n  Code\n\n# Leaf Pixels 🍁\n\nPixel art you build **outside**, one leaf at a time.\n\nPick 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.\n\nBuilt for the [Hacktoberfest Open-Source AI Challenge, Week 1: Touch Grass](https://dev.to/challenges/hacktoberfest-week1-2026-10-05).\n\n## How it works\n\n1. \n**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.\n2. \n**FLUX.1 [schnell]** (open-weight, Apache 2.0), served by[Cloudflare Workers AI](https://developers.cloudflare.com/workers-ai/) , draws a simple flat icon.\n3. 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…\n\n \n \n## \n  \n  \n  How I Built It\n\nLeaf Pixels is a Next.js app with two open-weight models at its core:\n\n| Step | Model | Licence | Where it runs | \n| Check the subject, write the drawing prompt, write a fun fact | **gpt-oss-120b** | Apache 2.0 | Groq | \n| Draw the picture | **FLUX.1 [schnell]** | Apache 2.0 | Cloudflare Workers AI | \n\n**The pipeline:**\n\n1. \n**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.\n2. \n**FLUX.1 [schnell]** draws the icon in about 2–4 seconds.\n3. 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.\n4. The browser builds a two-page printable PDF with **jsPDF** .\n\nThe hardest part was step 3. A naive downscale gave messy results, so it went through a few rounds:\n\n- \n**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.\n- \n**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.\n- \n**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.\n- \n**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.\n\nThere are no accounts and no database, and nothing is stored. A small rate limit keeps the free tiers alive.\n\n## \n  \n  \n  Why Does Open Innovation Matter?\n\n**I changed models twice in one week, and each change took one line.**\n\n- 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.\n- 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.\n\nThat flexibility matters for this audience:\n\n- \n**Kids' data:** a school or library could self-host both models and keep everything on their own hardware, with no third party involved.\n- \n**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.\n- \n**Control:** the models' behaviour lives in my own prompt and my own code. Nothing changes under me when a vendor updates a closed model.", "url": "https://wpnews.pro/news/leaf-pixels", "canonical_source": "https://dev.to/abdullah-k18/leaf-pixels-5acj", "published_at": "2026-10-10 22:42:09+00:00", "updated_at": "2026-10-10 22:47:41.249787+00:00", "lang": "en", "topics": ["generative-ai", "ai-tools", "ai-products", "large-language-models"], "entities": ["Leaf Pixels", "gpt-oss-120b", "Groq", "FLUX.1 [schnell]", "Cloudflare Workers AI", "Next.js", "jsPDF", "Hacktoberfest"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/leaf-pixels", "markdown": "https://wpnews.pro/news/leaf-pixels.md", "text": "https://wpnews.pro/news/leaf-pixels.txt", "jsonld": "https://wpnews.pro/news/leaf-pixels.jsonld"}}