🎬 OpenScenes

AI-Powered Video Presentation Engine

Transform ideas into stunning video presentations with AI-driven generation and professional rendering.

Gemini 3

---

✨ Features

• AI Generation — Multi-agent pipeline transforms prompts into complete presentations
• Intelligent Editing — Natural language editing at global, slide, and element levels
• Video Export — Distributed render engine with Remotion
• Theme Engine — 10+ curated visual themes with AI-aware styling
• File Context — Upload documents (PDF, MD, CSV) for AI-informed generation
• Real-time Preview — Interactive canvas with drag-and-drop editing

---

Tech Stack

Layer	Technologies
Frontend	Next.js 15, React 19, TypeScript, Framer Motion
AI	Google Gemini 2.0, Vertex AI (Imagen 3)
Video	Remotion 4, WebCodecs API
Infrastructure	RabbitMQ, Redis, PostgreSQL, MinIO (S3)
DevOps	Docker, Docker Compose

---

Tiered Edit System

Natural language editing at three granularity levels:

flowchart LR
    subgraph "Edit Levels"
        L1["- Global<br/>All slides"]
        L2["- Slide<br/>Single slide"]
        L3["- Element<br/>Selected items"]
    end
    
    L1 --> Classifier
    L2 --> Classifier
    L3 --> Classifier
    
    Classifier[AI Classifier] --> Patches[JSON Patches]
    Patches --> Apply[Deep Merge]
    Apply --> Result[Updated Slides]

Loading

Examples:

• "Make all headlines use brand color #6366f1"
• "Convert this slide to a two-column comparison"
• "Make the selected text larger and bold"

---

Architecture

graph TB
    subgraph Frontend
        UI[Next.js App]
    end
    
    subgraph Workers
        AI[AI Worker]
        Render[Render Worker]
    end
    
    subgraph Infrastructure
        RMQ[(RabbitMQ)]
        Redis[(Redis)]
        PG[(PostgreSQL)]
        S3[(MinIO)]
    end
    
    subgraph External
        Gemini[Google Gemini]
    end
    
    UI --> RMQ
    RMQ --> AI
    RMQ --> Render
    AI --> Gemini
    AI --> S3
    Render --> S3

Loading

Event-Driven Architecture

The system uses a distributed, event-driven architecture for scalable async processing:

Component	Technology	Purpose
Message Queue	RabbitMQ	Decouples API from workers, enables horizontal scaling
Job Status	Redis	Real-time status polling, pub/sub for cancellation
Workers	Node.js	Stateless consumers that process AI/render jobs
Storage	MinIO (S3)	Object storage for assets and rendered videos

sequenceDiagram
    participant Client
    participant API
    participant RabbitMQ
    participant Worker
    participant Redis
    
    Client->>API: POST /api/ai/generate
    API->>RabbitMQ: Publish job
    API->>Redis: Set status: queued
    API-->>Client: { jobId }
    
    RabbitMQ->>Worker: Consume job
    Worker->>Redis: Update: processing
    Worker->>Worker: Execute AI pipeline
    Worker->>Redis: Update: completed
    
    Client->>API: GET /api/ai/status/{jobId}
    API->>Redis: Get status
    API-->>Client: { status, result }

Loading

---

AI Pipeline

flowchart LR
    Query[User Query] --> Summarizer
    Summarizer --> Director
    Director --> Assets[Asset Generator]
    Director --> Slides[Slide Generator]
    Assets --> Integration
    Slides --> Integration
    Integration --> Validator
    Validator --> Output[Final Slides]

Loading

Agent	Model	Purpose
Summarizer	Gemini Flash Lite	Extract intent and key points
Director	Gemini Flash	Plan narrative and visual style
Slide Generator	Gemini Flash	Generate slide JSON

---

Project Structure

├── app/                    # Next.js App Router
│   ├── api/ai/            # AI endpoints
│   ├── api/render/        # Render endpoints
│   └── generate/          # Dashboard & editor
├── worker/
│   ├── ai/                # AI generation worker
│   └── render/            # Video render worker
├── remotion/              # Video composition
└── docker-compose.yml     # Full stack setup

---

Quick Start

# Install dependencies
npm install

# Start infrastructure
docker-compose up -d

# Setup environment
cp .env.example .env.local

# Setup Google Cloud Credentials (required for Vertex AI)
# Place your service-account.json in the root directory
# OR set GOOGLE_APPLICATION_CREDENTIALS in .env to your local path

# Run development server
npm run dev

# Run workers (separate terminals)
npm run worker:ai
npm run worker:render

---

Editor

---

Documentation

• API Reference
• AI Worker
• Render Worker

---

** Built with Next.js, Remotion, and Google Gemini**