93 lines
3.3 KiB
Markdown
93 lines
3.3 KiB
Markdown
# Subtitle Generator - Missing UI Features
|
|
|
|
## Current Status
|
|
The **backend** (`subtitle_processor.py`) has full support for subtitle styling options, but the **frontend** (`/video/subtitles/page.tsx`) is missing the UI controls to expose these features.
|
|
|
|
## Missing UI Controls
|
|
|
|
### Font Options
|
|
- [ ] **Font Family** dropdown (24+ fonts supported)
|
|
- Arial, Helvetica, Times New Roman, Courier New, Verdana, Georgia, Comic Sans MS, Impact, Tahoma, Trebuchet MS, Lucida Sans, Lucida Console, Palatino Linotype, Book Antiqua, Century Gothic, Franklin Gothic, Garamond, Segoe UI, Calibri, Cambria, Candara, Constantia, Consolas, Corbel
|
|
- [ ] **Font Size** number input (8-72, default: 24)
|
|
|
|
### Color Options
|
|
- [ ] **Text Color** dropdown
|
|
- white, yellow, black, red, blue, green, orange, purple
|
|
- [ ] **Outline Color** dropdown
|
|
- black, white, yellow, red, blue, green
|
|
- [ ] **Outline Width** number input (0-4, default: 1, step: 0.1)
|
|
|
|
### Position Options
|
|
- [ ] **Position** dropdown (bottom/top)
|
|
- [ ] **Alignment** dropdown (left/center/right) - currently not exposed
|
|
- [ ] **Vertical Margin** number input - currently not exposed
|
|
- [ ] **Horizontal Margin** number input - currently not exposed
|
|
|
|
### Advanced Options (Backend Supported)
|
|
- [ ] **Background Color** dropdown (optional)
|
|
- [ ] **Background Opacity** slider (0-1)
|
|
- [ ] **Shadow** number input (0-4)
|
|
- [ ] **Bold** checkbox
|
|
- [ ] **Italic** checkbox
|
|
- [ ] **Font Preset** dropdown (default, cinematic, documentary, news, social_media, minimal, bold)
|
|
|
|
### Model Options
|
|
- [ ] **Whisper Model** dropdown
|
|
- tiny (fastest), base (default), small, medium, large, large-v2, large-v3
|
|
- [ ] **Output Format** dropdown
|
|
- SRT (default), VTT, ASS
|
|
- [ ] **Word Timestamps** checkbox
|
|
|
|
## Backend Parameters (Already Implemented)
|
|
```python
|
|
{
|
|
"source_language": "auto",
|
|
"target_language": "EN-US",
|
|
"burn_subtitles": true,
|
|
"whisper_model": "base",
|
|
"font": "Arial",
|
|
"font_size": 24,
|
|
"text_color": "white",
|
|
"outline_color": "black",
|
|
"outline_width": 2,
|
|
"position": "bottom",
|
|
"alignment": "center",
|
|
"margin_v": 30,
|
|
"margin_h": 20,
|
|
"shadow": 0,
|
|
"bold": false,
|
|
"italic": false,
|
|
"background_color": null,
|
|
"background_opacity": 0,
|
|
"font_preset": null,
|
|
"word_timestamps": false,
|
|
"output_format": "srt"
|
|
}
|
|
```
|
|
|
|
## Recommended UI Layout
|
|
Match the original sandbox implementation structure:
|
|
1. **File Upload** (✅ exists)
|
|
2. **Language Selection** (✅ exists)
|
|
3. **Subtitle Styling Section** (❌ missing)
|
|
- Font & Size (row)
|
|
- Text Color & Outline Color (row)
|
|
- Outline Width & Position (row)
|
|
4. **Advanced Options** (collapsible) (❌ missing)
|
|
- Whisper Model
|
|
- Output Format
|
|
- Background options
|
|
- Text styling (bold/italic)
|
|
5. **Burn Subtitles** checkbox (✅ exists)
|
|
6. **Process Button** (✅ exists)
|
|
|
|
## Next Steps
|
|
1. Add a "Subtitle Styling" section to the frontend
|
|
2. Add form controls for all missing options
|
|
3. Update the `modulesApi.processSubtitles()` call to include all parameters
|
|
4. Test with different styling combinations
|
|
5. Consider adding a live preview of subtitle styling
|
|
|
|
## Files to Modify
|
|
- `/forge-ai/frontend/app/video/subtitles/page.tsx` - Add UI controls
|
|
- `/forge-ai/frontend/lib/api.ts` - Ensure processSubtitles accepts all parameters (likely already does)
|