NarrateMe

Your Text. Our Imagination. One Experience.

Comment

🌟 Inspiration

Children in grades 1-3 struggle to stay engaged with static text, yet teachers and parents lack quick, accessible tools to transform plain stories into multisensory learning experiences. We were inspired by the challenge of bridging this gap—making it as easy to create an illustrated, narrated presentation as it is to paste text into a box. Our goal: empower educators and parents with zero design or audio production skills to produce professional-quality, engaging story presentations in under 60 seconds.

📖 What it does

NarrateMe transforms any written story into an illustrated, narrated, multi-scene presentation automatically:

  1. Paste a story (50-3,000 characters) - No login required
  2. AI splits it into 3-5 scenes using Anthropic Claude with consistent character descriptions
  3. Generates custom illustrations for each scene via OpenAI's image models
  4. Creates warm narration using ElevenLabs text-to-speech (voice: Sarah)
  5. Syncs word-by-word highlighting to audio for active reading
  6. Adds engagement prompts - sound cues, comprehension checks, and reading prompts
  7. Features Memory Owl 🦉 - An intelligent avatar that remembers young readers across visits, personalizing their experience

Key Features:

  • Auto-advance "Play Story" mode for hands-free playback
  • PIN-gated parent controls for content safety levels
  • Speech recognition for comprehension checks
  • Emotion-based owl expressions synced to narration
  • Real-time progress tracking and error handling

🔨 How we built it

Tech Stack:

  • Frontend: Next.js 16 (App Router), React 19, Tailwind CSS 4
  • Backend: Python FastAPI with async clients
  • AI Services:
    • Anthropic Claude (scene splitting with structured JSON)
    • OpenAI (consistent character illustration)
    • ElevenLabs (natural text-to-speech)
  • Database: SurrealDB (reader memory persistence)
  • Dev Environment: Daytona workspace configuration for instant team onboarding
  • Observability: Arize AI monitoring for tracking latency, costs, and performance across all AI services

Architecture Highlights:

  • Concurrent generation with bounded worker pools (max 2 in flight)
  • HTTP-based SurrealDB client to bypass WebSocket authentication issues
  • Persistent character descriptions reused across scenes for visual consistency
  • Content safety guardrails with configurable levels (strict/moderate/original)
  • Request timeouts (60s scenes / 120s images / 60s narration) with retry logic

Development Workflow:

  • Parallel development: backend pipeline, AI integration, audio, and frontend
  • Integration and polish with pre-generated backup stories for demo resilience

💪 Challenges we ran into

  1. Character Consistency Across Scenes
    • Challenge: Generated illustrations often drift in appearance between scenes
    • Solution: Implemented persistent character-description prompts reused across every image generation call
    • Status: Mitigated with prompt engineering (not fully solved at model level)
  2. Variable AI Latency
    • Challenge: OpenAI image generation highly variable (~40s nominal, up to 120s+ under throttling)
    • Solution: Concurrent generation with timeout handling, per-scene retry logic, and graceful error states
    • Result: Frontend retries once on timeout, shows error card on final failure
  3. SurrealDB WebSocket Authentication
    • Challenge: WebSocket connections consistently rejected with 403 Forbidden errors
    • Solution: Built custom HTTP-based client using SurrealDB's REST API instead
    • Impact: Enabled reliable Memory Owl feature for reader session tracking
  4. Content Safety for Young Readers
    • Challenge: Need to soften mature content while maintaining story integrity
    • Solution: Built three-tier content filtering (strict/moderate/original) with LLM-based guardrails
    • Feature: Blocks unsuitable stories with kid-safe explanations for adults
  5. Team Coordination & Environment Setup
    • Challenge: Ensuring all developers have identical setups across different machines
    • Solution: Integrated Daytona workspace configuration - instant reproducible dev environments
    • Result: New team members productive in 5 minutes vs. hours of manual setup

