# aaguilar1892/voicebridge architecture

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

## Overview

VoiceBridge is a web app for ASL recognition and learning. Its central workflow is webcam capture, server-side gesture processing and classification, then a displayed result with optional speech feedback. The React app also provides tutorial, flashcard, exercise, and account pages. The README documents these capabilities; sampled backend code confirms Flask camera endpoints and the recognition/classification calls, while the Translate component’s request wiring was not sampled, so that connection is shown only at the documented app-to-service level.

Main entry points: [`voicebridge-app/client/src/App.jsx`](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/App.jsx) (React app), [`voicebridge-app/server/app.py`](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/server/app.py) (Flask API), [`voicebridge-app/client/src/assets/components/Practice.jsx`](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/Practice.jsx) (Practice menu), [`voicebridge-app/client/src/assets/components/FlashcardsPage.jsx`](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/FlashcardsPage.jsx) (Flashcards)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web application"]
  node_client["React app<br/>[App.jsx]"]
  node_translate["ASL translate<br/>[Translate.jsx]"]
  node_hero["Home and about<br/>[Hero.jsx]"]
end

subgraph group_recognition["Recognition service"]
  node_server["Flask API<br/>[app.py]"]
  node_gesture["Gesture landmarks"]
  node_svm["Letter classifier<br/>[svm_classifier.py]"]
  node_wordmodel["Word model<br/>[model.p]"]
  node_lettermodel["Alphabet model"]
end

subgraph group_learning["Learning modules"]
  node_practice["Practice menu<br/>[Practice.jsx]"]
  node_tutorial["Tutorial<br/>[Tutorial.jsx]"]
  node_flashcards["Flashcards<br/>[FlashcardsPage.jsx]"]
  node_alphabet["Alphabet cards<br/>[Alphabet.jsx]"]
  node_basicwords["Basic word cards<br/>[BasicWords.jsx]"]
  node_exercises["Exercises<br/>[ExercisesPage.jsx]"]
end

subgraph group_accessibility["Accessibility and accounts"]
  node_speech["Speech page<br/>[Speech.jsx]"]
  node_tts["TTS provider<br/>[TTSProvider.jsx]"]
  node_login["Login and signup<br/>[Login.jsx]"]
  node_firebase["Firebase integration<br/>[firebase.jsx]"]
end

node_user(("Learner"))
node_browser{{"Browser speech"}}
node_camera{{"Webcam"}}

node_user -->|"uses"| node_client
node_client -->|"routes to"| node_translate
node_client -->|"routes to"| node_practice
node_client -->|"routes to"| node_hero
node_client -->|"routes to"| node_speech
node_client -->|"routes to"| node_login
node_practice -->|"opens"| node_tutorial
node_practice -->|"opens"| node_flashcards
node_flashcards -->|"offers"| node_alphabet
node_flashcards -->|"offers"| node_basicwords
node_practice -->|"offers"| node_exercises
node_client -->|"provides"| node_tts
node_tts -->|"uses"| node_browser
node_login -.->|"integrates"| node_firebase
node_translate -->|"requests recognition"| node_server
node_camera -->|"supplies frames"| node_server
node_server -->|"processes frames"| node_gesture
node_server -->|"requests letter prediction"| node_svm
node_svm -->|"loads model"| node_lettermodel
node_server -->|"predicts words"| node_wordmodel
node_server -->|"returns results"| node_translate

