Base code
This commit is contained in:
Kunthawat Greethong
248
docs/SOCIAL_OPTIMIZER_IMPLEMENTATION_PLAN.md
Normal file
248
docs/SOCIAL_OPTIMIZER_IMPLEMENTATION_PLAN.md
Normal file
@@ -0,0 +1,248 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user