/* ============================================================ Translate — a Google-Translate-style tool. • Text mode: type English, see Russian in the universal stack (Cyrillic / phonetic / English), with audio + language swap. • Live mode: a mic that runs a real-time bilingual conversation. ============================================================ */ (function () { const { useState, useRef, useEffect, useCallback } = React; const A = window.APP; const speak = window.speakRU; /* 2026-06-05 7:47PM — Translate rewritten per doc 03 §A1. TextMode now calls POST /api/translate and renders the canonical StackedGloss result (natural translation + literal + per-token gloss + tap-to-hear + a save heart, inherited from StackedGloss). Tiering: single words resolve live (debounced); multi-word phrases require explicit submit (Enter / the Translate button) since they may hit the paid LLM tier. Loading skeleton + kind error/retry states. Quick-phrase chips now actually call the API (cache-warm). LiveMode untouched. Status: ⚠️ PENDING USER TESTING */ const CYRILLIC = /[А-Яа-яЁё]/; function detectDir(text) { return CYRILLIC.test(text) ? 'ru2en' : 'en2ru'; } function isMultiWord(text) { return /\s/.test(text.trim()) && text.trim().split(/\s+/).length > 1; } // Map the API response (doc 03 §A2.1) into a StackedGloss item. // The shapes already align; we just attach `direction` for dedupe // and guarantee a `words` array so the renderer never throws. function toGlossItem(res, dir) { const words = Array.isArray(res.words) && res.words.length ? res.words : [{ ru: res.ru, phon: (res.words && res.words[0] && res.words[0].phon) || '', en: res.translation }]; return { type: res.type || (words.length > 1 ? 'sentence' : 'word'), ru: res.ru, translation: res.translation, literal: res.literal || null, note: res.note || null, words, direction: dir === 'ru2en' ? 'ru' : 'en', lemma_id: res.lemma_id != null ? res.lemma_id : null, }; } async function callTranslate(text, dir, signal) { const r = await fetch('/api/translate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: text.trim(), direction: dir }), signal, }); let body = null; try { body = await r.json(); } catch (e) { /* non-JSON */ } if (!r.ok || !body) { const err = new Error((body && body.error) || ('translate ' + r.status)); err.payload = body && body.partial ? body.partial : null; err.code = body && body.error; throw err; } if (body.error) { // graceful degradation: server returned an error envelope with maybe a partial const err = new Error(body.error); err.payload = body.partial || null; err.code = body.error; throw err; } return body; } function Seg({ options, value, onChange }) { return (
{options.map(o => ( ))}
); } function Skeleton() { return (
{[54,46,62].map((w,i) => (
))}
translating…
); } function TextMode() { const [dir, setDir] = useState('en2ru'); // active translation direction const [manual, setManual] = useState(false); // user overrode auto-detect const [text, setText] = useState(''); const [status, setStatus] = useState('idle'); // idle · loading · done · error const [item, setItem] = useState(null); // StackedGloss item const [errMsg, setErrMsg] = useState(''); const abortRef = useRef(null); const debounceRef = useRef(null); const effectiveDir = manual ? dir : detectDir(text); const [from, to] = effectiveDir === 'en2ru' ? ['English', 'Russian'] : ['Russian', 'English']; const chips = ['Hello', 'Thank you', 'Where is the bathroom', "I don't understand", 'How much is this']; const cancelInflight = () => { if (abortRef.current) { abortRef.current.abort(); abortRef.current = null; } if (debounceRef.current) { clearTimeout(debounceRef.current); debounceRef.current = null; } }; const run = useCallback(async (raw, d) => { const q = (raw || '').trim(); if (!q) { setStatus('idle'); setItem(null); return; } cancelInflight(); const ctrl = new AbortController(); abortRef.current = ctrl; setStatus('loading'); setErrMsg(''); try { const res = await callTranslate(q, d, ctrl.signal); if (ctrl.signal.aborted) return; setItem(toGlossItem(res, res.direction || d)); setStatus('done'); } catch (err) { if (err.name === 'AbortError') return; // fail loudly but kindly; surface any partial we did resolve if (err.payload) { setItem(toGlossItem(err.payload, d)); } else { setItem(null); } setErrMsg(err.code === 'llm_unavailable' ? 'Full translation coming soon — try shorter phrases or single words.' : err.code === 'text_too_long' ? 'That’s a bit long — try a shorter phrase.' : err.code === 'empty_text' ? '' : err.code === 'rate_limited' ? 'Too many translations just now — give it a moment.' : 'Couldn’t translate that just now.'); setStatus(err.code === 'empty_text' ? 'idle' : 'error'); } finally { if (abortRef.current === ctrl) abortRef.current = null; } }, []); // Live-resolve single words (free dictionary/cache tier); debounce. // Multi-word input waits for explicit submit (Enter / Translate btn). const onChange = (v) => { setText(v); cancelInflight(); const q = v.trim(); if (!q) { setStatus('idle'); setItem(null); return; } const d = manual ? dir : detectDir(v); if (!isMultiWord(v)) { debounceRef.current = setTimeout(() => run(v, d), 350); } else { // keep prior result visible; require submit for the LLM tier setStatus(s => (s === 'loading' ? 'idle' : s)); } }; const submit = () => { const d = manual ? dir : detectDir(text); run(text, d); }; const swap = () => { const nd = effectiveDir === 'en2ru' ? 'ru2en' : 'en2ru'; setManual(true); setDir(nd); setText(''); setItem(null); setStatus('idle'); cancelInflight(); }; useEffect(() => () => cancelInflight(), []); const showSkeleton = status === 'loading' && !item; const showResult = item != null; return (
{/* language bar */}
{from}
{to}
{!manual && (
auto-detecting language
)} {/* input */}