\n {/* Header */}\n

\n 🎤 Advanced Speech & Text Translator\n

\n Speak or type in any language and get instant translations with native pronunciation\n

\n \n {/* Mode Toggle */}\n

\n setSpeechMode(\"text\")}\n className={`px-6 py-2 rounded-lg font-medium transition-colors ${\n speechMode === \"text\"\n ? \"bg-blue-500 text-white\"\n : \"bg-gray-200 text-gray-700 hover:bg-gray-300\"\n }`}\n >\n 📝 Text Mode\n \n setSpeechMode(\"speech\")}\n className={`px-6 py-2 rounded-lg font-medium transition-colors ${\n speechMode === \"speech\"\n ? \"bg-blue-500 text-white\"\n : \"bg-gray-200 text-gray-700 hover:bg-gray-300\"\n }`}\n >\n 🎤 Speech Mode\n \n

\n\n {/* Error Message */}\n {error && (\n

⚠️

{error}

\n )}\n\n {/* Language Selectors */}\n

\n \n \n

\n \n ⇄\n \n

\n \n lang.code !== \"auto\") : languages.filter(lang => lang.code !== \"auto\")}\n value={toLanguage}\n onChange={setToLanguage}\n label=\"To\"\n disabled={isLoading}\n />\n

\n\n {/* Voice Selectors (Speech Mode Only) */}\n {speechMode === \"speech\" && (\n

\n \n \n

\n )}\n\n {/* Translation Interface */}\n

\n {/* Input Section */}\n

\n {speechMode === \"speech\" ? \"Speech Input\" : \"Original Text\"}\n {detectedLanguage && (\n \n (Detected: {detectedLanguage})\n \n )}\n

\n {speechMode === \"speech\" && (\n \n )}\n speak(inputText, fromLanguage, \"input\", selectedInputVoice)}\n disabled={!inputText.trim() || isSpeaking === \"input\"}\n className=\"speaker-button p-2 text-blue-500 hover:text-blue-700 disabled:text-gray-400 disabled:cursor-not-allowed\"\n title=\"Listen to original text\"\n >\n {isSpeaking === \"input\" ? \"🔊\" : \"🔈\"}\n \n

\n \n setInputText(e.target.value)}\n onKeyDown={handleKeyPress}\n placeholder={speechMode === \"speech\" ? \"Click the microphone to speak or type here...\" : \"Enter text to translate...\"}\n className=\"w-full h-32 p-3 border border-gray-300 rounded-md resize-none focus:ring-blue-500 focus:border-blue-500\"\n disabled={isLoading}\n />\n \n {interimTranscript && (\n

\n Listening: {interimTranscript}\n

\n )}\n \n

\n {speechMode === \"speech\" ? \"Speak or type • Auto-translate enabled\" : \"Press Ctrl+Enter to translate\"}\n

\n \n Clear All\n \n translateText()}\n disabled={!inputText.trim() || isLoading}\n className=\"px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors flex items-center space-x-2\"\n >\n {isLoading &&

}\n {isLoading ? \"Translating...\" : \"Translate\"}\n \n

\n\n {/* Output Section */}\n

\n Translation\n

\n speak(translatedText, toLanguage, \"output\", selectedOutputVoice)}\n disabled={!translatedText.trim() || isSpeaking === \"output\"}\n className=\"speaker-button p-2 text-blue-500 hover:text-blue-700 disabled:text-gray-400 disabled:cursor-not-allowed\"\n title=\"Listen to translation\"\n >\n {isSpeaking === \"output\" ? \"🔊\" : \"🔈\"}\n \n copyToClipboard(translatedText)}\n disabled={!translatedText.trim()}\n className=\"p-2 text-gray-500 hover:text-gray-700 disabled:text-gray-400 disabled:cursor-not-allowed\"\n title=\"Copy translation\"\n >\n 📋\n \n

\n \n

\n {translatedText ? (\n

{translatedText}

\n ) : (\n

\n Translation will appear here...\n

\n )}\n

\n \n

\n {translatedText.length} characters\n

\n\n {/* Instructions */}\n

\n How to use:\n

Text Mode:

• Type or paste text in the input field
• Select source and target languages
• Click \"Translate\" or press Ctrl+Enter
• Use speaker icons to hear pronunciations

Speech Mode:

• Click the microphone and speak clearly
• Auto-translation happens after speech
• Select different voices for each language
• Supports 50+ languages with speech recognition

\n \n

🇮🇳 Regional Language Support:

\n Full support for Indian languages including Telugu (తెలుగు), Marathi (मराठी), Tamil (தமிழ்), \n Hindi (हिन्दी), Bengali (বাংলা), Gujarati (ગુજરાતી), Kannada (ಕನ್ನಡ), Malayalam (മലയാളം), \n Punjabi (ਪੰਜਾਬੀ), and Urdu (اردو) with native script and pronunciation.\n

\n );\n}",[],[192,199,206],{"_103":215,"_95":216,"_153":217,"_155":200,"_156":138,"_157":218,"_159":160,"_105":219,"_100":118,"_162":210,"_164":220,"_165":22,"_166":-5,"_167":221,"_98":222},"b2366520-37c7-11f0-8324-9e149126039e","LanguageSelector.tsx","5802a5b0-37c6-11f0-a080-9e149126039e",24,["D",1747999127635],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Language } from \"../../shared/types.ts\";\n\ninterface LanguageSelectorProps {\n languages: Language[];\n value: string;\n onChange: (value: string) => void;\n label: string;\n disabled?: boolean;\n showNativeNames?: boolean;\n showSpeechSupport?: boolean;\n}\n\nexport default function LanguageSelector({ \n languages, \n value, \n onChange, \n label, \n disabled = false,\n showNativeNames = true,\n showSpeechSupport = false\n}: LanguageSelectorProps) {\n // Group languages by region for better organization\n const groupedLanguages = languages.reduce((groups, lang) => {\n const region = lang.region || \"Other\";\n if (!groups[region]) {\n groups[region] = [];\n }\n groups[region].push(lang);\n return groups;\n }, {} as Record);\n\n const regionOrder = [\"Global\", \"India\", \"Asia\", \"Europe\", \"Middle East\", \"Southeast Asia\", \"Africa\", \"Other\"];\n\n return (\n

