Computer vision visualizer

Image Segmentation Visualizer

Separate people, hair, skin, clothes, accessories, and background pixels directly in your browser with MediaPipe.

Controls

Input mode
View mode

The multiclass selfie model runs locally and returns a category for every mask pixel.

Preview

Upload a portrait, use webcam, or inspect the sample guide.
Image segmentation input

Class Legend

BackgroundHairBody skinFace skinClothesAccessories

What this visualizer does

It classifies every mask pixel, then renders a colored overlay, category mask, or foreground cutout with a replaced background.

What MediaPipe detects

  • Background and foreground regions.
  • Hair, body skin, face skin, clothes, and accessories.
  • A category index for every output-mask pixel.

Common use cases

  • Background blur
  • Virtual backgrounds
  • Portrait effects
  • Privacy tools
  • Video calls

Code examples

import mediapipe as mp

BaseOptions = mp.tasks.BaseOptions
ImageSegmenter = mp.tasks.vision.ImageSegmenter
ImageSegmenterOptions = mp.tasks.vision.ImageSegmenterOptions

options = ImageSegmenterOptions(
    base_options=BaseOptions(model_asset_path="selfie_multiclass.tflite"),
    output_category_mask=True
)

with ImageSegmenter.create_from_options(options) as segmenter:
    image = mp.Image.create_from_file("portrait.jpg")
    result = segmenter.segment(image)
    category_mask = result.category_mask.numpy_view()

How the model works

  1. The input is resized to the model dimensions.
  2. The model predicts a class for each mask pixel.
  3. The mask is scaled back over the original media.
  4. Canvas compositing creates overlays and cutouts.

Controls explanation

Overlay shows classes over the image. Mask shows only categories. Background keeps the person and replaces or blurs class zero.

FAQ

Portrait framing and even lighting produce cleaner edges. Fine hair and transparent objects remain challenging for compact models.