Skip to content
DEVPANTRY.COM
Back to All Engineering Guides
AI & WASM 6 min read September 20, 2026

Running AI Background Removal Client-Side using WebGPU, WASM & ONNX Runtime

Discover how DevPantry processes high-resolution image background removal 100% in the user browser using ONNX Runtime Web, WebGPU, WebAssembly, and zero server upload APIs.

DevPantry EngineeringClient Machine Learning & WebGPU
Interactive Tool ImplementationTest this exact engineering implementation live in your browser.
Open AI Background Remover

Key Architectural Takeaways

  • 01.In-browser ML execution eliminates cloud GPU server costs ($0.05/image saved per process).
  • 02.ONNX Runtime Web automatically selects WebGPU acceleration when available, falling back to multi-threaded WASM.
  • 03.User images never leave local memory, providing absolute privacy for sensitive documents or personal photos.
  • 04.OffscreenCanvas API keeps the main UI thread responsive during heavy tensor matrix calculations.

1. Why Client-Side AI is the Future of Developer Utilities

Most background removal services upload your images to a remote cloud server processing images via Python/PyTorch API endpoints. This introduces:

  1. Privacy Concerns: Your private photos are stored on third-party servers.
  2. Bandwidth Latency: Uploading 15MB camera images takes time.
  3. High Infrastructure Costs: GPU instances (Nvidia T4/A10G) cost hundreds of dollars monthly.

DevPantry runs the machine learning model (@imgly/background-removal) entirely inside the client browser memory.

Client-side Background Removal Executiontypescript
import { removeBackground } from '@imgly/background-removal';

export async function processImage(imageFile: File): Promise<Blob> {
  // Configured to load quantized ONNX weights from local public assets
  const blob = await removeBackground(imageFile, {
    publicPath: `${window.location.origin}/models/`,
    device: 'gpu', // Attempts WebGPU first, falls back to WASM
    progress: (key: string, current: number, total: number) => {
      console.log(`Model execution: ${key} (${Math.round((current / total) * 100)}%)`);
    }
  });

  return blob;
}

2. WebGPU & WASM Execution Pipeline

Modern web browsers expose hardware GPU acceleration through the WebGPU API. When a user uploads an image:

  1. Pre-processing: The image is scaled to model input dimensions (512x512) on an OffscreenCanvas.
  2. Tensor Inference: ONNX Runtime Web executes deep neural network matrix multiplications using WebGPU shaders.
  3. Alpha Mask Generation: The output tensor generates a 1-channel alpha mask prediction.
  4. Post-processing: The alpha mask is composited back onto the original high-resolution image canvas to preserve full detail.
Offscreen Canvas Compositing Pipelinetypescript
const canvas = new OffscreenCanvas(width, height);
const ctx = canvas.getContext('2d')!;

// Draw original high-res image
ctx.drawImage(originalImage, 0, 0);

// Apply predicted alpha mask composite
const imageData = ctx.getImageData(0, 0, width, height);
for (let i = 0; i < imageData.data.length; i += 4) {
  // Multiply alpha channel by neural net mask prediction
  imageData.data[i + 3] = (imageData.data[i + 3] * maskBuffer[i / 4]) / 255;
}
ctx.putImageData(imageData, 0, 0);
Tags:#AI#WebGPU#WebAssembly#ONNX Runtime#Computer Vision#Canvas API
Launch AI Background Remover