v148 · AI · On-device · demo

Live Language Badge

A compose box that detects the language as you type and shows a live badge. When the detected language isn't English, a "Translate to English" hint bar appears. The model may download on demand, then detection runs on-device via LanguageDetector.create().

Chrome 148+ — LanguageDetector API. Simulated results are shown in browsers without the API so the UI is still functional.

Type in any language · try the sample snippets · watch the badge update as you type

New message

—

Detected language:

// Live language badge as user types
const detector = await LanguageDetector.create({
  expectedInputLanguages: ['en', 'fr', 'es', 'de', 'ja', 'ar', 'zh']
});

textArea.addEventListener('input', debounce(async () => {
  const results = await detector.detect(textArea.value);
  // results: [{ detectedLanguage: 'fr', confidence: 0.87 }, …]

  const top = results[0];
  badge.textContent = top.detectedLanguage;     // e.g. "fr"
  confBar.style.width = (top.confidence * 100) + '%';

  if (top.detectedLanguage !== 'en') {
    translateHint.show();  // "Translate to English?"
  }
}, 200));

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

see also

references

implementation reference