Edit, compress, resize, enhance, annotate, OCR, and explore computer vision image tools online.
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.
Reduce image file size without visible quality loss.
Resize images to exact dimensions or percentage.
Extract editable text from screenshots, scans, receipts, and photos using on-device OCR powered by Tesseract.js. Supports 40+ languages, preprocessing controls, region selection, and batch export. Fully local, no upload.
All-in-one browser-based image studio. Crop, resize, rotate, adjust brightness and contrast, add watermarks, convert formats, and strip EXIF data — all locally.
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.
Erase unwanted objects from photos using a brush-based masking workflow and in-browser content-aware fill. Remove distractions, people, watermarks, and clutter — locally.
Crop images with custom or preset aspect ratios.
Create QR codes for URLs, Wi-Fi, vCard, email, SMS, events, and more. Full style control with live preview and logo embed.
Add multi-layer text overlays to images with full typography, shadows, outlines, background boxes, and direct drag-to-place editing. Create posters, thumbnails, quotes, and captions — no upload required.
Improve photo quality with live adjustment controls for brightness, contrast, saturation, vibrance, warmth, highlights, shadows, sharpness, and clarity. Apply presets or fine-tune manually — all local.
Convert images between any supported format.
Create a portrait-style background blur that keeps your subject sharp while softening the background. Powered by on-device AI segmentation — no upload required.
Add text overlays to images to create memes.
Generate a complete favicon package from any image.
Rotate images by any angle or flip horizontally/vertically.
Strip all metadata (EXIF, GPS, camera info) from photos.
Add text or image watermarks to photos.
Adjust brightness, contrast, saturation, and hue.
Extract dominant colors from any image.
Convert images to ASCII art text.
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.