\n \n {label}\n {showSpeechSupport && (\n \n (🎤 = Speech supported)\n \n )}\n \n onChange(e.target.value)}\n disabled={disabled}\n className=\"px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed\"\n >\n {/* Auto-detect option first if present */}\n {languages.find(lang => lang.code === \"auto\") && (\n \n )}\n \n {/* Grouped languages */}\n {regionOrder.map(region => {\n const regionLanguages = groupedLanguages[region];\n if (!regionLanguages || regionLanguages.length === 0) return null;\n \n return (\n \n {regionLanguages\n .filter(lang => lang.code !== \"auto\")\n .sort((a, b) => a.name.localeCompare(b.name))\n .map((lang) => (\n \n ))}\n \n );\n })}\n \n \n {/* Language info */}\n {value && value !== \"auto\" && (\n

\n {(() => {\n const selectedLang = languages.find(lang => lang.code === value);\n if (!selectedLang) return null;\n \n const features = [];\n if (selectedLang.speechSupported) features.push(\"Speech\");\n if (selectedLang.recognitionSupported) features.push(\"Recognition\");\n if (selectedLang.script) features.push(`${selectedLang.script} script`);\n \n return features.length > 0 ? `Supports: ${features.join(\", \")}` : null;\n })()}\n

\n )}\n

\n );\n}",[],[192,199,216],{"_103":224,"_95":225,"_153":226,"_155":200,"_156":138,"_157":227,"_159":160,"_105":228,"_100":32,"_162":210,"_164":229,"_165":22,"_166":-5,"_167":230,"_98":231},"5f68d274-37c7-11f0-9903-9e149126039e","SpeechRecognition.tsx","5f68d346-37c7-11f0-9903-9e149126039e",21,["D",1747998988715],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Language, SpeechRecognitionResult } from \"../../shared/types.ts\";\n\ninterface SpeechRecognitionProps {\n language: string;\n onResult: (result: SpeechRecognitionResult) => void;\n onError: (error: string) => void;\n disabled?: boolean;\n continuous?: boolean;\n}\n\n// Extend the Window interface to include webkitSpeechRecognition\ndeclare global {\n interface Window {\n SpeechRecognition: any;\n webkitSpeechRecognition: any;\n }\n}\n\nexport default function SpeechRecognition({ \n language, \n onResult, \n onError, \n disabled = false,\n continuous = false \n}: SpeechRecognitionProps) {\n const [isListening, setIsListening] = useState(false);\n const [isSupported, setIsSupported] = useState(false);\n const recognitionRef = useRef(null);\n\n // Check if speech recognition is supported\n useEffect(() => {\n const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n setIsSupported(!!SpeechRecognition);\n }, []);\n\n // Initialize speech recognition\n const initializeRecognition = useCallback(() => {\n if (!isSupported) return null;\n\n const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n const recognition = new SpeechRecognition();\n\n recognition.continuous = continuous;\n recognition.interimResults = true;\n recognition.maxAlternatives = 1;\n recognition.lang = language === \"auto\" ? \"en-US\" : language;\n\n recognition.onstart = () => {\n setIsListening(true);\n };\n\n recognition.onend = () => {\n setIsListening(false);\n };\n\n recognition.onresult = (event: any) => {\n let finalTranscript = \"\";\n let interimTranscript = \"\";\n\n for (let i = event.resultIndex; i < event.results.length; i++) {\n const transcript = event.results[i][0].transcript;\n const confidence = event.results[i][0].confidence;\n\n if (event.results[i].isFinal) {\n finalTranscript += transcript;\n onResult({\n transcript: finalTranscript,\n confidence: confidence || 0.9,\n isFinal: true,\n language: recognition.lang\n });\n } else {\n interimTranscript += transcript;\n onResult({\n transcript: interimTranscript,\n confidence: confidence || 0.5,\n isFinal: false,\n language: recognition.lang\n });\n }\n }\n };\n\n recognition.onerror = (event: any) => {\n setIsListening(false);\n let errorMessage = \"Speech recognition error\";\n \n switch (event.error) {\n case \"no-speech\":\n errorMessage = \"No speech detected. Please try again.\";\n break;\n case \"audio-capture\":\n errorMessage = \"Microphone not accessible. Please check permissions.\";\n break;\n case \"not-allowed\":\n errorMessage = \"Microphone permission denied. Please allow microphone access.\";\n break;\n case \"network\":\n errorMessage = \"Network error. Please check your connection.\";\n break;\n case \"language-not-supported\":\n errorMessage = \"Language not supported for speech recognition.\";\n break;\n default:\n errorMessage = `Speech recognition error: ${event.error}`;\n }\n \n onError(errorMessage);\n };\n\n return recognition;\n }, [language, continuous, isSupported, onResult, onError]);\n\n // Start listening\n const startListening = useCallback(() => {\n if (!isSupported || disabled || isListening) return;\n\n try {\n const recognition = initializeRecognition();\n if (recognition) {\n recognitionRef.current = recognition;\n recognition.start();\n }\n } catch (error) {\n onError(\"Failed to start speech recognition\");\n }\n }, [isSupported, disabled, isListening, initializeRecognition, onError]);\n\n // Stop listening\n const stopListening = useCallback(() => {\n if (recognitionRef.current && isListening) {\n recognitionRef.current.stop();\n recognitionRef.current = null;\n }\n }, [isListening]);\n\n // Toggle listening\n const toggleListening = useCallback(() => {\n if (isListening) {\n stopListening();\n } else {\n startListening();\n }\n }, [isListening, startListening, stopListening]);\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n if (recognitionRef.current) {\n recognitionRef.current.stop();\n }\n };\n }, []);\n\n if (!isSupported) {\n return (\n

\n 🎤\n Speech recognition not supported\n

