Video Guide – AI Camera Movement Assistant

AI-powered intelligent camera movement assistant for creators.

Quick Start

# 1. Install dependencies
npm install

# 2. Run dev server
npm run dev

# 3. Open in browser
open http://localhost:3000

Project Structure

video-guide/
├── app/
│   ├── globals.css            # Tailwind + custom animations
│   ├── layout.tsx             # Root layout with DM Sans font
│   ├── page.tsx               # Entry point (renders VideoGuideApp)
│   └── api/
│       ├── generate-script/   # Doubao-seed-1-8 API route
│       │   └── route.ts
│       ├── generate-images/   # Doubao-seedream-4-5 API route
│       │   └── route.ts
│       └── generate-videos/   # Doubao-seedance-1-5-pro API route
│           └── route.ts
├── components/
│   ├── VideoGuideApp.tsx      # Main app orchestrator
│   ├── PageShell.tsx          # Layout wrapper (sidebar + background)
│   ├── Sidebar.tsx            # Left navigation + mobile header
│   ├── MotionIcon.tsx         # Camera motion direction icons
│   ├── HomePage.tsx           # Page 1: Landing / splash
│   ├── UploadPage.tsx         # Page 2: Image upload
│   ├── VisualGuidePage.tsx    # Page 3: Script + keyframe grid
│   └── VideoGuidePage.tsx     # Page 4: Video generation + playback
├── lib/
│   ├── types.ts               # TypeScript interfaces
│   └── mock-api.ts            # Mock API functions (replace with real calls)
├── tailwind.config.ts
├── tsconfig.json
├── next.config.mjs
├── postcss.config.mjs
└── package.json

User Flow

1. Home → Click "Start Creating"
2. Upload → Drag-and-drop or click to upload a scene photo
3. Visual Guide → AI generates script (4 beats) → then 4 stylized keyframes
4. Dynamic Guide → Click "Generate Video" → 4 camera movement videos

Replacing Mock APIs with Real Volcano Engine Calls

The mock layer is in lib/mock-api.ts. Each function documents the real API call you would make. The three endpoints are:

Function	Model	Purpose
generateScript()	doubao-seed-1-8	Analyze scene → 4 beats
generateImages()	doubao-seedream-4-5	Beats → 4 keyframe images
generateVideos()	doubao-seedance-1-5-pro	Frames → 4 motion videos

Server-side API routes in app/api/ also have skeleton code with commented-out fetch calls ready to fill in with your API key.

Tech Stack

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS (glassmorphism, gradients, custom animations)
• Lucide React (icons)