How aaguilar1892/voicebridge works
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: App.jsx React app · app.py Flask API · Practice.jsx Practice menu · FlashcardsPage.jsx Flashcards
Components 21
Web application
- React app
voicebridge-app/client/src/App.jsx - ASL translate
voicebridge-app/client/src/assets/components/Translate.jsx - Home and about
voicebridge-app/client/src/assets/components/Hero.jsx
Recognition service
- Flask API
voicebridge-app/server/app.py - Gesture landmarks
voicebridge-app/server/gesture_recognition.py - Letter classifier
voicebridge-app/server/svm_classifier.py - Word model
voicebridge-app/server/model.p - Alphabet model
voicebridge-app/server/model_training/alphabet_svm_pipeline.pkl
Learning modules
- Practice menu
voicebridge-app/client/src/assets/components/Practice.jsx - Tutorial
voicebridge-app/client/src/assets/components/Tutorial.jsx - Flashcards
voicebridge-app/client/src/assets/components/FlashcardsPage.jsx - Alphabet cards
voicebridge-app/client/src/assets/components/Alphabet.jsx - Basic word cards
voicebridge-app/client/src/assets/components/BasicWords.jsx - Exercises
voicebridge-app/client/src/assets/components/ExercisesPage.jsx
Accessibility and accounts
- Speech page
voicebridge-app/client/src/assets/components/Speech.jsx - TTS provider
voicebridge-app/client/src/assets/context/TTSProvider.jsx - Login and signup
voicebridge-app/client/src/assets/components/Login.jsx - Firebase integration
voicebridge-app/client/src/assets/components/firebase.jsx
Other components
- Learner
- Browser speech
- Webcam
Connections 21
- 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