# 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`:

```typescript
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

```tsx
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

