Browser Object Detection

Engineering problem

A working computer vision interface needs more than a model call. It must handle model downloads, camera permissions, input changes, predictions, visual annotations and resource cleanup.

My contribution

I integrated TensorFlow.js and COCO-SSD into a React interface, connecting local image and camera inputs to inference and drawing the resulting bounding boxes on a canvas. The interface exposes loading, error and detection states.

Architecture & implementation

The model runtime is loaded only when the visitor opens the demo and chooses to load it. A selected image or camera frame is passed to the pretrained detector locally. Returned labels, scores and bounding boxes are then displayed in the interface.

Camera tracks stop when the visitor stops the camera or leaves the demo. In-flight work is checked against the current input, and model resources are released when the component unmounts.

Requirements & limitations

The initial model download requires an internet connection. Camera access requires permission and a secure context, such as HTTPS or localhost. Once loaded, image inference takes place in the browser; this application does not upload the selected media.

The pretrained model recognizes a limited set of common objects. Predictions can be wrong, and runtime depends on the browser and device. This is an interactive demo, not a validated production vision service.

Current status

A working implementation is included below. Detection labels and model scores come from inference on your selected input. The portfolio does not substitute scripted predictions or claim a benchmark accuracy.

Try the object detector

Use a local image or your camera. The model downloads from TensorFlow’s model hosting when you choose “Load detection model”. Your media is processed in this browser.