MicroMovie AI Studio

A professional AI-powered micro-movie creation tool that automatically generates scripts, character designs, and video storyboards using Gemini AI and Kling AI.

✨ Features

📝 Step 1: Script Creation

• Intelligent Script Analysis: Uses Gemini AI to analyze script content and automatically extract story background, era, and country context
• Flexible Configuration: Supports custom project title, target duration (60s/120s), and visual style
• Multiple Style Support: Supports four visual styles: Realistic, Anime, 3D, and Cinematic

👥 Step 2: Character Settings

• Automatic Character Extraction: Automatically identifies and extracts main characters from the script
• Character Sheet Generation: Uses Gemini Image API to generate character front, side, and back views
• Character Consistency: Generated character images can be used for subsequent scene generation to maintain character appearance consistency

🎬 Step 3: Storyboard Design

• Intelligent Storyboard Generation: Automatically generates storyboard scenes based on the script, including action descriptions and visual prompts
• Professional Video Parameters:
  • Camera Movement: Static, Pan Left/Right, Tilt Up/Down, Zoom In/Out, Tracking Shot, Handheld, etc.
  • Shot Types: Extreme Close-up, Close-up, Medium Shot, Full Shot, Wide Shot, Low Angle, High Angle, etc.
  • Transitions: Fade In, Fade Out, Dissolve, Hard Cut, etc.
• First Frame Generation: Generates first frame preview images for each scene with character reference image support
• Video Generation: Uses Kling AI or Kingsoft Cloud Xingliu to generate high-quality video clips
• Background Music: Supports selecting background music with different moods (Happy, Sad, Epic, Tense, Chill)
• Full Video Export: Automatically merges all scene videos with subtitle and background music support

🛠️ Tech Stack

• Frontend Framework: React 19 + TypeScript
• Build Tool: Vite
• AI Services:
  • Gemini API: Script analysis, character extraction, storyboard generation, image generation
  • Kling AI: Video generation (Official API)
  • Kingsoft Cloud Xingliu (KSC): Video generation (Kling v2.5 model)
• Video Processing: FFmpeg (WebAssembly) - Video merging and processing
• Other Tools: JSZip (Project import/export), Lucide React (Icons)

📋 Key Features

• ✅ Bilingual Support: Complete English and Chinese interface switching
• ✅ Character Consistency: Maintains character appearance consistency across scenes through reference images
• ✅ Project Import/Export: Supports saving and loading project data
• ✅ Real-time Preview: Supports previewing individual scenes and full movies
• ✅ Flexible Video Providers: Supports switching between Kling AI Official and Kingsoft Cloud Xingliu
• ✅ Secure Key Management: All API keys are stored in browser LocalStorage and never uploaded to servers
• ✅ Local JWT Generation: Kling AI JWT tokens are generated locally to ensure security

🚀 Quick Start

Prerequisites

• Node.js (Recommended v18+)
• npm or yarn

Installation

1. Clone the repository

   git clone <repository-url>
   cd MicroMovie

2. Install dependencies

   npm install

3. Configure environment variables (Optional)

   Create a .env.local file (optional, can also be configured in-app):

   GEMINI_API_KEY=your_gemini_api_key_here

4. Start the development server

   npm run dev

   The app will start at http://localhost:3000

API Keys Configuration

Configure the following API keys in the Settings page within the app:

1. Gemini API Key (Required)

   • Used for script analysis, character extraction, storyboard generation, and image generation
   • Get it at: https://ai.google.dev/

2. Kling AI Credentials (Video Generation Option 1)

   • Access Key (AK) and Secret Key (SK)
   • Used for generating video clips
   • Get them at: https://klingai.com/

3. Kingsoft Cloud API Key (Video Generation Option 2)

   • Used for generating videos using Kingsoft Cloud Xingliu service
   • Get it at: https://www.ksyun.com/

Security Note: All API keys are stored in browser LocalStorage and are never transmitted to any servers, only sent directly to the respective AI APIs.

📖 Workflow

1. Script Creation

   • Input or paste script content
   • Set project title, target duration, and visual style
   • Click "Analyze Script" to automatically extract story background and characters

2. Character Settings

   • View automatically extracted character list
   • Generate character sheets (front, side, back views) for each character
   • Character images will be used for subsequent scene generation to maintain consistency

3. Storyboard Design

   • View automatically generated storyboard scenes
   • Adjust camera movement, shot type, and transition parameters for each scene
   • Select characters appearing in the scene (for character consistency)
   • Generate first frame preview images
   • Generate video clips
   • Select background music
   • Export full video

🎯 Project Structure

MicroMovie/
├── App.tsx                 # Main application component
├── types.ts                # TypeScript type definitions
├── index.tsx               # Application entry point
├── services/               # AI service modules
│   ├── geminiService.ts    # Gemini API service
│   ├── klingService.ts     # Kling AI service
│   └── ksyunKlingService.ts # Kingsoft Cloud Xingliu service
├── res/                    # Resource files
│   └── ui.png              # Interface screenshot
├── vite.config.ts          # Vite configuration
└── package.json            # Project dependencies

🔧 Development Commands

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

🌐 Online Demo

View your app in AI Studio: https://ai.studio/apps/drive/15-21unLJTtft29x9XVUUBMbmjEm47HLn

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit Issues and Pull Requests.

---

Note: This tool requires valid API keys. Please ensure compliance with each AI service provider's terms of service and pricing.