249 lines
8.9 KiB
Markdown
249 lines
8.9 KiB
Markdown
# Social Optimizer Implementation Plan
|
|
|
|
## Overview
|
|
|
|
Social Optimizer creates platform-optimized versions of videos for Instagram, TikTok, YouTube, LinkedIn, Facebook, and Twitter with one click. Reuses Transform Studio processors for aspect ratio conversion, trimming, and compression.
|
|
|
|
## Features
|
|
|
|
### Core Features (FFmpeg-based - Can Start Immediately)
|
|
|
|
1. **Platform Presets**
|
|
- Instagram Reels (9:16, max 90s, 4GB)
|
|
- TikTok (9:16, max 60s, 287MB)
|
|
- YouTube Shorts (9:16, max 60s, 256GB)
|
|
- LinkedIn Video (16:9, max 10min, 5GB)
|
|
- Facebook (16:9 or 1:1, max 240s, 4GB)
|
|
- Twitter/X (16:9, max 140s, 512MB)
|
|
|
|
2. **Aspect Ratio Conversion**
|
|
- Auto-crop to platform ratio (reuse Transform Studio `convert_aspect_ratio`)
|
|
- Smart cropping (center, face detection)
|
|
- Letterboxing/pillarboxing
|
|
|
|
3. **Duration Trimming**
|
|
- Auto-trim to platform max duration
|
|
- Smart trimming options (keep beginning, middle, end)
|
|
- User-selectable trim points
|
|
|
|
4. **File Size Optimization**
|
|
- Compress to meet platform limits (reuse Transform Studio `compress_video`)
|
|
- Quality presets per platform
|
|
- Bitrate optimization
|
|
|
|
5. **Thumbnail Generation**
|
|
- Extract frames from video (FFmpeg)
|
|
- Generate multiple thumbnails (start, middle, end)
|
|
- Custom thumbnail selection
|
|
|
|
6. **Batch Export**
|
|
- Generate optimized versions for multiple platforms simultaneously
|
|
- Progress tracking per platform
|
|
- Individual or bulk download
|
|
|
|
### Advanced Features (Phase 2)
|
|
|
|
7. **Caption Overlay**
|
|
- Auto-caption generation (speech-to-text API needed)
|
|
- Platform-specific caption styles
|
|
- Safe zone overlays
|
|
|
|
8. **Safe Zone Visualization**
|
|
- Show text-safe areas per platform
|
|
- Visual overlay in preview
|
|
- Platform-specific guidelines
|
|
|
|
## Platform Specifications
|
|
|
|
| Platform | Aspect Ratio | Max Duration | Max File Size | Formats | Resolution |
|
|
|----------|--------------|--------------|---------------|---------|------------|
|
|
| Instagram Reels | 9:16 | 90s | 4GB | MP4 | 1080x1920 |
|
|
| TikTok | 9:16 | 60s | 287MB | MP4, MOV | 1080x1920 |
|
|
| YouTube Shorts | 9:16 | 60s | 256GB | MP4, MOV, WebM | 1080x1920 |
|
|
| LinkedIn | 16:9, 1:1 | 10min | 5GB | MP4 | 1920x1080 or 1080x1080 |
|
|
| Facebook | 16:9, 1:1 | 240s | 4GB | MP4, MOV | 1920x1080 or 1080x1080 |
|
|
| Twitter/X | 16:9 | 140s | 512MB | MP4 | 1920x1080 |
|
|
|
|
## Technical Implementation
|
|
|
|
### Backend Structure
|
|
|
|
```
|
|
backend/services/video_studio/
|
|
├── social_optimizer_service.py # Main service
|
|
└── platform_specs.py # Platform specifications
|
|
```
|
|
|
|
**Reuse from Transform Studio:**
|
|
- `convert_aspect_ratio()` - For aspect ratio conversion
|
|
- `compress_video()` - For file size optimization
|
|
- `scale_resolution()` - For resolution scaling (if needed)
|
|
|
|
**New Functions Needed:**
|
|
- `trim_video()` - Trim video to platform duration
|
|
- `extract_thumbnail()` - Generate thumbnails from video
|
|
- `batch_process()` - Process multiple platforms in parallel
|
|
|
|
### Frontend Structure
|
|
|
|
```
|
|
frontend/src/components/VideoStudio/modules/SocialVideo/
|
|
├── SocialVideo.tsx # Main component
|
|
├── components/
|
|
│ ├── VideoUpload.tsx # Shared upload
|
|
│ ├── PlatformSelector.tsx # Platform checkboxes
|
|
│ ├── OptimizationOptions.tsx # Options panel
|
|
│ ├── PreviewGrid.tsx # Platform previews
|
|
│ └── BatchProgress.tsx # Progress tracking
|
|
└── hooks/
|
|
└── useSocialVideo.ts # State management
|
|
```
|
|
|
|
## API Endpoint
|
|
|
|
```
|
|
POST /api/video-studio/social/optimize
|
|
```
|
|
|
|
### Request Parameters:
|
|
|
|
```typescript
|
|
{
|
|
file: File, // Source video
|
|
platforms: string[], // ["instagram", "tiktok", "youtube", ...]
|
|
options: {
|
|
auto_crop: boolean, // Auto-crop to platform ratio
|
|
generate_thumbnails: boolean, // Generate thumbnails
|
|
add_captions: boolean, // Add caption overlay (Phase 2)
|
|
compress: boolean, // Compress for file size limits
|
|
trim_mode: "beginning" | "middle" | "end", // Where to trim if needed
|
|
}
|
|
}
|
|
```
|
|
|
|
### Response:
|
|
|
|
```typescript
|
|
{
|
|
success: boolean,
|
|
results: [
|
|
{
|
|
platform: "instagram",
|
|
video_url: string,
|
|
thumbnail_url: string,
|
|
aspect_ratio: "9:16",
|
|
duration: number,
|
|
file_size: number,
|
|
},
|
|
// ... one per selected platform
|
|
],
|
|
cost: 0, // Free (FFmpeg processing)
|
|
}
|
|
```
|
|
|
|
## Implementation Phases
|
|
|
|
### Phase 1: Core Features (Week 1-2)
|
|
|
|
1. **Platform Specifications**
|
|
- Define platform specs (aspect, duration, file size)
|
|
- Create `platform_specs.py` with all platform data
|
|
|
|
2. **Backend Service**
|
|
- Create `social_optimizer_service.py`
|
|
- Implement batch processing
|
|
- Reuse Transform Studio processors
|
|
- Add thumbnail extraction
|
|
|
|
3. **Backend Endpoint**
|
|
- Create `/api/video-studio/social/optimize` endpoint
|
|
- Handle batch processing
|
|
- Return results for all platforms
|
|
|
|
4. **Frontend UI**
|
|
- Platform selector (checkboxes)
|
|
- Options panel
|
|
- Preview grid
|
|
- Batch progress tracking
|
|
- Download buttons (individual + bulk)
|
|
|
|
### Phase 2: Advanced Features (Week 3-4)
|
|
|
|
5. **Caption Overlay**
|
|
- Speech-to-text integration (may need external API)
|
|
- Caption styling per platform
|
|
- Safe zone visualization
|
|
|
|
6. **Enhanced Thumbnails**
|
|
- Multiple thumbnail options
|
|
- Custom thumbnail selection
|
|
- Thumbnail preview
|
|
|
|
## Cost
|
|
|
|
- **Free**: All operations use FFmpeg (no AI cost)
|
|
- Processing time depends on video length and number of platforms
|
|
- Batch processing is efficient (parallel processing)
|
|
|
|
## User Experience Flow
|
|
|
|
1. **Upload Video**: User uploads source video
|
|
2. **Select Platforms**: Check platforms to optimize for
|
|
3. **Configure Options**: Set cropping, compression, thumbnail options
|
|
4. **Preview**: See preview of all platform versions
|
|
5. **Optimize**: Click "Optimize for All Platforms"
|
|
6. **Progress**: Track progress for each platform
|
|
7. **Download**: Download individual or all optimized versions
|
|
|
|
## Example UI
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────┐
|
|
│ SOCIAL OPTIMIZER │
|
|
├─────────────────────────────────────────────────────────┤
|
|
│ Source Video: [video_1080x1920.mp4] (15s) │
|
|
│ │
|
|
│ Select Platforms: │
|
|
│ ☑ Instagram Reels (9:16, max 90s) │
|
|
│ ☑ TikTok (9:16, max 60s) │
|
|
│ ☑ YouTube Shorts (9:16, max 60s) │
|
|
│ ☑ LinkedIn Video (16:9, max 10min) │
|
|
│ ☐ Facebook (16:9 or 1:1) │
|
|
│ ☐ Twitter (16:9, max 2:20) │
|
|
│ │
|
|
│ Optimization Options: │
|
|
│ ☑ Auto-crop to platform ratio │
|
|
│ ☑ Generate thumbnails │
|
|
│ ☑ Compress for file size limits │
|
|
│ ☐ Add captions overlay (Phase 2) │
|
|
│ │
|
|
│ [Optimize for All Platforms] │
|
|
│ │
|
|
│ PREVIEW GRID: │
|
|
│ ┌─────────┬─────────┬─────────┬─────────┐ │
|
|
│ │ Instagram│ TikTok │ YouTube │ LinkedIn│ │
|
|
│ │ 9:16 │ 9:16 │ 9:16 │ 16:9 │ │
|
|
│ │ [Video] │ [Video] │ [Video] │ [Video] │ │
|
|
│ │ [Download]│[Download]│[Download]│[Download]│ │
|
|
│ └─────────┴─────────┴─────────┴─────────┘ │
|
|
│ │
|
|
│ [Download All] │
|
|
└─────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
## Benefits
|
|
|
|
1. **Time Savings**: One video → multiple platform versions in one click
|
|
2. **Consistency**: Same content optimized for each platform
|
|
3. **Compliance**: Automatic adherence to platform requirements
|
|
4. **Efficiency**: Batch processing saves time
|
|
5. **Free**: No AI costs, uses FFmpeg
|
|
|
|
## Next Steps
|
|
|
|
1. Create platform specifications module
|
|
2. Implement social optimizer service (reuse Transform Studio processors)
|
|
3. Create backend endpoint
|
|
4. Build frontend UI with platform selector and preview grid
|
|
5. Add batch processing and progress tracking
|