click node_client "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/App.jsx"
click node_translate "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/Translate.jsx"
click node_hero "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/Hero.jsx"
click node_practice "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/Practice.jsx"
click node_tutorial "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/Tutorial.jsx"
click node_flashcards "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/FlashcardsPage.jsx"
click node_alphabet "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/Alphabet.jsx"
click node_basicwords "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/BasicWords.jsx"
click node_exercises "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/ExercisesPage.jsx"
click node_speech "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/Speech.jsx"
click node_tts "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/context/TTSProvider.jsx"
click node_login "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/Login.jsx"
click node_firebase "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/firebase.jsx"
click node_server "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/server/app.py"
click node_gesture "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/server/gesture_recognition.py"
click node_svm "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/server/svm_classifier.py"
click node_wordmodel "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/server/model.p"
click node_lettermodel "https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/server/model_training/alphabet_svm_pipeline.pkl"

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_client,node_translate,node_hero,node_browser toneBlue
class node_server,node_gesture,node_svm,node_wordmodel,node_lettermodel toneAmber
class node_practice,node_tutorial,node_flashcards,node_alphabet,node_basicwords,node_exercises toneMint
class node_speech,node_tts,node_login,node_firebase toneRose
class node_user,node_camera toneIndigo
```

## Components

### Web application

- [React app](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/App.jsx): `voicebridge-app/client/src/App.jsx`
- [ASL translate](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/Translate.jsx): `voicebridge-app/client/src/assets/components/Translate.jsx`
- [Home and about](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/Hero.jsx): `voicebridge-app/client/src/assets/components/Hero.jsx`

### Recognition service

- [Flask API](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/server/app.py): `voicebridge-app/server/app.py`
- [Gesture landmarks](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/server/gesture_recognition.py): `voicebridge-app/server/gesture_recognition.py`
- [Letter classifier](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/server/svm_classifier.py): `voicebridge-app/server/svm_classifier.py`
- [Word model](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/server/model.p): `voicebridge-app/server/model.p`
- [Alphabet model](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/server/model_training/alphabet_svm_pipeline.pkl): `voicebridge-app/server/model_training/alphabet_svm_pipeline.pkl`

### Learning modules

- [Practice menu](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/Practice.jsx): `voicebridge-app/client/src/assets/components/Practice.jsx`
- [Tutorial](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/Tutorial.jsx): `voicebridge-app/client/src/assets/components/Tutorial.jsx`
- [Flashcards](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/FlashcardsPage.jsx): `voicebridge-app/client/src/assets/components/FlashcardsPage.jsx`
- [Alphabet cards](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/Alphabet.jsx): `voicebridge-app/client/src/assets/components/Alphabet.jsx`
- [Basic word cards](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/BasicWords.jsx): `voicebridge-app/client/src/assets/components/BasicWords.jsx`
- [Exercises](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/ExercisesPage.jsx): `voicebridge-app/client/src/assets/components/ExercisesPage.jsx`

### Accessibility and accounts

- [Speech page](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/Speech.jsx): `voicebridge-app/client/src/assets/components/Speech.jsx`
- [TTS provider](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/context/TTSProvider.jsx): `voicebridge-app/client/src/assets/context/TTSProvider.jsx`
- [Login and signup](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/Login.jsx): `voicebridge-app/client/src/assets/components/Login.jsx`
- [Firebase integration](https://github.com/aaguilar1892/voicebridge/blob/main/voicebridge-app/client/src/assets/components/firebase.jsx): `voicebridge-app/client/src/assets/components/firebase.jsx`

### Other components

- **Learner**
- **Browser speech**
- **Webcam**

## Connections

- Learner → React app: uses
- React app → ASL translate: routes to
- React app → Practice menu: routes to
- React app → Home and about: routes to
- React app → Speech page: routes to
- React app → Login and signup: routes to
- Practice menu → Tutorial: opens
- Practice menu → Flashcards: opens
- Flashcards → Alphabet cards: offers
- Flashcards → Basic word cards: offers
- Practice menu → Exercises: offers
- React app → TTS provider: provides
- TTS provider → Browser speech: uses
- Login and signup → Firebase integration: integrates
- ASL translate → Flask API: requests recognition
- Webcam → Flask API: supplies frames
- Flask API → Gesture landmarks: processes frames
- Flask API → Letter classifier: requests letter prediction
- Letter classifier → Alphabet model: loads model
- Flask API → Word model: predicts words
- Flask API → ASL translate: returns results