🎬 AI Story Weaver

A powerful AI-driven video story generation platform that creates cinematic videos with custom narration, professional aspect ratios, and advanced voice cloning capabilities.

✨ Features

🎭 Advanced Voice Technology

• Multiple TTS Engines: Puter.js neural/generative TTS (free) + Fish Audio premium TTS
• Voice Cloning: Custom voice cloning with browser-based audio analysis
• Fish Audio Integration: Professional voice synthesis with emotion syntax and breathing effects
• Voice Selection: 20+ pre-configured voices with pitch, speed, and emotion controls

🖼️ Robust Image Generation

• Multi-Service Fallback: Pollinations.ai → Dezgo → Styled Canvas Placeholders
• Anti-Watermark: Optimized settings for clean, professional images
• Smart Fallbacks: Never fails - always generates visual content
• Debug Logging: Comprehensive tracking of which services succeed

📹 Professional Video Export

• Multiple Aspect Ratios: 16:9, 9:16, 1:1, 21:9, 4:3, 32:9
• High-Quality Export: WebM with VP9 codec, up to 4K resolution
• Ken Burns Effects: Smooth zoom and pan animations
• Quality Options: 720p, 1080p, Ultra quality settings

🔧 Enhanced Reliability

• Error Recovery: Comprehensive error handling and fallback systems
• Storage Management: Auto-cleanup for localStorage quota management
• Permission Handling: User-friendly microphone and browser permission guidance
• Stack-Safe Processing: Fixed all memory overflow issues for large files

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• Modern web browser with microphone access

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/ai-story-weaver.git
   cd ai-story-weaver

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env.local file with:

   GEMINI_API_KEY=your_gemini_api_key_here
   FISH_AUDIO_API_KEY=your_fish_audio_key_here (optional)
   FISH_AUDIO_DEVELOPER_ID=your_developer_id_here (optional)
   

4. Run the development server:

   npm run dev

5. Open your browser: Navigate to http://localhost:5173

🎯 Usage

Creating Your First Story

1. Enter Your Concept: Describe your story idea in the text input
2. Select Aspect Ratio: Choose from 6 professional formats
3. Configure Voice:
   • Use built-in voices or clone your own
   • Adjust pitch, speed, and emotion settings
   • Test Fish Audio premium voices with breathing effects
4. Generate: Click "Weave Story" and watch the magic happen!
5. Export: Download your video in high quality WebM format

Voice Cloning

1. Record Sample: Use the microphone to record 10-30 seconds
2. Upload Audio: Or upload an existing audio file
3. Clone Voice: Process your voice for custom narration
4. Use in Stories: Your cloned voice becomes available for selection

🛠️ Technical Stack

• Frontend: React + TypeScript + Vite
• AI Services:
  • Google Gemini API (story generation)
  • Pollinations.ai (primary image generation)
  • Dezgo API (fallback image generation)
• Audio:
  • Puter.js TTS (free neural/generative)
  • Fish Audio API (premium humanized)
  • Web Audio API (voice analysis)
• Video: Canvas API + MediaRecorder (WebM/VP9)

📁 Project Structure

├── components/
│   ├── AspectRatioSettings.tsx    # Aspect ratio selection
│   ├── VoiceSettings.tsx          # Voice configuration
│   ├── VoiceCloning.tsx           # Custom voice cloning
│   ├── VideoExport.tsx            # Video export functionality
│   ├── Header.tsx                 # App header
│   ├── Loader.tsx                 # Loading animations
│   ├── ScriptInput.tsx            # Story input form
│   └── VideoPlayer.tsx            # Video playback
├── services/
│   ├── geminiService.ts           # AI story & image generation
│   └── ttsService.ts              # Text-to-speech services
├── types.ts                       # TypeScript definitions
└── constants.ts                   # App configuration

🔧 Configuration

Fish Audio Setup

1. Sign up at Fish Audio
2. Get your API key and developer ID
3. Add to .env.local for premium voice features

Voice Settings

• Pitch: -20 to +20 (adjusts voice tone)
• Speed: 0.5x to 2.0x (speech rate)
• Emotion: happy, sad, excited, calm, angry, surprised

Aspect Ratios

• Landscape: 16:9 (1920×1080), 21:9 (2560×1080), 4:3 (1440×1080)
• Portrait: 9:16 (1080×1920)
• Square: 1:1 (1080×1080)
• Ultra-wide: 32:9 (3840×1080)

🐛 Troubleshooting

Common Issues

Microphone Permission Denied

• Click microphone icon in browser address bar
• Allow microphone access for the site

Image Generation Fails

• Check console for service status
• Fallback system ensures content always generates

Storage Quota Exceeded

• Auto-cleanup removes old voice profiles
• Clear browser data if needed

Large File Errors

• Fixed stack overflow issues
• All file processing is now stack-safe

🚀 Deployment

Build for Production

npm run build

Deploy to Vercel

npm i -g vercel
vercel --prod

Deploy to Netlify

npm run build
# Upload dist/ folder to Netlify

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Google Gemini for AI story generation
• Fish Audio for premium voice synthesis
• Pollinations.ai for free image generation
• Puter.js for neural text-to-speech

📞 Support

For support, questions, or feature requests:

• Open an issue on GitHub
• Check the troubleshooting section above
• Review console logs for detailed error information

---

Made with ❤️ using AI and modern web technologies