demo · v138

Language pair matrix

Translator availability is per-direction, not per-language. EN→FR can be available while FR→EN is downloadable and EN→TH is unavailable. This is the tool: probe an N × N matrix of pairs in parallel, see which packs the browser has, and run a one-shot translation on any cell.

On-device. Each pair check calls Translator.availability({source, target}). Pairs that are already available translate instantly; downloadable pairs trigger a one-off download on first use. If the API is missing the matrix renders a heuristic prediction so the UI surface still demos.
probe a matrix to see counts.
available downloadable downloading unavailable self / pending

What's happening

  1. Translator.availability({sourceLanguage, targetLanguage}) resolves to available, downloadable, downloading, or unavailable — per direction.
  2. The matrix fires every probe in parallel; the page collects a count of each state.
  3. Clicking a cell calls Translator.create({sourceLanguage, targetLanguage, monitor}). If the pair was downloadable, the monitor's downloadprogress event drives a progress bar.
  4. translator.translate(text) returns a string; the detail panel shows source, target, and output. Sessions are cached so re-clicking the same cell is instant.
  5. This matrix is also how product teams answer "which translation directions are zero-cost on the user's device right now?" — a question you can't answer without probing.
const langs = ['en', 'fr', 'de', 'ja', 'zh', 'ar'];
const probes = [];
for (const s of langs) for (const t of langs) {
  if (s === t) continue;
  probes.push(Translator.availability({sourceLanguage: s, targetLanguage: t})
    .then(state => ({s, t, state})));
}
const matrix = await Promise.all(probes);
// → [{s:'en', t:'fr', state:'available'}, {s:'en', t:'ja', state:'downloadable'}, …]

see also