CreateInput Component

Video creation input form with configuration options.

File Structure

CreateInput/
├── VideoCreationForm.tsx        # Main form component
├── ConfigPanel.tsx               # Configuration panel with all options
├── PortraitAnimeSelector.tsx     # Portrait/Anime style selector
├── config-options.ts             # Configuration options and types
├── index.ts                      # Module exports
└── README.md                     # This file

Components

VideoCreationForm

Main form component for video creation, includes:

Photo upload (character, scene, prop)
Text input area
Configuration options
Create button

ConfigPanel

Configuration panel with unified circular button style:

Language selector (14 languages)
Auto Script toggle (AI Story Copilot)
Duration selector (8s, 1min, 2min, auto)
Aspect ratio selector (landscape/portrait)
Portrait/Anime style selector

All buttons follow the same design pattern:

Circular buttons with rounded-full
Border: border-white/20
Hover: hover:bg-white/5 hover:border-cyan-400/60
Active state: border-cyan-400 bg-cyan-400/10
Cyan color theme for interactions

PortraitAnimeSelector

Selector for choosing between Portrait and Anime (comic) styles:

Portrait mode: realistic portrait style
Anime mode: comic/anime styles with multiple options (Korean Comics Long, etc.)
Fetches anime options from server dynamically
Styled to match other configuration buttons

Configuration Options

Defined in config-options.ts:

interface ConfigOptions {
    language: LanguageValue;           // Default: 'english'
    expansion_mode: boolean;           // Default: false
    videoDuration: VideoDurationValue; // Default: 'unlimited'
    aspect_ratio: AspectRatioValue;    // Default: 'VIDEO_ASPECT_RATIO_LANDSCAPE'
    pcode: PortraitAnimeValue;         // Default: 'portrait'
}

Configuration Options Details

language: Video output language (14 options: English, Chinese, Japanese, Spanish, etc.)
expansion_mode: AI Story Copilot toggle (auto-generates extended script)
videoDuration: Video length (8s, 1min, 2min, auto)
aspect_ratio: Video orientation (landscape/portrait)
pcode: Visual style (portrait or anime/comic style codes)

Usage

import { VideoCreationForm } from '@/components/pages/create-video/CreateInput';

export default function CreatePage() {
  return <VideoCreationForm />;
}

Design System

All configuration buttons follow a unified design:

Base style: rounded-full border border-white/20 bg-transparent
Hover: hover:bg-white/5 hover:border-cyan-400/60 hover:text-cyan-400
Active: border-cyan-400 bg-cyan-400/10 text-cyan-400
Transition: transition-all duration-200

Notes

Configuration options are synchronized with ChatInputBox component
All text and labels are in English as per project guidelines
Uses Tailwind CSS 3.x for all styling
Uses Ant Design icons for consistency with existing UI
Responsive design with mobile/desktop support

3.1 KiB Raw Blame History