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)

{
    "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:

File Upload (✅ exists)
Language Selection (✅ exists)
Subtitle Styling Section (❌ missing)
- Font & Size (row)
- Text Color & Outline Color (row)
- Outline Width & Position (row)
Advanced Options (collapsible) (❌ missing)
- Whisper Model
- Output Format
- Background options
- Text styling (bold/italic)
Burn Subtitles checkbox (✅ exists)
Process Button (✅ exists)

Next Steps

Add a "Subtitle Styling" section to the frontend
Add form controls for all missing options
Update the modulesApi.processSubtitles() call to include all parameters
Test with different styling combinations
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)

3.3 KiB Raw Blame History