# gill003/smart-sign-language-translator-glove architecture

> Architecture diagram of the GitHub repository gill003/smart-sign-language-translator-glove, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/gill003/smart-sign-language-translator-glove
- Repository: https://github.com/gill003/smart-sign-language-translator-glove

## Overview

Smart Sign Language Glove translates hand motion into gesture predictions, text/speech, and a live browser visualization. The principal flow is sensor acquisition, queued motion capture, feature preparation, KNN classification, then server-sent updates to the browser; the browser animates a 3D hand and can speak predictions. The README also documents training and free-play modes and HTTP controls. Firmware behavior is concentrated in `src/main.cpp`; browser behavior is in `data/main.js`. Some server and client details are documented but their full implementation was not sampled.

Main entry points: [`data/main.js`](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/data/main.js) (Web client), [`src/main.cpp`](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/src/main.cpp) (HTTP controls), [`data/SensorData.csv`](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/data/SensorData.csv) (Training dataset), [`data/hand.glb`](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/data/hand.glb) (3D hand model)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_wearable["Wearable sensing"]
  node_flex["Flex sensors"]
  node_imu["MPU6050 IMU"]
end

subgraph group_firmware["Embedded processing"]
  node_capture["Sensor acquisition<br/>[main.cpp]"]
  node_queues["Motion queues<br/>[main.cpp]"]
  node_features["Gesture features<br/>[main.cpp]"]
  node_dataset["Training dataset<br/>[SensorData.csv]"]
  node_storage[("LittleFS storage<br/>[main.cpp]")]
  node_knn["KNN classifier<br/>[main.cpp]"]
  node_http["HTTP controls<br/>[main.cpp]"]
  node_sse["SSE event server<br/>[main.cpp]"]
end

subgraph group_browser["Browser experience"]
  node_web["Web client<br/>[main.js]"]
  node_model["3D hand model<br/>[hand.glb]"]
  node_visual["3D visualization<br/>[main.js]"]
end

subgraph group_outputs["Translation outputs"]
  node_prediction["Prediction display<br/>[main.js]"]
  node_speech["Speech synthesis<br/>[main.js]"]
end

node_user(("Glove user"))
node_speechapi["Web Speech API"]

node_user -->|"bends fingers"| node_flex
node_user -->|"moves hand"| node_imu
node_flex -->|"sensor readings"| node_capture
node_imu -->|"motion readings"| node_capture
node_capture -->|"enqueues samples"| node_queues
node_queues -->|"provides window"| node_features
node_features -->|"classifies features"| node_knn
node_storage -->|"reads training data"| node_dataset
node_dataset -->|"training examples"| node_knn
node_http -->|"loads dataset"| node_storage
node_http -->|"resets queues"| node_queues
node_http -->|"selects prediction mode"| node_knn
node_knn -->|"sends prediction"| node_sse
node_capture -->|"sends sensor events"| node_sse
node_web -->|"requests controls"| node_http
node_web -->|"subscribes to events"| node_sse
node_sse -->|"streams updates"| node_web
node_web -->|"loads model"| node_model
node_web -->|"sets up scene"| node_visual
node_visual -->|"displays prediction"| node_prediction
node_visual -.->|"speaks prediction"| node_speech
node_speech -.->|"requests speech"| node_speechapi

click node_capture "https://github.com/gill003/smart-sign-language-translator-glove/blob/main/src/main.cpp"
click node_queues "https://github.com/gill003/smart-sign-language-translator-glove/blob/main/src/main.cpp"
click node_features "https://github.com/gill003/smart-sign-language-translator-glove/blob/main/src/main.cpp"
click node_dataset "https://github.com/gill003/smart-sign-language-translator-glove/blob/main/data/SensorData.csv"
click node_storage "https://github.com/gill003/smart-sign-language-translator-glove/blob/main/src/main.cpp"
click node_knn "https://github.com/gill003/smart-sign-language-translator-glove/blob/main/src/main.cpp"
click node_http "https://github.com/gill003/smart-sign-language-translator-glove/blob/main/src/main.cpp"
click node_sse "https://github.com/gill003/smart-sign-language-translator-glove/blob/main/src/main.cpp"
click node_web "https://github.com/gill003/smart-sign-language-translator-glove/blob/main/data/main.js"
click node_model "https://github.com/gill003/smart-sign-language-translator-glove/blob/main/data/hand.glb"
click node_visual "https://github.com/gill003/smart-sign-language-translator-glove/blob/main/data/main.js"
click node_prediction "https://github.com/gill003/smart-sign-language-translator-glove/blob/main/data/main.js"
click node_speech "https://github.com/gill003/smart-sign-language-translator-glove/blob/main/data/main.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_flex,node_imu,node_user toneBlue
class node_capture,node_queues,node_features,node_dataset,node_storage,node_knn,node_http,node_sse toneAmber
class node_web,node_model,node_visual,node_speechapi toneMint
class node_prediction,node_speech toneRose
```

## Components

### Wearable sensing

- **Flex sensors**
- **MPU6050 IMU**

### Embedded processing

- [Sensor acquisition](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/src/main.cpp): `src/main.cpp`
- [Motion queues](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/src/main.cpp): `src/main.cpp`
- [Gesture features](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/src/main.cpp): `src/main.cpp`
- [Training dataset](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/data/SensorData.csv): `data/SensorData.csv`
- [LittleFS storage](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/src/main.cpp): `src/main.cpp`
- [KNN classifier](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/src/main.cpp): `src/main.cpp`
- [HTTP controls](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/src/main.cpp): `src/main.cpp`
- [SSE event server](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/src/main.cpp): `src/main.cpp`

### Browser experience

- [Web client](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/data/main.js): `data/main.js`
- [3D hand model](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/data/hand.glb): `data/hand.glb`
- [3D visualization](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/data/main.js): `data/main.js`

### Translation outputs

- [Prediction display](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/data/main.js): `data/main.js`
- [Speech synthesis](https://github.com/gill003/smart-sign-language-translator-glove/blob/main/data/main.js): `data/main.js`

### Other components

- **Glove user**
- **Web Speech API**

## Connections

- Glove user → Flex sensors: bends fingers
- Glove user → MPU6050 IMU: moves hand
- Flex sensors → Sensor acquisition: sensor readings
- MPU6050 IMU → Sensor acquisition: motion readings
- Sensor acquisition → Motion queues: enqueues samples
- Motion queues → Gesture features: provides window
- Gesture features → KNN classifier: classifies features
- LittleFS storage → Training dataset: reads training data
- Training dataset → KNN classifier: training examples
- HTTP controls → LittleFS storage: loads dataset
- HTTP controls → Motion queues: resets queues
- HTTP controls → KNN classifier: selects prediction mode
- KNN classifier → SSE event server: sends prediction
- Sensor acquisition → SSE event server: sends sensor events
- Web client → HTTP controls: requests controls
- Web client → SSE event server: subscribes to events
- SSE event server → Web client: streams updates
- Web client → 3D hand model: loads model
- Web client → 3D visualization: sets up scene
- 3D visualization → Prediction display: displays prediction
- 3D visualization → Speech synthesis: speaks prediction
- Speech synthesis → Web Speech API: requests speech