Implementation:AUTOMATIC1111 Stable diffusion webui Localization JS
| Knowledge Sources | |
|---|---|
| Domains | UI_Frontend, Localization, Internationalization |
| Last Updated | 2025-05-15 00:00 GMT |
Overview
Provides client-side localization support by translating UI text content, tooltips, and placeholders using a backend-provided translation dictionary.
Description
This JavaScript module implements the localization (i18n) system for the web UI. The backend provides a window.localization dictionary mapping English strings to translations. The module uses a TreeWalker-based approach (textNodesUnder) to find all text nodes in the DOM and replace their content with translations. The canBeTranslated function filters out nodes that should not be translated: script/style/textarea content, certain Gradio option elements identified by the ignore_ids_for_localization map, pure numeric strings, and emoji characters. The processNode function handles text nodes, title attributes, and placeholder attributes. The localizeWholePage function performs a complete page translation pass, including Gradio component tooltips and placeholders. A MutationObserver set up on DOMContentLoaded continuously translates newly added DOM nodes. The module also supports right-to-left (RTL) languages by enabling RTL media queries when localization.rtl is set. The dumpTranslations and download_localization functions allow exporting the current translation state as a JSON file for creating or updating translation files.
Usage
Localization is activated automatically when the backend provides a non-empty localization dictionary. Users select their language in Settings, and the translation file is loaded on page load. The module transparently translates all UI text. Translation authors can use the download_localization function to export a template JSON file.
Code Reference
Source Location
- Repository: AUTOMATIC1111_Stable_diffusion_webui
- File: javascript/localization.js
- Lines: 1-205
Signature
function hasLocalization()
function textNodesUnder(el)
function canBeTranslated(node, text)
function getTranslation(text)
function processTextNode(node)
function processNode(node)
function localizeWholePage()
function dumpTranslations()
function download_localization()
Import
// Loaded automatically by the web UI as part of the javascript/ directory
// Depends on window.localization dict provided by the backend
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| window.localization | object | Yes | Translation dictionary mapping English strings to localized strings (set by backend) |
| node | Node | Yes | A DOM node to process for translation |
| text | string | Yes | Text content to look up in the translation dictionary |
Outputs
| Name | Type | Description |
|---|---|---|
| (side effect) | DOM | Replaces text content, titles, and placeholders with translated strings |
| dumpTranslations result | object | JSON object containing all original strings mapped to their translations |
Usage Examples
// Localization is automatic when a translation file is loaded.
// To check if localization is active:
if (hasLocalization()) {
console.log("Localization is enabled");
}
// To get a specific translation:
var translated = getTranslation("Sampling steps");
// To manually translate a DOM subtree:
processNode(document.getElementById('my-element'));
// To export translations for creating a new language file:
download_localization();
// Downloads a localization.json file with all translatable strings
// To translate the entire page manually:
localizeWholePage();