IP
Image Play Lab
v1.0 / Interactive Tool

IMAGE
PROCESSING
MADE VISIBLE.

Upload any image. Apply real algorithms.
Understand exactly what changed, and why.
All processing runs in your browser.

Open Lab→About the project

8

Modules

30+

Operations

0

Server calls

BASICS
NOISE
FILTER
EDGES
THRESH
Edge Detection·Canny
change image
ORIGINAL
CANNY EDGES

Operation

Sobel
Laplacian
Canny
Low T20
High T60
Sigma35

Histogram

Real app. Try it with your own images.

Curriculum

01IMAGE BASICSPixels · RGB channels · Grayscale · Brightness · Contrast→02NOISEGaussian · Salt & Pepper · Uniform→03FILTERINGMean · Gaussian blur · Median · Bilateral→04EDGE DETECTIONSobel · Laplacian · Canny→05THRESHOLDINGBinary · Inverse · Otsu auto→06HISTOGRAMView · Equalization · Stretch→07MORPHOLOGYErosion · Dilation · Opening · Closing→08METRICSMSE · PSNR · SSIM→

Workflow

01UploadAny image, or use a sample
02SelectPick a module from the tab strip
03AdjustMove sliders, see live output
04CompareSplit view or slider comparison
05UnderstandRead the math and intuition

Architecture

FrameworkNext.js 16 + Turbopack
LanguageTypeScript (strict)
StylingTailwind CSS
ProcessingCanvas API (client-side)
ServerNone required
Auth / DBNone
DeployVercel

Algorithms (from scratch)

-Gaussian / Mean / Median / Bilateral convolution
-Full Canny pipeline: smooth → Sobel → NMS → hysteresis
-Otsu threshold via inter-class variance
-CDF-based histogram equalization
-Morphological erosion, dilation, opening, closing
-MSE, PSNR (dB), global SSIM approximation

Ready?

No sign-up. No install.
Runs entirely in your browser.

Open Lab→