Client-side translation with AI  |  AI on Chrome  |  Chrome for Developers
Skip to main content
Docs
Build with Chrome
Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
Web Platform
Capabilities
ChromeDriver
Extensions
Chrome Web Store
Chromium
Web on Android
Origin trials
Release notes
Productivity
Create the best experience for your users with the web's best tools.
DevTools
Lighthouse
Chrome UX Report
Accessibility
Modern Web Guidance
Get things done quicker and neater, with our ready-made libraries.
Workbox
Puppeteer
Experience
Design a beautiful and performant web with Chrome.
AI
Performance
CSS and UI
Identity
Payments
Privacy and security
Resources
More from Chrome and Google.
All documentation
Baseline
web.dev
PageSpeed Insights audit
Isolated Web Apps (IWA)
Case studies
Blog
New in Chrome
/
English
Deutsch
Español – América Latina
Français
Indonesia
Italiano
Nederlands
Polski
Português – Brasil
Tiếng Việt
Türkçe
Русский
עברית
العربيّة
فارسی
हिंदी
বাংলা
ภาษาไทย
中文 – 简体
中文 – 繁體
日本語
한국어
Sign in
Docs
AI on Chrome
Built-in AI
Get started
APIs and best practices
Best practices
WebMCP
Learn Evals
Accelerate compute
AI in Chrome
DevTools AI assistance
AI in Extensions
Docs
More
Built-in AI
More
WebMCP
Learn Evals
Accelerate compute
AI in Chrome
More
Case studies
Blog
New in Chrome
Built-in AI
What is built-in AI?
Get started
Benefits of client-side AI
Join the EPP
Try the demos
APIs
API status and overview
Summarizer API
Get started
Summarize in small context windows
Language Detector API
Translator API
Prompt API
Get started
Session management
Session compacting
Structured output
Writer API
Rewriter API
Proofreader API
Polyfill for Prompt API
Polyfill for task APIs
Build with AI
Case studies
Enhance blogging with the Prompt API
Support multilingual experiences
Create engaging article summaries
Create helpful user review summaries
Translate on-device
Client-side or server-side AI
Encourage better reviews with client-side AI
Evaluate reviews with server-side AI
Extensions and AI
Hybrid AI with Firebase AI Logic
Best practices
Cache models
Stream LLM responses
Render streamed LLM responses
Debug the built-in model
Inform users of model download
Understand model management in Chrome
Built-in AI do and don't
Resources
Meet the Chrome team
Glossary and concepts
Gemini API in Node.js
Gemini API in web apps
AI on Web.dev
Build with Chrome
Web Platform
Capabilities
ChromeDriver
Extensions
Chrome Web Store
Chromium
Web on Android
Origin trials
Release notes
Productivity
DevTools
Lighthouse
Chrome UX Report
Accessibility
Modern Web Guidance
Workbox
Puppeteer
Experience
AI
Performance
CSS and UI
Identity
Payments
Privacy and security
Resources
All documentation
Baseline
web.dev
PageSpeed Insights audit
Isolated Web Apps (IWA)
Get started
APIs and best practices
Best practices
DevTools AI assistance
AI in Extensions
Home
Docs
AI on Chrome
Built-in AI
Client-side translation with AI
Stay organized with collections
Save and categorize content based on your preferences.
Maud Nalpas
GitHub
LinkedIn
Bluesky
Kenji Baheux
Alexandra Klepper
GitHub
Bluesky
Published: May 16, 2024, Last updated: November 13, 2024
Explainer
Web
Extensions
Chrome Status
Intent
MDN
Chrome 138
Chrome 138
View
Intent to Ship
Note: The following document was published for Google I/O 2024. While it's still
a useful walkthrough, you may find the code isn't as up-to-date. Take a
look at the Translator API documentation.
Expanding your business into international markets can be expensive. More
markets likely means more languages to support, and more languages can lead to
challenges with interactive features and flows, such as after-sale support chat.
If your company only has English-speaking support agents, non-native speakers
may find it difficult to explain exactly what problem they've encountered.
How can we use AI to improve the experience for speakers of multiple languages,
while minimizing risk and confirming if it's worth investing in support agents
who speak additional languages?
Some users try to overcome the language barrier with their browser's built-in
page translation feature or third-party tools. But the user experience is
sub-par with interactive features, like our after-sale support chat.
For chat tools with integrated translation, it's important to minimize delays.
By processing language on device, you can translate in real-time, before the
user even submits the message.
That said, transparency is critical when bridging a language gap with automated
tools. Remember, before the conversation starts, make it clear you've
implemented AI tools which allow for this translation. This sets expectations
and helps avoid awkward moments if the translation isn't perfect. Link out to
your policy with more information.
We're working on a client-side Translator API
with a model built into Chrome.
Review the hardware requirements
The following requirements exist for developers and the users who operate features using these
APIs in Chrome. Other browsers may have different operating requirements.
The Language Detector and Translator APIs work in Chrome on
desktop. These APIs do not work on mobile devices.
The Prompt API, Summarizer API, Writer API,
Rewriter API, and Proofreader API work in Chrome when the
following conditions are met:
Operating system: Windows 10 or 11; macOS 13+ (Ventura and onwards);
Linux; or ChromeOS (from Platform 16389.0.0 and onwards) on
Chromebook Plus devices.
Chrome for Android, iOS, and ChromeOS on non-Chromebook Plus devices are not yet supported
by the APIs which use foundation models.
Storage: At least 22 GB of free space on the volume that contains your
Chrome profile.
Built-in models should be significantly smaller. The exact size may
vary slightly with updates.
GPU or CPU: Built-in models can run with GPU or CPU.
GPU: Strictly more than 4 GB of VRAM.
CPU: 16 GB of RAM or more and 4 CPU cores or more.
Note: The Prompt API with audio input requires a GPU.
Network: Unlimited data or an unmetered connection.
Key term: A
metered connection
is a data-limited internet connection. Wi-Fi and ethernet connections tend to be unmetered
by default, while cellular connections are often metered.
Note: The network requirement is only for the initial download of the
model. Subsequent use of the model does not require a network connection. No data is sent to
Google or any third party when using the model.
Gemini Nano's exact size may vary as the browser updates the model. To determine the current size, visit chrome://on-device-internals.
Note: If the available storage space falls to less than
10 GB after the download, the model is removed from your device. The model redownloads
once the requirements are met.
Demo chat
We've built a customer support chat which allows for users to type in their
first language and receive real-time translation for the support agent.
Use the Translator API
To determine if the Translator API is supported, run the following feature
detection snippet.
if ('Translator' in self) {
// The Translator API is supported.
}
Check language pair support
Translation is managed with language packs, downloaded on demand. A language
pack is like a dictionary for a given language.
sourceLanguage: The current language for the text.
targetLanguage: The final language the text should be translated into.
Use BCP 47 language short codes as
strings. For example, 'es' for Spanish or 'fr' for French.
Determine the model availability
and listen for the downloadprogress:
const translator = await Translator.create({
sourceLanguage: 'es',
targetLanguage: 'fr',
monitor(m) {
m.addEventListener('downloadprogress', (e) => {
console.log(`Downloaded ${e.loaded * 100}%`);
});
},
});
If the download fails, then downloadprogress events stop and
the ready promise is rejected.
Create and run the translator
To create a translator, call the asynchronous create()
function. It requires an options parameter with two
fields, one for the sourceLanguage and one for the targetLanguage.
// Create a translator that translates from English to French.
const translator = await Translator.create({
sourceLanguage: 'en',
targetLanguage: 'fr',
});
Once you have a translator, call the asynchronous translate() function to
translate your text.
await translator.translate('Where is the next bus stop, please?');
// "Où est le prochain arrêt de bus, s'il vous plaît ?"
Next steps
We want to see what you're building with the Translator API. Share your
websites and web applications with us on X,
YouTube, and
LinkedIn.
You can sign up for the Early Preview Program
to test this API and others with local prototypes.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-11-13 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-11-13 UTC."],[],[]]
Contribute
File a bug
See open issues
Related content
Chromium updates
Case studies
Archive
Podcasts & shows
Follow
@ChromiumDev on X
YouTube
Chrome for Developers on LinkedIn
RSS
Terms
Privacy
Manage cookies
English
Deutsch
Español – América Latina
Français
Indonesia
Italiano
Nederlands
Polski
Português – Brasil
Tiếng Việt
Türkçe
Русский
עברית
العربيّة
فارسی
हिंदी
বাংলা
ภาษาไทย
中文 – 简体
中文 – 繁體
日本語
한국어