\n );\n }\n\n return (\n

\n \n {isListening ? (\n \n ) : (\n \n )}\n \n \n

\n \n {isListening ? \"Listening...\" : \"Click to speak\"}\n \n {isListening && (\n \n Speaking in {language === \"auto\" ? \"auto-detect\" : language}\n \n )}\n

\n );\n}",[],[192,199,225],{"_103":233,"_95":234,"_153":235,"_155":200,"_156":138,"_157":236,"_159":160,"_105":237,"_100":32,"_162":210,"_164":238,"_165":22,"_166":-5,"_167":239,"_98":240},"6c762390-37c7-11f0-9c3b-9e149126039e","VoiceSelector.tsx","6c762430-37c7-11f0-9c3b-9e149126039e",22,["D",1747999010613],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Voice } from \"../../shared/types.ts\";\n\ninterface VoiceSelectorProps {\n language: string;\n selectedVoice?: string;\n onVoiceChange: (voice: string) => void;\n disabled?: boolean;\n}\n\nexport default function VoiceSelector({ \n language, \n selectedVoice, \n onVoiceChange, \n disabled = false \n}: VoiceSelectorProps) {\n const [availableVoices, setAvailableVoices] = useState([]);\n const [systemVoices, setSystemVoices] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n\n // Load voices from API and system\n useEffect(() => {\n const loadVoices = async () => {\n setIsLoading(true);\n \n try {\n // Load voices from our API\n const response = await fetch(\"/api/voices\");\n const data = await response.json();\n setAvailableVoices(data.voices || []);\n\n // Load system voices\n const loadSystemVoices = () => {\n const voices = speechSynthesis.getVoices();\n setSystemVoices(voices);\n setIsLoading(false);\n };\n\n // Some browsers load voices asynchronously\n if (speechSynthesis.getVoices().length > 0) {\n loadSystemVoices();\n } else {\n speechSynthesis.onvoiceschanged = loadSystemVoices;\n }\n } catch (error) {\n console.error(\"Failed to load voices:\", error);\n setIsLoading(false);\n }\n };\n\n loadVoices();\n }, []);\n\n // Filter voices for the current language\n const getVoicesForLanguage = () => {\n if (language === \"auto\") return [];\n\n // Combine API voices and system voices\n const apiVoices = availableVoices.filter(voice => \n voice.lang.startsWith(language) || voice.lang.startsWith(language.split('-')[0])\n );\n\n const systemVoicesForLang = systemVoices.filter(voice => \n voice.lang.startsWith(language) || voice.lang.startsWith(language.split('-')[0])\n ).map(voice => ({\n name: voice.name,\n lang: voice.lang,\n gender: undefined,\n accent: voice.lang.includes('-') ? voice.lang.split('-')[1] : undefined,\n quality: 'standard' as const\n }));\n\n // Combine and deduplicate\n const allVoices = [...apiVoices, ...systemVoicesForLang];\n const uniqueVoices = allVoices.filter((voice, index, self) => \n index === self.findIndex(v => v.name === voice.name && v.lang === voice.lang)\n );\n\n return uniqueVoices;\n };\n\n const voicesForLanguage = getVoicesForLanguage();\n\n // Auto-select first voice if none selected\n useEffect(() => {\n if (voicesForLanguage.length > 0 && !selectedVoice) {\n onVoiceChange(voicesForLanguage[0].name);\n }\n }, [voicesForLanguage, selectedVoice, onVoiceChange]);\n\n if (isLoading) {\n return (\n

\n Loading voices...\n

\n );\n }\n\n if (language === \"auto\" || voicesForLanguage.length === 0) {\n return (\n

\n No voices available for this language\n

\n );\n }\n\n return (\n

\n \n Voice Selection\n \n onVoiceChange(e.target.value)}\n disabled={disabled}\n className=\"px-3 py-2 text-sm border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed\"\n >\n {voicesForLanguage.map((voice, index) => (\n \n ))}\n \n \n {voicesForLanguage.length > 0 && (\n

\n {voicesForLanguage.length} voice{voicesForLanguage.length !== 1 ? 's' : ''} available\n

\n )}\n

\n );\n}",[],[192,199,234],[192,199],{"_103":243,"_95":171,"_153":244,"_155":193,"_156":138,"_157":245,"_159":160,"_105":246,"_100":118,"_162":175,"_164":247,"_165":22,"_166":-5,"_167":248,"_98":249},"dd10fc56-37c7-11f0-ba8e-9e149126039e","75b62c58-37c6-11f0-a9f0-9e149126039e",27,["D",1747999199526],"# Frontend\n\nAdvanced React-based frontend for speech-to-speech and text-to-speech translation with comprehensive regional language support.\n\n## Components\n\n### App.tsx\nMain application component featuring:\n- **Dual Mode Interface**: Toggle between text and speech modes\n- **Advanced Speech Recognition**: Real-time speech-to-text with interim results\n- **Voice Selection**: Multiple voice options for each language\n- **Auto-Translation**: Automatic translation after speech input\n- **Regional Language Support**: Native script rendering and pronunciation\n- **Error Handling**: Comprehensive error management for speech APIs\n\n### SpeechRecognition.tsx\nSpeech recognition component with:\n- **Web Speech API Integration**: Cross-browser speech recognition\n- **Language-Specific Recognition**: Optimized for each supported language\n- **Real-time Feedback**: Visual indicators for listening state\n- **Error Handling**: Detailed error messages for different failure modes\n- **Accessibility**: Keyboard navigation and screen reader support\n\n### VoiceSelector.tsx\nVoice selection component featuring:\n- **System Voice Detection**: Automatic discovery of available voices\n- **API Voice Integration**: Additional voices from translation service\n- **Language Filtering**: Shows only relevant voices for selected language\n- **Voice Quality Indicators**: Premium, neural, and standard voice types\n- **Accent Support**: Multiple accents for major languages\n\n### LanguageSelector.tsx\nEnhanced language selector with:\n- **Regional Grouping**: Languages organized by geographic region\n- **Native Script Display**: Shows language names in native scripts\n- **Speech Capability Indicators**: Visual indicators for speech support\n- **Accessibility Features**: Proper labeling and keyboard navigation\n\n## Features\n\n### Speech-to-Speech Translation\n- **Real-time Recognition**: Live speech recognition with interim results\n- **Auto-Translation**: Automatic translation after speech completion\n- **Native Pronunciation**: High-quality text-to-speech with regional accents\n- **Voice Customization**: Multiple voice options for input and output languages\n\n### Regional Language Support\n- **Indian Languages**: Full support for Telugu (తెలుగు), Marathi (मराठी), Tamil (தமிழ்), Hindi (हिन्दी), Bengali (বাংলা), Gujarati (ગુજરાતી), Kannada (ಕನ್ನಡ), Malayalam (മലയാളം), Punjabi (ਪੰਜਾਬੀ), Urdu (اردو)\n- **Native Scripts**: Proper rendering of Devanagari, Telugu, Tamil, Bengali, Arabic, and other scripts\n- **Regional Accents**: Authentic pronunciation for regional languages\n- **Cultural Context**: Language-appropriate voice selection\n\n### Accessibility Features\n- **Screen Reader Support**: Full ARIA labeling and semantic HTML\n- **Keyboard Navigation**: Complete keyboard accessibility\n- **High Contrast Support**: Optimized for high contrast displays\n- **Reduced Motion**: Respects user motion preferences\n- **Voice Feedback**: Audio confirmation of actions and states\n\n### User Experience\n- **Responsive Design**: Optimized for mobile and desktop\n- **Progressive Enhancement**: Graceful degradation for unsupported features\n- **Real-time Feedback**: Visual and audio feedback for all interactions\n- **Error Recovery**: Clear error messages with recovery suggestions\n- **Performance Optimization**: Efficient speech processing and rendering\n\n## Browser Compatibility\n\n### Speech Recognition Support\n- **Chrome/Edge**: Full support for all features\n- **Firefox**: Limited speech recognition support\n- **Safari**: Basic speech recognition on iOS/macOS\n- **Mobile Browsers**: Variable support, best on Chrome mobile\n\n### Text-to-Speech Support\n- **All Modern Browsers**: Universal support for basic TTS\n- **System Voices**: Automatic detection of installed voices\n- **Regional Voices**: Best support on Chrome and Edge\n\n## Technical Implementation\n\n### Speech APIs\n- **Web Speech API**: Primary speech recognition interface\n- **SpeechSynthesis API**: Text-to-speech functionality\n- **Voice Management**: Dynamic voice loading and selection\n- **Error Handling**: Comprehensive error management for speech failures\n\n### Performance Optimizations\n- **Lazy Loading**: Components loaded on demand\n- **Voice Caching**: Efficient voice discovery and caching\n- **Debounced Recognition**: Optimized speech recognition processing\n- **Memory Management**: Proper cleanup of speech resources\n\n### Security & Privacy\n- **Microphone Permissions**: Proper permission handling\n- **Local Processing**: Speech recognition processed locally when possible\n- **No Audio Storage**: Audio data not stored or transmitted\n- **Privacy Indicators**: Clear indication when microphone is active",[],[192,171],{"_103":251,"_95":252,"_153":253,"_155":193,"_156":138,"_157":254,"_159":160,"_105":255,"_100":118,"_162":175,"_164":256,"_165":22,"_166":-5,"_167":257,"_98":258},"bac2344e-37c7-11f0-9341-9e149126039e","index.html","4af507a0-37c6-11f0-bbab-9e149126039e",25,["D",1747999141971],"\n\n\n \n \n Advanced Speech & Text Translator\n \n \n \n \n 🎤\">\n\n\n

