.+)$/;
+ i18n = JSON.parse(readFile(dirsParsed[file]), (key, value) => {
+ if (key.startsWith("@@")) {
+ const regex = getRegex(key.slice(2));
+ if (regex instanceof RegExp) {
+ i18nRegex.set(regex, value);
+ }
+ } else {
+ const match = key.match(regex_scope);
+ if (match?.groups) {
+ let { scope, skey } = match.groups;
+ if (scope.startsWith("@")) {
+ scope = scope.slice(1);
+ } else {
+ scope = `#${scope}`;
+ }
+ if (!scope.length) {
+ return value;
+ }
+ i18nScope[scope] ||= {};
+ i18nScope[scope][skey] = value;
+ scopedSource[skey] ||= [];
+ scopedSource[skey].push(scope);
+ } else {
+ return value;
+ }
+ }
+ });
+ translatePage();
+ handleDropdown();
+}
+function getI18n() {
+ return i18n;
+}
+function getI18nRegex() {
+ return i18nRegex;
+}
+function getI18nScope() {
+ return i18nScope;
+}
+function getScopedSource() {
+ return scopedSource;
+}
+function getConfig() {
+ return config;
+}
+var i18n = null;
+var i18nRegex = new Map;
+var i18nScope = {};
+var scopedSource = {};
+var config = null;
+
+// src/lib/check-regax.ts
+function checkRegex(source) {
+ const i18nRegex2 = getI18nRegex();
+ for (const [regex, value] of i18nRegex2.entries()) {
+ if (regex instanceof RegExp) {
+ if (regex.test(source)) {
+ const logger = createLogger();
+ logger.log("regex", regex, source, value);
+ return source.replace(regex, value);
+ }
+ } else {
+ console.warn("Expected regex to be an instance of RegExp, but it was a string.");
+ }
+ }
+ return source;
+}
+
+// src/lib/html-encode.ts
+function htmlEncode(htmlStr) {
+ return htmlStr.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/'/g, "'");
+}
+
+// src/lib/parse-html-string-to-element.ts
+function parseHtmlStringToElement(htmlStr) {
+ const template = document.createElement("template");
+ template.insertAdjacentHTML("afterbegin", htmlStr);
+ return template.firstElementChild;
+}
+
+// src/lib/do-translate.ts
+function doTranslate(el, source, type) {
+ if (!getI18n)
+ return;
+ let trimmedSource = source.trim();
+ if (!trimmedSource)
+ return;
+ if (re_num.test(trimmedSource))
+ return;
+ if (re_emoji.test(trimmedSource))
+ return;
+ let translation = getI18n[trimmedSource] || checkRegex(trimmedSource);
+ const scopes = getScopedSource[trimmedSource];
+ if (scopes) {
+ console.log("scope", el, trimmedSource, scopes);
+ for (const scope of scopes) {
+ if (el.parentElement.closest(scope)) {
+ translation = getI18nScope[scope][trimmedSource];
+ break;
+ }
+ }
+ }
+ if (!translation || trimmedSource === translation) {
+ if (el.textContent === "__biligual__will_be_replaced__")
+ el.textContent = trimmedSource;
+ if (el.nextSibling?.className === "bilingual__trans_wrapper")
+ el.nextSibling.remove();
+ return;
+ }
+ const config2 = getConfig();
+ if (config2?.order === "Original First") {
+ [trimmedSource, translation] = [translation, trimmedSource];
+ }
+ switch (type) {
+ case "text":
+ el.textContent = translation;
+ break;
+ case "element": {
+ const htmlStr = `${htmlEncode(translation)}${htmlEncode(trimmedSource)}
`;
+ const htmlEl = parseHtmlStringToElement(htmlStr);
+ if (el.hasChildNodes()) {
+ const textNode = Array.from(el.childNodes).find((node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim() === trimmedSource || node.textContent?.trim() === "__bilingual__will_be_replaced__");
+ if (textNode) {
+ textNode.textContent = "";
+ if (textNode.nextSibling?.nodeType === Node.ELEMENT_NODE && textNode.nextSibling.className === "bilingual__trans_wrapper") {
+ textNode.nextSibling.remove();
+ }
+ if (textNode.parentNode && htmlEl) {
+ textNode.parentNode.insertBefore(htmlEl, textNode.nextSibling);
+ }
+ }
+ } else {
+ el.textContent = "";
+ if (el.nextSibling?.nodeType === Node.ELEMENT_NODE && el.nextSibling.className === "bilingual__trans_wrapper") {
+ el.nextSibling.remove();
+ }
+ if (el.parentNode && htmlEl) {
+ el.parentNode.insertBefore(htmlEl, el.nextSibling);
+ }
+ }
+ break;
+ }
+ case "option":
+ el.textContent = `${translation} (${trimmedSource})`;
+ break;
+ case "title":
+ el.title = `${translation}\n${trimmedSource}`;
+ break;
+ case "placeholder":
+ el.placeholder = `${translation}\n\n${trimmedSource}`;
+ break;
+ default:
+ return translation;
+ }
+}
+var re_num = /^[\.\d]+$/;
+var re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u;
+
+// src/init.ts
+function init() {
+ const styleEl = document.createElement("style");
+ if (styleEl.textContent) {
+ styleEl.textContent = customCSS;
+ } else {
+ styleEl.appendChild(document.createTextNode(customCSS));
+ }
+ gradioApp().appendChild(styleEl);
+ let loaded = false;
+ let _count = 0;
+ const observer = new MutationObserver((mutations) => {
+ if (window.localization && Object.keys(window.localization).length)
+ return;
+ if (Object.keys(opts).length === 0)
+ return;
+ let _nodesCount = 0;
+ const _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 instanceof Element && node.className === "bilingual__trans_wrapper")
+ return;
+ _nodesCount++;
+ if (node.nodeType === 1 && node instanceof Element && /(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) {
+ const logger = createLogger();
+ logger.info(`UI Update #${_count++}: ${performance.now() - _now} ms, ${_nodesCount} nodes`, mutations);
+ }
+ if (loaded)
+ return;
+ const i18n2 = getI18n();
+ if (i18n2)
+ return;
+ loaded = true;
+ setup3();
+ });
+ observer.observe(gradioApp(), {
+ characterData: true,
+ childList: true,
+ subtree: true,
+ attributes: true,
+ attributeFilter: ["title", "placeholder"]
+ });
+}
+var customCSS = `
.bilingual__trans_wrapper {
display: inline-flex;
flex-direction: column;
@@ -91,4 +546,10 @@ var F={bilingual_localization_enabled:!0,bilingual_localization_logger:!1,biling
.posex_bg {
white-space: nowrap;
}
- `;document.addEventListener("DOMContentLoaded",()=>{y()});
+ `;
+
+// src/main.ts
+var i18nRegex2 = new Map;
+document.addEventListener("DOMContentLoaded", () => {
+ init();
+});
From 5330e89eb44b7f4e6c2f001ef47e0a6666c3e085 Mon Sep 17 00:00:00 2001
From: Katsuyuki-Karasawa <4ranci0ne@gmail.com>
Date: Sun, 4 Aug 2024 08:29:50 +0900
Subject: [PATCH 5/5] merge issue
---
README.md | 2 +-
biome.json | 4 +--
javascript/bilingual_localization.js | 35 +++++++++++++++---------
scripts/bilingual_localization_helper.py | 4 +++
src/config/opts.ts | 10 +++----
src/init.ts | 3 +-
src/lib/do-translate.ts | 28 +++++++++++++++----
src/lib/translate-el.ts | 9 ++++--
src/main.ts | 30 +-------------------
src/types/opts.d.ts | 1 +
10 files changed, 67 insertions(+), 59 deletions(-)
diff --git a/README.md b/README.md
index 3a0b805..983655b 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@
```bash
# format & lint
-bunx @biomejs/biome check --config-path=./biome.json
+bunx @biomejs/biome check --write --unsafe --config-path=./biome.json
# build
bun build ./src/main.ts --outfile ./javascript/bilingual_localization.js
diff --git a/biome.json b/biome.json
index 202c4e3..c70281a 100644
--- a/biome.json
+++ b/biome.json
@@ -11,13 +11,13 @@
"formatter": {
"indentStyle": "space",
"lineEnding": "crlf",
- "ignore": ["./javascript", "./scripts"]
+ "ignore": ["javascript", "scripts"]
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
},
- "ignore": ["./javascript", "./scripts"]
+ "ignore": ["javascript", "scripts"]
}
}
diff --git a/javascript/bilingual_localization.js b/javascript/bilingual_localization.js
index 4ff5315..f9699c3 100644
--- a/javascript/bilingual_localization.js
+++ b/javascript/bilingual_localization.js
@@ -148,7 +148,7 @@ function translateEl(el, { deep = false, rich = false } = {}) {
if (el.title) {
doTranslate(el, el.title, "title");
}
- if (el.placeholder) {
+ if (el.placeholder && getConfig()?.enableTransPlaceHolder === true) {
doTranslate(el, el.placeholder, "placeholder");
}
if (el.tagName === "OPTION") {
@@ -179,7 +179,12 @@ var ignore_selector = [
"#setting_sd_vae select",
"#txt2img_styles, #img2txt_styles",
".extra-network-cards .card .actions .name",
- "script, style, svg, g, path"
+ "script, style, svg, g, path",
+ "svg *, canvas, canvas *",
+ "#txt2img_prompt_container, #img2img_prompt_container, .physton-prompt",
+ "#txt2img_prompt_container *, #img2img_prompt_container *, .physton-prompt *",
+ ".progressDiv, .progress, .progress-text",
+ ".progressDiv *, .progress *, .progress-text *"
];
// src/lib/tranlate-page.ts
@@ -347,13 +352,21 @@ function doTranslate(el, source, type) {
if (config2?.order === "Original First") {
[trimmedSource, translation] = [translation, trimmedSource];
}
+ const isTranslationIncludeSource = translation.startsWith(source);
switch (type) {
case "text":
el.textContent = translation;
break;
case "element": {
- const htmlStr = `${htmlEncode(translation)}${htmlEncode(trimmedSource)}
`;
- const htmlEl = parseHtmlStringToElement(htmlStr);
+ if (isTranslationIncludeSource) {
+ if (el.nodeType === 3) {
+ el.nodeValue = translation;
+ } else if (htmlEncode(el.textContent) === el.innerHTML) {
+ el.innerHTML = htmlEncode(translation);
+ }
+ break;
+ }
+ const htmlEl = parseHtmlStringToElement(`${htmlEncode(translation)}${htmlEncode(source)}
`);
if (el.hasChildNodes()) {
const textNode = Array.from(el.childNodes).find((node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim() === trimmedSource || node.textContent?.trim() === "__bilingual__will_be_replaced__");
if (textNode) {
@@ -377,13 +390,13 @@ function doTranslate(el, source, type) {
break;
}
case "option":
- el.textContent = `${translation} (${trimmedSource})`;
+ el.textContent = isTranslationIncludeSource ? translation : `${translation} (${trimmedSource})`;
break;
case "title":
- el.title = `${translation}\n${trimmedSource}`;
+ el.title = isTranslationIncludeSource ? translation : `${translation}\n${trimmedSource}`;
break;
case "placeholder":
- el.placeholder = `${translation}\n\n${trimmedSource}`;
+ el.placeholder = isTranslationIncludeSource ? translation : `${translation}\n\n${trimmedSource}`;
break;
default:
return translation;
@@ -458,7 +471,7 @@ var customCSS = `
display: inline-flex;
flex-direction: column;
align-items: center;
- font-size: 13px;
+ font-size: var(--section-header-text-size);
line-height: 1;
}
@@ -494,7 +507,6 @@ var customCSS = `
.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;
}
@@ -549,7 +561,4 @@ var customCSS = `
`;
// src/main.ts
-var i18nRegex2 = new Map;
-document.addEventListener("DOMContentLoaded", () => {
- init();
-});
+document.addEventListener("DOMContentLoaded", init);
diff --git a/scripts/bilingual_localization_helper.py b/scripts/bilingual_localization_helper.py
index 3a7c570..b9051a6 100644
--- a/scripts/bilingual_localization_helper.py
+++ b/scripts/bilingual_localization_helper.py
@@ -53,7 +53,11 @@ def on_ui_settings():
# 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))
+ # translate the inputbox's placeholder
+ shared.opts.add_option("bilingual_translate_placeholder", shared.OptionInfo(False, "Enable translate the inputbox's placeholder", 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}))
+ shared.opts.data["bilingual_localization_dirs"] = json.dumps(I18N_DIRS)
script_callbacks.on_ui_settings(on_ui_settings)
diff --git a/src/config/opts.ts b/src/config/opts.ts
index e14a959..b3502fe 100644
--- a/src/config/opts.ts
+++ b/src/config/opts.ts
@@ -1,9 +1,9 @@
import type { Opts } from "../types/opts";
export const opts: Opts = {
- bilingual_localization_enabled: true, // 初期値を設定
- bilingual_localization_logger: false, // 初期値を設定
- bilingual_localization_file: "None", // 初期値を設定
- bilingual_localization_dirs: "{}", // 初期値を設定
- bilingual_localization_order: "Translation First", // 初期値を設定
+ bilingual_localization_enabled: true,
+ bilingual_localization_logger: false,
+ bilingual_localization_file: "None",
+ bilingual_localization_dirs: "{}",
+ bilingual_localization_order: "Translation First",
};
diff --git a/src/init.ts b/src/init.ts
index 77a4323..954b70e 100644
--- a/src/init.ts
+++ b/src/init.ts
@@ -10,7 +10,7 @@ const customCSS = `
display: inline-flex;
flex-direction: column;
align-items: center;
- font-size: 13px;
+ font-size: var(--section-header-text-size);
line-height: 1;
}
@@ -46,7 +46,6 @@ const customCSS = `
.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;
}
diff --git a/src/lib/do-translate.ts b/src/lib/do-translate.ts
index 3082b9c..098bd56 100644
--- a/src/lib/do-translate.ts
+++ b/src/lib/do-translate.ts
@@ -42,14 +42,26 @@ export function doTranslate(el, source, type) {
[trimmedSource, translation] = [translation, trimmedSource];
}
+ const isTranslationIncludeSource = translation.startsWith(source);
+
switch (type) {
case "text":
el.textContent = translation;
break;
case "element": {
- const htmlStr = `${htmlEncode(translation)}${htmlEncode(trimmedSource)}
`;
- const htmlEl = parseHtmlStringToElement(htmlStr);
+ if (isTranslationIncludeSource) {
+ if (el.nodeType === 3) {
+ el.nodeValue = translation;
+ } else if (htmlEncode(el.textContent) === el.innerHTML) {
+ el.innerHTML = htmlEncode(translation);
+ }
+ break;
+ }
+
+ const htmlEl = parseHtmlStringToElement(
+ `${htmlEncode(translation)}${htmlEncode(source)}
`,
+ );
if (el.hasChildNodes()) {
const textNode = Array.from(el.childNodes).find(
@@ -92,15 +104,21 @@ export function doTranslate(el, source, type) {
}
case "option":
- el.textContent = `${translation} (${trimmedSource})`;
+ el.textContent = isTranslationIncludeSource
+ ? translation
+ : `${translation} (${trimmedSource})`;
break;
case "title":
- el.title = `${translation}\n${trimmedSource}`;
+ el.title = isTranslationIncludeSource
+ ? translation
+ : `${translation}\n${trimmedSource}`;
break;
case "placeholder":
- el.placeholder = `${translation}\n\n${trimmedSource}`;
+ el.placeholder = isTranslationIncludeSource
+ ? translation
+ : `${translation}\n\n${trimmedSource}`;
break;
default:
diff --git a/src/lib/translate-el.ts b/src/lib/translate-el.ts
index 77423d9..569f589 100644
--- a/src/lib/translate-el.ts
+++ b/src/lib/translate-el.ts
@@ -1,4 +1,4 @@
-import { getI18n } from "../setup";
+import { getConfig, getI18n } from "../setup";
import { doTranslate } from "./do-translate";
const ignore_selector = [
@@ -9,6 +9,11 @@ const ignore_selector = [
"#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
+ "svg *, canvas, canvas *",
+ "#txt2img_prompt_container, #img2img_prompt_container, .physton-prompt",
+ "#txt2img_prompt_container *, #img2img_prompt_container *, .physton-prompt *",
+ ".progressDiv, .progress, .progress-text",
+ ".progressDiv *, .progress *, .progress-text *",
];
export function translateEl(el, { deep = false, rich = false } = {}) {
@@ -19,7 +24,7 @@ export function translateEl(el, { deep = false, rich = false } = {}) {
doTranslate(el, el.title, "title");
}
- if (el.placeholder) {
+ if (el.placeholder && getConfig()?.enableTransPlaceHolder === true) {
doTranslate(el, el.placeholder, "placeholder");
}
diff --git a/src/main.ts b/src/main.ts
index 8765f9d..4d8afbd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,31 +1,3 @@
import { init } from "./init";
-interface I18n {
- [key: string]: string;
-}
-interface I18nScope {
- [scope: string]: I18n;
-}
-
-interface ScopedSource {
- [source: string]: string[];
-}
-
-interface Config {
- enabled: boolean;
- file: string;
- dirs: string[];
- order: string;
- enableLogger: boolean;
-}
-
-const i18n: I18n | null = null;
-const i18nRegex: Map = new Map();
-const i18nScope: I18nScope = {};
-const scopedSource: ScopedSource = {};
-const config: Config | null = null;
-
-// DOMContentLoaded イベント発生後に初期化処理を実行
-document.addEventListener("DOMContentLoaded", () => {
- init();
-});
+document.addEventListener("DOMContentLoaded", init);
diff --git a/src/types/opts.d.ts b/src/types/opts.d.ts
index 164aca8..b9ad0e1 100644
--- a/src/types/opts.d.ts
+++ b/src/types/opts.d.ts
@@ -1,4 +1,5 @@
export interface Opts {
+ bilingual_translate_placeholder: boolean;
bilingual_localization_enabled: boolean;
bilingual_localization_logger: boolean;
bilingual_localization_file: string;