forked from 77media/video-flow
96 lines
3.1 KiB
Markdown
96 lines
3.1 KiB
Markdown
# 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
|
|
|