CoolFace
Apppublic

AdamDev12TEST/ai-video-editor

sourceHugging Faceupdated 9mo agoView on Hugging Face
0likes
App README

AI Video Editor

A web-based AI-assisted video editing platform similar to CapCut. Users can upload main video/audio and B-roll clips, and the system automatically generates a synced video using AI-powered semantic matching.

Features

  • —B-roll Management: Organize clips into sets with product/non-product categorization
  • —AI-Powered Matching: Automatically matches B-roll clips to main content using semantic analysis
  • —Speech-to-Text: Transcribes main video/audio using OpenAI Whisper
  • —Timeline Editor: CapCut-style multi-track timeline for manual adjustments
  • —Silence Removal: Optionally removes silent gaps from videos
  • —Video Export: Export final edited videos as MP4

Storage

File Storage (Local - Default)

Video files are stored locally in the backend/uploads/ directory:

  • —uploads/broll/ - B-roll video clips and thumbnails
  • —uploads/main/ - Main video/audio files
  • —uploads/exports/ - Exported final videos

This works perfectly fine for local development and small-scale use. No additional storage setup is needed.

Storage Requirements

  • —Ensure you have enough disk space for your video files
  • —A 1-minute video at 1080p is typically 50-150MB
  • —Thumbnails are ~50KB each

Production/Cloud Storage (Optional)

For production deployment with many users, you might want to use cloud storage (AWS S3, Google Cloud Storage, etc.). This would require modifying the file upload/serving code - let me know if you need that.

Tech Stack

Backend

  • —FastAPI (Python 3.11+) - High-performance async API framework
  • —MongoDB - Document database for storing projects and metadata
  • —Motor - Async MongoDB driver
  • —OpenAI API - Whisper for transcription, GPT-4o-mini for analysis, Embeddings for matching
  • —FFmpeg - Video/audio processing

Frontend

  • —React 18 - UI library
  • —Vite - Build tool and dev server
  • —TailwindCSS - Utility-first CSS framework
  • —Zustand - State management
  • —React Router v7 - Client-side routing
  • —Axios - HTTP client
  • —Lucide React - Icon library

Prerequisites

Before setting up the project, ensure you have the following installed:

  1. 1.Node.js 18+ - Download
  2. 2.Python 3.11+ - Download
  3. 3.MongoDB 6+ - Download
  4. 4.FFmpeg - Required for video processing

Installing FFmpeg

macOS (Homebrew):

bash
brew install ffmpeg

Ubuntu/Debian:

bash
sudo apt update
sudo apt install ffmpeg

Windows:

  1. 1.Download from https://ffmpeg.org/download.html
  2. 2.Extract and add to PATH

Verify installation:

bash
ffmpeg -version

Project Structure

ai-video-editor/
├── backend/
│   ├── app/
│   │   ├── __init__.py
│   │   ├── main.py              # FastAPI application entry
│   │   ├── config.py            # Configuration settings
│   │   ├── database.py          # MongoDB connection
│   │   ├── models/
│   │   │   ├── __init__.py
│   │   │   └── schemas.py       # Pydantic models
│   │   ├── routes/
│   │   │   ├── __init__.py
│   │   │   ├── projects.py      # Project CRUD endpoints
│   │   │   ├── broll.py         # B-roll management
│   │   │   ├── main_content.py  # Main video/audio upload
│   │   │   ├── generation.py    # AI generation & timeline
│   │   │   └── files.py         # File serving
│   │   ├── services/
│   │   │   ├── __init__.py
│   │   │   └── ai_service.py    # OpenAI integration
│   │   └── utils/
│   │       ├── __init__.py
│   │       └── video.py         # FFmpeg utilities
│   ├── uploads/                 # Uploaded media storage
│   │   ├── broll/
│   │   ├── main/
│   │   └── exports/
│   ├── requirements.txt
│   └── .env.example
│
└── frontend/
    ├── public/
    ├── src/
    │   ├── components/          # Reusable UI components
    │   ├── pages/               # Page components
    │   │   ├── Home.jsx
    │   │   ├── ProjectPage.jsx
    │   │   └── EditorPage.jsx
    │   ├── hooks/               # Custom React hooks
    │   ├── services/
    │   │   └── api.js           # API client
    │   ├── store/
    │   │   └── index.js         # Zustand store
    │   ├── utils/
    │   │   └── helpers.js       # Utility functions
    │   ├── App.jsx
    │   ├── main.jsx
    │   └── index.css
    ├── index.html
    ├── package.json
    ├── vite.config.js
    ├── tailwind.config.js
    └── postcss.config.js

Setup Instructions

Step 1: Clone/Download the Project

bash
# If you have the zip file, extract it
# Or create the directory structure manually
cd ai-video-editor

Step 2: Setup MongoDB Atlas (Recommended)

MongoDB Atlas is free and easier than local MongoDB. Here's how to set it up:

  1. 1.Create Account: Go to https://mongodb.com/atlas and sign up (free)
  1. 1.Create Cluster:
  2. 2.Click "Build a Database"
  3. 3.Choose "M0 FREE" tier
  4. 4.Select your region (closest to you)
  5. 5.Click "Create Deployment"
  1. 1.Create Database User:
  2. 2.Username: admin (or your choice)
  3. 3.Password: Generate a secure password (save this!)
  4. 4.Click "Create User"
  1. 1.Configure Network Access:
  2. 2.Click "Add IP Address"
  3. 3.Click "Allow Access from Anywhere" (for development)
  4. 4.Or add your specific IP for production
  1. 1.Get Connection String:
  2. 2.Click "Connect" → "Connect your application"
  3. 3.Copy the connection string
  4. 4.It looks like: mongodb+srv://admin:<password>@cluster0.xxxxx.mongodb.net/?retryWrites=true&w=majority
  5. 5.Replace <password> with your actual password

