# clssty/posture-detection-website architecture

> Architecture diagram of the GitHub repository clssty/posture-detection-website, 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/clssty/posture-detection-website
- Repository: https://github.com/clssty/posture-detection-website

## Overview

This repository is a posture-detection application: its main workflow is a user starting a browser posture check, the backend analyzing webcam frames and returning annotated video plus posture-angle classifications. Separate educational pages explain posture risks, corrective posture, measurement angles, and how to perform a check. A second, offline workflow extracts measurements from labeled videos and analyzes classification thresholds. The sampled source supports these boundaries, but not every page’s navigation or the full backend implementation, so uncertain links are omitted.

Main entry points: [`WebsiteBuild/src/App.tsx`](https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/App.tsx) (Route dispatcher), [`Backend/server.py`](https://github.com/clssty/posture-detection-website/blob/main/Backend/server.py) (FastAPI posture server), [`Backend/extract_dataset.py`](https://github.com/clssty/posture-detection-website/blob/main/Backend/extract_dataset.py) (Video measurement extraction), [`WebsiteBuild/src/pages/PostureCheck.tsx`](https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/pages/PostureCheck.tsx) (Posture check)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Website"]
  node_app["Route dispatcher<br/>[App.tsx]"]
  node_home["Home<br/>[Home.tsx]"]
end

subgraph group_live["Live Posture Check"]
  node_check["Posture check<br/>[PostureCheck.tsx]"]
  node_server["FastAPI posture server<br/>[server.py]"]
  node_state["Latest frame and data<br/>[server.py]"]
  node_angles["Angle calculations"]
end

subgraph group_education["Posture Education"]
  node_correct["Correct posture"]
  node_impact["Posture impacts"]
  node_angleinfo["Angle information"]
  node_guide["Check guide"]
end

subgraph group_offline["Dataset Analysis"]
  node_videos["Labeled video corpus"]
  node_extract["Video measurement extraction<br/>[extract_dataset.py]"]
  node_mputils["Pose utilities<br/>[mediapipe_utils.py]"]
  node_csv["Posture measurements"]
  node_threshold["Threshold analysis"]
  node_report["Threshold report"]
end

node_user(("Website visitor"))
node_camera(("Webcam"))
node_pose{{"MediaPipe Pose"}}

node_user -->|"opens"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_check
node_app -->|"routes"| node_correct
node_app -->|"routes"| node_impact
node_app -->|"routes"| node_angleinfo
node_app -->|"routes"| node_guide
node_user -->|"starts check"| node_check
node_check -->|"checks health; opens streams"| node_server
node_camera -->|"supplies frames"| node_server
node_server -->|"processes frames"| node_pose
node_server -->|"calculates angles"| node_angles
node_server -->|"updates latest values"| node_state
node_state -->|"provides latest values"| node_server
node_server -->|"streams video and JSON"| node_check
node_videos -->|"provides videos"| node_extract
node_extract -->|"creates pose; extracts landmarks"| node_mputils
node_extract -->|"calculates measurements"| node_angles
node_extract -->|"writes measurements"| node_csv
node_csv -->|"provides measurements"| node_threshold
node_threshold -->|"writes analysis"| node_report

click node_app "https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/App.tsx"
click node_home "https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/pages/Home.tsx"
click node_check "https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/pages/PostureCheck.tsx"
click node_server "https://github.com/clssty/posture-detection-website/blob/main/Backend/server.py"
click node_state "https://github.com/clssty/posture-detection-website/blob/main/Backend/server.py"
click node_angles "https://github.com/clssty/posture-detection-website/blob/main/Backend/utils/angle_calculator.py"
click node_correct "https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/pages/CorrectBodyPosture.tsx"
click node_impact "https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/pages/ImpactOfBadPosture.tsx"
click node_angleinfo "https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/pages/AngleInformation.tsx"
click node_guide "https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/pages/GuideForPostureCheck.tsx"
click node_videos "https://github.com/clssty/posture-detection-website/tree/main/Backend/dataset"
click node_extract "https://github.com/clssty/posture-detection-website/blob/main/Backend/extract_dataset.py"
click node_mputils "https://github.com/clssty/posture-detection-website/blob/main/Backend/utils/mediapipe_utils.py"
click node_csv "https://github.com/clssty/posture-detection-website/blob/main/Backend/output/posture_dataset.csv"
click node_threshold "https://github.com/clssty/posture-detection-website/blob/main/Backend/analyze_threshold.py"
click node_report "https://github.com/clssty/posture-detection-website/blob/main/Backend/output/threshold_analysis.txt"

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_app,node_home toneBlue
class node_check,node_server,node_state,node_angles toneAmber
class node_correct,node_impact,node_angleinfo,node_guide,node_pose toneMint
class node_videos,node_extract,node_mputils,node_csv,node_threshold,node_report toneRose
class node_user,node_camera toneIndigo
```

## Components

### Website

- [Route dispatcher](https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/App.tsx): `WebsiteBuild/src/App.tsx`
- [Home](https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/pages/Home.tsx): `WebsiteBuild/src/pages/Home.tsx`

### Live Posture Check

- [Posture check](https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/pages/PostureCheck.tsx): `WebsiteBuild/src/pages/PostureCheck.tsx`
- [FastAPI posture server](https://github.com/clssty/posture-detection-website/blob/main/Backend/server.py): `Backend/server.py`
- [Latest frame and data](https://github.com/clssty/posture-detection-website/blob/main/Backend/server.py): `Backend/server.py`
- [Angle calculations](https://github.com/clssty/posture-detection-website/blob/main/Backend/utils/angle_calculator.py): `Backend/utils/angle_calculator.py`

### Posture Education

- [Correct posture](https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/pages/CorrectBodyPosture.tsx): `WebsiteBuild/src/pages/CorrectBodyPosture.tsx`
- [Posture impacts](https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/pages/ImpactOfBadPosture.tsx): `WebsiteBuild/src/pages/ImpactOfBadPosture.tsx`
- [Angle information](https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/pages/AngleInformation.tsx): `WebsiteBuild/src/pages/AngleInformation.tsx`
- [Check guide](https://github.com/clssty/posture-detection-website/blob/main/WebsiteBuild/src/pages/GuideForPostureCheck.tsx): `WebsiteBuild/src/pages/GuideForPostureCheck.tsx`

### Dataset Analysis

- [Labeled video corpus](https://github.com/clssty/posture-detection-website/tree/main/Backend/dataset): `Backend/dataset`
- [Video measurement extraction](https://github.com/clssty/posture-detection-website/blob/main/Backend/extract_dataset.py): `Backend/extract_dataset.py`
- [Pose utilities](https://github.com/clssty/posture-detection-website/blob/main/Backend/utils/mediapipe_utils.py): `Backend/utils/mediapipe_utils.py`
- [Posture measurements](https://github.com/clssty/posture-detection-website/blob/main/Backend/output/posture_dataset.csv): `Backend/output/posture_dataset.csv`
- [Threshold analysis](https://github.com/clssty/posture-detection-website/blob/main/Backend/analyze_threshold.py): `Backend/analyze_threshold.py`
- [Threshold report](https://github.com/clssty/posture-detection-website/blob/main/Backend/output/threshold_analysis.txt): `Backend/output/threshold_analysis.txt`

### Other components

- **Website visitor**
- **Webcam**
- **MediaPipe Pose**

## Connections

- Website visitor → Route dispatcher: opens
- Route dispatcher → Home: routes
- Route dispatcher → Posture check: routes
- Route dispatcher → Correct posture: routes
- Route dispatcher → Posture impacts: routes
- Route dispatcher → Angle information: routes
- Route dispatcher → Check guide: routes
- Website visitor → Posture check: starts check
- Posture check → FastAPI posture server: checks health; opens streams
- Webcam → FastAPI posture server: supplies frames
- FastAPI posture server → MediaPipe Pose: processes frames
- FastAPI posture server → Angle calculations: calculates angles
- FastAPI posture server → Latest frame and data: updates latest values
- Latest frame and data → FastAPI posture server: provides latest values
- FastAPI posture server → Posture check: streams video and JSON
- Labeled video corpus → Video measurement extraction: provides videos
- Video measurement extraction → Pose utilities: creates pose; extracts landmarks
- Video measurement extraction → Angle calculations: calculates measurements
- Video measurement extraction → Posture measurements: writes measurements
- Posture measurements → Threshold analysis: provides measurements
- Threshold analysis → Threshold report: writes analysis