\n \n

\n );\n}\n\nfunction App() {\n const [theme, setTheme] = useState(() => {\n const savedTheme = localStorage.getItem(\"app-theme\");\n return savedTheme\n || (window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\");\n });\n\n const themes = {\n light: {\n background: \"#ffffff\",\n text: \"#333333\",\n primary: \"#FFA500\",\n secondary: \"#f0f0f0\",\n accent: \"#e0e0e0\",\n buttonText: \"white\",\n danger: \"#FF4500\",\n },\n dark: {\n background: \"#121212\",\n text: \"#ffffff\",\n primary: \"#FF6347\",\n secondary: \"#1e1e1e\",\n accent: \"#2c2c2c\",\n buttonText: \"#f0f0f0\",\n danger: \"#FF6347\",\n },\n };\n\n const toggleTheme = () => {\n const newTheme = theme === \"light\" ? \"dark\" : \"light\";\n setTheme(newTheme);\n localStorage.setItem(\"app-theme\", newTheme);\n };\n\n const [sourceLanguage, setSourceLanguage] = useState(\"auto\");\n const [targetLanguage, setTargetLanguage] = useState(\"es\");\n const [sourceText, setSourceText] = useState(\"\");\n const [translatedText, setTranslatedText] = useState(\"\");\n const [detectedLanguage, setDetectedLanguage] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [translationHistory, setTranslationHistory] = useState(\n JSON.parse(localStorage.getItem(\"translationHistory\")) || [],\n );\n\n const [isListening, setIsListening] = useState(false);\n const [speechSupported, setSpeechSupported] = useState(false);\n const recognitionRef = useRef(null);\n\n const handleClearAll = () => {\n setSourceText(\"\");\n setTranslatedText(\"\");\n setSourceLanguage(\"auto\");\n setTargetLanguage(\"es\");\n setDetectedLanguage(\"\");\n };\n\n const handleTranslate = async () => {\n if (!sourceText.trim()) return;\n\n setIsLoading(true);\n setTranslatedText(\"\"); // Clear previous translation\n try {\n const response = await fetch(\"https://libretranslate.de/translate\", {\n method: \"POST\",\n body: JSON.stringify({\n q: sourceText,\n source: sourceLanguage === \"auto\" ? detectedLanguage || \"en\" : sourceLanguage,\n target: targetLanguage,\n }),\n headers: { \"Content-Type\": \"application/json\" },\n });\n\n if (!response.ok) {\n const errorDetails = await response.json();\n throw new Error(`Translation failed: ${errorDetails.error || response.statusText}`);\n }\n\n const data = await response.json();\n setTranslatedText(data.translatedText);\n\n const newHistoryItem = {\n source_lang: sourceLanguage,\n target_lang: targetLanguage,\n source_text: sourceText,\n translated_text: data.translatedText,\n created_at: new Date().toISOString(),\n };\n\n const updatedHistory = [newHistoryItem, ...translationHistory];\n setTranslationHistory(updatedHistory);\n localStorage.setItem(\"translationHistory\", JSON.stringify(updatedHistory));\n } catch (error) {\n console.error(\"Translation Error:\", error); // Log detailed error for debugging\n alert(`Failed to fetch translation. ${error.message}`);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleClearHistory = () => {\n setTranslationHistory([]);\n localStorage.removeItem(\"translationHistory\");\n };\n\n const startListening = () => {\n if (!speechSupported) return;\n\n const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\n recognition.lang = sourceLanguage === \"auto\" ? \"en-US\" : sourceLanguage;\n recognition.onresult = (event) => {\n setSourceText(event.results[0][0].transcript);\n };\n recognition.onerror = () => {\n alert(\"Error recognizing speech\");\n };\n recognitionRef.current = recognition;\n recognition.start();\n setIsListening(true);\n };\n\n const stopListening = () => {\n if (recognitionRef.current) {\n recognitionRef.current.stop();\n }\n setIsListening(false);\n };\n\n useEffect(() => {\n if (\"SpeechRecognition\" in window || \"webkitSpeechRecognition\" in window) {\n setSpeechSupported(true);\n }\n }, []);\n\n const languages = {\n \"auto\": \"Auto Detect\",\n \"en\": \"English\",\n \"es\": \"Spanish\",\n \"fr\": \"French\",\n \"de\": \"German\",\n \"it\": \"Italian\",\n \"ja\": \"Japanese\",\n \"zh\": \"Chinese\",\n \"ar\": \"Arabic\",\n \"ru\": \"Russian\",\n \"ko\": \"Korean\",\n \"hi\": \"Hindi\",\n \"pt\": \"Portuguese\",\n \"nl\": \"Dutch\",\n \"tr\": \"Turkish\",\n \"pl\": \"Polish\",\n \"id\": \"Indonesian\",\n \"th\": \"Thai\",\n \"sv\": \"Swedish\",\n \"vi\": \"Vietnamese\",\n \"uk\": \"Ukrainian\",\n \"fa\": \"Persian\",\n \"he\": \"Hebrew\",\n \"ur\": \"Urdu\",\n };\n\n const showClearAllButton = sourceText.trim() || translatedText.trim();\n\n return (\n \n \n {theme === \"light\" ? \"🌙\" : \"☀️\"}\n \n\n

\n {showClearAllButton && (\n \n 🧹 Clear All\n \n )}\n\n

🌐 EASY TRANSLATE

\n setSourceLanguage(e.target.value)}\n style={{ backgroundColor: themes[theme].secondary, color: themes[theme].text }}\n >\n {Object.entries(languages).map(([code, name]) => )}\n \n setTargetLanguage(e.target.value)}\n style={{ backgroundColor: themes[theme].secondary, color: themes[theme].text }}\n >\n {Object.entries(languages).filter(([code]) => code !== \"auto\").map(([code, name]) => (\n \n ))}\n \n

\n\n

\n setSourceText(e.target.value)}\n style={{\n width: \"100%\",\n height: \"100px\",\n backgroundColor: themes[theme].secondary,\n color: themes[theme].text,\n }}\n />\n {speechSupported && (\n \n {isListening ? \"🛑\" : \"🎤\"}\n \n )}\n

\n\n

\n \n Translate\n \n {isLoading && }\n

\n\n {translatedText && (\n \n

Translation:

{translatedText}

\n )}\n\n {translationHistory.length > 0 && (\n

Translation History

\n \n Clear History\n \n

\n {translationHistory.map((item, index) => (\n \n

\n {languages[item.source_lang]} → {languages[item.target_lang]}\n

{item.source_text}

{item.translated_text}

\n {new Date(item.created_at).toLocaleString()}\n

\n ))}\n \n )}\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default function server(request: Request): Response {\n return new Response(`\n \n \n Easy Translate\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \n \"Content-Type\": \"text/html\",\n }\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/juleeyet/LanguageTranslator/code/main.tsx","extension","actionData","errors"]