demo · v131
auto-detect + translate (3-stage pipeline)
The full user-comment flow: LanguageDetector identifies the source, then Translator renders into the user's locale. Watch the pipeline in three stages: raw input, detection (with confidence), and translated output. Try a sample or paste your own.
flags
Translator needs
chrome://flags/#translation-api. LanguageDetector needs chrome://flags/#language-detection-api. Both models are downloaded on first use.
1. input
2. detection
Paste text and click run.
3. translation
—
how it composes
This is the canonical comment-thread pattern. A user posts in their own language, the page detects, translates if needed, and shows a "Translated from X" affordance. The Translator's availability() call gates the download — for a high-traffic site this means the first user pays the model cost and every subsequent user gets a cached model.
the api
const detector = await LanguageDetector.create();
const detections = await detector.detect(text);
const [best] = detections;
// best = { detectedLanguage: "fr", confidence: 0.97 }
const translator = await Translator.create({
sourceLanguage: best.detectedLanguage,
targetLanguage: navigator.language.slice(0,2),
});
const translated = await translator.translate(text);