Project

VisualAI Lab

A custom-trained object detection system built to identify IT equipment and everyday tech gear, paired with an interactive AI dashboard for visualizing results.

How It Works

📸

Upload

User selects image

📡

POST /detect

FastAPI receives file

🧠

YOLOv8

Model runs inference

📦

JSON

Returns detections

🎨

Canvas

Draws overlay

API Response Format POST /detect

{
  "detections": [
    {
      "label":      "laptop",
      "confidence": 0.94,
      "box": {
        "x": 120, "y": 80,
        "width": 420, "height": 260
      }
    },
    {
      "label":      "ethernet_cable",
      "confidence": 0.87,
      "box": { "x": 540, "y": 320, "width": 180, "height": 60 }
    }
  ],
  "image_size": { "width": 1280, "height": 960 }
}

Tech Stack

Training (Local GPU)

Python + PyTorch
Ultralytics YOLO
CUDA acceleration
Label Studio (annotation)
Export → ONNX

Backend API

FastAPI
Ultralytics / ONNX Runtime
SQLite (history)
Uvicorn ASGI server
Nginx reverse proxy

Frontend

Plain HTML / CSS / JS
Canvas API (bounding boxes)
Fetch API (image upload)
CSS Grid + Flexbox
Space Grotesk font

Infrastructure

VPS (cloud server)
Nginx static + proxy
systemd service
Domain: techdetector.errolvogt.ca

Detection Classes (V1) 8 classes

laptop keyboard mouse monitor ethernet_cable usb_adapter power_brick access_point

Model trained on personal photos. 50–100 images per class, multiple angles, backgrounds, and lighting conditions.

Roadmap

✓ v1 — Complete

✓ Image upload + detection
✓ Bounding box canvas overlay
✓ Confidence scores panel
✓ SQLite detection history
✓ Analytics dashboard

◈ v2 — Planned

◻ Webcam live detection
◻ Three.js 3D detection cloud
◻ Drag-and-drop result gallery
◻ Export results as JSON
◻ Browser-side inference (WebGPU)

◈ Try It Now