CV-LAB is an interactive, browser-based tool for exploring computer vision algorithms in real-time. Built with React and OpenCV.js, it applies edge detection (Canny, Sobel, Laplacian) to images and videos, then visualizes the results as mathematical curves in Desmos.
All processing happens locally in your browser — no server required.
- Local File Upload: Drag & drop images or videos (no external dependencies or CORS proxies)
- Real-time Edge Detection: Canny, Sobel, and Laplacian algorithms with adjustable thresholds, blur, noise filtering, and curve simplification
- Desmos Integration: Convert detected edges into parametric cubic Bézier curves and explore them on an interactive graph
- Video Processing: Load video files or use your webcam for live edge detection
- Export Options: Download results as PNG, SVG, or JSON; record processed video as
.webmor.mp4 - Keyboard Shortcuts:
Dto detect edges,Gto open Desmos,Spaceto play/pause video,Escto close Desmos panel - Light & Dark Mode: Switch between themes at any time
- Mobile-Optimized UI: Collapsible control panels, large touch targets, responsive layout for phones and tablets
- Persistent Preferences: Your theme, mode, parameters, and UI state are automatically saved
- Framework: React 18 + Vite
- Computer Vision: OpenCV.js (WebAssembly)
- Graphing: Desmos Graphing Calculator API
- Styling: Custom CSS with CSS variables for theming
Node.js (v18 or higher) and npm.
git clone https://github.com/Vsbs14/CV.git
cd CV
npm installnpm run devOpen http://localhost:5173 in your browser.
npm run build
npm run previewThis project is configured for automatic deployment to GitHub Pages via GitHub Actions.
- Enable GitHub Pages in your repository settings → Pages
- Set Source to GitHub Actions
- Push to
main— a workflow will build and deploy tohttps://YOUR-USERNAME.github.io/CV/
- Drag & drop an image onto the drop zone, or click to select a file
- Choose an algorithm (Canny / Sobel / Laplacian)
- Adjust parameters: thresholds, blur kernel, noise filter, and curve simplification
- Click DETECT EDGES or press
D - View results in the right canvas, then export or open in Desmos
- Upload a video file or click USE WEBCAM
- Press play to start processing
- Adjust the blur amount and algorithm in real-time
- Use the RECORD VIDEO button to capture the output
- Opens when you click GRAPH IN DESMOS or press
Gafter processing - Curves are rendered as parallel list arrays for efficient display
- Uses the same coordinate system as the source image (Y flipped for Cartesian orientation)
- Adjust MAX CURVES slider to balance performance vs detail
Your preferences are saved automatically:
- Theme (dark/light)
- Last selected mode (Image/Video)
- All algorithm parameters (thresholds, blur, noise filter, simplification)
- Accordion panel states (which sections are collapsed)
- Desmos Max Curves setting
No manual saving required — everything restores on your next visit.
| Parameter | Range | Description |
|---|---|---|
| Threshold 1 | 0–255 | Minimum gradient for Canny (lower = more edges) |
| Threshold 2 | 0–255 | Maximum gradient for Canny (higher = fewer edges) |
| Blur Kernel | 1–15 | Gaussian blur kernel size (odd numbers only; even auto-incremented) |
| Noise Filter | 0–100 px | Minimum contour length to keep (removes specks) |
| Simplify Curve | 0.1–5.0 | Bézier fitting error margin (lower = more accurate, slower) |
| Max Curves (Desmos) | 100–10,000 | Maximum curves rendered in Desmos |
- OpenCV.js loads asynchronously from
docs.opencv.org— a status indicator shows readiness - Edge detection runs in a
requestAnimationFrameloop to avoid blocking the UI - Morphological skeletonization is applied to prevent double outlines in Desmos
- Video processing uses OpenCV's
VideoCaptureclass on<video>elements with explicit width/height assignment - All OpenCV
Matobjects are explicitly deleted infinallyblocks to avoid memory leaks - Desmos expressions are batched: 8 parallel lists (Ax, Ay, Bx, By, Cx, Cy, Dx, Dy) plus one master parametric Bézier
Tested on Chrome, Firefox, Safari, and Edge. Requires JavaScript and WebAssembly support.
MIT