MuhammadLab
Computer VisionBrowser-basedMediaPipe segmentationPortrait modeVirtual backgroundStudent lab

Background Blur and Portrait Mode Studio

Detect the foreground subject in your browser, then blur the background, remove it, or replace it with a virtual scene to explore how segmentation powers portrait mode.

This studio connects semantic segmentation to real-world photo and video effects. Students can compare the subject mask, final composite, and edge quality to understand how apps such as Zoom blur, phone portrait mode, and virtual backgrounds work.

Why portrait mode works

Portrait mode depends on segmentation. The model predicts which pixels belong to the foreground subject and which pixels belong to the background, then the app edits those regions differently.

Three real workflows

Blur mode mimics phone portrait photography and Zoom blur. Remove mode creates a transparent foreground cutout. Replace mode simulates virtual backgrounds for meetings, teaching, and content creation.

What students should notice

Clean subject edges are hard. Hair, glasses, hands, and overlapping objects often produce the most interesting segmentation errors, which makes this a good page for learning model limitations.

Interactive studio

Segment the subject, then edit the background

Choose an input source, let the page find the foreground, and compare the mask with the final portrait-style result.

Model loading

Loading MediaPipe segmentation in the browser...

Portrait-mode preview

Upload a subject photo or enable the webcam to generate a foreground mask and explore blur, cutout, and background replacement effects.

No input selected yet

Processing mode

Fine controls

Blur strength16px
Edge softness18

Replacement backgrounds

You can use a preset background or upload your own image.

Foreground coverage

--

Approximate share of pixels classified as foreground rather than background.

Detected classes

0

This lab treats every non-background class as part of the kept foreground region.

Best use case

Portrait mode

Switch modes to compare how the same subject mask supports different real-world workflows.

Interpretation

Upload a photo or start the webcam to generate a subject mask and apply portrait-mode style effects.

Where this appears in the real world

Video calls

Meeting apps segment the person from the room so they can blur clutter or replace the entire background.

Phone portrait mode

Phones combine depth cues and segmentation to keep the subject crisp while softening the scene behind them.

Creative compositing

Designers and content creators use cutouts and mattes to place people or products into new layouts and scenes.

Session status

Input sourceUpload not selected
SegmentationWaiting
OutputBlurred background
Loading model files...

How the calculation works

  1. 1. The segmentation model predicts a class label for every pixel.
  2. 2. Pixels labeled as background stay in the background region.
  3. 3. All other labeled pixels are grouped into the foreground matte.
  4. 4. The matte is softened slightly so hair and edges blend more naturally.
  5. 5. The page composites the foreground with a blurred, transparent, or replacement background.

Teaching notes

  • Semantic segmentation teaches that vision models often reason at the pixel level, not just with whole-image labels.
  • Background effects are only as strong as the mask quality, so fine boundaries become the most informative failure cases.
  • Virtual backgrounds are useful examples of privacy, media production, and human-centered computer vision.