In-Browser AI Background Removal for Your Web Apps

import { removeBackground } from "@pixir/background-remover";

const fileInput = document.getElementById("fileInput") as HTMLInputElement;

fileInput.addEventListener("change", async (e) => {
  const file = fileInput.files?.[0];
  if (!file) return;

  // Execute in-browser AI segmentation
  const resultBlob = await removeBackground(file, {
    device: "auto",      // WebGPU first, then WASM
    refineEdges: true,   // Guided filter edge refinement
    progress: (info) => {
      console.log(`[${info.stage}] ${Math.round(info.progress * 100)}%: ${info.message}`);
    }
  });

  // Display cutout image
  const url = URL.createObjectURL(resultBlob);
  const img = document.createElement("img");
  img.src = url;
  document.body.appendChild(img);
});