Skip to content

shamsharoon/CutOS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

93 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

CutOS Logo

Edit videos at the speed of thought

Next.js React TypeScript License: MIT

Demo Video ยท Demo Website ยท Report Bug ยท Request Feature


๐ŸŽฌ Overview

CutOS is an AI-first video editor that understands natural language. Describe your edits in plain English, and watch them happen instantly. No steep learning curves, no complex menusโ€”just tell the AI what you want.

"Split this clip at 10 seconds and add a vintage effect" โ€” Done.

โœจ Why CutOS?

  • Conversational Editing - Edit videos by describing what you want
  • Semantic Search - Find moments in footage using natural language
  • 29-Language Dubbing - Translate while preserving emotion and timing
  • Real-Time Effects - GPU-accelerated WebGL rendering
  • Web-Based - No installation required, works in your browser
CutOS Demo

CutOS Landing Page


๐Ÿš€ Features

๐ŸŽ™๏ธ AI-Powered Tools

Feature Description
Natural Language Editing "Split the clip in half and apply noir effect" โ€” AI executes complex multi-step operations
Semantic Video Search Find specific moments: "person walking", "car driving" โ€” powered by TwelveLabs Marengo 3.0
AI Dubbing Translate to 29 languages while preserving speaker emotion and timing (ElevenLabs)
Voice Isolation Remove background noise, music, and ambient sounds โ€” keep only the voice
AI Morph Transitions Generate smooth morphing transitions between clips (Kling API)

๐ŸŽฌ Professional Editing

  • Multi-Track Timeline - 2 video tracks + 2 audio tracks with non-destructive editing
  • Precision Tools - Split, trim, extend clips with frame-perfect accuracy
  • Drag & Drop - Magnetic snapping for seamless clip placement
  • Real-Time Preview - Canvas-based playback with instant effect rendering
  • Effect Library - Grayscale, sepia, VHS, glitch, cyberpunk, ASCII art, and more
  • Chromakey - GPU-accelerated green screen removal (any color)
  • Undo/Redo - Full editing history with keyboard shortcuts

๐Ÿ” Semantic Video Search (Video RAG)

Video RAG Search

Find exact moments in hours of footage with natural language queries

๐ŸŽจ Visual Effects

Chromakey Demo

Real-time chromakey with GPU acceleration

AI Morph Transition

AI morph transition - made directly with CutOS

๐Ÿ“ค Export & Cloud

  • Export to MP4/WebM at 1080p
  • Cloud storage with Supabase
  • Auto-save your projects
  • Multiple quality presets (Low/Medium/High)

๐Ÿ› ๏ธ Tech Stack

Frontend

Next.js React TypeScript Tailwind

AI & APIs

OpenAI TwelveLabs ElevenLabs

Backend & Services

Supabase Vercel FFmpeg


๐Ÿƒ Quick Start

Prerequisites

  • Node.js 18+
  • npm/pnpm
  • Supabase account
  • API keys (OpenAI, TwelveLabs, ElevenLabs, Kling)

Installation

# Clone the repository
git clone https://github.com/shamsharoon/cutos.git
cd cutos

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env.local

# Add your API keys to .env.local
# See "Environment Variables" section below

Environment Variables

Create a .env.local file:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

# AI Services
OPENAI_API_KEY=your_openai_key
TWELVELABS_API_KEY=your_twelvelabs_key
ELEVENLABS_API_KEY=your_elevenlabs_key
KLING_ACCESS_KEY=your_kling_access_key
KLING_SECRET_KEY=your_kling_secret_key

Run Development Server

npm run dev

Open http://localhost:3000


๐ŸŽฏ Usage Examples

Natural Language Editing

User: "Split the clip at 15 seconds and add a vintage VHS effect"
AI: โœ“ Split at 15s. Applied VHS effect.

User: "Remove the green screen from intro.mp4"
AI: โœ“ Green screen removed from 'intro.mp4'.

User: "Dub this video in Spanish"
AI: โœ“ Dubbing to Spanish... (this may take a moment)

Semantic Video Search

Search: "person walking on beach"
โ†’ Finds all clips with people walking on beaches

Search: "car driving at night"
โ†’ Finds nighttime driving scenes

๐Ÿ“ Project Structure

