EV Connector Segmentation Web App with YOLO and On-Device Inference

Built a 100% client-side EV connector segmentation app with a Web Worker inference pipeline, model switching, and detection/tracking workspaces, verified for numerical parity against the Python reference implementation.

Personal ProjectsYear 2026Latest activity 2026-02-20

Project Overview

Objective

Stack

Next.jsTypeScriptReactAnt DesignTailwind CSSViteonnxruntime-webWebGPUWASMWeb WorkersYOLO SegmentationBoT-SORT TrackingKalman FilteringUltralyticsONNXDockerJenkins

Delivery highlights

Built a fully client-side instance-segmentation web app for five EV connector classes. Images, video files, and live camera frames stay in the visitor's browser because inference runs through onnxruntime-web without an inference server.
Moved image preprocessing, ONNX execution, output decoding, and optional tracking into a dedicated Web Worker so model work does not block the main interface. WebGPU is used when available, with WASM as the compatibility fallback.
Implemented camera, still-image, and video input modes with canvas overlays for masks, boxes, class labels, confidence scores, stable tracking IDs, and inference timing. A model picker exposes four YOLO segmentation exports, including an end-to-end NMS-free variant.
Added progressive model downloads and browser Cache Storage so large model files are fetched once and can be reused. Separate Detection and Detection + Tracking workspaces use a BoT-SORT-style tracker with Kalman filtering to preserve object identity across frames.
Maintained a Vite development and verification app alongside the deployed Next.js interface, with a hash check keeping shared decode and tracker logic synchronized. Custom verification scripts compare JavaScript outputs with the Ultralytics Python reference, and CI requires those numerical checks before publishing the container image.

Link Demo Back to Topic Projects Back to All Projects

System workflow

How browser-based EV connector segmentation works

Media never leaves the device — a Web Worker loads a cached ONNX model, runs inference and decode logic verified against a Python reference, and optionally tracks objects across frames.

Rendering workflow diagram…

Scroll horizontally to explore the full workflow on smaller screens.

System workflow

Source-reviewed processing sequence

A conservative end-to-end boundary taken from the source audit. Specific endpoints, storage writes, and external calls are only claimed in the project-specific diagrams when the implementation confirms them.

Rendering workflow diagram…

Scroll horizontally to explore the full workflow on smaller screens.

Related Projects

3 items

Multi-Model AI Inference for Image Generation

Personal ProjectsYear: 2026

A full-stack AI image generation platform supporting multiple SDXL-based diffusion models on RunPod serverless GPU. Users can write prompts in any language — the system auto-translates to English — then configure generation parameters and generate images stored on AWS S3. Includes image inpainting, public gallery, per-user history, and an admin panel for managing users and images.

Visual Question Answering System with YOLO, CLIP, ViT, BLIP, BLIP Caption, and LLM

Personal ProjectsYear: 2026

Built end-to-end VQA platform for image upload, scene understanding, and LLM-based answers.

Semi-Supervised Video Object Segmentation for Electric Vehicle Charger Socket Tracking

Personal ProjectsYear: 2026

Extended previous Electric Vehicle Charger Socket Instance Segmentation and Electric Vehicle Charger Socket Instance Segmentation & Tracking projects by building a custom DAVIS-style dataset with YOLOv8-Seg and adapting it for XMem to enable temporally consistent pixel-level segmentation across video frames.