Video Generation 🎬

AI-powered video generation with support for multiple providers, intelligent routing, and advanced controls.

Overview

The Video Generation system provides a comprehensive solution for creating AI-generated videos with support for multiple state-of-the-art providers including RunwayML Gen-3, Pika, Stability AI, and Luma AI. It features intelligent provider selection, real-time progress tracking, gallery management, and seamless integration with our storage and orchestration systems.

Key Features

🎬 Multi-Provider Support

• RunwayML Gen-3: Industry-leading video quality with camera control
• Pika: Advanced motion and artistic styles
• Stability AI Video: Open-source video generation
• Luma Dream Machine: Cinematic quality videos
• OpenAI Sora: Ready for when it becomes available

🎯 Generation Modes

• Text-to-Video: Generate videos from text prompts
• Image-to-Video: Animate static images
• Video-to-Video: Transform existing videos

⚙️ Advanced Controls

• Duration control (1-60 seconds)
• FPS selection (24, 30, 60)
• Multiple aspect ratios (landscape, portrait, square, cinema)
• Quality tiers (preview to cinematic 4K)
• Camera movements (pan, zoom, dolly, orbit)
• Style presets (realistic, cinematic, anime, abstract)
• Negative prompts
• Seed control for reproducibility

📊 Smart Features

• Intelligent Provider Selection: Auto-selects best provider based on requirements
• Cost Optimization: Balances quality vs. cost
• Progress Tracking: Real-time generation progress
• Session Management: Track costs and statistics
• Gallery System: Organize and favorite videos
• Queue Management: Handle multiple concurrent generations

Quick Start

Basic Text-to-Video

import { inject } from '@angular/core';
import {
  VideoGenerationService,
  VideoProvider,
  VideoQuality,
  VideoAspectRatio
} from '@gograb-ai';

export class MyComponent {
  private videoGen = inject(VideoGenerationService);

  generateVideo() {
    this.videoGen.generateVideo({
      provider: VideoProvider.RUNWAY,
      model: 'gen-3-alpha-turbo',
      mode: 'text-to-video',
      prompt: 'A serene waterfall in a lush forest, golden hour lighting',
      duration: 5,
      fps: 30,
      aspectRatio: VideoAspectRatio.LANDSCAPE,
      quality: VideoQuality.HIGH
    }).subscribe({
      next: (response) => {
        console.log('Video generated:', response.videoUrl);
        console.log('Cost:', response.cost);
      },
      error: (error) => {
        console.error('Generation failed:', error);
      }
    });
  }
}

Using the UI Component

import { Component } from '@angular/core';
import { VideoGenerationComponent } from '@gograb-ai';

@Component({
  selector: 'app-my-page',
  standalone: true,
  imports: [VideoGenerationComponent],
  template: `
    <lib-video-generation></lib-video-generation>
  `
})
export class MyPageComponent {}

With AI Orchestrator (Intelligent Routing)

import { inject } from '@angular/core';
import {
  AIOrchestratorService,
  VideoProvider,
  VideoQuality,
  VideoAspectRatio
} from '@gograb-ai';

export class SmartVideoComponent {
  private orchestrator = inject(AIOrchestratorService);

  generateWithIntelligence() {
    // Orchestrator automatically selects best provider
    this.orchestrator.generateVideo({
      mode: 'text-to-video',
      prompt: 'Epic space battle with detailed spacecraft',
      duration: 10,
      fps: 60,
      aspectRatio: VideoAspectRatio.WIDESCREEN,
      quality: VideoQuality.ULTRA
    }, {
      priority: 'quality', // or 'cost', 'speed', 'balanced'
      maxCostPerRequest: 2.00
    }).subscribe(response => {
      console.log('Optimal provider selected:', response.provider);
      console.log('Video:', response.videoUrl);
    });
  }
}

Service API

VideoGenerationService

Configuration

// Set configuration
videoGenService.setConfig({
  provider: VideoProvider.RUNWAY,
  model: 'gen-3-alpha-turbo',
  defaultDuration: 5,
  defaultFPS: 30,
  defaultQuality: VideoQuality.HIGH,
  enhancePrompts: true,
  safetyFilter: true,
  maxConcurrentGenerations: 2,
  autoRetry: true
});

// Get configuration
const config = videoGenService.getConfig();

Reactive Signals

// Check if generating
const isGenerating = videoGenService.isGenerating();

// Get active generations count
const activeCount = videoGenService.activeGenerations();

// Access gallery
const gallery = videoGenService.gallery();

// Get current session
const session = videoGenService.currentSession();

// Session statistics
const stats = videoGenService.sessionStats();

Gallery Management

// Toggle favorite
videoGenService.toggleFavorite(videoId);

// Add tags
videoGenService.addTags(videoId, ['product', 'marketing']);

// Remove video
videoGenService.removeFromGallery(videoId);

// Clear all
videoGenService.clearGallery();

Event Streams

