🎙️ Language Speech-to-Text

\n \n \n {isRecording ? \"Stop Recording\" : \"Start Recording\"}\n \n \n Switch to {currentLanguage === \"english\" ? \"🇰🇷 Korean\" : \"🇺🇸 English\"}\n \n \n Clear Text\n \n \n {isRecording && (\n

\n 🔴 Listening in {currentLanguage === \"english\" ? \"🇺🇸 English\" : \"🇰🇷 Korean\"}...\n

\n )}\n\n

🇰🇷 Korean Transcription

\n \n {captions.korean || \"Korean transcription will appear here...\"}\n

\n\n

🇺🇸 English Transcription

\n \n {captions.english || \"English transcription will appear here...\"}\n

\n \n \n\n \n ℹ️ Web Speech API limitations prevent simultaneous multi-language recognition\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 return new Response(\n `\n \n \n Language Speech-to-Text\n \n \n \n \n \n

\n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","deleted","subdomain","children",[],[103],"files",[147],"counts",{"_169":33,"_170":171,"_172":171,"_173":33},"pulls","branches",1,"forks","envVars","contents",[],"file",{"_107":148,"_99":103,"_149":120,"_150":-5,"_151":139,"_152":138,"_153":113,"_109":178,"_104":155,"_156":157,"_158":159,"_160":27,"_161":-5,"_102":179},["D",1738857316075],[103],"upstream","screenshots","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_97":98,"_99":100,"_101":43,"_102":103,"_105":186,"_176":190,"_193":194,"_214":215,"_222":-7,"_223":33,"_224":27},{"_107":108,"_99":100,"_109":187,"_111":-5,"_112":113,"_114":115,"_116":-5,"_117":-5,"_12":118,"_119":120,"_121":113,"_122":-5,"_123":33,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":27,"_21":188,"_136":189},["D",1746210320058],{"_97":98,"_134":135},{"_104":138,"_99":43,"_107":139,"_140":108,"_141":-5,"_142":-5,"_143":-5,"_144":-5},{"_107":148,"_99":103,"_149":120,"_150":-5,"_151":139,"_152":138,"_153":113,"_109":191,"_104":155,"_156":157,"_158":159,"_160":27,"_161":-5,"_102":192},["D",1738857316075],[103],"history",[195,197,202,206,210],{"_107":148,"_151":139,"_149":120,"_99":103,"_158":159,"_156":157,"_104":155,"_150":-5,"_109":196,"_152":138,"_161":-5},["D",1738857316075],{"_107":198,"_151":139,"_149":120,"_99":103,"_158":199,"_156":157,"_104":200,"_150":-5,"_109":201,"_152":155,"_161":-5},"cdf019e6-2782-11f0-b46e-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n const [isRecording, setIsRecording] = useState(false);\n const [currentLanguage, setCurrentLanguage] = useState<'korean' | 'english'>('english');\n const [captions, setCaptions] = useState({\n korean: \"\",\n english: \"\"\n });\n const recognitionRef = useRef(null);\n\n const createRecognition = useCallback((lang: string, onResult: (transcript: string) => void) => {\n // Check if browser supports Web Speech API\n if (!('webkitSpeechRecognition' in window)) {\n alert('Web Speech API is not supported in this browser.');\n return null;\n }\n\n // @ts-ignore\n const recognition = new webkitSpeechRecognition();\n recognition.continuous = false; // Changed to false for better language switching\n recognition.interimResults = true;\n recognition.lang = lang;\n\n recognition.onresult = (event) => {\n let finalTranscript = '';\n\n for (let i = event.resultIndex; i < event.results.length; ++i) {\n if (event.results[i].isFinal) {\n finalTranscript += event.results[i][0].transcript;\n }\n }\n\n if (finalTranscript.trim()) {\n onResult(finalTranscript);\n }\n };\n\n recognition.onerror = (event) => {\n console.error(`Speech recognition error (${lang}):`, event.error);\n };\n\n recognition.onend = () => {\n // Automatically restart recognition\n if (isRecording) {\n recognition.start();\n }\n };\n\n return recognition;\n }, [isRecording]);\n\n const startRecording = (lang: 'korean' | 'english') => {\n // Stop any existing recognition\n if (recognitionRef.current) {\n recognitionRef.current.stop();\n }\n\n // Create recognition for selected language\n const recognition = createRecognition(\n lang === 'korean' ? 'ko-KR' : 'en-US', \n (transcript) => {\n setCaptions(prev => ({\n ...prev,\n [lang]: prev[lang] + transcript + \" \"\n }));\n }\n );\n\n // Store reference and start recording\n recognitionRef.current = recognition;\n if (recognition) {\n recognition.start();\n setIsRecording(true);\n setCurrentLanguage(lang);\n }\n };\n\n const stopRecording = () => {\n if (recognitionRef.current) {\n recognitionRef.current.stop();\n }\n setIsRecording(false);\n };\n\n const toggleRecording = () => {\n if (isRecording) {\n stopRecording();\n } else {\n startRecording(currentLanguage);\n }\n };\n\n const switchLanguage = () => {\n const newLanguage = currentLanguage === 'english' ? 'korean' : 'english';\n stopRecording();\n startRecording(newLanguage);\n };\n\n const clearCaptions = () => {\n setCaptions({ korean: \"\", english: \"\" });\n };\n\n return (\n

🎙️ Language Speech-to-Text

\n \n \n \n

\n {isRecording && (\n

\n 🔴 Listening in {currentLanguage === 'english' ? '🇺🇸 English' : '🇰🇷 Korean'}...\n

\n )}\n \n

🇰🇷 Korean Transcription

\n {captions.korean || \"Korean transcription will appear here...\"}\n

\n \n

🇺🇸 English Transcription

\n {captions.english || \"English transcription will appear here...\"}\n

\n \n

\n ℹ️ Web Speech API limitations prevent simultaneous multi-language recognition\n

\n \n \n View Source\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 return new Response(`\n \n \n Language Speech-to-Text\n \n \n \n \n \n

\n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}",3,["D",1738857143856],{"_107":203,"_151":139,"_149":120,"_99":103,"_158":204,"_156":157,"_104":94,"_150":-5,"_109":205,"_152":200,"_161":-5},"cde9e530-2782-11f0-b46e-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n const [isRecording, setIsRecording] = useState(false);\n const [captions, setCaptions] = useState({\n korean: \"\",\n english: \"\"\n });\n const koreanRecognitionRef = useRef(null);\n const englishRecognitionRef = useRef(null);\n\n const createRecognition = useCallback((lang: string, onResult: (transcript: string) => void) => {\n // Check if browser supports Web Speech API\n if (!('webkitSpeechRecognition' in window)) {\n alert('Web Speech API is not supported in this browser.');\n return null;\n }\n\n // @ts-ignore\n const recognition = new webkitSpeechRecognition();\n recognition.continuous = true;\n recognition.interimResults = true;\n recognition.lang = lang;\n\n recognition.onresult = (event) => {\n let finalTranscript = '';\n\n for (let i = event.resultIndex; i < event.results.length; ++i) {\n if (event.results[i].isFinal) {\n finalTranscript += event.results[i][0].transcript;\n }\n }\n\n if (finalTranscript.trim()) {\n onResult(finalTranscript);\n }\n };\n\n recognition.onerror = (event) => {\n console.error(`Speech recognition error (${lang}):`, event.error);\n };\n\n return recognition;\n }, []);\n\n const startRecording = () => {\n // Create Korean recognition\n const koreanRecognition = createRecognition('ko-KR', (transcript) => {\n setCaptions(prev => ({\n ...prev,\n korean: prev.korean + transcript + \" \"\n }));\n });\n\n // Create English recognition\n const englishRecognition = createRecognition('en-US', (transcript) => {\n setCaptions(prev => ({\n ...prev,\n english: prev.english + transcript + \" \"\n }));\n });\n\n // Store references\n koreanRecognitionRef.current = koreanRecognition;\n englishRecognitionRef.current = englishRecognition;\n\n // Start both recognitions\n if (koreanRecognition && englishRecognition) {\n koreanRecognition.start();\n englishRecognition.start();\n setIsRecording(true);\n }\n };\n\n const stopRecording = () => {\n if (koreanRecognitionRef.current) {\n koreanRecognitionRef.current.stop();\n }\n if (englishRecognitionRef.current) {\n englishRecognitionRef.current.stop();\n }\n setIsRecording(false);\n };\n\n const toggleRecording = () => {\n if (isRecording) {\n stopRecording();\n } else {\n startRecording();\n }\n };\n\n const clearCaptions = () => {\n setCaptions({ korean: \"\", english: \"\" });\n };\n\n return (\n

🎙️ Dual Language Speech-to-Text

\n \n \n

\n {isRecording &&

🔴 Listening in Korean and English...

}\n \n

🇰🇷 Korean Transcription

\n {captions.korean || \"Korean transcription will appear here...\"}\n

\n \n

🇺🇸 English Transcription

\n {captions.english || \"English transcription will appear here...\"}\n

\n \n \n View Source\n \n

\n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}",["D",1738856921364],{"_107":207,"_151":139,"_149":120,"_99":103,"_158":208,"_156":157,"_104":171,"_150":-5,"_109":209,"_152":94,"_161":-5},"cddeb2fa-2782-11f0-b46e-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n const [isRecording, setIsRecording] = useState(false);\n const [captions, setCaptions] = useState(\"\");\n const recognitionRef = useRef(null);\n\n const startRecording = () => {\n // Check if browser supports Web Speech API\n if (!('webkitSpeechRecognition' in window)) {\n alert('Web Speech API is not supported in this browser.');\n return;\n }\n\n // @ts-ignore\n const recognition = new webkitSpeechRecognition();\n recognitionRef.current = recognition;\n\n recognition.continuous = true;\n recognition.interimResults = true;\n recognition.lang = 'ko-KR'; // Korean language\n\n recognition.onresult = (event) => {\n let interimTranscript = '';\n let finalTranscript = '';\n\n for (let i = event.resultIndex; i < event.results.length; ++i) {\n if (event.results[i].isFinal) {\n finalTranscript += event.results[i][0].transcript;\n } else {\n interimTranscript += event.results[i][0].transcript;\n }\n }\n\n setCaptions(prev => prev + finalTranscript + \" \");\n };\n\n recognition.onerror = (event) => {\n console.error('Speech recognition error:', event.error);\n };\n\n recognition.start();\n setIsRecording(true);\n };\n\n const stopRecording = () => {\n if (recognitionRef.current) {\n recognitionRef.current.stop();\n setIsRecording(false);\n }\n };\n\n const toggleRecording = () => {\n if (isRecording) {\n stopRecording();\n } else {\n startRecording();\n }\n };\n\n const clearCaptions = () => {\n setCaptions(\"\");\n };\n\n return (\n

🎙️ Speech-to-Text (Korean)

\n \n \n

\n {isRecording &&

🔴 Listening...

}\n

\n {captions || \"Transcription will appear here...\"}\n

\n \n View Source\n \n

\n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}",["D",1738590043516],{"_107":211,"_151":139,"_149":120,"_99":103,"_158":212,"_156":157,"_104":33,"_150":-5,"_109":213,"_152":171,"_161":-5},"cdd2936c-2782-11f0-b46e-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport {\n createClient,\n LiveTranscriptionEvents\n} from \"https://esm.sh/@deepgram/sdk@2.2.1\";\n\nfunction App() {\n const [isRecording, setIsRecording] = useState(false);\n const [captions, setCaptions] = useState(\"\");\n const [mediaRecorder, setMediaRecorder] = useState(null);\n const [dgConnection, setDgConnection] = useState(null);\n\n const startRecording = async () => {\n const deepgramApiKey = Deno.env.get('DEEPGRAM_API_KEY');\n if (!deepgramApiKey) {\n alert('Deepgram API key is missing');\n return;\n }\n\n const deepgram = createClient(deepgramApiKey);\n const connection = deepgram.listen.live({\n model: \"nova-2\",\n diarize: true,\n interim_results: true,\n language: \"ko\"\n });\n\n connection.on(LiveTranscriptionEvents.Open, async () => {\n connection.on(LiveTranscriptionEvents.Transcript, (data) => {\n setCaptions(prev => prev + data.channel.alternatives[0].transcript + \" \");\n });\n\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n const recorder = new MediaRecorder(stream, {\n mimeType: \"audio/webm\"\n });\n\n recorder.addEventListener(\"dataavailable\", async (event) => {\n if (event.data.size > 0) {\n connection.send(event.data);\n }\n });\n\n recorder.start(1000);\n setMediaRecorder(recorder);\n setDgConnection(connection);\n setIsRecording(true);\n } catch (error) {\n console.error(\"Error accessing microphone:\", error);\n }\n });\n };\n\n const toggleRecording = () => {\n if (mediaRecorder && mediaRecorder.state === \"recording\") {\n mediaRecorder.stop();\n dgConnection?.close();\n setIsRecording(false);\n setMediaRecorder(null);\n setDgConnection(null);\n } else {\n startRecording();\n }\n };\n\n return (\n

Speech-to-Text Transcription

\n \n {isRecording ? \"Listening...\" : \"\"}\n

{captions}

\n \n View Source\n \n

\n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}",["D",1738589972814],"versions",[216,218,219,220,221],{"_176":195,"_217":197},"previous",{"_176":197,"_217":202},{"_176":202,"_217":206},{"_176":206,"_217":210},{"_176":210,"_217":-5},"versionNumber","page","hasNext","routes/_app","actionData","errors"]

History for main.tsx