Browser-based computer vision teaching tools for image classification, image segmentation, background removal, image upscaling, webcam inference, and visual model intuition.
Learning area
These pages are grouped as a learning collection. More lecture notes, examples, and practical tools can be added without changing the page structure.
Available resources
Available resources
This category combines current MuhammadLab pages that match the topic. More lecture guides and interactive tools can be added here as the lab grows.
Remove image backgrounds instantly in your browser using on-device AI. Get transparent PNG, add replacement backgrounds, and batch export - no upload required.
Upscale images by 2x or 4x with AI-powered detail enhancement. Preserve sharpness, enhance edges, and export high-resolution results - fully local, no upload needed.
Apply real-time Snapchat-style face filters using your webcam and browser-based 68-point facial landmark detection — dog ears, crown, sunglasses, devil horns, and more.
Classify uploaded images or webcam frames using a browser-based MobileNet model, then inspect top predictions and confidence scores.
Generate pixel-level segmentation masks from uploaded images or webcam frames using browser-based computer vision.
Upload a face image or use your webcam to detect 478 facial landmarks with MediaPipe, visualise symmetry lines, facial thirds, and face-geometry guides, and learn how landmark tracking supports AR filters and expression analysis - all locally in your browser.
Extract text from uploaded images, scanned notes, screenshots, or posters with Tesseract.js, then inspect the recognised text with optional word or line bounding boxes.
A browser-based image processing teaching lab where students can upload a picture, apply core operations, and inspect the pixel calculations behind each change.
Inspect a MediaPipe face mesh from webcam or uploaded images, highlight eyes, mouth, and nose landmarks, and study how AR filters attach to tracked facial points.
Upload an image and explore step-by-step classical computer vision operations such as grayscale conversion, thresholding, edges, morphology, and contours with OpenCV.js.
Classify an uploaded image with MobileNet and inspect a browser-based explainability heatmap that highlights which image regions influenced the prediction most.
Use browser-based segmentation to separate the foreground from the background, then apply portrait blur, transparent cutouts, or virtual background replacement.
Create computer vision training labels in the browser with bounding boxes, polygons, and brush masks, then export the annotations as YOLO TXT, COCO JSON, or CSV.
Upload two or more images, extract MobileNet embedding vectors, and compare how visually similar they are using cosine similarity.
Use a webcam or uploaded short video to compare consecutive frames, highlight moving regions, and inspect simple motion vectors directly in the browser with OpenCV.js.
Select four corners on an uploaded image, compute an OpenCV.js perspective transform, and convert a tilted page or board into a corrected top-down view.
Paste true labels and predicted labels to calculate confusion matrices, accuracy, precision, recall, F1-score, false positives, and false negatives for computer vision classification results.