// Subscribe to progress
videoGenService.getVideoProgress$().subscribe(({ id, progress }) => {
  console.log(`Video ${id}: ${progress}%`);
});

// Subscribe to completions
videoGenService.getVideoGenerated$().subscribe(response => {
  console.log('Video complete:', response);
});

// Subscribe to errors
videoGenService.getVideoError$().subscribe(({ id, error }) => {
  console.error(`Video ${id} failed:`, error);
});

Advanced Usage

Image-to-Video

const imageFile = /* File from input */;

videoGenService.generateVideo({
  provider: VideoProvider.RUNWAY,
  model: 'gen-3-alpha',
  mode: 'image-to-video',
  prompt: 'Bring this image to life with gentle movement',
  sourceImage: imageFile,
  imageStrength: 0.8, // How closely to follow the image
  duration: 5,
  fps: 30,
  aspectRatio: VideoAspectRatio.LANDSCAPE,
  quality: VideoQuality.HIGH
}).subscribe(/* ... */);

Camera Control

videoGenService.generateVideo({
  provider: VideoProvider.RUNWAY,
  model: 'gen-3-alpha',
  mode: 'text-to-video',
  prompt: 'A mysterious ancient temple',
  duration: 8,
  fps: 30,
  aspectRatio: VideoAspectRatio.CINEMA,
  quality: VideoQuality.CINEMATIC,
  cameraMovement: CameraMovement.DOLLY_IN,
  cameraSpeed: 0.5, // Slow dolly
  style: VideoStyle.CINEMATIC
}).subscribe(/* ... */);

Seamless Loops

videoGenService.generateVideo({
  provider: VideoProvider.PIKA,
  model: 'pika-1.5',
  mode: 'text-to-video',
  prompt: 'Gentle ocean waves',
  duration: 5,
  loop: true, // Generate seamless loop
  aspectRatio: VideoAspectRatio.SQUARE,
  quality: VideoQuality.HIGH
}).subscribe(/* ... */);

Cost-Optimized Generation

// Use preview quality for testing
videoGenService.generateVideo({
  provider: VideoProvider.PIKA, // Cheaper option
  model: 'pika-1.0',
  mode: 'text-to-video',
  prompt: 'Test prompt',
  duration: 3, // Shorter duration
  fps: 24,
  quality: VideoQuality.PREVIEW, // Fastest/cheapest
  aspectRatio: VideoAspectRatio.SQUARE
}).subscribe(/* ... */);

Component Usage

Full-Featured UI

The VideoGenerationComponent provides a complete UI with:

• Generation mode selector
• Provider and model selection
• All parameter controls
• Image upload (drag & drop)
• Gallery with favorites
• Session statistics
• Real-time progress

<lib-video-generation></lib-video-generation>

Quick Presets

The component includes built-in presets:

// Cinematic (2.39:1, 24fps, 4K)
component.usePreset('cinematic');

// Social Media (9:16, 30fps, 1080p, 3s)
component.usePreset('social-media');

// Product (1:1, 30fps, orbit camera)
component.usePreset('product');

// Explainer (16:9, 30fps, cartoon style)
component.usePreset('explainer');

Provider Comparison

RunwayML Gen-3

Best For: Professional content, camera control, high quality

Pros:

• ✅ Excellent motion coherence
• ✅ Advanced camera controls
• ✅ Motion brush for precise control
• ✅ High resolution support
• ✅ Watermark-free

Cons:

• ❌ Higher cost
• ❌ Slower generation

Pricing: $0.05-0.10/second

Pika

Best For: Artistic content, unique styles, quick iterations

Pros:

• ✅ Fast generation
• ✅ Unique artistic styles
• ✅ Good motion quality
• ✅ Affordable

Cons:

• ❌ Shorter max duration
• ❌ Limited camera control
• ❌ Watermark on free tier

Pricing: $0.04-0.06/second

Stability AI Video

Best For: Open-source, customization, image-to-video

Pros:

• ✅ Open-source
• ✅ Customizable
• ✅ Good for image animation
• ✅ Most affordable

Cons:

• ❌ Limited features
• ❌ Lower quality
• ❌ No text-to-video

Pricing: $0.03/second

Luma AI

Best For: Cinematic quality, professional projects

Pros:

• ✅ Highest quality
• ✅ Cinematic results
• ✅ Camera control
• ✅ Watermark-free

Cons:

• ❌ Beta access required
• ❌ Highest cost
• ❌ Slowest generation

Pricing: $0.08/second

Best Practices

Prompting

Good Prompts:

✅ "A majestic eagle soaring through clouds at sunset, cinematic 
   camera following from behind, golden hour lighting"

✅ "Close-up of coffee being poured into a white cup, steam rising,
   slow motion, product photography style"

✅ "Animated logo reveal with particles forming the text,
   modern and energetic, dark background"

Poor Prompts:

❌ "eagle flying"
❌ "make a video"
❌ "cool stuff happening"