\n \n\n",[],[192,252],{"_103":260,"_95":261,"_153":262,"_155":193,"_156":138,"_157":263,"_159":160,"_105":264,"_100":32,"_162":210,"_164":265,"_165":22,"_166":-5,"_167":266,"_98":267},"53badd38-37c6-11f0-ba8e-9e149126039e","index.tsx","53baddd8-37c6-11f0-ba8e-9e149126039e",8,["D",1747998539625],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[192,261],{"_103":269,"_95":270,"_153":271,"_155":193,"_156":138,"_157":272,"_159":160,"_105":273,"_100":118,"_162":175,"_164":274,"_165":22,"_166":-5,"_167":275,"_98":276},"cb8e5f78-37c7-11f0-bbbd-9e149126039e","style.css","50fc3e84-37c6-11f0-95e1-9e149126039e",26,["D",1747999170151],"/* Custom styles for the advanced speech & text translation app */\n\n.speaker-button {\n transition: all 0.2s ease;\n}\n\n.speaker-button:hover {\n transform: scale(1.1);\n}\n\n.speaker-button:active {\n transform: scale(0.95);\n}\n\n.translation-card {\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n transition: box-shadow 0.3s ease;\n}\n\n.translation-card:hover {\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n}\n\n.pulse-animation {\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n.fade-in {\n animation: fadeIn 0.5s ease-in;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Speech recognition specific styles */\n.speech-button {\n position: relative;\n overflow: hidden;\n}\n\n.speech-button.listening {\n animation: speechPulse 1.5s ease-in-out infinite;\n}\n\n@keyframes speechPulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);\n }\n 70% {\n box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);\n }\n}\n\n/* Voice selector styles */\n.voice-selector {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border-radius: 8px;\n padding: 1rem;\n color: white;\n}\n\n.voice-selector select {\n background: rgba(255, 255, 255, 0.9);\n color: #333;\n}\n\n/* Language group styles */\noptgroup {\n font-weight: bold;\n color: #374151;\n background: #f9fafb;\n}\n\noption {\n font-weight: normal;\n color: #111827;\n background: white;\n padding: 0.25rem;\n}\n\n/* Regional language support indicator */\n.regional-support {\n background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);\n border: 2px solid #f472b6;\n}\n\n/* Accessibility improvements */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n/* Focus styles for better accessibility */\nbutton:focus,\nselect:focus,\ntextarea:focus {\n outline: 2px solid #3b82f6;\n outline-offset: 2px;\n}\n\n/* Loading spinner */\n.spinner {\n border: 2px solid #f3f3f3;\n border-top: 2px solid #3b82f6;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n/* Mode toggle buttons */\n.mode-toggle {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n transition: all 0.3s ease;\n}\n\n.mode-toggle:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n}\n\n/* Interim transcript styling */\n.interim-transcript {\n background: linear-gradient(90deg, #fef3c7, #fde68a);\n border-left: 4px solid #f59e0b;\n animation: fadeIn 0.3s ease-in;\n}\n\n/* Native script support */\n.native-script {\n font-family: 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Telugu', 'Noto Sans Tamil', 'Noto Sans Bengali', 'Noto Sans Gujarati', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Gurmukhi', 'Noto Sans Arabic', sans-serif;\n line-height: 1.6;\n}\n\n/* Responsive design improvements */\n@media (max-width: 768px) {\n .translation-card {\n margin-bottom: 1rem;\n }\n \n .speech-button {\n padding: 0.75rem;\n }\n \n .mode-toggle {\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n }\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n .translation-card {\n border: 2px solid #000;\n }\n \n .speaker-button {\n border: 2px solid currentColor;\n }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n .speaker-button,\n .mode-toggle,\n .fade-in,\n .pulse-animation,\n .speechPulse {\n animation: none;\n transition: none;\n }\n \n .speaker-button:hover,\n .mode-toggle:hover {\n transform: none;\n }\n}",[],[192,270],[192],{"_103":279,"_95":280,"_153":281,"_155":-5,"_156":138,"_157":282,"_159":160,"_105":283,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":284,"_98":311},"36ff3432-37c6-11f0-99d6-9e149126039e","shared","cdd13537-b62f-4600-9d8f-a3a519253e33",2,["D",1747998491414],[285,293,302],{"_103":286,"_95":171,"_153":287,"_155":281,"_156":138,"_157":288,"_159":160,"_105":289,"_100":118,"_162":175,"_164":290,"_165":22,"_166":-5,"_167":291,"_98":292},"f54993a0-37c7-11f0-9676-9e149126039e","3995901a-37c6-11f0-9d31-9e149126039e",28,["D",1747999240168],"# Shared Code\n\nThis directory contains code that is shared between the frontend and backend for the advanced speech & text translation application.\n\n## Files\n\n### types.ts\nComprehensive TypeScript interfaces and types used across the application:\n- **Language**: Extended language definition with speech capabilities and native names\n- **Voice**: Voice configuration for text-to-speech\n- **TranslationRequest/Response**: API communication types\n- **SpeechRecognitionResult**: Speech recognition result structure\n- **SpeechSynthesisOptions**: Text-to-speech configuration\n\n### languages.ts\nComplete language definitions and utility functions:\n- **SUPPORTED_LANGUAGES**: Array of 60+ languages with regional support\n- **Regional Grouping**: Languages organized by geographic regions\n- **Speech Capabilities**: Indicators for speech recognition and synthesis support\n- **Native Scripts**: Support for Devanagari, Telugu, Tamil, Arabic, and other scripts\n- **Helper Functions**: Utilities for filtering and finding languages\n\n## Language Support\n\n### Regional Languages\n- **Indian Languages**: 12+ languages including Telugu, Marathi, Tamil, Hindi, Bengali\n- **Southeast Asian**: Thai, Vietnamese, Indonesian, Filipino, and more\n- **European**: 25+ European languages with regional variants\n- **Middle Eastern**: Arabic, Persian, Hebrew with proper script support\n- **African**: Swahili, Afrikaans, Zulu, Amharic\n\n### Speech Capabilities\n- **Recognition Supported**: 45+ languages with speech-to-text\n- **Synthesis Supported**: 55+ languages with text-to-speech\n- **Native Pronunciation**: Authentic accents for regional languages\n- **Script Rendering**: Proper display of non-Latin scripts\n\n## Important Notes\n\n### Cross-Environment Compatibility\n- Code in this directory must work in both browser and server environments\n- Do not use Deno-specific APIs here as they won't work in the browser\n- Use `https://esm.sh` for any imports to ensure compatibility\n- All functions are pure and side-effect free\n\n### Performance Considerations\n- Language arrays are optimized for fast lookups\n- Helper functions use efficient filtering and searching\n- Types are designed to minimize bundle size\n- Regional grouping reduces UI rendering complexity\n\n### Internationalization\n- Native names are provided in original scripts\n- Language codes follow ISO 639-1 and BCP 47 standards\n- Regional variants are properly distinguished\n- Cultural context is preserved in language definitions",[],[280,171],{"_103":294,"_95":295,"_153":296,"_155":281,"_156":138,"_157":297,"_159":160,"_105":298,"_100":32,"_162":210,"_164":299,"_165":22,"_166":-5,"_167":300,"_98":301},"3fc19924-37c7-11f0-9341-9e149126039e","languages.ts","3fc19a0a-37c7-11f0-9341-9e149126039e",19,["D",1747998935611],"// Comprehensive language definitions with regional language support\nimport type { Language } from \"./types.ts\";\n\nexport const SUPPORTED_LANGUAGES: Language[] = [\n { code: \"auto\", name: \"Auto-detect\", nativeName: \"Auto-detect\", speechSupported: false, recognitionSupported: false },\n \n // Major International Languages\n { code: \"en\", name: \"English\", nativeName: \"English\", speechSupported: true, recognitionSupported: true, region: \"Global\" },\n { code: \"es\", name: \"Spanish\", nativeName: \"Español\", speechSupported: true, recognitionSupported: true, region: \"Global\" },\n { code: \"fr\", name: \"French\", nativeName: \"Français\", speechSupported: true, recognitionSupported: true, region: \"Global\" },\n { code: \"de\", name: \"German\", nativeName: \"Deutsch\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"it\", name: \"Italian\", nativeName: \"Italiano\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"pt\", name: \"Portuguese\", nativeName: \"Português\", speechSupported: true, recognitionSupported: true, region: \"Global\" },\n { code: \"ru\", name: \"Russian\", nativeName: \"Русский\", speechSupported: true, recognitionSupported: true, region: \"Europe/Asia\" },\n { code: \"ja\", name: \"Japanese\", nativeName: \"日本語\", speechSupported: true, recognitionSupported: true, region: \"Asia\" },\n { code: \"ko\", name: \"Korean\", nativeName: \"한국어\", speechSupported: true, recognitionSupported: true, region: \"Asia\" },\n { code: \"zh\", name: \"Chinese (Simplified)\", nativeName: \"中文 (简体)\", speechSupported: true, recognitionSupported: true, region: \"Asia\" },\n { code: \"zh-TW\", name: \"Chinese (Traditional)\", nativeName: \"中文 (繁體)\", speechSupported: true, recognitionSupported: true, region: \"Asia\" },\n { code: \"ar\", name: \"Arabic\", nativeName: \"العربية\", speechSupported: true, recognitionSupported: true, region: \"Middle East\", script: \"Arabic\" },\n \n // Indian Regional Languages\n { code: \"hi\", name: \"Hindi\", nativeName: \"हिन्दी\", speechSupported: true, recognitionSupported: true, region: \"India\", script: \"Devanagari\" },\n { code: \"te\", name: \"Telugu\", nativeName: \"తెలుగు\", speechSupported: true, recognitionSupported: true, region: \"India\", script: \"Telugu\" },\n { code: \"mr\", name: \"Marathi\", nativeName: \"मराठी\", speechSupported: true, recognitionSupported: true, region: \"India\", script: \"Devanagari\" },\n { code: \"ta\", name: \"Tamil\", nativeName: \"தமிழ்\", speechSupported: true, recognitionSupported: true, region: \"India\", script: \"Tamil\" },\n { code: \"bn\", name: \"Bengali\", nativeName: \"বাংলা\", speechSupported: true, recognitionSupported: true, region: \"India\", script: \"Bengali\" },\n { code: \"gu\", name: \"Gujarati\", nativeName: \"ગુજરાતી\", speechSupported: true, recognitionSupported: true, region: \"India\", script: \"Gujarati\" },\n { code: \"kn\", name: \"Kannada\", nativeName: \"ಕನ್ನಡ\", speechSupported: true, recognitionSupported: true, region: \"India\", script: \"Kannada\" },\n { code: \"ml\", name: \"Malayalam\", nativeName: \"മലയാളം\", speechSupported: true, recognitionSupported: true, region: \"India\", script: \"Malayalam\" },\n { code: \"pa\", name: \"Punjabi\", nativeName: \"ਪੰਜਾਬੀ\", speechSupported: true, recognitionSupported: true, region: \"India\", script: \"Gurmukhi\" },\n { code: \"ur\", name: \"Urdu\", nativeName: \"اردو\", speechSupported: true, recognitionSupported: true, region: \"India/Pakistan\", script: \"Arabic\" },\n { code: \"or\", name: \"Odia\", nativeName: \"ଓଡ଼ିଆ\", speechSupported: true, recognitionSupported: false, region: \"India\", script: \"Odia\" },\n { code: \"as\", name: \"Assamese\", nativeName: \"অসমীয়া\", speechSupported: true, recognitionSupported: false, region: \"India\", script: \"Bengali\" },\n { code: \"ne\", name: \"Nepali\", nativeName: \"नेपाली\", speechSupported: true, recognitionSupported: true, region: \"Nepal\", script: \"Devanagari\" },\n { code: \"si\", name: \"Sinhala\", nativeName: \"සිංහල\", speechSupported: true, recognitionSupported: false, region: \"Sri Lanka\", script: \"Sinhala\" },\n \n // Southeast Asian Languages\n { code: \"th\", name: \"Thai\", nativeName: \"ไทย\", speechSupported: true, recognitionSupported: true, region: \"Southeast Asia\", script: \"Thai\" },\n { code: \"vi\", name: \"Vietnamese\", nativeName: \"Tiếng Việt\", speechSupported: true, recognitionSupported: true, region: \"Southeast Asia\" },\n { code: \"id\", name: \"Indonesian\", nativeName: \"Bahasa Indonesia\", speechSupported: true, recognitionSupported: true, region: \"Southeast Asia\" },\n { code: \"ms\", name: \"Malay\", nativeName: \"Bahasa Melayu\", speechSupported: true, recognitionSupported: true, region: \"Southeast Asia\" },\n { code: \"fil\", name: \"Filipino\", nativeName: \"Filipino\", speechSupported: true, recognitionSupported: true, region: \"Southeast Asia\" },\n { code: \"my\", name: \"Myanmar\", nativeName: \"မြန်မာ\", speechSupported: true, recognitionSupported: false, region: \"Southeast Asia\", script: \"Myanmar\" },\n { code: \"km\", name: \"Khmer\", nativeName: \"ខ្មែរ\", speechSupported: true, recognitionSupported: false, region: \"Southeast Asia\", script: \"Khmer\" },\n { code: \"lo\", name: \"Lao\", nativeName: \"ລາວ\", speechSupported: true, recognitionSupported: false, region: \"Southeast Asia\", script: \"Lao\" },\n \n // European Languages\n { code: \"nl\", name: \"Dutch\", nativeName: \"Nederlands\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"sv\", name: \"Swedish\", nativeName: \"Svenska\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"da\", name: \"Danish\", nativeName: \"Dansk\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"no\", name: \"Norwegian\", nativeName: \"Norsk\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"fi\", name: \"Finnish\", nativeName: \"Suomi\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"pl\", name: \"Polish\", nativeName: \"Polski\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"cs\", name: \"Czech\", nativeName: \"Čeština\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"sk\", name: \"Slovak\", nativeName: \"Slovenčina\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"hu\", name: \"Hungarian\", nativeName: \"Magyar\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"ro\", name: \"Romanian\", nativeName: \"Română\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"bg\", name: \"Bulgarian\", nativeName: \"Български\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"hr\", name: \"Croatian\", nativeName: \"Hrvatski\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"sr\", name: \"Serbian\", nativeName: \"Српски\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"sl\", name: \"Slovenian\", nativeName: \"Slovenščina\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"et\", name: \"Estonian\", nativeName: \"Eesti\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"lv\", name: \"Latvian\", nativeName: \"Latviešu\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"lt\", name: \"Lithuanian\", nativeName: \"Lietuvių\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"el\", name: \"Greek\", nativeName: \"Ελληνικά\", speechSupported: true, recognitionSupported: true, region: \"Europe\", script: \"Greek\" },\n { code: \"tr\", name: \"Turkish\", nativeName: \"Türkçe\", speechSupported: true, recognitionSupported: true, region: \"Europe/Asia\" },\n { code: \"uk\", name: \"Ukrainian\", nativeName: \"Українська\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n \n // Middle Eastern Languages\n { code: \"fa\", name: \"Persian\", nativeName: \"فارسی\", speechSupported: true, recognitionSupported: true, region: \"Middle East\", script: \"Arabic\" },\n { code: \"he\", name: \"Hebrew\", nativeName: \"עברית\", speechSupported: true, recognitionSupported: true, region: \"Middle East\", script: \"Hebrew\" },\n \n // African Languages\n { code: \"sw\", name: \"Swahili\", nativeName: \"Kiswahili\", speechSupported: true, recognitionSupported: true, region: \"Africa\" },\n { code: \"af\", name: \"Afrikaans\", nativeName: \"Afrikaans\", speechSupported: true, recognitionSupported: true, region: \"Africa\" },\n { code: \"zu\", name: \"Zulu\", nativeName: \"isiZulu\", speechSupported: true, recognitionSupported: false, region: \"Africa\" },\n { code: \"am\", name: \"Amharic\", nativeName: \"አማርኛ\", speechSupported: true, recognitionSupported: false, region: \"Africa\", script: \"Ethiopic\" },\n \n // Other Languages\n { code: \"is\", name: \"Icelandic\", nativeName: \"Íslenska\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"mt\", name: \"Maltese\", nativeName: \"Malti\", speechSupported: true, recognitionSupported: false, region: \"Europe\" },\n { code: \"cy\", name: \"Welsh\", nativeName: \"Cymraeg\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n { code: \"ga\", name: \"Irish\", nativeName: \"Gaeilge\", speechSupported: true, recognitionSupported: false, region: \"Europe\" },\n { code: \"eu\", name: \"Basque\", nativeName: \"Euskera\", speechSupported: true, recognitionSupported: false, region: \"Europe\" },\n { code: \"ca\", name: \"Catalan\", nativeName: \"Català\", speechSupported: true, recognitionSupported: true, region: \"Europe\" },\n];\n\n// Helper functions\nexport function getLanguageByCode(code: string): Language | undefined {\n return SUPPORTED_LANGUAGES.find(lang => lang.code === code);\n}\n\nexport function getLanguagesByRegion(region: string): Language[] {\n return SUPPORTED_LANGUAGES.filter(lang => lang.region === region);\n}\n\nexport function getSpeechSupportedLanguages(): Language[] {\n return SUPPORTED_LANGUAGES.filter(lang => lang.speechSupported);\n}\n\nexport function getRecognitionSupportedLanguages(): Language[] {\n return SUPPORTED_LANGUAGES.filter(lang => lang.recognitionSupported);\n}\n\nexport function getIndianLanguages(): Language[] {\n return SUPPORTED_LANGUAGES.filter(lang => lang.region === \"India\");\n}",[],[280,295],{"_103":303,"_95":304,"_153":305,"_155":281,"_156":138,"_157":306,"_159":160,"_105":307,"_100":118,"_162":210,"_164":308,"_165":22,"_166":-5,"_167":309,"_98":310},"2a250c04-37c7-11f0-861a-9e149126039e","types.ts","36ff1326-37c6-11f0-99d6-9e149126039e",18,["D",1747998899352],"// Shared types for the advanced speech & text translation app\n\nexport interface Language {\n code: string;\n name: string;\n nativeName: string;\n script?: string;\n speechSupported: boolean;\n recognitionSupported: boolean;\n region?: string;\n}\n\nexport interface Voice {\n name: string;\n lang: string;\n gender?: 'male' | 'female';\n accent?: string;\n quality?: 'standard' | 'premium' | 'neural';\n}\n\nexport interface TranslationRequest {\n text: string;\n from: string;\n to: string;\n}\n\nexport interface TranslationResponse {\n translatedText: string;\n detectedLanguage?: string;\n confidence?: number;\n pronunciation?: string;\n}\n\nexport interface SpeechRecognitionResult {\n transcript: string;\n confidence: number;\n isFinal: boolean;\n language: string;\n}\n\nexport interface SupportedLanguagesResponse {\n languages: Language[];\n}\n\nexport interface VoicesResponse {\n voices: Voice[];\n}\n\nexport interface SpeechSynthesisOptions {\n text: string;\n language: string;\n voice?: string;\n rate?: number;\n pitch?: number;\n volume?: number;\n}",[],[280,304],[280],{"_103":313,"_95":171,"_153":314,"_155":-5,"_156":138,"_157":315,"_159":160,"_105":316,"_100":317,"_162":175,"_164":318,"_165":22,"_166":-5,"_167":319,"_98":320},"25891c12-37c7-11f0-b8ab-9e149126039e","349cafee-37c6-11f0-9f68-9e149126039e",17,["D",1747998891619],3,"# Advanced Speech & Text Translation App\n\nA comprehensive web application for speech-to-speech and text-to-speech translation supporting 100+ languages including regional Indian languages like Telugu, Marathi, Tamil, Hindi, and more.\n\n## Features\n\n- **Speech-to-Speech Translation**: Speak in one language and hear the translation in another\n- **Speech Recognition**: Convert speech to text in real-time with support for regional languages\n- **Text-to-Speech**: High-quality audio playback with native pronunciation\n- **Text Translation**: Traditional text input with translation\n- **Regional Language Support**: Extensive support for Indian languages (Telugu, Marathi, Tamil, Hindi, Bengali, Gujarati, Kannada, Malayalam, Punjabi, Urdu, etc.)\n- **Language Detection**: Automatic detection of spoken and written language\n- **Voice Selection**: Multiple voice options for different languages and accents\n- **Real-time Processing**: Live speech recognition and instant translation\n- **Offline Capability**: Basic functionality works without internet (browser-dependent)\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main Hono server with translation API\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main translation interface\n│ │ ├── SpeechRecognition.tsx # Speech recognition component\n│ │ ├── VoiceSelector.tsx # Voice selection component\n│ │ └── LanguageSelector.tsx # Language selection component\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ ├── style.css # Custom styles\n│ └── README.md\n├── shared/\n│ ├── types.ts # Shared TypeScript types\n│ ├── languages.ts # Comprehensive language definitions\n│ └── README.md\n└── README.md\n```\n\n## API Endpoints\n\n- `GET /` - Serves the main application\n- `POST /api/translate` - Translates text between languages\n- `GET /api/languages` - Returns list of supported languages with speech capabilities\n- `GET /api/voices` - Returns available voices for text-to-speech\n\n## Usage\n\n1. **Text Translation**: Enter text and select languages for traditional translation\n2. **Speech Input**: Click the microphone to speak in your chosen language\n3. **Speech Output**: Use speaker icons to hear translations with native pronunciation\n4. **Voice Selection**: Choose from multiple voices and accents for each language\n5. **Regional Languages**: Full support for Indian regional languages with proper pronunciation\n\n## Supported Regional Languages\n\n### Indian Languages\n- **Telugu** (తెలుగు) - Native script and pronunciation\n- **Marathi** (मराठी) - Devanagari script support\n- **Hindi** (हिन्दी) - Multiple dialects and accents\n- **Tamil** (தமிழ்) - Tamil script with proper pronunciation\n- **Bengali** (বাংলা) - Bengali script support\n- **Gujarati** (ગુજરાતી) - Gujarati script\n- **Kannada** (ಕನ್ನಡ) - Kannada script\n- **Malayalam** (മലയാളം) - Malayalam script\n- **Punjabi** (ਪੰਜਾਬੀ) - Gurmukhi script\n- **Urdu** (اردو) - Arabic script\n- **Odia** (ଓଡ଼ିଆ) - Odia script\n- **Assamese** (অসমীয়া) - Assamese script\n\n### Other Regional Languages\n- **Arabic** dialects (Egyptian, Gulf, Levantine)\n- **Chinese** variants (Mandarin, Cantonese)\n- **Spanish** variants (Latin American, European)\n- **Portuguese** (Brazilian, European)\n- **French** (Metropolitan, Canadian)\n- **English** (US, UK, Australian, Indian)\n\n## Technologies\n\n- **Backend**: Hono framework with TypeScript\n- **Frontend**: React with TypeScript\n- **Translation**: Google Translate API\n- **Text-to-Speech**: Web Speech API\n- **Styling**: TailwindCSS",[],[171],{"_103":322,"_95":323,"_153":324,"_155":-5,"_156":138,"_157":137,"_159":160,"_105":325,"_100":32,"_162":210,"_164":72,"_165":22,"_166":-5,"_167":326,"_98":327},"8c280b74-37ca-11f0-bdc5-9e149126039e","new-file-7952.tsx","8c280c3c-37ca-11f0-bdc5-9e149126039e",["D",1748000352279],[],[323],"files",[150,169,179,190,197,204,214,223,232,242,250,259,268,278,285,293,302,312,321],"counts",{"_332":32,"_333":118,"_334":118,"_335":32},"pulls","branches","forks","envVars","contents",[],{"_103":180,"_95":181,"_153":182,"_155":154,"_156":138,"_157":183,"_159":160,"_105":339,"_100":158,"_162":185,"_164":186,"_165":22,"_166":-5,"_98":340},["D",1747998962138],[152,181],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":349,"_148":354,"_328":412,"_175":413,"_336":415,"_416":-5,"_417":22,"_418":-5,"_419":-5,"_420":-5,"_421":422},{"_103":104,"_95":96,"_105":350,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":118,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":351,"_132":352,"_135":353,"_147":22},["D",1747998355021],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_103":138,"_139":104,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[355,364,394,406,409],{"_103":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_105":161,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":356,"_98":363},[357,360],{"_103":170,"_95":171,"_153":172,"_155":154,"_156":138,"_157":173,"_159":160,"_105":174,"_100":32,"_162":175,"_164":176,"_165":22,"_166":-5,"_167":358,"_98":359},[],[152,171],{"_103":180,"_95":181,"_153":182,"_155":154,"_156":138,"_157":183,"_159":160,"_105":184,"_100":158,"_162":185,"_164":186,"_165":22,"_166":-5,"_167":361,"_98":362},[],[152,181],[152],{"_103":191,"_95":192,"_153":193,"_155":-5,"_156":138,"_157":194,"_159":160,"_105":195,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":365,"_98":393},[366,381,384,387,390],{"_103":198,"_95":199,"_153":200,"_155":193,"_156":138,"_157":201,"_159":160,"_105":202,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":367,"_98":380},[368,371,374,377],{"_103":205,"_95":206,"_153":207,"_155":200,"_156":138,"_157":208,"_159":160,"_105":209,"_100":118,"_162":210,"_164":211,"_165":22,"_166":-5,"_167":369,"_98":370},[],[192,199,206],{"_103":215,"_95":216,"_153":217,"_155":200,"_156":138,"_157":218,"_159":160,"_105":219,"_100":118,"_162":210,"_164":220,"_165":22,"_166":-5,"_167":372,"_98":373},[],[192,199,216],{"_103":224,"_95":225,"_153":226,"_155":200,"_156":138,"_157":227,"_159":160,"_105":228,"_100":32,"_162":210,"_164":229,"_165":22,"_166":-5,"_167":375,"_98":376},[],[192,199,225],{"_103":233,"_95":234,"_153":235,"_155":200,"_156":138,"_157":236,"_159":160,"_105":237,"_100":32,"_162":210,"_164":238,"_165":22,"_166":-5,"_167":378,"_98":379},[],[192,199,234],[192,199],{"_103":243,"_95":171,"_153":244,"_155":193,"_156":138,"_157":245,"_159":160,"_105":246,"_100":118,"_162":175,"_164":247,"_165":22,"_166":-5,"_167":382,"_98":383},[],[192,171],{"_103":251,"_95":252,"_153":253,"_155":193,"_156":138,"_157":254,"_159":160,"_105":255,"_100":118,"_162":175,"_164":256,"_165":22,"_166":-5,"_167":385,"_98":386},[],[192,252],{"_103":260,"_95":261,"_153":262,"_155":193,"_156":138,"_157":263,"_159":160,"_105":264,"_100":32,"_162":210,"_164":265,"_165":22,"_166":-5,"_167":388,"_98":389},[],[192,261],{"_103":269,"_95":270,"_153":271,"_155":193,"_156":138,"_157":272,"_159":160,"_105":273,"_100":118,"_162":175,"_164":274,"_165":22,"_166":-5,"_167":391,"_98":392},[],[192,270],[192],{"_103":279,"_95":280,"_153":281,"_155":-5,"_156":138,"_157":282,"_159":160,"_105":283,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":395,"_98":405},[396,399,402],{"_103":286,"_95":171,"_153":287,"_155":281,"_156":138,"_157":288,"_159":160,"_105":289,"_100":118,"_162":175,"_164":290,"_165":22,"_166":-5,"_167":397,"_98":398},[],[280,171],{"_103":294,"_95":295,"_153":296,"_155":281,"_156":138,"_157":297,"_159":160,"_105":298,"_100":32,"_162":210,"_164":299,"_165":22,"_166":-5,"_167":400,"_98":401},[],[280,295],{"_103":303,"_95":304,"_153":305,"_155":281,"_156":138,"_157":306,"_159":160,"_105":307,"_100":118,"_162":210,"_164":308,"_165":22,"_166":-5,"_167":403,"_98":404},[],[280,304],[280],{"_103":313,"_95":171,"_153":314,"_155":-5,"_156":138,"_157":315,"_159":160,"_105":316,"_100":317,"_162":175,"_164":318,"_165":22,"_166":-5,"_167":407,"_98":408},[],[171],{"_103":322,"_95":323,"_153":324,"_155":-5,"_156":138,"_157":137,"_159":160,"_105":325,"_100":32,"_162":210,"_164":72,"_165":22,"_166":-5,"_167":410,"_98":411},[],[323],[355,357,360,364,366,368,371,374,377,381,384,387,390,394,396,399,402,406,409],{"_103":180,"_95":181,"_153":182,"_155":154,"_156":138,"_157":183,"_159":160,"_105":339,"_100":158,"_162":185,"_164":186,"_165":22,"_166":-5,"_98":414},[152,181],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

Koti_123

translator