Alternative: Local MongoDB If you prefer local MongoDB:

bash
# macOS with Homebrew:
brew services start mongodb-community

# Ubuntu:
sudo systemctl start mongod

# Windows:
net start MongoDB

Use mongodb://localhost:27017 as your connection string.

Step 3: Get OpenAI API Key

  1. 1.Go to https://platform.openai.com/api-keys
  2. 2.Create a new API key
  3. 3.Copy it for the backend .env file

Step 4: Setup Backend

bash
# Navigate to backend directory
cd backend

# Create Python virtual environment
python3 -m venv venv

# Activate virtual environment
# macOS/Linux:
source venv/bin/activate
# Windows:
venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Create .env file from example
cp .env.example .env

# Edit .env with your settings
nano .env  # or use any text editor

Edit the `.env` file:

env
# MongoDB Connection
MONGODB_URL=mongodb://localhost:27017
DATABASE_NAME=ai_video_editor

# OpenAI API Key (REQUIRED)
OPENAI_API_KEY=sk-your-openai-api-key-here

# File Storage
UPLOAD_DIR=./uploads
MAX_FILE_SIZE=500000000

# Server Config
HOST=0.0.0.0
PORT=8000
DEBUG=true

# CORS Origins
CORS_ORIGINS=http://localhost:5173,http://localhost:3000

Start the backend server:

bash
# Make sure virtual environment is activated
python -m uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

The API will be available at http://localhost:8000

Verify backend is running:

  • —Open http://localhost:8000 in your browser
  • —You should see: {"message":"AI Video Editor API","version":"1.0.0"}
  • —API docs available at: http://localhost:8000/docs

Step 5: Setup Frontend

bash
# Open a new terminal
# Navigate to frontend directory
cd frontend

# Install dependencies
npm install

# Start development server
npm run dev

The frontend will be available at http://localhost:5173

Step 6: Test the Application

  1. 1.Open http://localhost:5173 in your browser
  2. 2.Click "New Project" to create a project
  3. 3.Create a B-roll set and upload some video clips
  4. 4.Upload a main video or audio file
  5. 5.Wait for transcription to complete
  6. 6.Click "Generate Video" to create the AI-matched timeline
  7. 7.Use the editor to make adjustments
  8. 8.Export your final video

API Endpoints

Projects

  • —GET /api/projects - List all projects
  • —POST /api/projects - Create new project
  • —GET /api/projects/{id} - Get project details
  • —PATCH /api/projects/{id} - Update project
  • —DELETE /api/projects/{id} - Delete project

B-roll Sets

  • —GET /api/broll/sets/project/{project_id} - List sets for project
  • —POST /api/broll/sets - Create new set
  • —DELETE /api/broll/sets/{set_id} - Delete set

B-roll Clips

  • —POST /api/broll/clips/upload - Upload single clip
  • —POST /api/broll/clips/upload-batch - Upload multiple clips
  • —GET /api/broll/clips/set/{set_id} - List clips in set
  • —DELETE /api/broll/clips/{clip_id} - Delete clip

Main Content

  • —POST /api/main/upload - Upload main video/audio
  • —GET /api/main/project/{project_id} - Get main content
  • —DELETE /api/main/{content_id} - Delete main content
  • —POST /api/main/{content_id}/remove-silence - Remove silent gaps

Generation & Timeline

  • —POST /api/generate/timeline/{project_id} - Generate AI timeline
  • —GET /api/generate/timeline/{project_id} - Get timeline
  • —POST /api/generate/export/{project_id} - Export video

Troubleshooting

Common Issues

1. MongoDB Connection Error

Error: Cannot connect to MongoDB
  • —Ensure MongoDB is running: mongod or brew services list
  • —Check your MONGODB_URL in .env

2. FFmpeg Not Found

Error: ffprobe not found
  • —Install FFmpeg and ensure it's in your PATH
  • —Verify with ffmpeg -version

3. OpenAI API Error

Error: Invalid API key
  • —Check your OPENAIAPIKEY in .env
  • —Ensure your OpenAI account has credits

4. CORS Error

Error: CORS policy blocked
  • —Ensure frontend URL is in CORS_ORIGINS in .env
  • —Restart the backend server

5. Video Processing Slow

  • —Video processing depends on file size
  • —Large files may take several minutes
  • —Check backend logs for progress

Checking Logs

Backend logs:

bash
# Logs appear in the terminal running uvicorn
# Look for errors starting with "Error:"

Frontend logs:

bash
# Open browser developer tools (F12)
# Check Console tab for errors

Production Deployment

Backend (Example with Gunicorn)

bash
# Install gunicorn
pip install gunicorn

# Run with multiple workers
gunicorn app.main:app -w 4 -k uvicorn.workers.UvicornWorker -b 0.0.0.0:8000

Frontend (Build for Production)

bash
# Build the frontend
npm run build

# Output will be in dist/ folder
# Serve with any static file server (nginx, etc.)

Environment Variables for Production

env
DEBUG=false
CORS_ORIGINS=https://yourdomain.com

Cost Considerations

This app uses OpenAI APIs which have associated costs:

  • —Whisper (transcription): ~$0.006/minute of audio
  • —GPT-4o-mini (analysis): ~$0.15 per 1M input tokens
  • —Embeddings (matching): ~$0.02 per 1M tokens

For a typical 1-minute video with 10 B-roll clips:

  • —Transcription: ~$0.006
  • —Analysis: ~$0.01
  • —Embeddings: ~$0.001
  • —Total: ~$0.02 per video

License

MIT License - See LICENSE file for details.

Support

For issues and questions:

  1. 1.Check the Troubleshooting section above
  2. 2.Review backend logs for error details
  3. 3.Check browser console for frontend errors