Advanced React-based frontend for speech-to-speech and text-to-speech translation with comprehensive regional language support.
Components
App.tsx
Main application component featuring:
Dual Mode Interface: Toggle between text and speech modes
Advanced Speech Recognition: Real-time speech-to-text with interim results
Voice Selection: Multiple voice options for each language
Auto-Translation: Automatic translation after speech input
Regional Language Support: Native script rendering and pronunciation
Error Handling: Comprehensive error management for speech APIs
SpeechRecognition.tsx
Speech recognition component with:
Web Speech API Integration: Cross-browser speech recognition
Language-Specific Recognition: Optimized for each supported language
Real-time Feedback: Visual indicators for listening state
Error Handling: Detailed error messages for different failure modes
Accessibility: Keyboard navigation and screen reader support
VoiceSelector.tsx
Voice selection component featuring:
System Voice Detection: Automatic discovery of available voices
API Voice Integration: Additional voices from translation service
Language Filtering: Shows only relevant voices for selected language
Voice Quality Indicators: Premium, neural, and standard voice types
Accent Support: Multiple accents for major languages
LanguageSelector.tsx
Enhanced language selector with:
Regional Grouping: Languages organized by geographic region
Native Script Display: Shows language names in native scripts
Speech Capability Indicators: Visual indicators for speech support
Accessibility Features: Proper labeling and keyboard navigation
Features
Speech-to-Speech Translation
Real-time Recognition: Live speech recognition with interim results
Auto-Translation: Automatic translation after speech completion
Native Pronunciation: High-quality text-to-speech with regional accents
Voice Customization: Multiple voice options for input and output languages
Regional Language Support
Indian Languages: Full support for Telugu (తెలుగు), Marathi (मराठी), Tamil (தமிழ்), Hindi (हिन्दी), Bengali (বাংলা), Gujarati (ગુજરાતી), Kannada (ಕನ್ನಡ), Malayalam (മലയാളം), Punjabi (ਪੰਜਾਬੀ), Urdu (اردو)
Native Scripts: Proper rendering of Devanagari, Telugu, Tamil, Bengali, Arabic, and other scripts
Regional Accents: Authentic pronunciation for regional languages
Cultural Context: Language-appropriate voice selection
Accessibility Features
Screen Reader Support: Full ARIA labeling and semantic HTML