Please consider below google drive link for demo video, https://drive.google.com/drive/folders/1UymPDJMFnu5f0b8xrTmco1FNd5Q7cXBZ?usp=sharing we were unable to upload it to youtube

📖 About the Project

🌟 Inspiration

Every child is an author. Kids naturally express stories through drawings and imagination, but these ideas often remain unstructured or get lost over time. We wanted to build something that could capture these moments and turn them into lasting memories.

Our goal was to combine creativity with AI to transform a child’s drawing and narration into a real, beautiful storybook that can be saved and shared.


🛠️ What it does

This project allows users to:

  • Upload a child’s drawing 📸
  • Add narration (typed or voice) 🎤
  • Generate a storybook page using AI ✨
  • Build a multi-page story with continuity 📖
  • Download the final storybook as a shareable PDF

Each page builds on previous ones, ensuring the story flows naturally.


⚙️ How we built it

  • Frontend: React (Vite) for fast and interactive UI
  • Backend: Node.js + Express for secure API handling
  • AI Model: Claude (multimodal) to process image + text and generate story content
  • Voice Input: Web Speech API for narration
  • PDF Export: html2canvas + jsPDF to generate downloadable books

🧠 Workflow

  1. The drawing is compressed and converted to base64
  2. Narration and previous story context are combined into a prompt
  3. AI generates:
    • Story text
    • Mood
    • Characters
    • Next-step prompt

🚧 Challenges we faced

  • Large Image Errors (413): Fixed by compressing and resizing images before sending
  • API Security & CORS: Solved using a backend proxy instead of direct frontend calls
  • PDF Quality Issues: Improved by rendering each page separately and removing UI overlays
  • UI/UX Design: Iterated to create a clean, storybook-like experience

📚 What we learned

  • Building multimodal AI apps (image + text)
  • Optimizing performance and payload size
  • Securing APIs with backend architecture
  • Converting UI into print-ready PDF formats
  • Designing for a child-friendly storytelling experience

🚀 What’s next

  • 🎙️ AI voice narration for each page
  • 🌍 Shareable story links
  • 🎨 Enhanced illustration styling
  • 📱 Mobile optimization

💡 Final Thought

This project turns imagination into something tangible — helping preserve childhood creativity as real, shareable storybooks.

Built With

Share this project:

Updates