# aksharaagarwal21/posturevision architecture

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

- Interactive diagram: https://gitdiagram.com/aksharaagarwal21/posturevision
- Repository: https://github.com/aksharaagarwal21/posturevision

## Overview

PostureVision is a browser-based workout planner and webcam coach. Users configure or choose a plan, train through free practice or guided sets, and review saved results. The guided runtime sends webcam pose landmarks into session analysis for rep counting and form feedback, while the runner manages sets and rests; workout results feed history. The README documents additional capabilities such as exercise guides, voice cues, and install support. Edges reflect shown imports/calls or README statements; unshown internal wiring is omitted.

Main entry points: [`src/components/WorkoutPlayer.jsx`](https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/WorkoutPlayer.jsx) (Guided player), [`src/App.jsx`](https://github.com/aksharaagarwal21/posturevision/blob/master/src/App.jsx) (App navigation), [`src/components/PlanBuilder.jsx`](https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/PlanBuilder.jsx) (Plan builder), [`src/components/WebcamView.jsx`](https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/WebcamView.jsx) (Webcam capture)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_planning["Workout planning"]
  node_planner["Plan builder<br/>[PlanBuilder.jsx]"]
  node_planlogic["Plan templates<br/>[workoutPlan.js]"]
  node_catalog["Exercise catalog<br/>[exercises.js]"]
  node_calories["Calorie estimates<br/>[calories.js]"]
end

subgraph group_training["Live training"]
  node_practice["Free practice<br/>[WorkoutView.jsx]"]
  node_guided["Guided player<br/>[WorkoutPlayer.jsx]"]
  node_runner["Workout runner<br/>[workoutRunner.js]"]
  node_camera["Webcam capture<br/>[WebcamView.jsx]"]
  node_overlay["Video feedback overlay<br/>[overlay.js]"]
  node_voice["Voice coach<br/>[voiceCoach.js]"]
  node_announcer["Workout announcements"]
end

subgraph group_analysis["Pose analysis"]
  node_detector["Pose detector<br/>[poseDetector.js]"]
  node_session["Workout session<br/>[workoutSession.js]"]
  node_metrics["Pose metrics<br/>[poseMetrics.js]"]
  node_counter["Rep counter<br/>[repCounter.js]"]
  node_form["Form analysis<br/>[postureAnalyzer.js]"]
  node_classifier["Trained classifier<br/>[poseClassifier.js]"]
end

subgraph group_records["Results and history"]
  node_history[("Workout history<br/>[history.js]")]
  node_summary["Workout summary<br/>[WorkoutSummary.jsx]"]
  node_historyview["History view<br/>[HistoryView.jsx]"]
  node_stats["History statistics<br/>[StatsPanel.jsx]"]
end

subgraph group_guides["Guides and install"]
  node_guides["Exercise guides<br/>[exerciseGuides.js]"]
  node_demo["Animated demos<br/>[DemoFigure.jsx]"]
  node_install["Install prompt<br/>[installPrompt.js]"]
  node_installui["Install banner<br/>[InstallBanner.jsx]"]
end

node_user(("User"))
node_app["App navigation<br/>[App.jsx]"]
node_browser(("Browser camera and speech"))

node_user -->|"chooses workflow"| node_app
node_app -->|"opens plan"| node_planner
node_app -->|"opens practice"| node_practice
node_app -->|"opens history"| node_historyview
node_planner -->|"builds plan"| node_planlogic
node_planner -->|"saves plans"| node_history
node_planner -->|"selects exercises"| node_catalog
node_planlogic -->|"reads definitions"| node_catalog
node_planlogic -->|"estimates calories"| node_calories
node_planner -->|"starts plan"| node_guided
node_guided -->|"runs plan"| node_runner
node_guided -->|"renders camera"| node_camera
node_camera -->|"requests video"| node_browser
node_camera -->|"detects pose"| node_detector
node_camera -.->|"processes frames"| node_session
node_session -->|"computes metrics"| node_metrics
node_session -->|"counts reps"| node_counter
node_session -->|"checks form"| node_form
node_session -->|"classifies poses"| node_classifier
node_guided -->|"loads trained model"| node_classifier
node_camera -->|"draws feedback"| node_overlay
node_guided -->|"coaches reps"| node_voice
node_guided -->|"announces sets"| node_announcer
node_guided -->|"shows steps"| node_guides
node_guided -->|"shows demos"| node_demo
node_demo -->|"uses exercise data"| node_catalog
node_app -->|"loads and saves results"| node_history
node_app -->|"shows completion"| node_summary
node_historyview -->|"reads records"| node_history
node_historyview -->|"shows past workout"| node_summary
node_historyview -.->|"presents totals"| node_stats
node_app -->|"shows install offer"| node_installui
node_installui -->|"checks prompt"| node_install
node_install -->|"captures install event"| node_browser

click node_app "https://github.com/aksharaagarwal21/posturevision/blob/master/src/App.jsx"
click node_planner "https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/PlanBuilder.jsx"
click node_planlogic "https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/workoutPlan.js"
click node_catalog "https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/exercises.js"
click node_practice "https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/WorkoutView.jsx"
click node_guided "https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/WorkoutPlayer.jsx"
click node_runner "https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/workoutRunner.js"
click node_camera "https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/WebcamView.jsx"
click node_detector "https://github.com/aksharaagarwal21/posturevision/blob/master/src/pose/poseDetector.js"
click node_session "https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/workoutSession.js"
click node_metrics "https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/poseMetrics.js"
click node_counter "https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/repCounter.js"
click node_form "https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/postureAnalyzer.js"
click node_classifier "https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/poseClassifier.js"
click node_overlay "https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/overlay.js"
click node_voice "https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/voiceCoach.js"
click node_announcer "https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/workoutAnnouncer.js"
click node_calories "https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/calories.js"
click node_history "https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/history.js"
click node_summary "https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/WorkoutSummary.jsx"
click node_historyview "https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/HistoryView.jsx"
click node_stats "https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/StatsPanel.jsx"
click node_guides "https://github.com/aksharaagarwal21/posturevision/blob/master/src/content/exerciseGuides.js"
click node_demo "https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/DemoFigure.jsx"
click node_install "https://github.com/aksharaagarwal21/posturevision/blob/master/src/pwa/installPrompt.js"
click node_installui "https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/InstallBanner.jsx"

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_planner,node_planlogic,node_catalog,node_calories,node_user,node_browser toneBlue
class node_practice,node_guided,node_runner,node_camera,node_overlay,node_voice,node_announcer toneAmber
class node_detector,node_session,node_metrics,node_counter,node_form,node_classifier toneMint
class node_history,node_summary,node_historyview,node_stats toneRose
class node_guides,node_demo,node_install,node_installui toneIndigo
class node_app toneTeal
```

## Components

### Workout planning

- [Plan builder](https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/PlanBuilder.jsx): `src/components/PlanBuilder.jsx`
- [Plan templates](https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/workoutPlan.js): `src/engine/workoutPlan.js`
- [Exercise catalog](https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/exercises.js): `src/engine/exercises.js`
- [Calorie estimates](https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/calories.js): `src/engine/calories.js`

### Live training

- [Free practice](https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/WorkoutView.jsx): `src/components/WorkoutView.jsx`
- [Guided player](https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/WorkoutPlayer.jsx): `src/components/WorkoutPlayer.jsx`
- [Workout runner](https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/workoutRunner.js): `src/engine/workoutRunner.js`
- [Webcam capture](https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/WebcamView.jsx): `src/components/WebcamView.jsx`
- [Video feedback overlay](https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/overlay.js): `src/components/overlay.js`
- [Voice coach](https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/voiceCoach.js): `src/engine/voiceCoach.js`
- [Workout announcements](https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/workoutAnnouncer.js): `src/engine/workoutAnnouncer.js`

### Pose analysis

- [Pose detector](https://github.com/aksharaagarwal21/posturevision/blob/master/src/pose/poseDetector.js): `src/pose/poseDetector.js`
- [Workout session](https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/workoutSession.js): `src/engine/workoutSession.js`
- [Pose metrics](https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/poseMetrics.js): `src/engine/poseMetrics.js`
- [Rep counter](https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/repCounter.js): `src/engine/repCounter.js`
- [Form analysis](https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/postureAnalyzer.js): `src/engine/postureAnalyzer.js`
- [Trained classifier](https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/poseClassifier.js): `src/engine/poseClassifier.js`

### Results and history

- [Workout history](https://github.com/aksharaagarwal21/posturevision/blob/master/src/engine/history.js): `src/engine/history.js`
- [Workout summary](https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/WorkoutSummary.jsx): `src/components/WorkoutSummary.jsx`
- [History view](https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/HistoryView.jsx): `src/components/HistoryView.jsx`
- [History statistics](https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/StatsPanel.jsx): `src/components/StatsPanel.jsx`

### Guides and install

- [Exercise guides](https://github.com/aksharaagarwal21/posturevision/blob/master/src/content/exerciseGuides.js): `src/content/exerciseGuides.js`
- [Animated demos](https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/DemoFigure.jsx): `src/components/DemoFigure.jsx`
- [Install prompt](https://github.com/aksharaagarwal21/posturevision/blob/master/src/pwa/installPrompt.js): `src/pwa/installPrompt.js`
- [Install banner](https://github.com/aksharaagarwal21/posturevision/blob/master/src/components/InstallBanner.jsx): `src/components/InstallBanner.jsx`

### Other components

- **User**
- [App navigation](https://github.com/aksharaagarwal21/posturevision/blob/master/src/App.jsx): `src/App.jsx`
- **Browser camera and speech**

## Connections

- User → App navigation: chooses workflow (evidence: `src/App.jsx`)
- App navigation → Plan builder: opens plan (evidence: `src/App.jsx`)
- App navigation → Free practice: opens practice (evidence: `src/App.jsx`)
- App navigation → History view: opens history (evidence: `src/App.jsx`)
- Plan builder → Plan templates: builds plan (evidence: `src/components/PlanBuilder.jsx`)
- Plan builder → Workout history: saves plans (evidence: `src/components/PlanBuilder.jsx`)
- Plan builder → Exercise catalog: selects exercises (evidence: `src/components/PlanBuilder.jsx`)
- Plan templates → Exercise catalog: reads definitions (evidence: `src/engine/workoutPlan.js`)
- Plan templates → Calorie estimates: estimates calories (evidence: `src/engine/workoutPlan.js`)
- Plan builder → Guided player: starts plan (evidence: `src/components/PlanBuilder.jsx`)
- Guided player → Workout runner: runs plan (evidence: `src/engine/workoutRunner.js`)
- Guided player → Webcam capture: renders camera (evidence: `src/components/WorkoutPlayer.jsx`)
- Webcam capture → Browser camera and speech: requests video (evidence: `src/components/WebcamView.jsx`)
- Webcam capture → Pose detector: detects pose (evidence: `src/components/WebcamView.jsx`)
- Webcam capture → Workout session: processes frames
- Workout session → Pose metrics: computes metrics (evidence: `src/engine/workoutSession.js`)
- Workout session → Rep counter: counts reps (evidence: `src/engine/workoutSession.js`)
- Workout session → Form analysis: checks form (evidence: `src/engine/workoutSession.js`)
- Workout session → Trained classifier: classifies poses (evidence: `src/engine/workoutSession.js`)
- Guided player → Trained classifier: loads trained model (evidence: `src/components/WorkoutPlayer.jsx`)
- Webcam capture → Video feedback overlay: draws feedback (evidence: `src/components/WebcamView.jsx`)
- Guided player → Voice coach: coaches reps (evidence: `src/components/WorkoutPlayer.jsx`)
- Guided player → Workout announcements: announces sets (evidence: `src/components/WorkoutPlayer.jsx`)
- Guided player → Exercise guides: shows steps (evidence: `src/components/WorkoutPlayer.jsx`)
- Guided player → Animated demos: shows demos (evidence: `src/components/WorkoutPlayer.jsx`)
- Animated demos → Exercise catalog: uses exercise data (evidence: `src/components/DemoFigure.jsx`)
- App navigation → Workout history: loads and saves results (evidence: `src/App.jsx`)
- App navigation → Workout summary: shows completion (evidence: `src/App.jsx`)
- History view → Workout history: reads records (evidence: `src/components/HistoryView.jsx`)
- History view → Workout summary: shows past workout (evidence: `src/components/HistoryView.jsx`)
- History view → History statistics: presents totals
- App navigation → Install banner: shows install offer (evidence: `src/App.jsx`)
- Install banner → Install prompt: checks prompt (evidence: `src/components/InstallBanner.jsx`)
- Install prompt → Browser camera and speech: captures install event (evidence: `src/pwa/installPrompt.js`)