Accomplishments that we're proud of

  1. End-to-End AI Pipeline
    • Successfully chained three different AI services (Anthropic, OpenAI, ElevenLabs) into a seamless, sub-60-second workflow
    • Achieved >95% success rate on varied input stories with zero manual intervention
  2. Memory Owl Feature 🦉
    • Built intelligent reader tracking system that remembers children across visits
    • Personalizes experience by recalling previous stories and practice words
    • Creates emotional connection through recognition and continuity
  3. Production-Grade Observability
    • Integrated Arize AI monitoring for all three AI services
    • Real-time tracking of latency, costs, success rates, and content safety metrics
    • Enables proactive debugging and performance optimization
  4. Developer Experience Excellence
    • Daytona workspace makes onboarding instant (5 min vs. 2+ hours)
    • All services auto-start: frontend (3000), backend (8000), database (8002)
    • Comprehensive integration documentation with examples
  5. Active Listening Engagement
    • 2-3 AI-generated engagement prompts per story
    • Sound cues, reading prompts, and comprehension checks with answer hints
    • Speech recognition for children to answer questions verbally
  6. Robust Error Handling
    • Graceful degradation with per-scene error states
    • Automatic retry logic for transient failures
    • Pre-generated backup stories for demo resilience
  7. Accessibility & Safety
    • PIN-protected parent settings prevent children from changing safety limits
    • Word-by-word highlighting supports emerging readers
    • Auto-advance mode for hands-free operation

📚 What we learned

  1. Multi-AI Orchestration is Hard
    • Chaining multiple AI services requires careful timeout management
    • Concurrency and retry strategies are essential for reliability
    • Observability is not optional - you can't debug what you can't see
  2. Character Consistency Requires Prompt Engineering
    • Model-level consistency isn't solved yet for image generation
    • Strong, persistent prompts can significantly improve consistency
    • Trade-offs exist between creative variation and visual continuity
  3. Database Choice Matters for Real-Time Apps
    • WebSocket auth issues can be showstoppers
    • HTTP/REST APIs provide more reliable fallbacks
    • In-memory storage (SurrealDB) is perfect for session-based features
  4. Developer Tooling Pays Dividends
    • Standardized environments (Daytona) eliminate "works on my machine" issues
    • AI observability (Arize) transforms debugging from guesswork to data
    • Good DX = faster iterations = better product
  5. Content Safety is Complex
    • Can't simply block all mature content - need nuanced softening
    • LLM-based guardrails work well but require careful prompting
    • Parent controls essential for building trust with educators
  6. Edge Cases are Everywhere
    • Very short stories need minimum character limits
    • Very long stories need maximum limits
    • Empty responses, malformed JSON, timeout cascades - all require handling

🚀 What's next for NarrateMe

Immediate Enhancements:

  1. Fully integrate Arize monitoring into all service calls for production-ready observability
  2. Optimize image generation - explore model alternatives or caching strategies
  3. Enhanced Memory Owl - track reading progress, comprehension scores, favorite stories

Short-term Features:

  1. Teacher Dashboard
  2. Story library with save/share functionality
  3. Class-wide analytics on engagement and comprehension

  4. Curriculum alignment tagging

  5. Advanced Engagement

    • Vocabulary activities with definitions
    • Adaptive difficulty based on reader performance
    • Gamification with badges and progress tracking

  6. Production Scaling

    • Cost optimization across AI services (monitored via Arize)
    • Caching layer for repeated stories
    • Background processing for longer stories

Long-term Vision:

  1. Avatar Enhancement
  2. Lip-sync animation for immersive narration
  3. Gesture-based interactions

  4. Customizable avatar options

  5. Multi-language Support

    • Translation pipeline for global accessibility
    • Culturally-aware illustration generation
    • Multi-lingual narration voices

  6. Accessibility Features

    • Text-size controls and dyslexia-friendly fonts
    • Adjustable narration speed
    • Screen reader optimization

  7. Business Model

    • Freemium tier with 5 stories/month
    • Premium tier ($9.99/mo) with unlimited generation
    • School district licensing with analytics dashboards

The Dream: Make NarrateMe the de facto tool for transforming plain text into engaging, multimedia reading experiences—used by educators worldwide to boost comprehension, engagement, and love of reading for millions of children.## Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for NarrateMe

Built With

  • arize
  • css
  • daytona
  • elevenlabs
  • next.js-16-(app-router)
  • python
  • react-19
  • surrealdb
  • tailwind
Share this project:

Updates

Submission history