Upload 7 files

.gitignore

@@ -0,0 +1 @@
+__pycache__/

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Jad
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,3 +1,80 @@
----
-license: openrail
----
+[中文文档](README_ZH.md) / [日本語](README_JA.md)
+
+<p align="center"><img src="https://count.getloli.com/get/@sd-webui-bilingual-localization.github" alt="sd-webui-bilingual-localization"></p>
+
+# sd-webui-bilingual-localization
+[Stable Diffusion web UI](https://github.com/AUTOMATIC1111/stable-diffusion-webui) bilingual localization extensions.
+
+![Snipaste_2023-03-30_01-05-45](https://user-images.githubusercontent.com/16256221/228617304-3107244b-ce13-4b96-b665-1d13090d24a7.png)
+
+## Features
+- Bilingual translation, no need to worry about how to find the original button.
+- Compatible with language pack extensions, no need to re-import.
+- Support dynamic translation of title hints.
+- Additional support Scoped and RegExp pattern, more flexible translation.
+
+## Installation
+
+Choose one of the following methods, Need to use webui with extension support <sup>(Versions after 2023)</sup>
+
+#### Method 1
+
+Use the `Install from URL` provided by webui to install
+
+Click in order <kbd>Extensions</kbd> - <kbd>Install from URL</kbd>
+
+Then fill in the first text box with `https://github.com/journey-ad/sd-webui-bilingual-localization`, click the <kbd>Install</kbd> button.
+
+![Snipaste_2023-02-28_00-27-48](https://user-images.githubusercontent.com/16256221/221625310-a6ef0b4c-a1e0-46bb-be9c-6d88cd0ad684.png)
+
+After that, switch to the <kbd>Installed</kbd> panel and click the <kbd>Apply and restart UI</kbd> button.
+
+![Snipaste_2023-02-28_00-29-14](https://user-images.githubusercontent.com/16256221/221625345-9e656f25-89dd-4361-8ee5-f4ab39d18ca4.png)
+
+
+#### Method 2
+
+Clone to your extension directory manually.
+
+```bash
+git clone https://github.com/journey-ad/sd-webui-bilingual-localization extensions/sd-webui-bilingual-localization
+```
+
+## Usage
+
+> **⚠️Important⚠️**   
+> Make sure <kbd>Settings</kbd> - <kbd>User interface</kbd> - <kbd>Localization</kbd> is set to `None`
+
+In <kbd>Settings</kbd> - <kbd>Bilingual Localization</kbd> panel, select the localization file you want to enable and click on the <kbd>Apply settings</kbd> and <kbd>Reload UI</kbd> buttons in turn.
+
+![Snipaste_2023-02-28_00-04-21](https://user-images.githubusercontent.com/16256221/221625729-73519629-8c1f-4eb5-99db-a1d3f4b58a87.png)
+
+## Scoped
+
+Localization supports scoped to prevent global impact. The syntax rule is `##<SCOPE ID>##<TEXT>`.   
+Scoped text is effective only when the ID of the ancestor element of the node matches the specified scope.
+
+```json
+{
+  ...
+  "##tab_ti##Normal": "正态", // only `Normal` under the element with id="tab_ti" will be translated to `正态`.
+  "##tab_threedopenpose##Normal": "法线图", // only `Normal` under the element with id="tab_threedopenpose" will be translated to `法线图`.
+  ...
+}
+```
+
+## RegExp pattern
+
+Localization support RegExp pattern, syntax rule is `@@<REGEXP>`, capturing group is `$n`, doc: [String.prototype.replace()](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/replace)
+```json
+{
+  ...
+  "@@/^(\\d+) images in this directory, divided into (\\d+) pages$/": "目录中有$1张图片，共$2页",
+  "@@/^Favorites path from settings: (.*)$/": "设置的收藏夹目录：$1",
+  ...
+}
+```
+
+## How to get localization file
+
+Localization files are no longer provided with the plugin, please install a third-party language extensions and set-up as described in the [Usage](#usage) section of this article.

README_JA.md

@@ -0,0 +1,79 @@
+[English Version](README.md)
+
+<p align="center"><img src="https://count.getloli.com/get/@sd-webui-bilingual-localization.github" alt="sd-webui-bilingual-localization"></p>
+
+# sd-webui-bilingual-localization
+[Stable Diffusion web UI](https://github.com/AUTOMATIC1111/stable-diffusion-webui)のバイリンガル対応拡張機能
+
+![Snipaste_2023-03-30_01-05-45](https://user-images.githubusercontent.com/16256221/228617304-3107244b-ce13-4b96-b665-1d13090d24a7.png)
+
+## 特徴
+- バイリンガル対応により、元のボタンを探す必要がありません。
+- 日本語化拡張機能と互換性があり、ファイルを取り込み直す必要はありません。
+- ツールチップの動的翻訳をサポートします。
+- スコープと正規表現パターンによる柔軟な翻訳が可能です。
+
+## インストール
+
+以下の方法から選択します。
+拡張機能に対応したWebUI<sup>(2023年以降のバージョン)</sup>が必要です。
+
+#### 方法1
+
+WebUIの`Install from URL`でインストールを行います。
+
+<kbd>Extensions</kbd> - <kbd>Install from URL</kbd>を順にクリックします。
+
+1個目のテキストボックスに`https://github.com/journey-ad/sd-webui-bilingual-localization`を入力し、<kbd>Install</kbd>ボタンをクリックします。
+
+![Snipaste_2023-02-28_00-27-48](https://user-images.githubusercontent.com/16256221/221625310-a6ef0b4c-a1e0-46bb-be9c-6d88cd0ad684.png)
+
+その後、<kbd>Installed</kbd>パネルに切り替え、<kbd>Apply and restart UI</kbd>ボタンをクリックします。
+
+![Snipaste_2023-02-28_00-29-14](https://user-images.githubusercontent.com/16256221/221625345-9e656f25-89dd-4361-8ee5-f4ab39d18ca4.png)
+
+
+#### 方法2
+
+拡張機能のディレクトリに手動でcloneします。
+
+```bash
+git clone https://github.com/journey-ad/sd-webui-bilingual-localization extensions/sd-webui-bilingual-localization
+```
+
+## 使用方法
+
+> **⚠️重要⚠️**  
+> <kbd>Settings</kbd> - <kbd>User interface</kbd> - <kbd>Localization</kbd>が`None`に設定されていることを確認してください。
+
+<kbd>Settings</kbd> - <kbd>Bilingual Localization</kbd>パネルで、有効にしたい言語ファイル名を選択し、<kbd>Apply settings</kbd>ボタンと<kbd>Reload UI</kbd>ボタンを順にクリックします。
+
+![Snipaste_2023-02-28_00-04-21](https://user-images.githubusercontent.com/16256221/221625729-73519629-8c1f-4eb5-99db-a1d3f4b58a87.png)
+
+## スコープ
+
+ローカライゼーションは、スコープ化されており、グローバルな影響を防止することができます。構文ルールは`##<SCOPE ID>##<TEXT>`です。   
+スコープを指定するIDが祖先要素のIDと一致する場合にのみ、スコープ化されたテキストが有効になります。
+
+```json
+  ...
+  "##tab_ti##Normal": "正常", // id="tab_ti"要素の下の`Normal`のみが`正常`として変換されます
+  "##tab_threedopenpose##Normal": "法線マップ", // id="tab_threedopenpose"要素の下の`Normal`のみが `法線マップ`として変換されます
+  ...
+```
+
+## 正規表現パターン
+
+正規表現を使った日本語化が可能です。構文ルールは`@@<REGEXP>`、キャプチャグループは`$n`です。ドキュメント：[String.prototype.replace()](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/replace)。
+```json
+{
+  ...
+  "@@/^(\\d+) images in this directory, divided into (\\d+) pages$/": "このディレクトリには$1枚の画像、$2ページ",
+  "@@/^Favorites path from settings: (.*)$/": "お気に入りのディレクトリパス：$1",
+  ...
+}
+```
+
+## 日本語化ファイルの取得
+
+内蔵の日本語化ファイルは提供されなくなりました。サードパーティーの日本語化拡張機能をインストールし、当ページの[使用方法](#使用方法)に記載されている方法でセットアップしてください。

README_ZH.md

@@ -0,0 +1,79 @@
+[English Version](README.md)
+
+<p align="center"><img src="https://count.getloli.com/get/@sd-webui-bilingual-localization.github" alt="sd-webui-bilingual-localization"></p>
+
+# sd-webui-bilingual-localization
+[Stable Diffusion web UI](https://github.com/AUTOMATIC1111/stable-diffusion-webui) 双语对照翻译插件
+
+![Snipaste_2023-03-30_01-05-45](https://user-images.githubusercontent.com/16256221/228617304-3107244b-ce13-4b96-b665-1d13090d24a7.png)
+
+## 功能
+- 全新实现的双语对照翻译功能，不必再担心切换翻译后找不到原始功能
+- 兼容原生语言包扩展，无需重新导入多语言语料
+- 支持动态title提示的翻译
+- 额外支持作用域和正则表达式替换，翻译更加灵活
+
+## 安装
+
+以下方式选择其一，需要使用支持扩展功能的 webui <sup>(2023年之后的版本)</sup>
+
+#### 方式1
+
+使用 webui 提供的`Install from URL`功能安装
+
+按下图所示，依次点击<kbd>Extensions</kbd> - <kbd>Install from URL</kbd>
+
+然后在第一个文本框内填入`https://github.com/journey-ad/sd-webui-bilingual-localization`，点击<kbd>Install</kbd>按钮
+![Snipaste_2023-02-28_00-27-48](https://user-images.githubusercontent.com/16256221/221625310-a6ef0b4c-a1e0-46bb-be9c-6d88cd0ad684.png)
+
+之后切换到<kbd>Installed</kbd>面板，点击<kbd>Apply and restart UI</kbd>按钮
+![Snipaste_2023-02-28_00-29-14](https://user-images.githubusercontent.com/16256221/221625345-9e656f25-89dd-4361-8ee5-f4ab39d18ca4.png)
+
+
+#### 方式2
+
+手动克隆到你的扩展目录里
+
+```bash
+git clone https://github.com/journey-ad/sd-webui-bilingual-localization extensions/sd-webui-bilingual-localization
+```
+
+## 使用
+
+> **⚠️重要⚠️**   
+> 确保<kbd>Settings</kbd> - <kbd>User interface</kbd> - <kbd>Localization</kbd> 已设置为了 `None`
+
+在<kbd>Settings</kbd> - <kbd>Bilingual Localization</kbd>中选择要启用的本地化文件，依次点击<kbd>Apply settings</kbd>和<kbd>Reload UI</kbd>按钮
+![Snipaste_2023-02-28_00-04-21](https://user-images.githubusercontent.com/16256221/221625729-73519629-8c1f-4eb5-99db-a1d3f4b58a87.png)
+
+## 作用域支持
+
+本地化语料支持限定作用域，防止影响全局翻译，语法规则`##<SCOPE ID>##<TEXT>`   
+具有作用域的语料仅当节点祖先元素的ID匹配指定的作用域时才会生效
+
+```json
+{
+  ...
+  "##tab_ti##Normal": "正态", // 仅id="tab_ti"元素下的`Normal`会被翻译为`正态`
+  "##tab_threedopenpose##Normal": "法线图", // 仅id="tab_threedopenpose"元素下的`Normal`会被翻译为`法线图`
+  ...
+}
+```
+
+## 正则表达式支持
+
+本地化语料支持正则表达式替换，语法规则`@@<REGEXP>`，括号匹配变量`$n`，参考[String.prototype.replace()](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/replace)
+```json
+{
+  ...
+  "@@/^(\\d+) images in this directory, divided into (\\d+) pages$/": "目录中有$1张图片，共$2页",
+  "@@/^Favorites path from settings: (.*)$/": "设置的收藏夹目录：$1",
+  ...
+}
+```
+
+## 获取本地化文件
+
+本地化文件不再随插件提供，请安装第三方语言包并按照本文[使用](#使用)部分的方式设置使用
+
+*预览图片中的语言包可以在这里找到 https://gist.github.com/journey-ad/d98ed173321658be6e51f752d6e6163c*

javascript/bilingual_localization.js

@@ -0,0 +1,523 @@
+(function () {
+  const customCSS = `
+    .bilingual__trans_wrapper {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 13px;
+      line-height: 1;
+    }
+    
+    .bilingual__trans_wrapper em {
+      font-style: normal;
+    }
+
+    #txtimg_hr_finalres .bilingual__trans_wrapper em,
+    #tab_ti .output-html .bilingual__trans_wrapper em,
+    #tab_ti .gradio-html .bilingual__trans_wrapper em,
+    #sddp-dynamic-prompting .gradio-html .bilingual__trans_wrapper em,
+    #available_extensions .extension-tag .bilingual__trans_wrapper em,
+    #available_extensions .date_added .bilingual__trans_wrapper em,
+    #available_extensions+p>.bilingual__trans_wrapper em,
+    .gradio-image div[data-testid="image"] .bilingual__trans_wrapper em {
+      display: none;
+    }
+    
+    #settings .bilingual__trans_wrapper:not(#settings .tabitem .bilingual__trans_wrapper),
+    label>span>.bilingual__trans_wrapper,
+    fieldset>span>.bilingual__trans_wrapper,
+    .label-wrap>span>.bilingual__trans_wrapper,
+    .w-full>span>.bilingual__trans_wrapper,
+    .context-menu-items .bilingual__trans_wrapper,
+    .single-select .bilingual__trans_wrapper, ul.options .inner-item + .bilingual__trans_wrapper,
+    .output-html .bilingual__trans_wrapper:not(th .bilingual__trans_wrapper),
+    .gradio-html .bilingual__trans_wrapper:not(th .bilingual__trans_wrapper, .posex_cont .bilingual__trans_wrapper),
+    .output-markdown .bilingual__trans_wrapper,
+    .gradio-markdown .bilingual__trans_wrapper,
+    .gradio-image>div.float .bilingual__trans_wrapper,
+    .gradio-file>div.float .bilingual__trans_wrapper,
+    .gradio-code>div.float .bilingual__trans_wrapper,
+    .posex_setting_cont .bilingual__trans_wrapper:not(.posex_bg .bilingual__trans_wrapper), /* Posex extension */
+    #dynamic-prompting .bilingual__trans_wrapper
+    {
+      font-size: 12px;
+      align-items: flex-start;
+    }
+
+    #extensions label .bilingual__trans_wrapper,
+    #available_extensions td .bilingual__trans_wrapper,
+    .label-wrap>span>.bilingual__trans_wrapper {
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    .label-wrap>span:first-of-type {
+      font-size: 13px;
+      line-height: 1;
+    }
+
+    #txt2img_script_container > div {
+      margin-top: var(--layout-gap, 12px);
+    }
+    
+    textarea::placeholder {
+      line-height: 1;
+      padding: 4px 0;
+    }
+    
+    label>span {
+      line-height: 1;
+    }
+    
+    div[data-testid="image"] .start-prompt {
+      background-color: rgba(255, 255, 255, .6);
+      color: #222;
+      transition: opacity .2s ease-in-out;
+    }
+    div[data-testid="image"]:hover .start-prompt {
+      opacity: 0;
+    }
+
+    .label-wrap > span.icon {
+      width: 1em;
+      height: 1em;
+      transform-origin: center center;
+    }
+
+    .gradio-dropdown ul.options li.item {
+      padding: 0.3em 0.4em !important;
+    }
+    
+    /* Posex extension */
+    .posex_bg {
+      white-space: nowrap;
+    }
+    `
+
+  let i18n = null, i18nRegex = {}, i18nScope = {}, scopedSource = {}, config = null;
+
+  // First load
+  function setup() {
+    config = {
+      enabled: opts["bilingual_localization_enabled"],
+      file: opts["bilingual_localization_file"],
+      dirs: opts["bilingual_localization_dirs"],
+      order: opts["bilingual_localization_order"],
+      enableLogger: opts["bilingual_localization_logger"]
+    }
+
+    let { enabled, file, dirs, enableLogger } = config
+
+    if (!enabled || file === "None" || dirs === "None") return
+
+    dirs = JSON.parse(dirs)
+
+    enableLogger && logger.init('Bilingual')
+    logger.log('Bilingual Localization initialized.')
+
+    // Load localization file
+    const regex_scope = /^##(?<scope>\S+)##(?<skey>\S+)$/ // ##scope##.skey
+    i18n = JSON.parse(readFile(dirs[file]), (key, value) => {
+      // parse regex translations
+      if (key.startsWith('@@')) {
+        i18nRegex[key.slice(2)] = value
+      } else if (regex_scope.test(key)) {
+        // parse scope translations
+        const { scope, skey } = key.match(regex_scope).groups
+        i18nScope[scope] ||= {}
+        i18nScope[scope][skey] = value
+
+        scopedSource[skey] ||= []
+        scopedSource[skey].push(scope)
+      } else {
+        return value
+      }
+    })
+
+    logger.group('Localization file loaded.')
+    logger.log('i18n', i18n)
+    logger.log('i18nRegex', i18nRegex)
+    logger.log('i18nScope', i18nScope)
+    logger.groupEnd()
+
+    translatePage()
+    handleDropdown()
+  }
+
+  function handleDropdown() {
+    // process gradio dropdown menu
+    delegateEvent(gradioApp(), 'mousedown', 'ul.options .item', function (event) {
+      const { target } = event
+
+      if (!target.classList.contains('item')) {
+        // simulate click menu item
+        target.closest('.item').dispatchEvent(new Event('mousedown', { bubbles: true }))
+        return
+      }
+
+      const source = target.dataset.value
+      const $labelEl = target?.closest('.wrap')?.querySelector('.wrap-inner .single-select') // the label element
+
+      if (source && $labelEl) {
+        $labelEl.title = titles?.[source] || '' // set title from hints.js
+        $labelEl.textContent = "__biligual__will_be_replaced__" // marked as will be replaced
+        doTranslate($labelEl, source, 'element') // translate the label element
+      }
+    });
+  }
+
+  // Translate page
+  function translatePage() {
+    if (!i18n) return
+
+    logger.time('Full Page')
+    querySelectorAll([
+      "label span, fieldset span, button", // major label and button description text
+      "textarea[placeholder], select, option", // text box placeholder and select element
+      ".transition > div > span:not([class])", ".label-wrap > span", // collapse panel added by extension
+      ".gradio-image>div.float", // image upload description
+      ".gradio-file>div.float", // file upload description
+      ".gradio-code>div.float", // code editor description
+      "#modelmerger_interp_description .output-html", // model merger description
+      "#modelmerger_interp_description .gradio-html", // model merger description
+      "#lightboxModal span" // image preview lightbox
+    ])
+      .forEach(el => translateEl(el, { deep: true }))
+
+    querySelectorAll([
+      'div[data-testid="image"] > div > div', // description of image upload panel
+      '#extras_image_batch > div', //  description of extras image batch file upload panel
+      ".output-html:not(#footer), .gradio-html:not(#footer), .output-markdown, .gradio-markdown", // output html exclude footer
+      '#dynamic-prompting' // dynamic-prompting extension
+    ])
+      .forEach(el => translateEl(el, { rich: true }))
+
+    logger.timeEnd('Full Page')
+  }
+
+  const ignore_selector = [
+    '.bilingual__trans_wrapper', // self
+    '.resultsFlexContainer', // tag-autocomplete
+    '#setting_sd_model_checkpoint select', // model checkpoint
+    '#setting_sd_vae select', // vae model
+    '#txt2img_styles, #img2txt_styles', // styles select
+    '.extra-network-cards .card .actions .name', // extra network cards name
+    'script, style, svg, g, path', // script / style / svg elements
+  ]
+  // Translate element
+  function translateEl(el, { deep = false, rich = false } = {}) {
+    if (!i18n) return // translation not ready.
+    if (el.matches?.(ignore_selector)) return // ignore some elements.
+
+    if (el.title) {
+      doTranslate(el, el.title, 'title')
+    }
+
+    if (el.placeholder) {
+      doTranslate(el, el.placeholder, 'placeholder')
+    }
+
+    if (el.tagName === 'OPTION') {
+      doTranslate(el, el.textContent, 'option')
+    }
+
+    if (deep || rich) {
+      Array.from(el.childNodes).forEach(node => {
+        if (node.nodeName === '#text') {
+          if (rich) {
+            doTranslate(node, node.textContent, 'text')
+            return
+          }
+
+          if (deep) {
+            doTranslate(node, node.textContent, 'element')
+          }
+        } else if (node.childNodes.length > 0) {
+          translateEl(node, { deep, rich })
+        }
+      })
+    } else {
+      doTranslate(el, el.textContent, 'element')
+    }
+  }
+
+  function checkRegex(source) {
+    for (let regex in i18nRegex) {
+      regex = getRegex(regex)
+      if (regex && regex.test(source)) {
+        logger.log('regex', regex, source)
+        return source.replace(regex, i18nRegex[regex])
+      }
+    }
+  }
+
+  const re_num = /^[\.\d]+$/,
+    re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u
+
+  function doTranslate(el, source, type) {
+    if (!i18n) return // translation not ready.
+    source = source.trim()
+    if (!source) return
+    if (re_num.test(source)) return
+    // if (re_emoji.test(source)) return
+
+    let translation = i18n[source] || checkRegex(source),
+      scopes = scopedSource[source]
+
+    if (scopes) {
+      console.log('scope', el, source);
+      for (let scope of scopes) {
+        if (el.parentElement.closest(`#${scope}`)) {
+          translation = i18nScope[scope][source]
+          break
+        }
+      }
+    }
+
+    if (!translation || source === translation) {
+      if (el.textContent === '__biligual__will_be_replaced__') el.textContent = source // restore original text if translation not exist
+      if (el.nextSibling?.className === 'bilingual__trans_wrapper') el.nextSibling.remove() // remove exist translation if translation not exist
+      return
+    }
+
+    if (config.order === "Original First") {
+      [source, translation] = [translation, source]
+    }
+
+    switch (type) {
+      case 'text':
+        el.textContent = translation
+        break;
+
+      case 'element':
+        const htmlStr = `<div class="bilingual__trans_wrapper">${htmlEncode(translation)}<em>${htmlEncode(source)}</em></div>`
+        const htmlEl = parseHtmlStringToElement(htmlStr)
+        if (el.hasChildNodes()) {
+          const textNode = Array.from(el.childNodes).find(node =>
+            node.nodeName === '#text' &&
+            (node.textContent.trim() === source || node.textContent.trim() === '__biligual__will_be_replaced__')
+          )
+
+          if (textNode) {
+            textNode.textContent = ''
+            if (textNode.nextSibling?.className === 'bilingual__trans_wrapper') textNode.nextSibling.remove()
+            textNode.parentNode.insertBefore(htmlEl, textNode.nextSibling)
+          }
+        } else {
+          el.textContent = ''
+          if (el.nextSibling?.className === 'bilingual__trans_wrapper') el.nextSibling.remove()
+          el.parentNode.insertBefore(htmlEl, el.nextSibling)
+        }
+        break;
+
+      case 'option':
+        el.textContent = `${translation} (${source})`
+        break;
+
+      case 'title':
+        el.title = `${translation}\n${source}`
+        break;
+
+      case 'placeholder':
+        el.placeholder = `${translation}\n\n${source}`
+        break;
+
+      default:
+        return translation
+    }
+  }
+
+  function gradioApp() {
+    const elems = document.getElementsByTagName('gradio-app')
+    const elem = elems.length == 0 ? document : elems[0]
+
+    if (elem !== document) elem.getElementById = function (id) { return document.getElementById(id) }
+    return elem.shadowRoot ? elem.shadowRoot : elem
+  }
+
+  function querySelector(...args) {
+    return gradioApp()?.querySelector(...args)
+  }
+
+  function querySelectorAll(...args) {
+    return gradioApp()?.querySelectorAll(...args)
+  }
+
+  function delegateEvent(parent, eventType, selector, handler) {
+    parent.addEventListener(eventType, function (event) {
+      var target = event.target;
+      while (target !== parent) {
+        if (target.matches(selector)) {
+          handler.call(target, event);
+        }
+        target = target.parentNode;
+      }
+    });
+  }
+
+  function parseHtmlStringToElement(htmlStr) {
+    const template = document.createElement('template')
+    template.insertAdjacentHTML('afterbegin', htmlStr)
+    return template.firstElementChild
+  }
+
+  function htmlEncode(htmlStr) {
+    return htmlStr.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;').replace(/'/g, '&#39;')
+  }
+
+  // get regex object from string
+  function getRegex(regex) {
+    try {
+      regex = regex.trim();
+      let parts = regex.split('/');
+      if (regex[0] !== '/' || parts.length < 3) {
+        regex = regex.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); //escap common string
+        return new RegExp(regex);
+      }
+
+      const option = parts[parts.length - 1];
+      const lastIndex = regex.lastIndexOf('/');
+      regex = regex.substring(1, lastIndex);
+      return new RegExp(regex, option);
+    } catch (e) {
+      return null
+    }
+  }
+
+  // Load file
+  function readFile(filePath) {
+    let request = new XMLHttpRequest();
+    request.open("GET", `file=${filePath}`, false);
+    request.send(null);
+    return request.responseText;
+  }
+
+  const logger = (function () {
+    const loggerTimerMap = new Map()
+    const loggerConf = { badge: true, label: 'Logger', enable: false }
+    return new Proxy(console, {
+      get: (target, propKey) => {
+        if (propKey === 'init') {
+          return (label) => {
+            loggerConf.label = label
+            loggerConf.enable = true
+          }
+        }
+
+        if (!(propKey in target)) return undefined
+
+        return (...args) => {
+          if (!loggerConf.enable) return
+
+          let color = ['#39cfe1', '#006cab']
+
+          let label, start
+          switch (propKey) {
+            case 'error':
+              color = ['#f70000', '#a70000']
+              break;
+            case 'warn':
+              color = ['#f7b500', '#b58400']
+              break;
+            case 'time':
+              label = args[0]
+              if (loggerTimerMap.has(label)) {
+                logger.warn(`Timer '${label}' already exisits`)
+              } else {
+                loggerTimerMap.set(label, performance.now())
+              }
+              return
+            case 'timeEnd':
+              label = args[0], start = loggerTimerMap.get(label)
+              if (start === undefined) {
+                logger.warn(`Timer '${label}' does not exist`)
+              } else {
+                loggerTimerMap.delete(label)
+                logger.log(`${label}: ${performance.now() - start} ms`)
+              }
+              return
+            case 'groupEnd':
+              loggerConf.badge = true
+              break
+          }
+
+          const badge = loggerConf.badge ? [`%c${loggerConf.label}`, `color: #fff; background: linear-gradient(180deg, ${color[0]}, ${color[1]}); text-shadow: 0px 0px 1px #0003; padding: 3px 5px; border-radius: 4px;`] : []
+
+          target[propKey](...badge, ...args)
+
+          if (propKey === 'group' || propKey === 'groupCollapsed') {
+            loggerConf.badge = false
+          }
+        }
+      }
+    })
+  }())
+
+  function init() {
+    // Add style to dom
+    let $styleEL = document.createElement('style');
+
+    if ($styleEL.styleSheet) {
+      $styleEL.styleSheet.cssText = customCSS;
+    } else {
+      $styleEL.appendChild(document.createTextNode(customCSS));
+    }
+    gradioApp().appendChild($styleEL);
+
+    let loaded = false
+    let _count = 0
+
+    const observer = new MutationObserver(mutations => {
+      if (Object.keys(localization).length) return; // disabled if original translation enabled
+      if (Object.keys(opts).length === 0) return; // does nothing if opts is not loaded
+
+      let _nodesCount = 0, _now = performance.now()
+
+      for (const mutation of mutations) {
+        if (mutation.type === 'characterData') {
+          if (mutation.target?.parentElement?.parentElement?.tagName === 'LABEL') {
+            translateEl(mutation.target)
+          }
+        } else if (mutation.type === 'attributes') {
+          _nodesCount++
+          translateEl(mutation.target)
+        } else {
+          mutation.addedNodes.forEach(node => {
+            if (node.className === 'bilingual__trans_wrapper') return
+
+            _nodesCount++
+            if (node.nodeType === 1 && /(output|gradio)-(html|markdown)/.test(node.className)) {
+              translateEl(node, { rich: true })
+            } else if (node.nodeType === 3) {
+              doTranslate(node, node.textContent, 'text')
+            } else {
+              translateEl(node, { deep: true })
+            }
+          })
+        }
+      }
+
+      if (_nodesCount > 0) {
+        logger.info(`UI Update #${_count++}: ${performance.now() - _now} ms, ${_nodesCount} nodes`, mutations)
+      }
+
+      if (loaded) return;
+      if (i18n) return;
+
+      loaded = true
+      setup()
+    })
+
+    observer.observe(gradioApp(), {
+      characterData: true,
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['title', 'placeholder']
+    })
+  }
+
+  // Init after page loaded
+  document.addEventListener('DOMContentLoaded', init)
+})();

scripts/bilingual_localization_helper.py

@@ -0,0 +1,33 @@
+# This helper script loads the list of localization files and
+# exposes the current localization file name and path to the javascript side
+
+import gradio as gr
+from pathlib import Path
+from modules import localization, script_callbacks, shared
+import json
+
+# Webui root path
+ROOT_DIR = Path().absolute()
+
+# The localization files
+I18N_DIRS = { k: str(Path(v).relative_to(ROOT_DIR).as_posix()) for k, v in localization.localizations.items() }
+    
+# Register extension options
+def on_ui_settings():
+    BL_SECTION = ("bl", "Bilingual Localization")
+    # enable in settings
+    shared.opts.add_option("bilingual_localization_enabled", shared.OptionInfo(True, "Enable Bilingual Localization", section=BL_SECTION))
+    
+    # enable devtools log
+    shared.opts.add_option("bilingual_localization_logger", shared.OptionInfo(False, "Enable Devtools Log", section=BL_SECTION))
+
+    # current localization file
+    shared.opts.add_option("bilingual_localization_file", shared.OptionInfo("None", "Localization file (Please leave `User interface` - `Localization` as None)", gr.Dropdown, lambda: {"choices": ["None"] + list(localization.localizations.keys())}, refresh=lambda: localization.list_localizations(shared.cmd_opts.localizations_dir), section=BL_SECTION))
+
+    # translation order
+    shared.opts.add_option("bilingual_localization_order", shared.OptionInfo("Translation First", "Translation display order", gr.Radio, {"choices": ["Translation First", "Original First"]}, section=BL_SECTION))
+
+    # all localization files path in hidden option
+    shared.opts.add_option("bilingual_localization_dirs", shared.OptionInfo(json.dumps(I18N_DIRS), "Localization dirs", section=BL_SECTION, component_args={"visible": False}))
+
+script_callbacks.on_ui_settings(on_ui_settings)