cutos/
โ”œโ”€โ”€ app/                      # Next.js App Router
โ”‚   โ”œโ”€โ”€ api/                  # API routes
โ”‚   โ”‚   โ”œโ”€โ”€ agent/           # AI agent endpoint
โ”‚   โ”‚   โ”œโ”€โ”€ dub/             # Dubbing API
โ”‚   โ”‚   โ”œโ”€โ”€ remove-noise/    # Voice isolation
โ”‚   โ”‚   โ””โ”€โ”€ twelvelabs/      # Video search
โ”‚   โ”œโ”€โ”€ projects/            # Project pages
โ”‚   โ””โ”€โ”€ page.tsx             # Landing page
โ”œโ”€โ”€ components/              # React components
โ”‚   โ”œโ”€โ”€ ui/                  # shadcn/ui components
โ”‚   โ”œโ”€โ”€ editor-shell.tsx     # Main editor
โ”‚   โ”œโ”€โ”€ timeline.tsx         # Timeline component
โ”‚   โ””โ”€โ”€ media-panel.tsx      # Media library
โ”œโ”€โ”€ lib/                     # Utilities
โ”‚   โ”œโ”€โ”€ agent/              # AI agent logic
โ”‚   โ”œโ”€โ”€ supabase/           # Database client
โ”‚   โ””โ”€โ”€ utils.ts            # Helper functions
โ””โ”€โ”€ public/                  # Static assets

๐ŸŽจ Creating GIFs & Screenshots

For Demo GIFs

  1. Record with OBS/QuickTime

    • Record your screen at 1920x1080
    • Keep recordings under 30 seconds for optimal file size
    • Focus on one feature at a time
  2. Convert to GIF

    # Using FFmpeg
    ffmpeg -i input.mp4 -vf "fps=15,scale=1000:-1:flags=lanczos" -c:v gif output.gif
    
    # Or use online tools:
    # - https://ezgif.com/video-to-gif
    # - https://cloudconvert.com/mp4-to-gif
  3. Optimize GIF Size

    # Using gifsicle
    gifsicle -O3 --colors 256 output.gif -o optimized.gif

File Organization

cutos/
โ”œโ”€โ”€ docs/
โ”‚   โ”œโ”€โ”€ demo.gif              # Main demo GIF (homepage)
โ”‚   โ”œโ”€โ”€ effects-showcase.png  # Effects preview
โ”‚   โ””โ”€โ”€ images/
โ”‚       โ”œโ”€โ”€ editor-interface.png
โ”‚       โ”œโ”€โ”€ ai-chat.png
โ”‚       โ”œโ”€โ”€ effects-panel.png
โ”‚       โ”œโ”€โ”€ timeline-editing.gif
โ”‚       โ””โ”€โ”€ search-demo.gif
โ””โ”€โ”€ public/
    โ””โ”€โ”€ demo.mp4              # Demo video for landing page

Screenshot Tips

  • Use full editor interface at 1920x1080
  • Crop to show relevant sections
  • Add subtle drop shadows in post
  • Use dark mode for consistency
  • Compress with TinyPNG or similar

๐ŸŽฎ Keyboard Shortcuts

Shortcut Action
Space Play/Pause
Cmd/Ctrl + Z Undo
Cmd/Ctrl + Shift + Z Redo
Cmd/Ctrl + C Copy selected clip
Cmd/Ctrl + V Paste clip
S Split clip at playhead
Delete Delete selected clip
F Enter fullscreen
Esc Exit fullscreen

๐Ÿค Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the project
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

๐Ÿ› Known Issues

  • Voice isolation requires clips to be uploaded to cloud storage first
  • Morph transitions only work between sequential clips on the same track
  • Large video files (>500MB) may experience slower processing

๐Ÿ“ License

This project is licensed under the MIT License - see the LICENSE file for details.


๐Ÿ™ Acknowledgments

  • TwelveLabs - Semantic video understanding
  • ElevenLabs - Voice AI technology
  • OpenAI - GPT-4o for intelligent editing
  • Kling AI - Morph transition generation
  • Supabase - Backend infrastructure
  • Vercel - Hosting and deployment

๐Ÿ“ง Contact

Team:

  • Julian Cruzet
  • Shams Haroon
  • Vincent Wong
  • Jonathan McKesey

Project Link: https://github.com/shamsharoon/cutos

Devpost: https://devpost.com/software/cutos

Demo Video: https://youtu.be/t0zHzwyXm_Q

Live App: https://cutos.vercel.app


Built with โค๏ธ for creators who move fast

About

video editor with semantic search & ai transitions

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors