🎄 Instant Local Translation with Chrome 🌐

The Translation Challenge

Let's face it, translation services are everywhere. Google Translate, DeepL, Microsoft Translator - you name it.

The cloud is swimming with translation solutions that can handle everything from casual conversations to complex technical documents. But what if we could bring translation directly into your browser, without sending text to a cloud solution? These often rely on sending your text to external servers, introducing delays or privacy concerns.

Now, imagine a solution that works natively within your browser, processing translations faster and more securely without the need to leave your page or rely on the cloud.

Getting started

Enable Language Detector and Translator API on Chrome

You need to enable chrome://flags/#language-detection-api and chrome://flags/#translation-api flags.

I've tested on Chrome Version: 132.0.6834.46.

Code sample

// Small sample without any error handling.
// Currently, it works best when translating from English to other languages, but not other way around.

document.addEventListener('mouseup', async () => {
  const selection = document.getSelection();
  if (!selection || selection.isCollapsed || selection.toString().trim() === '') {
    return;
  }

  const detector = await window.translation.createDetector();
  const results = await detector.detect(selection.toString());
  if (results.length < 1) return;

  // Output detected languages
  console.log(results);

  const targetLanguage = 'ja';
  const sourceLanguage = results[0].detectedLanguage;
  if (sourceLanguage === targetLanguage) return;

  const translator = await window.translation.createTranslator({ sourceLanguage, targetLanguage });
  const result = await translator.translate(selection.toString());
  // Output translated text if available
  console.log(result);
});

Example Implementation with Chrome Extension

I've crafted a simple Chrome extension that utilizing both the detection and the translation API.

Here's how it works: Users can select any text on a webpage, and the extension first uses language detection API to identify the source language. Once detected, the text is passed to the translation API, with the target language predetermined through a popup settings window.

https://github.com/zenoplex/ai-translate-chrome-extension

🛠 Disclaimer

🤔 Not 100% Offline capable

While I said, "Instant local translation", it isn't completely local... yet.

When you first use translation api, it downloads the required language model behind the hood. It's (probably) one-time download, but it means you're not 100% offline from the get-go.

The good news? Once downloaded, it's pretty-fast and (hopefully) totally private. Plus, it works on dynamic content which browser's built-in page translation fails to work.

Conclusion

Although this is currently a Chrome-only feature, we're glimpsing a future where manual internationalization might become obsolete 😁.

Today, the translation api has limited language support. Yet, I hope these technologies will make language become a transparent layer rather than a barrier.

Keep experimenting. Keep pushing boundaries. 🌍🚀

Cheers!