Aplikacja

Numbers

Dowolny obrazek jako kolorowanka po numerach, do pokolorowania tym, co masz w domu.

Rok: 2026
Status: Online
Rola: Solo: silnik obróbki obrazu, aplikacja, usługa AI, wdrożenie.

numbers.kkaszuba.eu

Wrzucasz rysunek, ilustrację albo zdjęcie, a dostajesz gotową do druku kolorowankę po numerach: czyste kontury, numer w każdym polu i legendę kolorów. Chodzi o to, żeby ją potem naprawdę pokolorować, więc w profilu można zapisać paletę własnych flamastrów albo kredek, a generator użyje tylko tych kolorów. Wydruk od A4 po duże formaty, dzielony na arkusze A4 albo A3, które po sklejeniu składają się w jeden obraz.

Technologie

Next.js 16
React 19
TypeScript
Tailwind CSS
Web Workers
PostgreSQL
Drizzle
Better Auth
jsPDF
Python
PyTorch
Real-ESRGAN
Docker
Proxmox

Zastosowanie

Paleta wyciągana z obrazka automatycznie, z możliwością edycji, albo zamieniana na zapisany zestaw własnych flamastrów.
Tryb dla grafik z czarnym konturem, jak w drukowanych kolorowankach, i osobny tryb dla zdjęć.
Podpowiedź optymalnej liczby kolorów dla danego obrazka, więc nie trzeba zgadywać, ile ich potrzeba.
Eksport do wektorowego PDF: szkic, legenda na osobnej stronie, a duży wydruk dzielony na arkusze do sklejenia.
Konta z weryfikacją e-mail i resetem hasła oraz zapisane projekty, które otwierają się od razu, bez ponownego generowania.
Małe obrazki są przed obróbką powiększane przez AI, więc nawet niska rozdzielczość daje czyste pola.

Jak jest zrobione

Silnik obróbki obrazu jest mój, około 3300 linii TypeScriptu bez żadnej biblioteki graficznej pod spodem. Działa w całości w przeglądarce, w Web Workerach, a najwolniejszy etap jest dzielony na pasy i liczony równolegle na kilku rdzeniach.
Wszystkie progi (najmniejsze pole, grubość linii, rozmiar cyfr) są liczone w milimetrach na papierze, a nie w pikselach, i to sprawia, że każdy wydruk da się pokolorować, niezależnie od rozmiaru.
Najpierw wygładzanie z zachowaniem krawędzi: filtr bilateralny w CIELAB usuwa szum i teksturę, a krawędzie zostają ostre.
Czarne kontury są wykrywane, ich przerwy domykane, a same linie zamieniane w osobne pola do pokolorowania, tak jak w drukowanych kolorowankach.
Kwantyzacja kolorów zależy od źródła. Grafiki przechodzą przez k-means w Lab z wykluczeniem tła i ratowaniem małych, ale wyrazistych kolorów (na przykład oczu). Zdjęcia są najpierw dzielone na kształty superpikselami SLIC, podobne komórki łączone, a dopiero potem dobierane są kolory.
Czyszczenie usuwa halo z antyaliasingu, drobne wysepki i pola za małe do pokolorowania, a jasne tło rozpoznaje jako białą kartkę.
Granice pól są śledzone jako graf planarny, wygładzane i dopasowywane krzywymi Béziera z zachowaniem ostrych narożników, więc sąsiednie pola dzielą dokładnie tę samą linię.
Każdy numer trafia w punkt pola najbardziej oddalony od jego krawędzi, wyznaczony transformatą odległości.
Wynik to SVG i wektorowy PDF przez jsPDF. Projekty są zapisywane we własnym kompaktowym formacie binarnym, kompresowanym gzipem przez CompressionStream API.
Zmiany w silniku sprawdza test regresji: przed każdym wdrożeniem mierzy odchylenie kolorów (ΔE) na zestawie obrazów testowych.
Powiększanie to osobny mikroserwis w Pythonie (Flask, Gunicorn, PyTorch na CPU) z modelem Real-ESRGAN dla obrazów poniżej 1000 px, z którym aplikacja łączy się przez własne API zabezpieczone kluczem.
Next.js 16 w trybie standalone, React 19 z React Compiler, Tailwind 4, PostgreSQL przez Drizzle z migracjami przy starcie oraz Better Auth z Nodemailerem do kont.
Na własnym serwerze z Proxmoksem, z osobnymi kontenerami dla aplikacji, bazy i usługi AI, trwałym wolumenem na pliki projektów i endpointem health-check.