/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useCallback, useRef, useState } from "https://esm.sh/react@18.2.0"; function App() { const [isRecording, setIsRecording] = useState(false); const [currentLanguage, setCurrentLanguage] = useState<"korean" | "english">("english"); const [captions, setCaptions] = useState({ korean: "", english: "", }); const recognitionRef = useRef(null); const createRecognition = useCallback((lang: string, onResult: (transcript: string) => void) => { // Check if browser supports Web Speech API if (!("webkitSpeechRecognition" in window)) { alert("Web Speech API is not supported in this browser."); return null; } // @ts-ignore const recognition = new webkitSpeechRecognition(); recognition.continuous = false; // Changed to false for better language switching recognition.interimResults = true; recognition.lang = lang; recognition.onresult = (event) => { let finalTranscript = ""; for (let i = event.resultIndex; i < event.results.length; ++i) { if (event.results[i].isFinal) { finalTranscript += event.results[i][0].transcript; } } if (finalTranscript.trim()) { onResult(finalTranscript); } }; recognition.onerror = (event) => { console.error(`Speech recognition error (${lang}):`, event.error); }; recognition.onend = () => { // Automatically restart recognition if (isRecording) { recognition.start(); } }; return recognition; }, [isRecording]); const startRecording = (lang: "korean" | "english") => { // Stop any existing recognition if (recognitionRef.current) { recognitionRef.current.stop(); } // Create recognition for selected language const recognition = createRecognition( lang === "korean" ? "ko-KR" : "en-US", (transcript) => { setCaptions(prev => ({ ...prev, [lang]: prev[lang] + transcript + " ", })); }, ); // Store reference and start recording recognitionRef.current = recognition; if (recognition) { recognition.start(); setIsRecording(true); setCurrentLanguage(lang); } }; const stopRecording = () => { if (recognitionRef.current) { recognitionRef.current.stop(); } setIsRecording(false); }; const toggleRecording = () => { if (isRecording) { stopRecording(); } else { startRecording(currentLanguage); } }; const switchLanguage = () => { const newLanguage = currentLanguage === "english" ? "korean" : "english"; stopRecording(); startRecording(newLanguage); }; const clearCaptions = () => { setCaptions({ korean: "", english: "" }); }; return (

🎙️ Language Speech-to-Text

{isRecording && (

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

)}

🇰🇷 Korean Transcription

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

🇺🇸 English Transcription

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

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

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Language Speech-to-Text

`, { headers: { "content-type": "text/html" }, }, ); }

DualLangWebSpeechAPI

Version 0