explaingit

hu-qi/clearmatte-studio

1JavaScriptAudience · developerComplexity · 2/5ActiveSetup · moderate

TLDR

Static web app that removes image backgrounds in the browser using Transformers.js and the birefnet-lite-512 ONNX model, with no upload and no server.

Mindmap

mindmap
  root((clearmatte-studio))
    Inputs
      PNG image
      JPEG image
      WebP image
    Outputs
      Transparent PNG
      Flattened image
    Use Cases
      Cut out a product photo
      Make a transparent logo
      Preview against custom backgrounds
      Self-host private bg removal
    Tech Stack
      JavaScript
      TransformersJS
      ONNX
      WebGPU
      WASM

Things people build with this

USE CASE 1

Cut out a subject from a photo and export a transparent PNG without uploading the image

USE CASE 2

Self-host a private background removal tool behind HTTPS as static files

USE CASE 3

Preview a cut-out against checkerboard, white, dark, or custom color before export

USE CASE 4

Serve the BiRefNet model locally to avoid Hugging Face Hub calls from China

Tech stack

JavaScriptTransformersJSONNXWebGPUWASM

Getting it running

Difficulty · moderate Time to first run · 30min

Model files are not bundled, so you must download birefnet-lite-512 from Hugging Face into the local models folder before the app works offline.

In plain English

ClearMatte Studio is a small web app that removes the background from an image. The whole thing runs inside the browser, so the picture never leaves your computer. It is built as a static site using a JavaScript library called Transformers.js and an open model named birefnet-lite-512, which has been converted to the ONNX format so it can run on the web. The feature list is short. You can upload a PNG, JPEG, or WebP image. The app then runs alpha matting, which is the technique that figures out which pixels belong to the subject and which belong to the background. You can preview the cut-out result against a checkerboard grid, a white background, a dark background, or a custom color, and there are sliders for cutoff, softness, and cleanup before you export. The final image can be saved as a transparent PNG or flattened onto a color background. Running it locally is as simple as starting a Python HTTP server in the project folder and opening localhost:5173. The README notes that WebGPU needs a secure context, which localhost counts as, and that browsers without WebGPU support fall back to WASM, the WebAssembly runtime. The model itself is not bundled. The app first looks for it in a local directory under models/studioludens/birefnet-lite-512, which you populate by downloading the model from Hugging Face. Serving the files from the same site avoids cross-origin issues and means visitors do not need to reach Hugging Face from the browser. If the local copy is missing, the app falls back to fetching from the Hugging Face Hub. Visitors from mainland China are routed to the local copy first. URL parameters such as model=local, model=remote, model=hub, model=mirror, and mirror=0 or mirror=1 let you override the loading behavior for testing. Deployment is simple: upload the repository as static files behind HTTPS, with no build step or server runtime needed. The repository has 1 star at the time of writing.

Copy-paste prompts

Prompt 1
Walk me through running clearmatte-studio locally with a Python HTTP server on port 5173
Prompt 2
Show me how to download the birefnet-lite-512 model from Hugging Face into models/studioludens
Prompt 3
Explain the cutoff, softness, and cleanup sliders and when to adjust each one
Prompt 4
Help me deploy clearmatte-studio as static files behind HTTPS on Cloudflare Pages
Prompt 5
Tell me what the model=local, model=remote, model=hub, and mirror=1 URL parameters do
Open on GitHub → Explain another repo

Generated 2026-05-22 · Model: sonnet-4-6 · Verify against the repo before relying on details.