# surya2324/gesture-control architecture

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

- Interactive diagram: https://gitdiagram.com/surya2324/gesture-control
- Repository: https://github.com/surya2324/gesture-control

## Overview

This is a Flask-launched, webcam-based gesture-control application. A user opens the web page and starts the controller; the controller tracks hands, maps right-hand gestures to mouse/system actions, and uses the left hand as a virtual keyboard. The controller also displays the camera feed and saves screenshots. The README is empty, so the map follows the sampled source; camera, OS input, keyboard, and screenshot effects are represented as external interfaces.

Main entry points: [`Final.py`](https://github.com/surya2324/gesture-control/blob/main/Final.py) (Controller process), [`app.py`](https://github.com/surya2324/gesture-control/blob/main/app.py) (Flask routes), [`Templates/index.html`](https://github.com/surya2324/gesture-control/blob/main/Templates/index.html) (Control page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web launcher"]
  node_webapp["Flask routes<br/>[app.py]"]
  node_page["Control page<br/>[index.html]"]
end

subgraph group_controller["Gesture controller"]
  node_runtime["Controller process<br/>[Final.py]"]
  node_tracker["Hand tracker<br/>[Final.py]"]
  node_gestures["Gesture mapping<br/>[Final.py]"]
  node_virtualkeyboard["Virtual keyboard<br/>[Final.py]"]
  node_overlay["Video overlay<br/>[Final.py]"]
end

subgraph group_io["Device and OS I/O"]
  node_webcam(("Webcam"))
  node_mediapipe["MediaPipe"]
  node_opencv["OpenCV"]
  node_desktop["Desktop controls"]
  node_keyboard["Keyboard input"]
  node_screenshots[("Screenshot files")]
end

node_user(("User"))

node_user -->|"opens and controls"| node_webapp
node_webapp -->|"renders"| node_page
node_webapp -->|"starts or stops"| node_runtime
node_runtime -->|"reads frames"| node_webcam
node_runtime -->|"processes frames"| node_tracker
node_tracker -->|"detects landmarks"| node_mediapipe
node_runtime -->|"maps hand poses"| node_gestures
node_gestures -->|"issues mouse and hotkeys"| node_desktop
node_runtime -->|"handles left hand"| node_virtualkeyboard
node_virtualkeyboard -->|"emits keystrokes"| node_keyboard
node_runtime -->|"displays frames"| node_opencv
node_runtime -->|"draws keyboard and status"| node_overlay
node_overlay -->|"renders overlay"| node_opencv
node_gestures -->|"saves captures"| node_screenshots

click node_webapp "https://github.com/surya2324/gesture-control/blob/main/app.py"
click node_page "https://github.com/surya2324/gesture-control/blob/main/Templates/index.html"
click node_runtime "https://github.com/surya2324/gesture-control/blob/main/Final.py"
click node_tracker "https://github.com/surya2324/gesture-control/blob/main/Final.py"
click node_gestures "https://github.com/surya2324/gesture-control/blob/main/Final.py"
click node_virtualkeyboard "https://github.com/surya2324/gesture-control/blob/main/Final.py"
click node_overlay "https://github.com/surya2324/gesture-control/blob/main/Final.py"

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_webapp,node_page,node_user toneBlue
class node_runtime,node_tracker,node_gestures,node_virtualkeyboard,node_overlay toneAmber
class node_webcam,node_mediapipe,node_opencv,node_desktop,node_keyboard,node_screenshots toneMint
```

## Components

### Web launcher

- [Flask routes](https://github.com/surya2324/gesture-control/blob/main/app.py): `app.py`
- [Control page](https://github.com/surya2324/gesture-control/blob/main/Templates/index.html): `Templates/index.html`

### Gesture controller

- [Controller process](https://github.com/surya2324/gesture-control/blob/main/Final.py): `Final.py`
- [Hand tracker](https://github.com/surya2324/gesture-control/blob/main/Final.py): `Final.py`
- [Gesture mapping](https://github.com/surya2324/gesture-control/blob/main/Final.py): `Final.py`
- [Virtual keyboard](https://github.com/surya2324/gesture-control/blob/main/Final.py): `Final.py`
- [Video overlay](https://github.com/surya2324/gesture-control/blob/main/Final.py): `Final.py`

### Device and OS I/O

- **Webcam**
- **MediaPipe**
- **OpenCV**
- **Desktop controls**
- **Keyboard input**
- **Screenshot files**

### Other components

- **User**

## Connections

- User → Flask routes: opens and controls
- Flask routes → Control page: renders
- Flask routes → Controller process: starts or stops
- Controller process → Webcam: reads frames
- Controller process → Hand tracker: processes frames
- Hand tracker → MediaPipe: detects landmarks
- Controller process → Gesture mapping: maps hand poses
- Gesture mapping → Desktop controls: issues mouse and hotkeys
- Controller process → Virtual keyboard: handles left hand
- Virtual keyboard → Keyboard input: emits keystrokes
- Controller process → OpenCV: displays frames
- Controller process → Video overlay: draws keyboard and status
- Video overlay → OpenCV: renders overlay
- Gesture mapping → Screenshot files: saves captures