Machine Translation in the Browser

Translate text between languages using dedicated translation models or Chrome Built-in AI - offline and private.

What Is Machine Translation?

Machine translation converts text from one language to another using sequence-to-sequence models trained on parallel corpora. LocalMode offers two approaches: OPUS-MT models (dedicated translation architectures for specific language pairs) and Chrome Built-in AI (zero-download translation via Gemini Nano in Chrome 138+). Both use the same translate() function and TranslationModel interface.

This capability is exposed through the translate() function in @localmode/core. All processing runs entirely in the browser - no server, no API key, no data leaves the device. After the initial model download, machine translation works completely offline.

Real-World Applications

Multilingual documentation sites. Customer support in multiple languages. Real-time chat translation. Content localization workflows. Browser extension for page translation. International e-commerce product descriptions.

These use cases all benefit from local, on-device processing: user data stays private, there are no per-request API costs, and the application works without internet after initial setup.

Getting Started

Install the required packages:

npm install @localmode/core @localmode/transformers

Import the core function and provider:

import { translate } from '@localmode/core';
import { transformers } from '@localmode/transformers';

The recommended starting model is Xenova/opus-mt-en-de - it provides the best balance of quality, speed, and download size for most applications.

Code Example

import { translate } from '@localmode/core';
import { transformers } from '@localmode/transformers';

// Using OPUS-MT for guaranteed quality
const model = transformers.translator('Xenova/opus-mt-en-de');
const { translation } = await translate({
  model,
  text: 'Hello, how are you?',
  targetLanguage: 'de',
});
// "Hallo, wie geht es dir?"

// Using Chrome AI (zero download, Chrome 138+ only)
import { chromeAI } from '@localmode/chrome-ai';
const chromeModel = chromeAI.translator({ sourceLanguage: 'en', targetLanguage: 'de' });

This example demonstrates the core workflow: create a model instance from the provider, call the translate() function with your input, and receive structured results. The same pattern works identically across all 2 available providers: Transformers.js, Chrome Built-in AI.

Available Models

The following models support machine translation through LocalMode. Choose based on your target device, acceptable download size, and quality requirements.

Choosing a model: For most applications, start with the recommended model (Xenova/opus-mt-en-de). If download size is the primary constraint (e.g., mobile PWA, browser extension), pick the smallest model that meets your quality bar. If quality is the priority (e.g., enterprise search, content analysis), use the largest model your target devices can handle.

Cloud vs Local: Cost and Privacy Comparison

Running machine translation locally eliminates per-request API costs and keeps all data on-device. Here is how the economics compare:

Google Translate API costs $20 per million characters. DeepL API costs $25 per million characters. LocalMode translation costs $0 using either OPUS-MT (100MB download per language pair) or Chrome AI (zero download). Quality is comparable for common language pairs.

The break-even point for most applications is low: if you process more than a few hundred requests per day, local inference costs less than any cloud API within the first week. For privacy-sensitive applications (medical records, legal documents, financial data), the cost comparison is secondary - the ability to process data without it ever leaving the device is the primary value.

Available Providers

• Transformers.js - ONNX-optimized models via ONNX Runtime Web. Supports both WebGPU and WASM backends. Broadest model catalog for non-LLM tasks.
• Chrome Built-in AI - Chrome Built-in AI (Gemini Nano). Zero model download. Available in Chrome 138+ with flag.

AbortSignal Support

All translate() calls support cancellation through the standard AbortSignal API:

const controller = new AbortController();

const promise = translate({
  model,
  text: 'input text',
  abortSignal: controller.signal,
});

// Cancel if needed (e.g., user navigates away)
controller.abort();

This is essential for responsive UIs - cancel in-flight operations when the user navigates away, submits a new query, or closes a dialog. The underlying model inference stops immediately, freeing memory and compute resources.

React Integration

If you are building a React application, @localmode/react provides hooks that manage loading states, error handling, and cancellation automatically:

npm install @localmode/react

import { useTranslate } from '@localmode/react';

The hook returns { data, error, isLoading, execute, cancel, reset } - providing everything a UI component needs to display progress, handle errors, offer cancellation, and reset state.

Related Pages

• Opus Mt Translation - model guide
• Chrome Ai - model guide
• Text Generation - task guide
• Text Embeddings - task guide

Methodology

This guide is based on LocalMode's source code (packages/transformers/src/models.ts, packages/core/src/translation/, packages/chrome-ai/src/), the TRANSLATION_MODELS catalog (six Helsinki-NLP OPUS-MT directional pairs), and the ChromeAITranslator implementation (modelId chrome-ai:gemini-nano-translator). Cloud pricing figures were verified against the official Google Cloud Translation pricing page ($20/million characters for NMT after the 500K free-tier) and multiple 2025–2026 aggregator sources for DeepL API Pro ($25/million characters). ONNX model file sizes were verified from the Xenova/opus-mt-en-de repository on HuggingFace (encoder_quantized ~49 MB + decoder_merged_quantized ~57 MB ≈ ~106 MB total per pair). Pricing is subject to change - verify with each provider before making cost decisions.

Sources

• LocalMode core translation source - packages/core/src/translation/types.ts
• Xenova/opus-mt-en-de model repository (HuggingFace)
• Google Cloud Translation API pricing
• DeepL API Pro pricing - langbly.com 2026 guide
• Helsinki-NLP OPUS-MT project (HuggingFace)