video-flow-b/components/pages/create-video/CreateInput

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