/* ============================================================================ TRANSLATE — bidirectional. English ⇄ Vietnamese and Kannada ⇄ Vietnamese. • Pick your language (English / Kannada); tap ⇄ to swap direction. • Hold-to-talk: press & hold the mic → it listens; release → translate + speak. • Free-text box + offline curated phrasebook. ============================================================================ */ const LANG_CODE = { en: "en-US", kn: "kn-IN", vi: "vi-VN" }; const LANG_NAME = { en: "English", kn: "Kannada", vi: "Vietnamese" }; function speakLang(text, lang) { try { const synth = window.speechSynthesis; const code = LANG_CODE[lang] || "vi-VN"; const go = () => { const u = new SpeechSynthesisUtterance(text); u.lang = code; const v = synth.getVoices().find((x) => x.lang && x.lang.toLowerCase().startsWith(code.slice(0, 2))); if (v) u.voice = v; u.rate = 0.9; synth.cancel(); synth.speak(u); }; if (!synth.getVoices().length) { synth.onvoiceschanged = go; setTimeout(go, 250); } else { go(); } } catch (e) {} } function TranslateScreen() { const T = window.TRIP; const [home, setHome] = React.useState("en"); // en | kn (your language) const [dir, setDir] = React.useState("toVi"); // toVi | fromVi const [query, setQuery] = React.useState(""); const [out, setOut] = React.useState(null); const [busy, setBusy] = React.useState(false); const [listening, setListening] = React.useState(false); const recRef = React.useRef(null); const finalRef = React.useRef(""); const liveRef = React.useRef(null); const endingRef = React.useRef(false); // true = user/we intentionally closed (don't reconnect) const reconnectRef = React.useRef(0); // consecutive auto-reconnect attempts const [liveStatus, setLiveStatus] = React.useState(""); // "" | connecting | listening | speaking | muted | ending const [liveOpen, setLiveOpen] = React.useState(false); // immersive conversation overlay const [turns, setTurns] = React.useState([]); // committed conversation history const [current, setCurrent] = React.useState(null); // in-progress {heard, translation} const [muted, setMuted] = React.useState(false); const SR = window.SpeechRecognition || window.webkitSpeechRecognition; const gv = !!(window.translation && window.translation.geminiVoice()); // Gemini-powered voice (records audio → Gemini) // Realtime Live API: streams as you speak (instant, conversational). Gemini + key + WS/mic support. const liveOn = !!(window.liveTranslate && window.liveTranslate.supported && window.translation && (function () { const c = window.translation.getConfig(); return c.provider === "gemini" && !!c.key; })()); // Translation always works: free engine by default, your LLM if a key is set in ⚙ Settings. const engineLabel = (window.translation && window.translation.engineLabel()) || "Free translation"; const needsKey = !!(window.translation && window.translation.needsKey()); const wantProvider = window.translation ? (window.translation.ENGINE_LABEL[window.translation.getConfig().provider] || "") : ""; const src = dir === "toVi" ? home : "vi"; const tgt = dir === "toVi" ? "vi" : home; // stop any open live session when leaving the screen React.useEffect(() => () => { endingRef.current = true; try { liveRef.current && liveRef.current.stop(); } catch (e) {} }, []); const runTranslate = async (text, speak) => { const q = (text || "").trim(); if (!q) return; if (!window.translation) { setOut({ error: "fail" }); return; } setBusy(true); setOut(null); try { const res = await window.translation.translate(q, src, tgt); setOut({ t: res.t, pron: res.pron }); if (speak && res.t) speakLang(res.t, tgt); } catch (e) { setOut({ error: "fail" }); } setBusy(false); }; const startListen = () => { if (!SR || listening) return; try { const r = new SR(); r.lang = LANG_CODE[src]; r.interimResults = true; r.continuous = true; finalRef.current = ""; r.onresult = (e) => { let txt = ""; for (let i = 0; i < e.results.length; i++) txt += e.results[i][0].transcript; finalRef.current = txt; setQuery(txt); }; r.onerror = (e) => { setListening(false); const err = e && e.error; if (err === "not-allowed") setOut({ error: "mic" }); else if (err === "service-not-allowed" || err === "language-not-supported") setOut({ error: "lang" }); else if (err === "no-speech" || err === "aborted") { /* ignore */ } else setOut({ error: "speech" }); }; r.onend = () => setListening(false); recRef.current = r; setOut(null); r.start(); setListening(true); } catch (e) { setListening(false); setOut({ error: "lang" }); } }; const stopListen = () => { const r = recRef.current; if (r) { try { r.stop(); } catch (e) {} } setListening(false); setTimeout(() => { if (finalRef.current.trim()) runTranslate(finalRef.current.trim(), true); }, 350); }; // --- Gemini-powered voice: record audio → Gemini transcribes + translates --- const startGem = async () => { try { setOut(null); await window.recorder.start(); setListening(true); } catch (e) { setListening(false); setOut({ error: "mic" }); } }; const stopGem = async () => { setListening(false); let blob; try { blob = window.recorder.stop(); } catch (e) { return; } if (!blob || blob.size < 1600) { return; } // nothing captured setBusy(true); setOut(null); try { const cfg = window.translation.getConfig(); const r = await fetch("/api/voice", { method: "POST", headers: { "x-key": cfg.key, "x-model": "gemini-2.5-flash-lite", "x-mime": blob.type || "audio/wav", "x-src": encodeURIComponent(LANG_NAME[src]), "x-tgt": encodeURIComponent(LANG_NAME[tgt]) }, body: blob }); const d = await r.json().catch(() => ({})); if (d && d.t) { if (d.heard) setQuery(d.heard); setOut({ t: d.t, pron: d.pron || "" }); speakLang(d.t, tgt); } else setOut({ error: "speech" }); } catch (e) { setOut({ error: "speech" }); } setBusy(false); }; // --- realtime Live API: immersive two-way conversation (auto-detect language) --- const connectLive = () => { const cfg = window.translation.getConfig(); const sess = window.liveTranslate.create(); liveRef.current = sess; setCurrent(null); setLiveStatus("connecting"); sess.start({ key: cfg.key, twoWay: true, home, // two-way: {your language} ⇄ Vietnamese, auto-detected status: (s) => { if (s === "listening") reconnectRef.current = 0; setLiveStatus(s); }, partial: (p) => setCurrent(p), // {heard, translation} streaming live turn: (t) => { // a phrase finished → commit to history if (t.heard || t.translation) setTurns((prev) => [...prev, { ...t, side: sideOf(t.heard, home) }]); setCurrent(null); }, error: (code) => { if (code === "mic") { endingRef.current = true; setLiveStatus(""); setCurrent({ error: "mic" }); } // transient errors (connect/model/live) fall through to `closed` → auto-reconnect }, closed: () => { if (endingRef.current || liveRef.current !== sess) return; // intentional / superseded if (reconnectRef.current >= 4) { setLiveStatus(""); setCurrent({ error: "speech" }); return; } reconnectRef.current += 1; setLiveStatus("connecting"); // connection dropped (common on travel wifi) → quietly retry setTimeout(() => { if (!endingRef.current && liveRef.current === sess) connectLive(); }, 800); }, }); }; const openLive = () => { endingRef.current = false; reconnectRef.current = 0; setTurns([]); setCurrent(null); setMuted(false); setLiveOpen(true); connectLive(); }; const closeLive = () => { endingRef.current = true; const s = liveRef.current; liveRef.current = null; if (s) { try { s.stop(); } catch (e) {} } setLiveOpen(false); setLiveStatus(""); setCurrent(null); }; const toggleMute = () => { const s = liveRef.current; if (!s) return; const nm = !muted; setMuted(nm); try { s.setMuted(nm); } catch (e) {} }; // mic tap: prefer realtime Live conversation, then Gemini clip voice (Kannada etc.), else phone speech engine const micTap = () => { if (busy) return; if (liveOn) { openLive(); } else if (gv) { listening ? stopGem() : startGem(); } else { if (!SR) return; listening ? stopListen() : startListen(); } }; const micEnabled = liveOn || gv || !!SR; const swap = () => { setDir((d) => (d === "toVi" ? "fromVi" : "toVi")); setQuery(""); setOut(null); }; const ql = query.trim().toLowerCase(); const book = T.phrasebook .map((g) => ({ ...g, items: g.items.filter((it) => !ql || it.en.toLowerCase().includes(ql) || it.vi.toLowerCase().includes(ql) || (it.kn || "").includes(query.trim())) })) .filter((g) => g.items.length); const placeholder = { en: "Type in English…", kn: "ಕನ್ನಡದಲ್ಲಿ ಬರೆಯಿರಿ…", vi: "Nhập tiếng Việt…" }[src]; const langChip = (code, active) => ( {LANG_NAME[code] === "Vietnamese" ? "Tiếng Việt" : LANG_NAME[code]} ); return ( <> {liveOpen && ( )}
{/* your language */}
{ setHome(v); setOut(null); }} tabs={[{ id: "en", label: "English" }, { id: "kn", label: "ಕನ್ನಡ" }]} />
{/* direction with swap */}
{langChip(src, true)} {langChip(tgt, false)}
{/* type to translate */}
Type to translate