Ideagen Studio — Your Browser, Your Movie Studio

🚀 Turn your ideas into stunning long-form films — no GPU, no coding, just pure creativity in motion!

Comment

🎬✨ Ideagen Studio — Your Browser, Your Movie Studio

Welcome to Ideagen Studio, the AI-powered playground where your ideas become cinematic magic—right inside your browser. No servers. No uploads. Just pure client-side creativity. You’re the director, the narrator, and the visionary. Let’s roll! 🎥🚀

🌟 Key Features

  • 🧠 AI-Powered Storyboarding
    Craft scenes from simple text prompts. Add images for context. Choose expressive AI voiceovers. Every clip is a creative burst.

  • 🎞️ Scene-by-Scene Generation
    Build your story one moment at a time. Each scene is rendered with Google Gemini’s Veo (video) and TTS (voice) models.

  • 🗣️ Voiceover Magic
    Narrate your story with lifelike AI voices. Choose tones, styles, and pacing to match your vibe.

  • 🧩 Modular Clip Editor
    Add, edit, reorder, and remix clips in a drag-and-drop storyboard. Total control, zero clutter.

  • 🛠️ Client-Side Final Cut
    Merge all clips into a polished video using FFmpeg.wasm—right in your browser. No data leaves your device. 🔒

  • ⚡ Zero Build Setup
    Powered by ES Modules + Import Maps. No bundlers, no build steps. Just open and create.

  • 🎨 Responsive UI with Tailwind CSS
    Clean, fast, and beautiful. Designed for creators who care about aesthetics and speed.

🎬✨ Ideagen Studio — Your Browser, Your Movie Studio

Welcome to Ideagen Studio, the AI-powered playground where your ideas become cinematic magic—right inside your browser. No servers. No uploads. Just pure client-side creativity. You’re the director, the narrator, and the visionary. Let’s roll! 🎥🚀

🌟 Core Features

  • 🧠 Multi-Engine Backend
    Choose your AI powerhouse! Seamlessly switch between Google Gemini, Cerebras, and ElevenLabs for video and voice generation—right from the UI. The Node.js backend intelligently routes your requests for optimal performance.

  • 🎞️ Scene-by-Scene Generation
    Build your story one moment at a time. The backend renders each scene, and previews appear in your storyboard as they’re ready.

  • 🗣️ AI Voiceover Magic
    Narrate your story with lifelike voices from ElevenLabs. Choose tones that are calm, cheerful, or deep to match your vibe.

  • 🛠️ 100% In-Browser Final Cut
    Merge all your generated clips into a polished final video using FFmpeg.wasm—right in your browser. No data leaves your device during the final merge. It’s fast, private, and secure! 🔒

🧠 Architecture Snapshot

  • IdeagenCore.tsx — Orchestrates app state, clip flow, and UI logic.
  • SceneBoard.tsx — Visual storyboard for managing all clips.
  • SceneForm.tsx — Editor for individual scenes.
  • visionEngine.ts — Calls Gemini Veo to generate video.
  • voiceEngine.ts — Calls Gemini TTS to generate narration.
  • mergeEngine.ts — Loads FFmpeg.wasm and stitches clips locally.

💻 Tech Stack

Layer Choice Why It Wins
⚛️ Frontend React Modular, expressive UI
⌨️ Language TypeScript Safer, smarter development
🤖 AI Models Google Gemini (Veo & TTS) State-of-the-art generation
📽️ Video Processing FFmpeg.wasm Local merge, zero server cost
🎨 Styling Tailwind CSS Fast, responsive design
📦 Module Loading ES Modules + Import Maps Instant load, no build step

💧☁️ Cloud Deployment Power-Up

Deploy Ideagen’s backend with LiquidMetal Raindrop AI + Vultr for high-performance inference.

Component Role & Benefit
💧 LiquidMetal Raindrop Simplifies DevOps, scales backend effortlessly
☁️ Vultr Cloud GPUs Provides low-latency, high-throughput AI inference

🚀 Deployment Steps:

  1. Get your API key from Vultr.
  2. Use Raindrop CLI or dashboard to point to /backend directory.
  3. Configure Raindrop to use Vultr as the cloud provider.
  4. Deploy! Raindrop provisions resources and launches your app.

🤖 Supported AI Engines

Engine Purpose Integration Method
Google Gemini Video + Voice Built-in via geminiService.ts
Cerebras Video Generation Switchable via backend config
ElevenLabs Premium Voiceovers Add API key to .env and enable routing

🔧 ElevenLabs Setup:

  1. Sign up and get your API key.
  2. Add to backend/.env: ELEVENLABS_API_KEY=YOUR_ELEVENLABS_API_KEY_HERE
  3. Enable in backend config. Done!

💻 Tech Stack

Layer Choice Why It Wins
⚛️ Frontend React Modular, expressive UI
⌨️ Language TypeScript Safer, smarter development
🤖 AI Models Gemini, Cerebras, ElevenLabs Multi-engine flexibility
📽️ Video Processing FFmpeg.wasm Local merge, zero server cost
🎨 Styling Tailwind CSS Fast, responsive design
📦 Module Loading ES Modules + Import Maps Instant load, no build step
☁️ Cloud Infra Vultr + Raindrop Scalable, production-ready backend

Let the browser be your stage. Let your ideas take the spotlight. 🌈🎬

Built With

Share this project:

Updates