# skyao2002/real-time-object-detection architecture

> Architecture diagram of the GitHub repository skyao2002/real-time-object-detection, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/skyao2002/real-time-object-detection
- Repository: https://github.com/skyao2002/real-time-object-detection

## Overview

This is a browser-based hand-pose demo: after loading the model, the app reads webcam frames, runs detection repeatedly, and draws labeled bounding boxes on a canvas. The sampled bundle supports this workflow; the model and webcam components are bundled dependencies, so their internal behavior is not shown.

Main entry points: [`static/js/main.6da63bb4.chunk.js`](https://github.com/skyao2002/real-time-object-detection/blob/gh-pages/static/js/main.6da63bb4.chunk.js) (Detection app), [`static/js/2.ba583733.chunk.js`](https://github.com/skyao2002/real-time-object-detection/blob/gh-pages/static/js/2.ba583733.chunk.js) (Handpose model)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_capture["Video capture"]
  node_webcam["Webcam component"]
  node_camera["Browser camera"]
end

subgraph group_inference["Detection and display"]
  node_app["Detection app"]
  node_model["Handpose model"]
  node_renderer["Box renderer"]
  node_canvas["Overlay canvas"]
end

node_user(("User"))

node_user -->|"opens demo"| node_app
node_app -->|"renders"| node_webcam
node_webcam -->|"captures video"| node_camera
node_app -->|"loads model"| node_model
node_app -->|"submits frames"| node_model
node_model -->|"returns detections"| node_app
node_app -->|"draws detections"| node_renderer
node_renderer -->|"paints boxes"| node_canvas

click node_webcam "https://github.com/skyao2002/real-time-object-detection/blob/gh-pages/static/js/2.ba583733.chunk.js"
click node_app "https://github.com/skyao2002/real-time-object-detection/blob/gh-pages/static/js/main.6da63bb4.chunk.js"
click node_model "https://github.com/skyao2002/real-time-object-detection/blob/gh-pages/static/js/2.ba583733.chunk.js"
click node_renderer "https://github.com/skyao2002/real-time-object-detection/blob/gh-pages/static/js/main.6da63bb4.chunk.js"
click node_canvas "https://github.com/skyao2002/real-time-object-detection/blob/gh-pages/static/js/main.6da63bb4.chunk.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_webcam,node_camera,node_user toneBlue
class node_app,node_model,node_renderer,node_canvas toneAmber
```

## Components

### Video capture

- [Webcam component](https://github.com/skyao2002/real-time-object-detection/blob/gh-pages/static/js/2.ba583733.chunk.js): `static/js/2.ba583733.chunk.js`
- **Browser camera**

### Detection and display

- [Detection app](https://github.com/skyao2002/real-time-object-detection/blob/gh-pages/static/js/main.6da63bb4.chunk.js): `static/js/main.6da63bb4.chunk.js`
- [Handpose model](https://github.com/skyao2002/real-time-object-detection/blob/gh-pages/static/js/2.ba583733.chunk.js): `static/js/2.ba583733.chunk.js`
- [Box renderer](https://github.com/skyao2002/real-time-object-detection/blob/gh-pages/static/js/main.6da63bb4.chunk.js): `static/js/main.6da63bb4.chunk.js`
- [Overlay canvas](https://github.com/skyao2002/real-time-object-detection/blob/gh-pages/static/js/main.6da63bb4.chunk.js): `static/js/main.6da63bb4.chunk.js`

### Other components

- **User**

## Connections

- User → Detection app: opens demo
- Detection app → Webcam component: renders
- Webcam component → Browser camera: captures video
- Detection app → Handpose model: loads model
- Detection app → Handpose model: submits frames
- Handpose model → Detection app: returns detections
- Detection app → Box renderer: draws detections
- Box renderer → Overlay canvas: paints boxes