[{"_1":2,"_439":-5,"_440":-5},"loaderData",{"_3":4,"_91":92,"_426":427,"_438":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","ced82cffe733a3d99d1bd4dacbcde851f1bb07ac","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","API_URL","https://api.val.town","WORKER_FINGERPRINT","799d99f2805306c2714a7cfefbeae178","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_93":94,"_95":96,"_94":97,"_421":-5,"_422":-5,"_423":424,"_128":129,"_136":137,"_100":101,"_98":99,"_117":-7,"_50":51,"_425":26},"type","val","author","23ecfd10-ed5d-11ef-af12-67b5d5b0b458",{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":-5,"_107":108,"_109":110,"_111":26,"_112":110,"_113":114,"_115":116,"_117":118,"_119":26,"_120":31,"_121":31,"_122":31,"_123":31,"_124":31,"_125":31,"_126":-5,"_20":127,"_132":-5,"_133":-7,"_134":135,"_136":137,"_138":139},"name","LanguageTranslator","valNameId","18ba5b88-ed79-11ef-9cac-e6cdfca9ef9f","parentFolderId","isOwned","privacy","public","readme","valType","http","currentVersion","0a886430-ed9f-11ef-81f9-e6cdfca9ef9f","legacyPrivate","id","code","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// Spinner Component\nfunction Spinner({ theme }) {\n const spinnerStyle = {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n width: \"100%\",\n padding: \"20px\",\n };\n\n const dotStyle = {\n width: \"12px\",\n height: \"12px\",\n margin: \"0 5px\",\n borderRadius: \"50%\",\n backgroundColor: theme.primary,\n animation: \"bounce 0.5s infinite alternate\",\n display: \"inline-block\",\n };\n\n return (\n

\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}","createdAt",["D",1739845280387],"version",70,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_128":129,"_130":131},"handle","juleeyet","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ0QkVFNHZ2RmpHYm9RY0NXR0pPUkpvMVhtbiJ9","forkedVal","interval","slug","juleeyet/LanguageTranslator","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[140,143,147,151,155,159,163,167,171,175,179,183,187,191,195,199,203,207,211,215,219,223,227,231,235,239,243,247,251,255,259,263,267,271,275,279,283,287,291,295,299,303,307,311,315,319,323,327,331,335,339,343,347,351,355,359,363,367,371,375,379,383,387,391,395,399,403,407,411,414,418],{"_117":118,"_141":-5,"_115":142,"_112":110},"prId",["D",1739845280387],{"_117":144,"_141":-5,"_115":145,"_112":146},69,["D",1739845069591],"8ce2697c-ed9e-11ef-a821-e6cdfca9ef9f",{"_117":148,"_141":-5,"_115":149,"_112":150},68,["D",1739844349579],"dfb95d6a-ed9c-11ef-a875-e6cdfca9ef9f",{"_117":152,"_141":-5,"_115":153,"_112":154},67,["D",1739844334557],"d6c58fee-ed9c-11ef-9284-e6cdfca9ef9f",{"_117":156,"_141":-5,"_115":157,"_112":158},66,["D",1739844209444],"8c33c9d2-ed9c-11ef-aaa3-e6cdfca9ef9f",{"_117":160,"_141":-5,"_115":161,"_112":162},65,["D",1739844154051],"6b2dde6c-ed9c-11ef-88fe-e6cdfca9ef9f",{"_117":164,"_141":-5,"_115":165,"_112":166},64,["D",1739843877596],"c6669838-ed9b-11ef-8011-e6cdfca9ef9f",{"_117":168,"_141":-5,"_115":169,"_112":170},63,["D",1739843611289],"27abd348-ed9b-11ef-9f63-e6cdfca9ef9f",{"_117":172,"_141":-5,"_115":173,"_112":174},62,["D",1739843595220],"1e177c88-ed9b-11ef-a542-e6cdfca9ef9f",{"_117":176,"_141":-5,"_115":177,"_112":178},61,["D",1739843501018],"e5f358c2-ed9a-11ef-86be-e6cdfca9ef9f",{"_117":180,"_141":-5,"_115":181,"_112":182},60,["D",1739843433547],"bdba6e54-ed9a-11ef-a699-e6cdfca9ef9f",{"_117":184,"_141":-5,"_115":185,"_112":186},59,["D",1739843402737],"ab5d1892-ed9a-11ef-a699-e6cdfca9ef9f",{"_117":188,"_141":-5,"_115":189,"_112":190},58,["D",1739843366563],"95ccc7c0-ed9a-11ef-a390-e6cdfca9ef9f",{"_117":192,"_141":-5,"_115":193,"_112":194},57,["D",1739843337653],"8491d4c8-ed9a-11ef-b350-e6cdfca9ef9f",{"_117":196,"_141":-5,"_115":197,"_112":198},56,["D",1739843253078],"52287bc2-ed9a-11ef-8d74-e6cdfca9ef9f",{"_117":200,"_141":-5,"_115":201,"_112":202},55,["D",1739842130050],"b4c89526-ed97-11ef-83fe-e6cdfca9ef9f",{"_117":204,"_141":-5,"_115":205,"_112":206},54,["D",1739842012102],"6e7b1008-ed97-11ef-8964-e6cdfca9ef9f",{"_117":208,"_141":-5,"_115":209,"_112":210},53,["D",1739841796541],"edfeeab2-ed96-11ef-aa4c-e6cdfca9ef9f",{"_117":212,"_141":-5,"_115":213,"_112":214},52,["D",1739841726621],"c45188b4-ed96-11ef-8cb1-e6cdfca9ef9f",{"_117":216,"_141":-5,"_115":217,"_112":218},51,["D",1739841648697],"95dfb3b6-ed96-11ef-accf-e6cdfca9ef9f",{"_117":220,"_141":-5,"_115":221,"_112":222},50,["D",1739841513830],"457cf94c-ed96-11ef-91d8-e6cdfca9ef9f",{"_117":224,"_141":-5,"_115":225,"_112":226},49,["D",1739841469021],"2ac713bc-ed96-11ef-a74f-e6cdfca9ef9f",{"_117":228,"_141":-5,"_115":229,"_112":230},48,["D",1739841380362],"f5eedab2-ed95-11ef-8dab-e6cdfca9ef9f",{"_117":232,"_141":-5,"_115":233,"_112":234},47,["D",1739841169941],"788392fc-ed95-11ef-86a4-e6cdfca9ef9f",{"_117":236,"_141":-5,"_115":237,"_112":238},46,["D",1739840656088],"463b804e-ed94-11ef-80d7-e6cdfca9ef9f",{"_117":240,"_141":-5,"_115":241,"_112":242},45,["D",1739840602536],"26503a22-ed94-11ef-943d-e6cdfca9ef9f",{"_117":244,"_141":-5,"_115":245,"_112":246},44,["D",1739840460504],"d1a78d5e-ed93-11ef-8489-e6cdfca9ef9f",{"_117":248,"_141":-5,"_115":249,"_112":250},43,["D",1739840310500],"783f8b7c-ed93-11ef-afc2-e6cdfca9ef9f",{"_117":252,"_141":-5,"_115":253,"_112":254},42,["D",1739840271501],"610054b4-ed93-11ef-8d0b-e6cdfca9ef9f",{"_117":256,"_141":-5,"_115":257,"_112":258},41,["D",1739840208492],"3b728514-ed93-11ef-8303-e6cdfca9ef9f",{"_117":260,"_141":-5,"_115":261,"_112":262},40,["D",1739840124123],"0927ed60-ed93-11ef-a674-e6cdfca9ef9f",{"_117":264,"_141":-5,"_115":265,"_112":266},39,["D",1739840087230],"f32aede6-ed92-11ef-8d0b-e6cdfca9ef9f",{"_117":268,"_141":-5,"_115":269,"_112":270},38,["D",1739840056545],"e0e123da-ed92-11ef-a0e7-e6cdfca9ef9f",{"_117":272,"_141":-5,"_115":273,"_112":274},37,["D",1739839844400],"626e6eea-ed92-11ef-a645-e6cdfca9ef9f",{"_117":276,"_141":-5,"_115":277,"_112":278},36,["D",1739839598194],"cfad9a0e-ed91-11ef-a25c-e6cdfca9ef9f",{"_117":280,"_141":-5,"_115":281,"_112":282},35,["D",1739839558906],"b8430516-ed91-11ef-ae85-e6cdfca9ef9f",{"_117":284,"_141":-5,"_115":285,"_112":286},34,["D",1739839339902],"35b912de-ed91-11ef-87ca-e6cdfca9ef9f",{"_117":288,"_141":-5,"_115":289,"_112":290},33,["D",1739839292672],"1992fc5a-ed91-11ef-a464-e6cdfca9ef9f",{"_117":292,"_141":-5,"_115":293,"_112":294},32,["D",1739839186239],"da21f7ec-ed90-11ef-bb47-e6cdfca9ef9f",{"_117":296,"_141":-5,"_115":297,"_112":298},31,["D",1739839080487],"9b1a62aa-ed90-11ef-a990-e6cdfca9ef9f",{"_117":300,"_141":-5,"_115":301,"_112":302},30,["D",1739837830382],"b1fb527a-ed8d-11ef-8138-e6cdfca9ef9f",{"_117":304,"_141":-5,"_115":305,"_112":306},29,["D",1739837802291],"a13c5b78-ed8d-11ef-85c3-e6cdfca9ef9f",{"_117":308,"_141":-5,"_115":309,"_112":310},28,["D",1739837772492],"8f797772-ed8d-11ef-9668-e6cdfca9ef9f",{"_117":312,"_141":-5,"_115":313,"_112":314},27,["D",1739837741883],"7d3ca5b6-ed8d-11ef-a0df-e6cdfca9ef9f",{"_117":316,"_141":-5,"_115":317,"_112":318},26,["D",1739837167357],"26c9ea3c-ed8c-11ef-a49b-e6cdfca9ef9f",{"_117":320,"_141":-5,"_115":321,"_112":322},25,["D",1739836961176],"abe52282-ed8b-11ef-9c87-e6cdfca9ef9f",{"_117":324,"_141":-5,"_115":325,"_112":326},24,["D",1739836888295],"80742e7c-ed8b-11ef-bfcd-e6cdfca9ef9f",{"_117":328,"_141":-5,"_115":329,"_112":330},23,["D",1739836241522],"fef2896c-ed89-11ef-994e-e6cdfca9ef9f",{"_117":332,"_141":-5,"_115":333,"_112":334},22,["D",1739836127878],"bb353616-ed89-11ef-b154-e6cdfca9ef9f",{"_117":336,"_141":-5,"_115":337,"_112":338},21,["D",1739836104478],"ad4293dc-ed89-11ef-b154-e6cdfca9ef9f",{"_117":340,"_141":-5,"_115":341,"_112":342},20,["D",1739835885568],"2ac7cd64-ed89-11ef-9825-e6cdfca9ef9f",{"_117":344,"_141":-5,"_115":345,"_112":346},19,["D",1739835835102],"0cb323a0-ed89-11ef-b87f-e6cdfca9ef9f",{"_117":348,"_141":-5,"_115":349,"_112":350},18,["D",1739835796601],"f5c12926-ed88-11ef-8294-e6cdfca9ef9f",{"_117":352,"_141":-5,"_115":353,"_112":354},17,["D",1739833614722],"e14094fa-ed83-11ef-b9cf-e6cdfca9ef9f",{"_117":356,"_141":-5,"_115":357,"_112":358},16,["D",1739833525718],"ac340ddc-ed83-11ef-8a1b-e6cdfca9ef9f",{"_117":360,"_141":-5,"_115":361,"_112":362},15,["D",1739833414072],"69a7b1d0-ed83-11ef-93cd-e6cdfca9ef9f",{"_117":364,"_141":-5,"_115":365,"_112":366},14,["D",1739833295924],"23401c96-ed83-11ef-9cde-e6cdfca9ef9f",{"_117":368,"_141":-5,"_115":369,"_112":370},13,["D",1739833192538],"e59c576a-ed82-11ef-9912-e6cdfca9ef9f",{"_117":372,"_141":-5,"_115":373,"_112":374},12,["D",1739832402671],"0ecfbac0-ed81-11ef-81d2-e6cdfca9ef9f",{"_117":376,"_141":-5,"_115":377,"_112":378},11,["D",1739831778133],"9a8f19ae-ed7f-11ef-84bc-e6cdfca9ef9f",{"_117":380,"_141":-5,"_115":381,"_112":382},10,["D",1739831543239],"0e8d1d16-ed7f-11ef-b06e-e6cdfca9ef9f",{"_117":384,"_141":-5,"_115":385,"_112":386},9,["D",1739831446933],"d525e9ae-ed7e-11ef-b9e3-e6cdfca9ef9f",{"_117":388,"_141":-5,"_115":389,"_112":390},8,["D",1739831388727],"b2748366-ed7e-11ef-b9e3-e6cdfca9ef9f",{"_117":392,"_141":-5,"_115":393,"_112":394},7,["D",1739831175778],"3386da54-ed7e-11ef-88ad-e6cdfca9ef9f",{"_117":396,"_141":-5,"_115":397,"_112":398},6,["D",1739830975848],"bc5c784e-ed7d-11ef-9c07-e6cdfca9ef9f",{"_117":400,"_141":-5,"_115":401,"_112":402},5,["D",1739830928598],"a0321e9e-ed7d-11ef-868f-e6cdfca9ef9f",{"_117":404,"_141":-5,"_115":405,"_112":406},4,["D",1739830193837],"ea3e53b0-ed7b-11ef-82cd-e6cdfca9ef9f",{"_117":408,"_141":-5,"_115":409,"_112":410},3,["D",1739830041039],"8f2b66ca-ed7b-11ef-a7f6-e6cdfca9ef9f",{"_117":90,"_141":-5,"_115":412,"_112":413},["D",1739829948835],"583600c6-ed7b-11ef-b10f-e6cdfca9ef9f",{"_117":415,"_141":-5,"_115":416,"_112":417},1,["D",1739829923782],"494795a2-ed7b-11ef-a88e-e6cdfca9ef9f",{"_117":31,"_141":-5,"_115":419,"_112":420},["D",1739828983343],"18bc233c-ed79-11ef-9cac-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":428,"_429":430,"_94":431},"single","redirect","/v/juleeyet/LanguageTranslator/versions",{"_112":406,"_113":432,"_117":404,"_115":433,"_434":99,"_100":101,"_107":108,"_128":129,"_11":96,"_435":-5,"_436":-5,"_437":-5,"_425":26,"_134":135},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nfunction App() {\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\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 \"fa-AF\": \"Persian (Afghanistan)\",\n \"fa-IR\": \"Persian (Iran)\",\n \"fa-SD\": \"Persian (South Sudan)\",\n \"fa-SS\": \"Persian (South Sudan)\",\n \"zu\": \"Zulu\",\n \"xh\": \"Xhosa\",\n \"zu-ZA\": \"Zulu (South Africa)\",\n \"zu-AF\": \"Zulu (Afghanistan)\",\n \"zu-SS\": \"Zulu (South Sudan)\",\n \"zu-ET\": \"Zulu (Ethiopia)\",\n \"zu-KE\": \"Zulu (Kenya)\",\n };\n\n const handleTranslate = async () => {\n if (!sourceText.trim()) return;\n\n setIsLoading(true);\n setDetectedLanguage(\"\");\n try {\n const response = await fetch(import.meta.url, {\n method: \"POST\",\n body: JSON.stringify({\n sourceText,\n sourceLanguage,\n targetLanguage,\n }),\n });\n\n const result = await response.json();\n setTranslatedText(result.translatedText);\n if (result.detectedLanguage) {\n setDetectedLanguage(result.detectedLanguage);\n }\n } catch (error) {\n setTranslatedText(\"Translation failed. Please try again.\");\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n \n

