demo · v138

Detect-then-translate pipeline

The classic real-world combo: messages arrive in any language, the detector probabilistically labels each one, and only messages above a confidence threshold get auto-translated into the reader's locale. This is the canonical pipeline the spec was designed for.

On-device. Uses LanguageDetector + Translator. If either is missing the page falls back to a tiny heuristic detector so the UI surface still demos. First call may download model packs.
checking detector…
checking translator…

Inbox simulator

0
messages
0
detected ≥ threshold
0
auto-translated
0
skipped (low conf)

What's happening

  1. For each incoming message, call detector.detect(text) — returns a ranked list of { detectedLanguage, confidence }.
  2. If the top candidate's confidence is below the configured threshold, mark the message uncertain and skip translation. (You don't want to translate "ok 👍" or "hi" — they're meaningless to detect.)
  3. If the detected language equals the reader's target locale, mark it native and skip translation.
  4. Otherwise, look up or create a Translator for that exact pair and translate. Sessions are cached so subsequent messages in the same language are warm.
  5. Per-message: render the source, the detected language tag, the confidence, and (if translated) the output.
const detector = await LanguageDetector.create();
const translators = new Map();

async function handleMessage(text, targetLang, threshold) {
  const [top] = await detector.detect(text);
  if (top.confidence < threshold)           return { skip: 'low-confidence', top };
  if (top.detectedLanguage === targetLang)    return { skip: 'already-native', top };

  const key = top.detectedLanguage + '|' + targetLang;
  if (!translators.has(key)) {
    translators.set(key, await Translator.create({
      sourceLanguage: top.detectedLanguage,
      targetLanguage: targetLang,
    }));
  }
  return { top, output: await translators.get(key).translate(text) };
}

see also