ComicSandbox

Your story, 10 panels

Comment

Inspiration

I wanted to build a comic generation platform that felt less like a static image tool and more like an interactive story sandbox. Traditional AI image generators treat every prompt as an isolated task, making narrative continuity almost impossible. I set out to build ComicSandbox to bridge that gap: a platform that treats stories as continuous 10-panel sagas, allowing users to actively intervene in the plot mid-generation or branch off at key decision points into alternate timelines.

What it does

ComicSandbox uses an event-driven, decoupled architecture to handle long-running AI tasks asynchronously while keeping the frontend state completely fluid.

  1. Frontend & Client Interface Built with Next.js 15 (App Router), TypeScript, and Tailwind CSS. The interface uses Supabase Realtime via WebSockets to listen directly to state changes in PostgreSQL, rendering new panels and processing statuses automatically without requiring manual page reloads.

  2. Event Queue & Database A Supabase (PostgreSQL) database acts as the single source of truth and message broker. User actions write task payload records (STEP_FORWARD, INTERRUPT, BRANCH_TIMELINE) into an action_queue table with a pending state.

  3. Background Processing Worker A persistent Python worker process continuously polls action_queue. When a pending task is picked up:

Story Logic & Continuity: The worker feeds prior panel history and current world states into Google Gemini (google-generativeai) to dynamically craft multi-camera perspectives, narration, character dialogue, and image prompts.

Image Synthesis: Visual prompts are routed to Pollinations AI for panel rendering.

State Updates: Generated panels are written back to comic_panels, and job statuses update in action_queue, triggering instant client UI updates via Realtime subscriptions.

How we built it

ComicSandbox is built as a full-stack, event-driven application using Next.js 15 (React 19, TypeScript, and Tailwind CSS) for a responsive frontend interface, Supabase (PostgreSQL) to manage relational data and broadcast dynamic UI updates via Supabase Realtime WebSockets, and an asynchronous Python 3.11+ background worker that continuously processes queued user actions by orchestrating Google Gemini for stateful story logic and dialogue generation alongside Pollinations AI for visual panel rendering.

Challenges we ran into

During development, maintaining visual and narrative consistency across panels posed a significant challenge due to text-to-image models lacking inherent memory; this was resolved by engineering structured state-tracking prompts in Google Gemini that pass prior story context $S_{t-1}$ alongside user inputs $U_t$ into every new generation step ($S_t = f(S_{t-1}, U_t)$). Additionally, high user concurrency created backend queue backlogs in Supabase, which was fixed by adding automated job cancellation queries in the Python worker upon reaching the 10-panel limit ($N_{\text{max}} = 10$), and dropped UI updates were fixed by reconfiguring Supabase Realtime WebSocket publication schema rights and Row-Level Security policies.

Accomplishments that we're proud of

I successfully engineered an event-driven system capable of maintaining long-term story continuity across a 10-panel arc by leveraging Google Gemini for state-aware narrative planning and Pollinations AI for visual rendering, while keeping the Next.js user interface fully responsive through asynchronous task delegation. By pairing an active Python worker pipeline with Supabase Realtime WebSockets, I achieved seamless, sub-second client UI updates and alternate-timeline branching without forcing manual page reloads or blocking main execution threads.

What we learned

I mastered building decoupled, asynchronous architectures by offloading high-latency LLM and image generation tasks to a dedicated Python worker, ensuring the Next.js web application stayed performant and responsive. Furthermore, I gained deep expertise in prompt engineering for multi-agent LLM pipelines using Google Gemini to enforce structured JSON outputs for predictable state management, while learning to effectively synchronize real-time client state with Supabase (PostgreSQL) database mutations via WebSockets without relying on expensive server polling.

What's next for ComicSandbox

I plan to implement fine-tuned, character-consistent visual models (such as IP-Adapter or LoRA) to preserve exact character features across alternate branches, expand story limits beyond 10 panels with multi-chapter arcs, and introduce collaborative multiplayer sandboxes where multiple users can vote on interrupts or fork competing narrative timelines in real time.

Built With

Share this project:

Updates