Storycard-Studio

Inspiration

Turning an idea into a visual storyboard takes hours of writing and design work. We wanted to collapse that to seconds — one sentence in, five illustrated scenes out.

What it does

StoryCard Studio transforms any idea into a 5-card illustrated story. Gemini 2.5 Flash writes the narrative and art-directs each scene with consistent characters; Imagen 3.0 generates the visuals. Results appear as a swipeable carousel in under 30 seconds.

How we built it

FastAPI backend on Cloud Run calls Gemini via structured Pydantic outputs (guaranteed 5-scene JSON), then loops through each visual_prompt to call Imagen 3.0. Images are stored in GCS and served as public URLs. The React + Vite frontend renders a Framer Motion card carousel. Full pipeline:

$$\text{Browser} \xrightarrow{\text{POST}} \text{Cloud Run} \rightarrow \text{Gemini 2.5 Flash} \rightarrow \text{Imagen 3.0} \rightarrow \text{GCS} \rightarrow \text{Browser}$$

Challenges we ran into

• Character consistency across 5 stateless Imagen calls — solved by having Gemini embed explicit character descriptor tokens into every visual prompt
• Imagen burst quota limits — solved with a sequential paced loop, trading ~3s latency for 100% reliability

Accomplishments that we're proud of

• End-to-end generation in under 30 seconds, fully on Google Cloud
• Character consistency achieved through prompt engineering alone — no fine-tuning
• Zero-config local dev via Application Default Credentials

What we learned

Gemini's structured outputs eliminated an entire class of bugs. Framing Gemini as a creative director — responsible for both narrative and visual direction together — produced far better Imagen prompts than treating them as separate tasks.

What's next for StoryCard Studio

• Streaming card reveal — show each card as it generates via SSE
• Style presets — watercolor, cyberpunk, flat illustration
• Audio narration — Gemini Live API voiceover per card
• PDF / social export — one-click storyboard download

Built With

• docker
• fastapi
• framer-motion
• gemini-2.5-flash
• google-cloud
• google-cloud-run
• google-genai-sdk
• imagen-3.0-fast-generate
• python
• react
• tailwindcss
• vertex-ai
• vite