# christian7777777777/deteccion_movimiento_3d_mediapipe architecture

> Architecture diagram of the GitHub repository christian7777777777/deteccion_movimiento_3d_mediapipe, 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/christian7777777777/deteccion_movimiento_3d_mediapipe
- Repository: https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe

## Overview

This is a small Flask web app for real-time camera-based pose detection and 3D pose visualization. A browser loads the interface, then can request an annotated 2D video stream, a 3D pose stream or snapshot, and camera selection. In app.py, route handlers dispatch to frame generators or camera-management functions; those functions capture frames, run MediaPipe Pose, and render responses. The README gives little feature detail, so this map relies mainly on the sampled app.py; the template’s specific controls are not verified.

Main entry points: [`app.py`](https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py) (3D snapshot route), [`templates/index.html`](https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/templates/index.html) (Interface template), [`static/style.css`](https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/static/style.css) (Page styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web interface"]
  node_index_route["Page route<br/>[app.py]"]
  node_template["Interface template<br/>[index.html]"]
  node_video_route["2D feed route<br/>[app.py]"]
  node_pose_stream_route["3D feed route<br/>[app.py]"]
  node_snapshot_route["3D snapshot route<br/>[app.py]"]
  node_camera_route["Camera selection route<br/>[app.py]"]
  node_style["Page styling<br/>[style.css]"]
end

subgraph group_processing["Pose processing"]
  node_pose["MediaPipe Pose<br/>[app.py]"]
  node_frame_generator["2D frame generator<br/>[app.py]"]
  node_pose_generator["3D pose generator<br/>[app.py]"]
  node_plot_renderer["3D plot rendering<br/>[app.py]"]
end

subgraph group_capture["Capture and rendering"]
  node_camera["Camera manager<br/>[app.py]"]
end

node_browser(("Browser"))
node_camera_device(("Camera device"))

node_browser -->|"requests page"| node_index_route
node_index_route -->|"renders"| node_template
node_template -->|"uses styling"| node_style
node_browser -->|"requests stream"| node_video_route
node_video_route -->|"starts generator"| node_frame_generator
node_browser -->|"requests stream"| node_pose_stream_route
node_pose_stream_route -->|"starts generator"| node_pose_generator
node_browser -->|"requests plot"| node_snapshot_route
node_snapshot_route -->|"renders snapshot"| node_plot_renderer
node_browser -->|"selects camera"| node_camera_route
node_camera_route -->|"updates selection"| node_camera
node_frame_generator -->|"gets frames"| node_camera
node_pose_generator -->|"gets frames"| node_camera
node_snapshot_route -->|"gets frame"| node_camera
node_camera -->|"captures"| node_camera_device
node_frame_generator -->|"estimates landmarks"| node_pose
node_pose_generator -->|"estimates landmarks"| node_pose
node_snapshot_route -->|"estimates landmarks"| node_pose
node_pose_generator -->|"draws 3D pose"| node_plot_renderer
node_snapshot_route -->|"draws 3D pose"| node_plot_renderer
node_frame_generator -->|"streams annotated frames"| node_browser
node_pose_generator -->|"streams plot frames"| node_browser
node_snapshot_route -->|"returns encoded plot"| node_browser
node_camera_route -->|"returns status"| node_browser

click node_index_route "https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py"
click node_template "https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/templates/index.html"
click node_video_route "https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py"
click node_pose_stream_route "https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py"
click node_snapshot_route "https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py"
click node_camera_route "https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py"
click node_camera "https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py"
click node_pose "https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py"
click node_frame_generator "https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py"
click node_pose_generator "https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py"
click node_plot_renderer "https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py"
click node_style "https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/static/style.css"

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_index_route,node_template,node_video_route,node_pose_stream_route,node_snapshot_route,node_camera_route,node_style,node_browser toneBlue
class node_pose,node_frame_generator,node_pose_generator,node_plot_renderer toneAmber
class node_camera toneMint
class node_camera_device toneIndigo
```

## Components

### Web interface

- [Page route](https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py): `app.py`
- [Interface template](https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/templates/index.html): `templates/index.html`
- [2D feed route](https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py): `app.py`
- [3D feed route](https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py): `app.py`
- [3D snapshot route](https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py): `app.py`
- [Camera selection route](https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py): `app.py`
- [Page styling](https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/static/style.css): `static/style.css`

### Pose processing

- [MediaPipe Pose](https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py): `app.py`
- [2D frame generator](https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py): `app.py`
- [3D pose generator](https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py): `app.py`
- [3D plot rendering](https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py): `app.py`

### Capture and rendering

- [Camera manager](https://github.com/christian7777777777/deteccion_movimiento_3d_mediapipe/blob/main/app.py): `app.py`

### Other components

- **Browser**
- **Camera device**

## Connections

- Browser → Page route: requests page
- Page route → Interface template: renders
- Interface template → Page styling: uses styling
- Browser → 2D feed route: requests stream
- 2D feed route → 2D frame generator: starts generator
- Browser → 3D feed route: requests stream
- 3D feed route → 3D pose generator: starts generator
- Browser → 3D snapshot route: requests plot
- 3D snapshot route → 3D plot rendering: renders snapshot
- Browser → Camera selection route: selects camera
- Camera selection route → Camera manager: updates selection
- 2D frame generator → Camera manager: gets frames
- 3D pose generator → Camera manager: gets frames
- 3D snapshot route → Camera manager: gets frame
- Camera manager → Camera device: captures
- 2D frame generator → MediaPipe Pose: estimates landmarks
- 3D pose generator → MediaPipe Pose: estimates landmarks
- 3D snapshot route → MediaPipe Pose: estimates landmarks
- 3D pose generator → 3D plot rendering: draws 3D pose
- 3D snapshot route → 3D plot rendering: draws 3D pose
- 2D frame generator → Browser: streams annotated frames
- 3D pose generator → Browser: streams plot frames
- 3D snapshot route → Browser: returns encoded plot
- Camera selection route → Browser: returns status