The coloring book for the other side of the story
Challenge: Standard AI coloring books generate disconnected images with no narrative depth. Children's story apps produce text but no visual activity. No existing product combines perspective-shifting storytelling with an interactive coloring experience in the same session.
Solution: Unusual Coloring Book lets the user step inside a classic fairy tale — Cinderella — and choose how each page unfolds from a menu of three pre-written story paths. Each choice triggers a single AI illustration call. The user then colours the image directly in the browser and can export the finished book as a print-ready PDF.
A single story — Cinderella — with 6 chapters, each offering 3 pre-coded narrative paths. 18 story texts and 18 image prompts are all fixed in the backend. The AI only generates the illustration for the chosen path.
Every option on page N was written to connect seamlessly to every option on page N+1. The user's path through the story feels unique regardless of which combination they choose.
The app opens with an AI-generated cover illustration for Cinderella, cached server-side after the first request. The user clicks the cover to begin the story.
Each page presents 3 option cards (A, B, C), each showing a one-line preview and the full story text. Selecting an option triggers a single Gemini image generation call.
BFS flood-fill algorithm on an HTML5 Canvas. Click any enclosed area to fill it with the selected colour. Undo stack (10 steps), clear button, and page navigation.
After a page is generated, the user can type a short instruction (e.g. "make the background darker") to redraw the scene. Uses Gemini image editing with the same coloring-book style.
jsPDF generates a landscape A4 PDF. Each page shows the illustration at the top and the story text below. The file is named and downloaded immediately from the browser.
A strip of thumbnails in the sidebar shows all generated pages. The user can click any thumbnail to jump to that page and colour it.
Each illustration is generated from a pre-written prompt describing the scene in coloring-book style: thick black outlines, white fill, child-safe, no shading. The prompt is fixed — only the Gemini call varies per user choice.
Generated images are cached in memory on the backend (by page + option key). If the user or another session requests the same combination, the cached image is returned instantly — no second API call.
The user can submit a plain-text instruction to adjust an existing illustration. The backend sends the original image bytes plus the instruction to Gemini, and the updated image replaces the original in the canvas.
The Cinderella cover illustration is generated once on first load from a fixed, highly-detailed coloring-book prompt. It is cached on the server and served instantly on all subsequent loads.
/api requests to FastAPI (port 8000)GET /story — returns full story structure: 6 pages × 3 options with story text (no images, instant)GET /story/cover — returns the cover illustration (generated once, then cached forever)POST /generate/page-image — takes page_number + option_id, returns base64 illustration (cached after first call)POST /edit/image — takes an existing image and a text instruction, returns the updated image