Video Trimmer with AI Features

A modern, full-stack video trimming application with AI-powered transcription and summarization capabilities. Built with React, Node.js, FFmpeg, and Groq AI.

✨ Features

Core Video Processing

• 🎬 Video Upload & Preview - Drag-and-drop interface with real-time preview
• ✂️ Precision Trimming - Interactive dual-slider for frame-accurate trimming
• ⚡ Fast Processing - FFmpeg with input-seeking optimization for instant trim
• 📥 Direct Download - One-click download of trimmed videos

AI-Powered Features

• 🎤 Multi-Language Transcription - Convert speech to text using Groq's Whisper Large V3 (supports all languages)
• ✨ AI Summarization - Generate concise summaries with Groq qwen3.6-27b (bullet points or paragraph format)
• 💾 Smart Caching - Automatic transcription/summary caching to save API quota
• 🔄 Real-time Processing - Live progress indicators for all AI operations

UI/UX

• 🎨 Premium Glassmorphism Design - Modern, polished interface with smooth animations
• 📱 Fully Responsive - Works seamlessly on desktop, tablet, and mobile
• 🌙 Collapsible Panels - Clean, organized layout with expandable sections
• 📋 Copy to Clipboard - Easy sharing of transcriptions

🛠️ Tech Stack

Frontend

• React - UI framework
• Vite - Build tool and dev server
• Framer Motion - Smooth animations
• Tailwind CSS - Utility-first styling
• Nouislider - Custom range slider
• Axios - HTTP client

Backend

• Node.js - Runtime environment
• Express - Web framework
• FFmpeg - Video/audio processing
• Multer - File upload handling
• Groq SDK - AI API integration

AI Services

• Groq Whisper Large V3 - Speech-to-text transcription
• Groq Qwen3.6-27b - Text summarization

📋 Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• FFmpeg (bundled via ffmpeg-static)
• Groq API Key (Get one free here)

🚀 Installation

1. Clone the Repository

git clone https://github.com/YOUR_USERNAME/Video-Trimmer-with-AI-Features.git
cd video-trimmer

2. Install Dependencies

Backend:

cd server
npm install

Frontend:

cd ../client
npm install

3. Configure Environment Variables

Create server/.env file:

GROQ_API_KEY=your_groq_api_key_here
PORT=3000
NODE_ENV=development

4. Run the Application

Start Backend (Terminal 1):

cd server
npm run dev

Server runs on http://localhost:3000

Start Frontend (Terminal 2):

cd client
npm run dev

Frontend runs on http://localhost:5173

📖 Usage

Basic Video Trimming

1. Click Upload Video or drag and drop a video file
2. Use the dual-slider to select trim range
3. Click Trim Video to process
4. Download your trimmed video

AI Transcription

1. Upload a video
2. Expand the Transcription panel
3. Click Start Transcription
4. Wait 10-30 seconds (depending on video length)
5. View and copy the full transcription

AI Summary

1. After transcribing (or auto-transcribe if not done)
2. Choose format: Bullet Points or Paragraph
3. Click Generate Summary
4. View AI-generated summary in chosen format

🎯 API Limits (Groq Free Tier)

Feature	Daily Limit	Per Minute
Transcription	2,000 requests	30 requests
Summarization	14,400 requests	30 requests
Audio Size	25MB max	-
Video Size	50MB recommended	-

📁 Project Structure

video-trimmer/
├── client/                 # Frontend React app
│   ├── src/
│   │   ├── components/     # React components
│   │   │   ├── VideoUploader.jsx
│   │   │   ├── VideoPlayer.jsx
│   │   │   ├── TrimControls.jsx
│   │   │   ├── TranscriptionPanel.jsx
│   │   │   ├── SummaryPanel.jsx
│   │   │   └── AIFeatures.jsx
│   │   ├── services/       # API clients
│   │   │   ├── api.js
│   │   │   └── aiApi.js
│   │   ├── App.jsx
│   │   └── index.css
│   └── package.json
├── server/                 # Backend Node.js app
│   ├── routes/
│   │   ├── video.routes.js # Video processing endpoints
│   │   └── ai.routes.js    # AI feature endpoints
│   ├── utils/
│   │   ├── ffmpegHelper.js        # Video/audio processing
│   │   ├── audioExtractor.js      # Audio extraction
│   │   ├── groqService.js         # Groq AI integration
│   │   └── transcriptionCache.js  # In-memory caching
│   ├── middleware/
│   │   └── upload.middleware.js
│   ├── uploads/            # Temporary file storage
│   ├── server.js
│   └── package.json
└── README.md

🔧 Key Implementation Details

FFmpeg Optimization

• Input Seeking (-ss before -i) for instant seeking
• Stream Copy (-c copy) for lossless, fast trimming
• Web Optimization (-movflags +faststart) for streaming

AI Integration

• Whisper Large V3 - Multi-language support (141 languages)
• qwen/qwen3.6-27b - Advanced summarization with custom prompts
• Smart Caching - Reduces API calls and improves response time
• Automatic Cleanup - Audio files deleted immediately after transcription

State Management

• Shared State - Transcription shared between panels to avoid duplicate calls
• Loading States - Real-time feedback for all async operations
• Error Handling - Comprehensive error messages with retry options

🐛 Troubleshooting

"GROQ_API_KEY is missing"

• Ensure .env file exists in server/ directory
• Verify API key is correct (starts with gsk_)
• Restart the server after adding the key

"Video too large" Error

• Compress video before upload (use HandBrake, etc.)
• Trim the video first to reduce file size
• Recommended: Keep videos under 50MB

Download Hangs Forever

• This is usually a Windows file lock issue
• The code includes retry logic (waits up to 5 seconds)
• If it persists, check antivirus settings

🚀 Future Enhancements

• Multiple video format support (WebM, AVI, MKV)
• Batch processing for multiple videos
• Cloud storage integration (AWS S3, Google Drive)
• Custom AI prompts for summaries
• Video compression before trimming
• Timestamp-based chapter detection
• Speaker diarization (identify multiple speakers)

📄 License

MIT License - feel free to use this project for your portfolio!

🙏 Acknowledgments

• Groq AI - Lightning-fast AI inference
• FFmpeg - The ultimate multimedia framework
• React - UI excellence
• Tailwind CSS - Beautiful styling made easy

👤 Author

Your Name

• GitHub: @Nzhf

---

⭐ If you found this project helpful, please give it a star!