Visual Inspector
An image analysis tool that runs locally in the browser or connects to a cloud API.
Overview
Visual Inspector analyzes images to extract basic properties like dimensions, color distribution, and brightness. It operates in two modes: local processing that runs entirely in your browser, and API mode that sends images to a remote endpoint for analysis.
This tool addresses the need for quick image analysis without installing software or sharing data with third parties. Local mode provides instant feedback on image characteristics. API mode demonstrates integration with deployed inference services.
The project demonstrates frontend image processing, canvas manipulation, API integration, and progressive enhancement principles. It shows how to build responsive interfaces that work offline while offering extended functionality when connected.
Technical Details
Purpose and Scope
Visual Inspector provides a minimal reference implementation for client-side image analysis and optional server communication. It validates the approach of processing data locally first, then optionally enhancing with remote capabilities. The scope is deliberately constrained to basic statistical analysis to keep the implementation transparent and maintainable.
Architecture
The architecture follows a single-page application pattern with no build step. The HTML file contains structure, styling, and behavior in one document for portability. Local processing uses the Canvas API to extract pixel data and compute statistics. API mode uses FormData and fetch to send images to a REST endpoint.
The design separates concerns through function boundaries: UI state management (mode switching, status badges), image loading (file input, object URLs), local analysis (canvas operations, pixel math), and API communication (fetch with timeout, error handling). This separation allows each component to be tested and modified independently.
Data Flow
1. User selects image file → 2. Browser creates object URL → 3. Image loads into preview → 4. User triggers analysis → 5a. Local: Canvas extracts pixels, computes RGB averages, calculates brightness → 5b. API: Image converts to blob, uploads via FormData POST → 6. Results display as JSON.
Local analysis downscales images to 640px maximum dimension before processing to limit memory usage and computation time. The downscaling uses canvas context drawing which applies smoothing by default. RGB values are averaged across all pixels, then brightness is calculated using the standard luminance formula (0.2126R + 0.7152G + 0.0722B).
Technology Stack
HTML/CSS/JavaScript: Chosen for zero-dependency deployment and universal browser compatibility. No framework overhead means faster load times and simpler debugging.
Canvas API: Provides direct pixel access for image analysis. The getImageData method returns RGBA values as a typed array which enables efficient numerical operations. The willReadFrequently context hint optimizes for repeated reads.
Fetch API with AbortController: Modern replacement for XMLHttpRequest that supports promises and request cancellation. The 12-second timeout prevents indefinite hangs if the API is unresponsive.
FormData: Standard multipart/form-data encoding for file uploads. Avoids manual base64 encoding which increases payload size by 33%.
CSS Grid and Flexbox: Responsive layout without media query complexity. Grid handles the two-column structure, flexbox manages inline elements and wrapping.
Implementation Challenges
Memory management: Large images can exhaust browser memory. The solution downscales before analysis and revokes object URLs when clearing to prevent leaks.
API reliability: Network requests can fail or timeout. The implementation wraps fetch with AbortController for timeouts and parses responses defensively to handle both JSON and plain text errors.
Color space: Canvas returns sRGB values but brightness perception is non-linear. Using the ITU-R BT.709 luminance coefficients provides perceptually accurate brightness calculation.
Browser compatibility: Modern APIs like willReadFrequently are optional. The code uses progressive enhancement: core functionality works everywhere, optimizations apply when available.
Trade-offs
Single-file architecture: Simpler deployment but harder to maintain as complexity grows. Acceptable for this scope, would require refactoring at larger scale.
Client-side processing: Faster for simple operations, limited by browser capabilities. Complex computer vision would require server-side processing with specialized libraries.
Image downscaling: Reduces accuracy but enables processing of high-resolution images without crashes. The 640px limit balances detail preservation with performance.
Try it
Local mode calculates simple statistics (dimensions, average brightness, dominant channel). API mode expects POST /vision/predict (optional).
Output
{}