Vision
Image view/transform/pixel/color/adjust/filter/enhance/morphology/edge/feature tools, face, object detection, segmentation, OCR and multimodal AI vision demos.
Image Workbench
Color & Contours
Color segmentation, contours, object counting, bounding boxes and shape recognition (OpenCV.js).
Color Processing
Grayscale, channel extraction & merge, color spaces, color replacement and quantization.
Edge & Shape Detection
Sobel, Canny, Harris corners, Hough lines and circles.
Feature Detection
ORB/BRISK keypoints and feature matching.
Image Adjustment
Brightness, contrast, gamma, saturation, hue, exposure, white balance and auto enhancement.
Image Filters
Blur, sharpen, emboss, high-pass and other classic convolution filters.
Image Transform
Resize, crop, rotate, flip, scale, padding, perspective and affine transform.
Image Viewer
Image info, pixel color picking, format conversion and download.
Noise & Enhancement
Add noise, denoise, histogram equalization and enhancement.
OCR & Document Vision
Text recognition (Tesseract.js) and document scanning (OpenCV.js).
Threshold & Morphology
Binary/adaptive/Otsu threshold, erosion, dilation, opening, closing and morphological gradient.
Face
Face Registration & Recognition
Enroll multiple face samples in-browser and recognize locally — registry stored on-device (localStorage).
Face Studio
Face detection, landmarks, blur, pixelation, ID-photo generation and 1:1 verification — 6 tools across MediaPipe and face-api.
Capability Comparison
Depth Estimation (by engine)
Depth estimation via YOLO vs Depth Anything (Transformers.js).
Doodle Recognition (by approach)
Sketch a doodle and recognize it: DoodleNet with 345 preset classes vs MobileNet + KNN taught on the spot.
Full-body Pose (by engine)
Full-body keypoints via MediaPipe (33 points) vs YOLO (17 points) — the only keypoint capability compared across two engines.
Image Classification (by engine)
Image classification via MediaPipe and YOLO side by side, comparing Top-K categories and confidences.
Image Segmentation (by engine)
Person segmentation (MediaPipe), instance/semantic segmentation (YOLO) and point-prompt interactive segmentation, covering both automatic and manual paths.
Matting (by engine)
Matting via MediaPipe selfie segmenter vs MODNet, both exportable as transparent PNGs.
Object Detection (by engine)
The same object-detection task across two engines — MediaPipe vs YOLO. Switching implementations is a single click, with identical input and controls.
Engine Overview
MediaPipe Engine (11 tasks)
Every MediaPipe task: face detection/landmarks, hand landmarks, gesture recognition, pose, holistic, object detection, image classification, person segmentation, interactive segmentation and image embedding. Live camera supported.
Transformers.js Engine
Vision tasks backed by Transformers.js: image captioning (ViT-GPT2), depth estimation (Depth Anything), MODNet matting and image QA (Janus-Pro).
YOLO26 Engine (7 tasks)
The complete YOLO26 task list: detection, instance & semantic segmentation, depth, classification, pose and oriented boxes — on an uploaded image or live from the camera (WebGPU accelerated).
Lessons
Edge Detection Basics (Lesson)
A four-step walkthrough of how AI finds an object’s outline: input image → detect changes (click any pixel to see how much it differs from its neighbours) → edge image (drag the threshold and watch the lines thin out) → seeing better (edges laid back over the photo).
Feature Extraction Basics (Lesson)
A four-step walkthrough of how AI first “sees”: input image → feature extraction (kernels) → feature map (heat map) → understanding (classification). One image, every step hands-on.
Image Classification Basics (Lesson)
A five-step walkthrough of how AI classifies an image: input → feature extraction (grayscale + outline) → learn patterns (same-class examples averaged into a “prototype”) → classify (a transparent mini model next to a real model) → output (confidence and the top-two margin). Use the built-in dog / cat samples or upload a photo; the real model returns Top-5.
Image Processing Basics (Lesson)
A six-step walkthrough: input → grayscale → noise reduction → enhancement → feature emphasis → processed. One image changes step by step, each step shown side by side with the original.
Pixel Fundamentals (Lesson)
Four hands-on lessons: how pixels are stored, how RGB composes color, how image size is computed and how to draw pixels.
Media Tools
Image Compressor
Set a target size (say 200 KB) and it steps the quality down until the image fits; a max edge length can be applied too.
Image Format Converter
Convert between PNG / JPEG / WebP / BMP, adjust quality, and compare the file size before and after.
Recorder
Record from the camera, the screen, or both (picture-in-picture). Camera mode captures audio too. Download the result, convert it to MP4 / GIF / MP3, or generate an SRT subtitle file in the browser; camera mode can also snap a still as JPG.
Video Compressor
Shrink a video to a target size (or a quality preset): the bitrate is derived from target size ÷ duration, and the predicted size is shown up front.
Video Format Converter
Convert a video to MP4 (resolution and bitrate adjustable) or GIF (frame rate and width adjustable), entirely on-device.
Video Trimmer
Cut a segment out of a video by start/end time, preview the selection first, and export a universal MP4.