loreal-video-optimizer/QUICKSTART.md

Quick Start Guide

🚀 Get Started in 3 Steps

Choose your preferred setup method:

---

Method 1: Standard Setup (Recommended)

1. Start the Application

Option A - One Command:

./start.sh

Option B - Manual (Two Terminals):

Terminal 1 - Backend:

cd backend
source ../venv/bin/activate
python app.py

Terminal 2 - Frontend:

cd frontend
python3 -m http.server 8000

2. Open Your Browser

Navigate to: http://localhost:8000

3. Upload and Convert

1. Drag & drop a video file onto the upload area
2. Select platform (e.g., TikTok, Meta, YouTube) - or let filename auto-detect
3. Select aspect ratio (e.g., 1:1, 16:9, 9:16) - or let filename auto-detect
4. ⚠️ Check for yellow warning if aspect ratio differs from original
5. Click "Convert Video"
6. Compare side-by-side and download optimized file

---

Method 2: MAMP Setup

1. Start Python Backend

cd backend
source ../venv/bin/activate
python app.py

Keep this terminal running!

2. Configure MAMP

1. Open MAMP application
2. Preferences → Web Server
3. Set Document Root to: [path-to]/Loreal-File-Reduction/frontend
4. Click "Start Servers"

3. Open Your Browser

Navigate to: http://localhost:8888/index.html

(Or your MAMP port)

---

📝 Filename Auto-Detection

Name your files with these patterns for automatic detection:

Examples

Filename	Auto-Detects
summer_campaign_tiktok_9x16.mp4	TikTok + 9:16
product_ad_meta_1x1_v2.mov	Meta + 1:1
youtube_ctv_16x9_final.mp4	YouTube CTV + 16:9
pinterest_2x3_inspiration.mp4	Pinterest + 2:3

Platform Keywords

• TikTok: _tiktok_, _tt_
• Meta: _meta_, _fb_, _ig_
• YouTube: _youtube_, _yt_
• YouTube CTV: _youtube_ctv_, _yt_ctv_, _ctv_
• Pinterest: _pinterest_, _pin_
• Snapchat: _snapchat_, _snap_
• Amazon Prime: _prime_, _amazon_prime_
• Amazon Freevee: _freevee_, _amazon_freevee_

Aspect Ratio Keywords

• 1:1 → _1x1_, _square_
• 16:9 → _16x9_, _landscape_
• 9:16 → _9x16_, _vertical_, _portrait_
• 4:5 → _4x5_
• 2:3 → _2x3_

---

🎯 Platform Specifications

Platform	Best For	Codec	Popular Sizes
TikTok	Vertical mobile	H265	540×960, 640×640
Meta	All devices	H264	720×720, 1280×720
YouTube	Quality focus	VP9	1280×720, 1920×1080
Pinterest	Inspiration	H264	1000×1500 (2:3)
Snapchat	Stories	H264	720×1280
Amazon	CTV/Streaming	H264	1920×1080

---

✨ Key Features

During Configuration:

• ⚠️ Yellow Warning - Shows when aspect ratio differs from original
• Auto-detection - Platform and aspect ratio from filename
• Bitrate recommendations - Optimal ranges shown for each platform

During Comparison:

• 🔴 Red Warning - Indicates aspect ratio was changed
• 🔴 Red Outline - On optimized video when aspect ratio differs
• Video Specs - Complete details for both videos shown below players
• Mute Controls - Independent audio control for each video
• Sync Playback - Play both videos simultaneously
• File Size Stats - Shows reduction percentage

Video Specifications Shown:

• Platform (target platform for optimized)
• Resolution (e.g., 1920×1080)
• Aspect Ratio (e.g., 16:9)
• Codec (H264, H265, VP9)
• Bitrate (e.g., 1500k)
• Duration
• File Size

---

🛠 Troubleshooting

Backend won't start?

Check if something is on port 5000:

lsof -ti:5000

Kill it:

lsof -ti:5000 | xargs kill

Then restart:

cd backend
source ../venv/bin/activate
python app.py

FFmpeg not found?

Install FFmpeg:

# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

Verify installation:

ffmpeg -version

Port already in use?

Standard Setup - Port 8000:

lsof -ti:8000 | xargs kill

MAMP - Port 8888: Check MAMP settings or change port in Preferences

"Failed to fetch" error?

Checklist:

1. ✅ Backend running? (curl http://localhost:5000/api/health)
2. ✅ Frontend accessible? (Open http://localhost:8000)
3. ✅ Check browser console (F12) for errors
4. ✅ Verify frontend/config.js has correct API_BASE

---

📊 Expected Results

File Size Reduction

Typical results:

Platform	Reduction
TikTok (H265)	30-40%
Meta (H264)	25-35%
YouTube (VP9)	20-30%

Conversion Times

For 1 minute 1080p video:

Platform	Time
Meta/Pinterest	20-40 seconds
TikTok	40-80 seconds
YouTube	60-120 seconds

Times vary based on hardware

---

🎨 Color Scheme

• Primary: Black (#000000)
• Accent: Yellow (#FFC407)
• Font: Montserrat

---

📚 More Information

• README.md - Complete documentation
• MAMP_SETUP.md - Detailed MAMP configuration
• START_WITH_MAMP.md - Quick MAMP instructions
• TESTING.md - Testing procedures

---

🚦 Status Indicators

Yellow Warning (Configuration Page)

• Appears when selected aspect ratio ≠ original
• Prevents accidental distortion
• Shows before conversion

Red Warning (Comparison Page)

• Appears when aspect ratio was changed
• Red outline on optimized video
• Visual alert for quality check

---

💡 Tips

1. Use descriptive filenames with platform and aspect ratio for auto-detection
2. Check yellow warning before converting to avoid distortion
3. Use mute controls to compare audio quality
4. Compare videos side-by-side before downloading
5. Watch for red indicators if aspect ratio was changed

---

Need help? Check the full README.md for detailed documentation.

Repository: https://bitbucket.org/zlalani/loreal-video-optimizer