\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}","deleted","label",[168,169,150],"frontend","components","permalink","https://www.val.town/x/Koti_123/translator/code/frontend/components/App.tsx","extension","actionData","errors"]