🌐 Smart Translator

\n setSourceLanguage(e.target.value)}\n >\n {Object.entries(languages).map(([code, name]) => )}\n \n setTargetLanguage(e.target.value)}\n >\n {Object.entries(languages).filter(([code]) => code !== \"auto\").map(([code, name]) => (\n \n ))}\n \n

\n {detectedLanguage && sourceLanguage === \"auto\" && (\n \n Detected Language: {languages[detectedLanguage] || detectedLanguage}\n \n )}\n setSourceText(e.target.value)}\n style={{ width: \"100%\", height: \"100px\", marginBottom: \"10px\" }}\n />\n \n {isLoading ? \"Translating...\" : \"Translate\"}\n \n \n \n \n View Source\n \n

\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\") {\n const { sourceText, sourceLanguage, targetLanguage } = await request.json();\n\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n try {\n // Detect language if auto is selected\n let detectedLang = sourceLanguage;\n if (sourceLanguage === \"auto\") {\n const langDetection = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content: \"Detect the language of the following text. Respond ONLY with the two-letter ISO language code.\",\n },\n {\n role: \"user\",\n content: sourceText,\n },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 10,\n });\n\n detectedLang = langDetection.choices[0].message.content?.trim().toLowerCase() || \"en\";\n }\n\n // Perform translation\n const completion = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n `You are a professional translator. Translate the following text from ${detectedLang} to ${targetLanguage}. Only return the translated text.`,\n },\n {\n role: \"user\",\n content: sourceText,\n },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 300,\n });\n\n return new Response(\n JSON.stringify({\n translatedText: completion.choices[0].message.content || \"Translation failed\",\n detectedLanguage: detectedLang,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n return new Response(\n JSON.stringify({\n translatedText: \"Translation error\",\n detectedLanguage: null,\n }),\n { status: 500 },\n );\n }\n }\n\n return new Response(\n `\n \n \n Smart Translator\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}",["D",1739830193837],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

LanguageTranslator

Version 4