Skip to content

Free, unlimited, and 100% private AI background removal - right in your browser.

License

Notifications You must be signed in to change notification settings

MujahidAbbas/clearcut

Repository files navigation

Clearcut

Free, unlimited, and 100% private AI background removal - right in your browser.

License: MIT Built with Astro Powered by Transformers.js


Overview

Clearcut is a privacy-first background removal and image editing tool that runs entirely in your browser. No uploads, no servers, no subscriptions - just instant, studio-quality results powered by AI. Remove backgrounds, apply custom backgrounds, adjust filters, transform images, and crop to specific aspect ratios - all without your images ever leaving your device.

Key Features

  • 100% Private - Your images never leave your device. All processing happens locally in your browser.
  • Unlimited & Free - No usage limits, no watermarks, no accounts required.
  • Instant Processing - Powered by WebGPU/WASM for fast inference.
  • Studio-Grade Quality - Uses the RMBG-1.4 model for precise edge detection and hair handling.

Background Removal & Editing

  • Brush Editing - Fine-tune results with erase/restore brush tools.
  • Undo/Redo - Up to 20 history entries for brush edits.
  • Before/After Comparison - Interactive slider to compare original and edited images.

Image Editing Modal

  • Full-Screen Editor - Immersive editing experience with real-time preview.
  • Background Selection - Choose from 12 preset colors, custom color picker, or upload your own background image.
  • Background Filters - Adjust brightness (0-200%), contrast (0-200%), saturation (0-200%), and blur (0-20px) on backgrounds.
  • Transform Controls:
    • Zoom: 0.5x to 3.0x with interactive canvas zoom (zoom toward cursor position).
    • Rotate: 90-degree increments left or right.
    • Flip: Horizontal and vertical mirroring with active state indicators.
  • Aspect Ratio Cropping - Interactive crop tool with 6 aspect ratio options (Original, Free, 1:1, 4:3, 16:9, 9:16).
  • Crop Overlay - Visual crop handles with rule of thirds grid for composition.
  • Real-Time Preview - See all edits applied instantly on the canvas.

Export

  • Export Modal - Loading states, success confirmation, and Ko-fi support prompt.
  • High-Res Export - Download full-resolution PNG or JPG files with original filename + "-nobg" suffix.

Tech Stack


Getting Started

Prerequisites

  • Node.js 18+
  • npm or pnpm

Installation

# Clone the repository
git clone https://github.com/yourusername/clearcut.git
cd clearcut

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:4321 in your browser.

Commands

Command Action
npm install Install dependencies
npm run dev Start dev server at localhost:4321
npm run build Build production site to ./dist/
npm run preview Preview production build locally

Project Structure

clearcut/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   ├── landing/              # Landing page components
│   │   ├── remove/               # Background removal & editing UI
│   │   │   ├── BackgroundRemover.tsx    # Main orchestrator
│   │   │   ├── UploadZone.tsx           # Image upload
│   │   │   ├── ProcessingState.tsx      # Loading states
│   │   │   ├── ResultsView.tsx          # Results display
│   │   │   ├── EditingView.tsx          # Brush editing view
│   │   │   ├── ComparisonSlider.tsx     # Before/after slider
│   │   │   ├── BrushPanel.tsx           # Brush controls
│   │   │   ├── BackgroundPanel.tsx      # Background controls
│   │   │   ├── EditModal.tsx            # Full-screen editor
│   │   │   ├── EditPreview.tsx          # Interactive canvas preview
│   │   │   ├── ExportModal.tsx          # Export flow with Ko-fi
│   │   │   ├── BackgroundSelector.tsx   # Preset/custom backgrounds
│   │   │   ├── FilterControls.tsx       # BG filter sliders
│   │   │   └── TransformControls.tsx    # Zoom/rotate/flip/crop
│   │   └── ui/                   # Reusable UI components
│   ├── lib/
│   │   ├── segmentation.ts       # AI model integration
│   │   ├── compositing.ts        # Canvas rendering & export
│   │   ├── brushTool.ts          # Brush editing utilities
│   │   ├── imageFilters.ts       # CSS filter utilities
│   │   └── imageTransforms.ts    # Canvas transform utilities
│   ├── stores/
│   │   └── appStore.ts           # Zustand state management
│   ├── layouts/
│   │   └── Layout.astro          # Base HTML layout
│   ├── pages/
│   │   ├── index.astro           # Landing page
│   │   └── remove.astro          # Background removal tool
│   └── styles/
│       └── global.css            # Tailwind & global styles
├── astro.config.mjs
├── tailwind.config.js
└── package.json

How It Works

  1. Model Loading - On first visit, the RMBG-1.4 model (~45MB) is downloaded and cached in your browser.
  2. Image Processing - When you upload an image, it's processed entirely client-side using WebGPU (if available) or WASM.
  3. Mask Generation - The AI generates a segmentation mask identifying foreground vs background.
  4. Image Editing - Open the full-screen editor to apply background replacements, filters (brightness, contrast, saturation, blur), transforms (zoom, rotate, flip), and crop to specific aspect ratios.
  5. Compositing - The mask is applied to create a transparent background, with optional color/image replacement and filters.
  6. Export - Click the download button to trigger the export modal. The final result is rendered to a canvas and exported as PNG/JPG with the original filename + "-nobg" suffix.

No data ever leaves your browser.


Contributing

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

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

License

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


Acknowledgments

  • BRIA AI for the RMBG-1.4 background removal model
  • Hugging Face for Transformers.js
  • Astro for the amazing web framework

Made with care for your privacy

About

Free, unlimited, and 100% private AI background removal - right in your browser.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •  

Languages