# armit26/velvet architecture

> Architecture diagram of the GitHub repository armit26/velvet, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/armit26/velvet
- Repository: https://github.com/armit26/velvet

## Overview

VELVET is a browser-based, local computer-vision interface. A user connects a webcam; the app initializes MediaPipe, processes video frames, and presents detected objects with bounding boxes and confidence scores in the perception inspector. The sampled app excerpt shows camera setup, detector initialization, result formatting, overlays, and inspector rendering; the README documents the broader frame-to-result workflow. Scene exploration, diagnostics, and simulation are represented as interface affordances, not established runtime capabilities.

Main entry points: [`src/App.tsx`](https://github.com/armit26/velvet/blob/main/src/App.tsx) (Perception workspace), [`src/vision/detector.ts`](https://github.com/armit26/velvet/blob/main/src/vision/detector.ts) (Detector setup), [`src/main.tsx`](https://github.com/armit26/velvet/blob/main/src/main.tsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Application interface"]
  node_entry["React entry<br/>[main.tsx]"]
  node_perception["Perception workspace<br/>[App.tsx]"]
  node_inspector["Detection inspector<br/>[App.tsx]"]
  node_overlay["Detection overlays<br/>[App.tsx]"]
end

subgraph group_vision["Vision processing"]
  node_detector["Detector setup<br/>[detector.ts]"]
end

subgraph group_platform["Browser and model"]
  node_camera["Browser camera"]
  node_mediapipe["MediaPipe vision runtime"]
  node_model["Object detection model"]
end

node_user(("User"))

node_entry -->|"renders"| node_perception
node_user -->|"connects camera"| node_perception
node_perception -->|"requests video"| node_camera
node_perception -->|"initializes"| node_detector
node_detector -->|"loads runtime"| node_mediapipe
node_detector -->|"loads model"| node_model
node_perception -->|"presents results"| node_inspector
node_perception -->|"draws boxes"| node_overlay

click node_entry "https://github.com/armit26/velvet/blob/main/src/main.tsx"
click node_perception "https://github.com/armit26/velvet/blob/main/src/App.tsx"
click node_inspector "https://github.com/armit26/velvet/blob/main/src/App.tsx"
click node_overlay "https://github.com/armit26/velvet/blob/main/src/App.tsx"
click node_detector "https://github.com/armit26/velvet/blob/main/src/vision/detector.ts"

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_entry,node_perception,node_inspector,node_overlay,node_user toneBlue
class node_detector toneAmber
class node_camera,node_mediapipe,node_model toneMint
```

## Components

### Application interface

- [React entry](https://github.com/armit26/velvet/blob/main/src/main.tsx): `src/main.tsx`
- [Perception workspace](https://github.com/armit26/velvet/blob/main/src/App.tsx): `src/App.tsx`
- [Detection inspector](https://github.com/armit26/velvet/blob/main/src/App.tsx): `src/App.tsx`
- [Detection overlays](https://github.com/armit26/velvet/blob/main/src/App.tsx): `src/App.tsx`

### Vision processing

- [Detector setup](https://github.com/armit26/velvet/blob/main/src/vision/detector.ts): `src/vision/detector.ts`

### Browser and model

- **Browser camera**
- **MediaPipe vision runtime**
- **Object detection model**

### Other components

- **User**

## Connections

- React entry → Perception workspace: renders (evidence: `src/main.tsx`)
- User → Perception workspace: connects camera (evidence: `README.md`)
- Perception workspace → Browser camera: requests video (evidence: `README.md`)
- Perception workspace → Detector setup: initializes (evidence: `src/App.tsx`)
- Detector setup → MediaPipe vision runtime: loads runtime (evidence: `src/vision/detector.ts`)
- Detector setup → Object detection model: loads model (evidence: `src/vision/detector.ts`)
- Perception workspace → Detection inspector: presents results (evidence: `src/App.tsx`)
- Perception workspace → Detection overlays: draws boxes (evidence: `src/App.tsx`)