📚 StoryBuddy - AI-Powered Story Generator with Voice Cloning

🎯 Overview

StoryBuddy transforms images into magical, narrated stories using Chrome's built-in AI. Upload any photo, and watch as AI generates a unique story in real-time, then hear it narrated in your own cloned voice!

Problem & Solution

Problem: Children and educators need engaging, personalized storytelling tools with familiar voices.

Solution: StoryBuddy uses Chrome's on-device AI (Gemini Nano) for instant story generation and optional voice cloning for personalized narration - all privacy-first with local processing.

---

✨ Features

• 📸 Image-to-Story AI - Upload, drag-drop, or capture photos
• 🎙️ Voice Cloning - Record 5-10 seconds, get personalized narration
• 🌍 Multi-Language - English and Chinese (中文) support
• 📚 Story Styles - Children's stories or Aesop's fables with morals
• 🎨 Wizard UI - Step-by-step guided experience with progress tracking
• 🎧 Audio Narration - Text-to-speech with custom or default voice

---

🔧 APIs Used

• Prompt API (Gemini Nano model) - On-device story generation with image understanding

---

🚀 Quick Setup

Prerequisites

1. Google Chrome Canary (Chrome version 143+) - Download here
2. Enable AI Features:

   • Go to chrome://flags and enable:

   • #optimization-guide-on-device-model

   • #prompt-api-for-gemini-nano

   • #prompt-api-for-gemini-nano-multimodal-input

   • Restart browser

3. Download AI Model:
   • Go to chrome://components
   • Find "Optimization Guide On Device Model"
   • Click "Check for update" and wait for download

Installation

# Clone repository
git clone https://github.com/lucyy05/StoryBuddy.git
cd storybuddy

# Open in Chrome Canary
# Drag and drop index.html into Chrome Canary browser

Optional: TTS Server Setup

For voice cloning features, you'll need a TTS server running

• App works without TTS server (story generation only)

---

📖 How to Use

1. Settings - Choose language and story style
2. Image - Upload, drag-drop, or take a photo
3. Voice (Optional) - Record your voice or use default AI voice
4. Story - Generate and listen to your personalized story!

---

🏗️ Project Structure

storybuddy/
├── index.html          # Main HTML structure
├── css/
│   └── styles.css      # Styling and animations
├── js/
│   └── app.js          # Application logic
└── README.md           # Documentation

---

🎥 Demo Video

Watch StoryBuddy in Action: Youtube Demo

Includes: Story generation, voice cloning, camera capture, multi-language support

---

Built with ❤️ using Chrome's Built-in AI APIs