StoryWeaver

• 

  Diagram of Google Services Architecture used for this project.

Inspiration

Dense PDFs and slide decks are hard to engage with—especially for kids (and honestly, most adults too). StoryWeaver transforms complex source material into a kid-friendly story experience that’s easier to understand, more fun to explore, and easy to share.

What it does

• Upload a PDF or PPTX.
• Generates a 4–6 page children’s story:
  • short read-aloud narration per page
  • a generated illustration per page
  • an audio narration track per page
• Streams progress live while pages are created (Server-Sent Events), then renders the finished story at a shareable URL.

How we built it

• Frontend: React + Vite + Tailwind CSS
• Backend: Node.js + Express
• Live progress: Server-Sent Events (SSE)
• Data: Postgres (local Docker in dev; Cloud SQL in prod)
• Media: Google Cloud Storage (prod) with a local /public/media fallback (dev)
• AI: Gemini via the Google GenAI SDK (@google/genai) for structured planning plus multimodal page creation (narration + illustration) and text-to-speech audio

Challenges

• Making the experience feel like a storybook (not a chatbot)
• Long-running generation reliability with clear progress feedback
• Keeping output age-appropriate and aligned to the uploaded source

What we learned

Interleaving narration, images, and audio (and streaming progress) makes the experience feel cohesive, “live”, and truly multimodal.

Built With

• docker
• express.js
• google
• google-cloud
• google-cloud-run
• google-cloud-sql
• google-gemini
• google-genai-sdk-(@google/genai)
• node.js
• postgresql
• react
• secret
• server-sent-events-(sse)
• tailwind-css
• typescript
• vite