Tips:

• Be specific about camera movements
• Include lighting details
• Specify mood and style
• Describe motion clearly
• Use cinematic terms

Negative Prompts

Use negative prompts to avoid unwanted content:

negativePrompt: 'blurry, distorted, low quality, artifacts, watermark'

Duration Guidelines

• Social Media: 3-5 seconds
• Product Demos: 5-8 seconds
• Explanatory: 8-15 seconds
• Cinematic: 10-30 seconds
• Test/Preview: 1-3 seconds

Quality vs. Cost

Integration Examples

With Storage System

import { inject } from '@angular/core';
import { VideoGenerationService } from '@gograb-ai';
import { StorageService } from '@storage-system';

export class VideoStorageComponent {
  private videoGen = inject(VideoGenerationService);
  private storage = inject(StorageService);

  async generateAndStore() {
    const response = await firstValueFrom(
      this.videoGen.generateVideo({/* ... */})
    );

    // Store video metadata
    await this.storage.set(`videos/${response.id}`, {
      url: response.videoUrl,
      prompt: response.prompt,
      createdAt: Date.now(),
      cost: response.cost,
      metadata: {
        provider: response.provider,
        duration: response.duration,
        resolution: response.resolution
      }
    });

    console.log('Video stored successfully');
  }
}

With Theme System

import { ThemeService } from '@theme-system';

export class ThemedVideoComponent {
  private theme = inject(ThemeService);
  private videoGen = inject(VideoGenerationService);

  generateThemedContent() {
    const currentTheme = this.theme.currentTheme();
    
    // Adapt prompt to theme
    const basePrompt = 'A futuristic interface animation';
    const themedPrompt = currentTheme.mode === 'dark'
      ? `${basePrompt}, dark theme, neon accents`
      : `${basePrompt}, light theme, soft colors`;

    this.videoGen.generateVideo({
      prompt: themedPrompt,
      style: currentTheme.mode === 'dark' 
        ? VideoStyle.CYBERPUNK 
        : VideoStyle.REALISTIC,
      /* ... */
    }).subscribe(/* ... */);
  }
}

Batch Generation

import { forkJoin } from 'rxjs';

export class BatchVideoComponent {
  private videoGen = inject(VideoGenerationService);

  generateBatch(prompts: string[]) {
    const requests = prompts.map(prompt => 
      this.videoGen.generateVideo({
        mode: 'text-to-video',
        prompt,
        duration: 5,
        fps: 30,
        aspectRatio: VideoAspectRatio.LANDSCAPE,
        quality: VideoQuality.STANDARD
      })
    );

    forkJoin(requests).subscribe(responses => {
      console.log(`Generated ${responses.length} videos`);
      responses.forEach((r, i) => {
        console.log(`${i + 1}. ${r.videoUrl} (Cost: $${r.cost.amount})`);
      });
    });
  }
}

Troubleshooting

API Key Issues

// Ensure API keys are configured
import { AiConfigService } from '@gograb-ai';

const configService = inject(AiConfigService);
configService.setProviderApiKey('runway', 'your-runway-api-key');
configService.setProviderApiKey('pika', 'your-pika-api-key');

Generation Failures

videoGenService.generateVideo(request).subscribe({
  error: (error) => {
    if (error.retryable) {
      console.log('Temporary failure, retrying...');
      // Auto-retry is enabled by default
    } else {
      console.error('Permanent failure:', error.message);
    }
  }
});

Slow Generation

• Use lower quality for faster results
• Reduce duration to 3-5 seconds
• Try Pika for faster generation
• Check provider status (may be experiencing high load)

Cost Management

// Set up cost tracking
videoGenService.config$.subscribe(config => {
  console.log('Max cost per video:', 
    config.defaultDuration * currentModel.pricing.perSecond
  );
});

// Monitor session costs
const stats = videoGenService.sessionStats();
console.log('Total session cost:', stats.totalCost);

// Set alerts
if (stats.totalCost > 10.00) {
  console.warn('⚠️ Session cost exceeds $10');
}

Performance Tips

1. Use Preview Quality for Testing: Test prompts with preview quality first
2. Optimize Duration: Keep videos as short as possible
3. Batch Wisely: Don't exceed max concurrent generations
4. Cache Results: Store generated videos to avoid regeneration
5. Monitor Costs: Track spending with session statistics

Future Enhancements

• Video upscaling
• Sound generation integration
• Motion brush UI
• Video-to-video transformations
• Advanced editing tools
• Template library
• Collaborative galleries
• Export to multiple formats

Related Documentation

• AI Orchestrator - Intelligent provider selection
• Image Generation - AI image generation
• Storage System - Persistent storage
• Theme System - Consistent styling

Support

For issues or questions:

• Check the troubleshooting section
• Review provider documentation
• Consult AI Orchestrator docs
• Contact the GoGrab AI team

Last Updated: October 2025 Version: 1.0.0 Status: ✅ Production Ready