cinema-studio-pro/frontend

Lux Studio - AI Cinematography Suite

Overview

Lux Studio is a comprehensive AI-powered creative suite for filmmakers and visual artists. It combines professional cinematography prompt generation, AI video generation (via Google Veo 3.1), and project management with storyboarding capabilities.

Key Features

Image Generation

• 27 Cinematography Presets: Documentary, Drama, Auteur, and Commercial styles
• Professional Equipment: 6 cinema cameras, 7 cinema lenses with compatibility matrix
• Film Stock & Texture Engine: Deep texture generation for photorealistic materials
• AI-Optimized Prompts: Powered by Google Gemini for precise prompt engineering

Video Generation

• Google Veo 3.1 Integration: Generate 4-8 second AI videos
• Model Options: Standard (higher quality) and Fast (50% cost savings)
• Image-to-Video (I2V): Use reference images to guide video generation
• Audio Generation: Optional AI-generated audio tracks
• Frame Extraction: Extract frames from videos and save to library

Project Management

• Organize Work: Create projects to organize generated images and videos
• Library: Store and browse all generated assets
• Re-run Videos: Regenerate videos with saved settings and reference images

Storyboarding

• Create Storyboards: Select images from library to build visual sequences
• Drag-to-Reorder: Arrange frames with intuitive drag-and-drop
• Frame Annotations: Add scene notes and descriptions
• Generate Video per Frame: Send frames directly to Video Gen
• Export Options: PDF and PNG export for sharing

Data Storage

Where is data stored?

All project data is stored locally in your browser using IndexedDB, a client-side database. This means:

• Projects, images, and videos are stored on your device
• Data persists between browser sessions
• No server uploads for library content (videos are generated server-side but stored locally)
• Device-specific: Data doesn't sync between devices

Database Structure

IndexedDB: CinemaStudioPro
├── projects     # Project metadata (name, dates, userId)
├── items        # Images and videos (base64 data, prompts, settings)
└── storyboards  # Storyboard configurations (frames, annotations)

Storage Considerations

• Large video files are stored as URLs pointing to the server
• Images are stored as base64-encoded data
• Browser storage limits apply (typically 50-100MB+)
• Clear browser data will remove all projects

Production Migration Path

The current IndexedDB storage is ideal for development but not suitable for production deployment. For hosted environments, migrate to server-side storage:

Recommended Architecture:

Development (Current):
Browser IndexedDB → base64 images stored locally

Production:
┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Frontend  │ ──► │  Backend    │ ──► │  S3/Cloud   │
│   (React)   │     │  API        │     │  Storage    │
└─────────────┘     └─────────────┘     └─────────────┘
                           │
                           ▼
                    ┌─────────────┐
                    │  PostgreSQL │
                    │  (metadata) │
                    └─────────────┘

Migration Steps:

1. Cloud Storage: Store images/videos in AWS S3, Google Cloud Storage, or similar
2. Backend API: Create REST endpoints for CRUD operations
3. Database: PostgreSQL/MySQL for project metadata, user data, and asset references
4. Update Hooks: Modify useProjects.js to call API endpoints instead of IndexedDB

API Endpoint Examples:

POST   /api/projects              → createProject()
GET    /api/projects              → loadProjects()
DELETE /api/projects/:id          → deleteProject()
POST   /api/projects/:id/items    → addItemToProject()
GET    /api/projects/:id/items    → getProjectItems()

The hook abstraction (useProjects, useIndexedDB) makes this migration clean - swap the implementation without changing UI components.

User Isolation (SSO Ready)

The application is prepared for multi-user support via SSO integration:

• Each project includes a userId field
• Projects are filtered by user ID when loading
• Currently uses 'local' as placeholder until SSO is implemented

SSO Integration

To add SSO authentication, update the getCurrentUserId() function in src/hooks/useProjects.js:

const getCurrentUserId = () => {
  // Replace with your auth provider
  return authContext.user?.id || 'local';
};

Installation

Prerequisites

• Node.js 18.0+
• Google Gemini API key
• PHP backend for video generation (Veo 3.1 API)

Setup

1. Install dependencies

cd Prompt_Studio
npm install

2. Configure environment

VITE_GEMINI_API_KEY=your_gemini_api_key

3. Start development server

npm run dev

4. Build for production

npm run build

Technology Stack

• Frontend: React 18, Vite, Tailwind CSS
• AI Services: Google Gemini (prompts), Google Veo 3.1 (video)
• Storage: IndexedDB (client-side)
• Drag & Drop: @dnd-kit
• Export: jsPDF, html2canvas

API Keys Required

Service	Purpose	Environment Variable
Google Gemini	Prompt optimization	VITE_GEMINI_API_KEY
Google Veo 3.1	Video generation	Configured in PHP backend

License

Proprietary - All rights reserved