diff --git a/SUBTITLE_UI_TODO.md b/SUBTITLE_UI_TODO.md new file mode 100644 index 0000000..ea46371 --- /dev/null +++ b/SUBTITLE_UI_TODO.md @@ -0,0 +1,93 @@ +# 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) diff --git a/frontend/app/image/upscale/page.tsx b/frontend/app/image/upscale/page.tsx index 05dbea4..ed907e6 100644 --- a/frontend/app/image/upscale/page.tsx +++ b/frontend/app/image/upscale/page.tsx @@ -92,21 +92,7 @@ export default function ImageUpscalePage() { } }, [searchParams]); - if (!mounted) { - return null; - } - - const handleFileUpload = (files: File[]) => { - const newItems: QueueItem[] = files.map(file => ({ - id: Math.random().toString(36).substring(7), - file, - status: 'pending' - })); - setQueue(prev => [...prev, ...newItems]); - toast.success(`${files.length} images added to queue`); - }; - - // Handle drag-and-drop from carousel + // Handle drag-and-drop from carousel - MUST be at top level, not conditional useDragFromCarousel({ onAssetDrop: async (assetIds) => { try { @@ -138,6 +124,20 @@ export default function ImageUpscalePage() { enabled: mounted }); + if (!mounted) { + return null; + } + + const handleFileUpload = (files: File[]) => { + const newItems: QueueItem[] = files.map(file => ({ + id: Math.random().toString(36).substring(7), + file, + status: 'pending' + })); + setQueue(prev => [...prev, ...newItems]); + toast.success(`${files.length} images added to queue`); + }; + const processItem = async (item: QueueItem) => { if (item.status === 'completed' || item.status === 'processing') return item; diff --git a/frontend/hooks/useDragFromCarousel.ts b/frontend/hooks/useDragFromCarousel.ts index 6cb74fd..86d9222 100644 --- a/frontend/hooks/useDragFromCarousel.ts +++ b/frontend/hooks/useDragFromCarousel.ts @@ -16,39 +16,47 @@ export function useDragFromCarousel({ onAssetDrop, enabled = true }: UseDragFrom const handleDragOver = (e: DragEvent) => { // Check if dragging from carousel (has asset-id data) - const assetId = e.dataTransfer?.getData('application/x-asset-id'); - if (assetId) { + const types = Array.from(e.dataTransfer?.types || []); + if (types.includes('application/x-asset-id')) { e.preventDefault(); e.stopPropagation(); + e.dataTransfer!.dropEffect = 'copy'; // Add visual feedback const target = e.currentTarget as HTMLElement; - target.classList.add('drag-over'); + if (target) { + target.classList.add('drag-over'); + } } }; const handleDragLeave = (e: DragEvent) => { const target = e.currentTarget as HTMLElement; - target.classList.remove('drag-over'); + if (target) { + target.classList.remove('drag-over'); + } }; const handleDrop = (e: DragEvent) => { - e.preventDefault(); - e.stopPropagation(); + const types = Array.from(e.dataTransfer?.types || []); - const target = e.currentTarget as HTMLElement; - target.classList.remove('drag-over'); + // Only handle if it's our asset drag + if (types.includes('application/x-asset-id')) { + e.preventDefault(); + e.stopPropagation(); - // Get asset IDs from drag data - const assetId = e.dataTransfer?.getData('application/x-asset-id'); - const assetIds = e.dataTransfer?.getData('application/x-asset-ids'); + const target = e.currentTarget as HTMLElement; + if (target) { + target.classList.remove('drag-over'); + } - if (assetIds) { - // Multiple assets - onAssetDrop(JSON.parse(assetIds)); - } else if (assetId) { - // Single asset - onAssetDrop([assetId]); + // Get asset ID from drag data + const assetId = e.dataTransfer?.getData('application/x-asset-id'); + + if (assetId) { + // Single asset + onAssetDrop([assetId]); + } } };