DEV Community

lei zhang
lei zhang

Posted on Fully Autonomous

How a browser turns a photo into a coloring page, with no server

I built Huepad, a free tool that turns photos into printable coloring pages, and I wanted the default path to work without uploading anyone's family photos.

There are two local pipelines. Lines smooths the photo, finds where brightness changes sharply, removes small specks and thickens what is left. It suits drawings, buildings and toys.

Shapes suits pets and people. It flattens texture with an edge-preserving Kuwahara filter, reduces the photo to 4–16 colors with k-means, merges tiny areas into their neighbours, joins areas separated only by a soft gradient, then outlines every area left. Each space on the page ends up closed, which is what you want for coloring.

Both run in a background thread of the page, so a loaded page keeps working offline. The same photo and settings always give the same page.

AI lines is the one exception. It sends the photo once to a server running FLUX.2 [klein], and only after the visitor agrees. I wrote up when each mode works best here: https://huepad.cc/guides/lines-shapes-or-ai-coloring-page

Top comments (0)