Lux Studio

AI-powered cinematography suite for professional image and video generation.

Live: https://ai-sandbox.oliver.solutions/lux-studio/

---

What It Does

Lux Studio combines physics-based prompt engineering with Google's Imagen 3 and Veo 3.1 APIs in a project-first workflow. Create projects, generate cinematic images with professional camera and lens profiles, produce AI videos, annotate storyboards — all stored locally in your browser.

---

Features

Image Generation (Imagen 3)

• 40+ cinematic lighting presets
• 8 cinema camera body profiles (sensor behaviour, dynamic range, grain)
• 10 lens profiles (bokeh, flares, chromatic aberration)
• Up to 14 reference images for style transfer
• Edit mode — refine a generated image with follow-up prompts
• Image upload for style transfer or editing

Video Generation (Veo 3.1)

• Text-to-video and image-to-video modes
• First-frame and last-frame interpolation (I2V)
• Standard and Fast model selection
• Duration options: 4s, 6s, 8s
• Frame extraction from generated videos

Project Workspace

• Project-first workflow — every image and video is tied to a project
• Persistent local storage via IndexedDB (no server account needed)
• Storyboard editor with drag-to-reorder panels and PDF export

Authentication

• Microsoft Azure AD SSO via MSAL (toggleable per environment)

---

Tech Stack

Layer	Technology
Frontend	React 19, Vite, Tailwind CSS
Auth	@azure/msal-browser + @azure/msal-react
Backend	PHP 7.4+ (Apache, no separate service needed)
AI — Images	Google Imagen 3 via Gemini API
AI — Video	Google Veo 3.1 via Gemini API
Storage	IndexedDB (frontend) + session files (backend, auto-cleaned 24 h)

---

Prerequisites

• Node.js 18+
• PHP 7.4+
• Composer
• A Google Gemini API key — https://aistudio.google.com/app/apikey
• (Optional) Azure AD app registration for SSO

---

Local Development

1. Configure environment files

cp backend/.env.local backend/.env
cp frontend/.env.local frontend/.env

Edit backend/.env and set your GEMINI_API_KEY.

2. Start both servers

Recommended — automated:

./setup.sh    # Detects port conflicts, starts both servers, generates stop.sh
./stop.sh     # Stop all servers
./status.sh   # Check running status

Manual:

# Terminal 1 — Backend
cd backend
composer install
php -S localhost:5015

# Terminal 2 — Frontend
cd frontend
npm install
npm run dev

3. Open the app

http://localhost:3000

SSO is enabled by default. To skip Azure AD login during development, set VITE_SSO_ENABLED=false in frontend/.env and restart.

---

Environment Variables

Backend (backend/.env)

Variable	Description
GEMINI_API_KEY	Google Gemini API key (required)
FRONTEND_URL	CORS allowed origin — no trailing slash
SSO_ENABLED	true / false — enable Azure AD auth
BACKEND_PORT	PHP dev server port (default: 5015)
SSO_TENANT_ID	Azure AD tenant ID
SSO_CLIENT_ID	Azure AD client ID

Frontend (frontend/.env)

Variable	Description
VITE_API_URL	Backend base URL (e.g. http://localhost:5015 for local)
VITE_BASE_PATH	App base path (/ local, /lux-studio/ production)
VITE_GEMINI_API_KEY	Gemini key for client-side prompt enhancement
VITE_SSO_ENABLED	true / false — show SSO login UI
VITE_SSO_TENANT_ID	Azure AD tenant ID
VITE_SSO_CLIENT_ID	Azure AD client ID
VITE_SSO_REDIRECT_URI	OAuth redirect URI (must match Azure AD portal exactly)

---

Production Deployment

See NEW_DEPLOYMENT.md for the full step-by-step guide (FileZilla + SSH).

Server: ai-sandbox.oliver.solutions Frontend path: /var/www/html/lux-studio/ Backend path: /var/www/html/lux-studio/api/

Quick build summary:

cd frontend
cp .env.production .env
npm run build
# Upload frontend/dist/* per NEW_DEPLOYMENT.md Step 3
# Upload backend/*.php per NEW_DEPLOYMENT.md Step 4

---

Troubleshooting

Symptom	Fix
404 on all API calls	Check VITE_API_URL is correct and the build was made after the change
Image generation 500 error	AuthMiddleware.php missing from /api/ — upload it
IMAGE_RECITATION error	Prompt too generic — use 10+ descriptive words
Login redirect loop	VITE_SSO_REDIRECT_URI must match Azure AD portal exactly (include trailing slash)
Video stuck in PENDING	Check video_operations.json on the server; retry generation
Old code after deploy	Hard refresh: Ctrl + Shift + R, or delete assets/ folder on server before re-uploading

---

Project Structure

cinema-studio-pro/
├── frontend/                  # React + Vite app
│   ├── src/
│   │   ├── components/        # UI components
│   │   ├── hooks/             # useProjects, useIndexedDB
│   │   ├── authConfig.js      # MSAL config
│   │   └── App.jsx
│   ├── .env.local             # Local dev template
│   ├── .env.production        # Production template
│   └── package.json
├── backend/                   # PHP APIs
│   ├── api.php                # Image generation (Imagen 3)
│   ├── video_api.php          # Video generation (Veo 3.1)
│   ├── enhance_prompt.php     # AI prompt optimisation
│   ├── stream_video.php       # Video streaming with Range support
│   ├── session_manager.php    # Multi-user session isolation
│   ├── AuthMiddleware.php     # SSO middleware (required by api.php)
│   ├── JWTValidator.php       # Azure AD token validation
│   ├── uploads/               # Temp file storage (auto-cleaned)
│   ├── .env.local             # Local dev template
│   └── .env.production        # Production template
├── setup.sh                   # Start local dev servers
├── NEW_DEPLOYMENT.md          # Production deployment guide
└── CLAUDE.md                  # AI assistant instructions