FableQuest

Draw Your Hero.Live The Fable.Learn Forever.

Comment

FableQuest: Your Imagination, Animated.

Inspiration

Every child has a unique imagination, but traditional storybooks are static and one-size-fits-all. We wanted to bridge the gap between a child's creativity and literary education. FableQuest was inspired by the idea of "Active Reading"—where a child doesn't just read a story but lives it through a character they personally designed, making moral lessons like kindness and bravery feel personal and impactful.

What it Does

FableQuest is an AI-powered interactive storytelling platform that turns drawings into adventures:

  • Character Creation: Children draw their own hero on a digital canvas or upload a photo.
  • Generative Narratives: Using the character's description and a selected moral lesson (e.g., "Honesty" or "Sharing"), the platform generates a custom multi-scene "Quest."
  • Interactive Decision Making: Each scene presents a narrative dilemma. The story evolves based on the child's choices, teaching them the consequences of their actions in a safe, fun environment.
  • Multisensory Experience: High-fidelity AI voiceovers narrate the story, making it accessible for early readers.

How We Built It

The technical architecture of FableQuest focuses on high performance, touch-first interactivity, and the orchestration of cutting-edge Generative AI.

Frontend: The Interactive Comic Engine

  • Next.js & TypeScript: We chose Next.js for its robust routing and optimized rendering. TypeScript was essential for managing complex interfaces and ensuring character data is passed through the app with strict type safety.
  • Touch-Enabled HTML5 Canvas: The core experience is a custom-built Canvas engine. We implemented specialized event listeners for mouse and touch inputs, allowing children to draw naturally on tablets. It features High-DPI scaling to ensure drawings stay crisp on all displays.
  • Neo-Brutalist UI: Styled with Tailwind CSS, the interface uses high-contrast borders and a primary-color palette to create a "tactile" comic book aesthetic.

Backend: The AI Orchestrator

  • FastAPI (Python): Our backend serves as the bridge between the frontend and AI services, managing API endpoints for quest creation, state management, and asset delivery.
  • Vertex AI & Gemini Models: The "brain" of FableQuest is powered by Gemini 2.0 Flash via Google Cloud Vertex AI:
  • Character Processing: Vertex AI analyzes input to define the hero's personality.
  • Dynamic Storytelling: Gemini generates context-aware narratives appropriate for children.
  • Logical Branching: The AI handles "explanation" logic, providing immediate feedback for story choices.

Media & Narration

  • Text-to-Speech (TTS): To make the experience immersive, we integrated an AI-powered TTS engine that turns generated narratives into high-quality audio in real-time.

Challenges We Ran Into

  • UI Constraints: Ensuring an "app-like" experience on all devices required strict 100vh CSS management and careful flex-grow calculations so story text wouldn't push buttons off-screen.
  • Canvas Scaling: Dealing with Retina displays was tricky; we implemented a coordinate scaling system to ensure drawings look sharp regardless of pixel density.
  • AI Consistency: Prompting the LLM to stay "in character" for diverse heroes (robots vs. dragons) while maintaining an educational tone required intense prompt engineering.

Accomplishments That We're Proud Of

  • The "Comic Book" Feel: Created a UI that feels tactile and "un-digital," encouraging play rather than just passive screen time.
  • Seamless Integration: The transition from a raw drawing to a structured adventure happens in seconds, creating a "magic" moment for the user.
  • Accessibility: Included narration and high-contrast text for children with different reading levels.

What We Learned

  • User-Centric Design for Kids: We learned that for children, less is more. Removing unnecessary headers keeps the focus entirely on the character and the story.
  • AI Orchestration: Gained experience in "Chained AI" workflows—where character data feeds story generation, which then feeds the voiceover engine.

What's Next for FableQuest

We are only at the beginning of the journey to redefine childhood literacy:

  • Cinematic Stories with Veo: We plan to integrate Google’s Veo video generation model to transform drawings into 60-second animated shorts with consistent visual style.
  • Deepened Narrative Intelligence: Improving story quality with longer "Epic Quests" where decisions in Scene 1 have long-term consequences in Scene 10.
  • Real-time Visual Consistency: Implementing advanced style-transfer to ensure video environments match the child's original drawing style.
  • Collaborative Quests: A "Multiplayer Fable" mode where two children can bring their heroes into the same story to learn teamwork.

Built With

Share this project:

Updates