.+)$/ // ##scope##.skey
120 | i18n = JSON.parse(readFile(dirs[file]), (key, value) => {
121 | // parse regex translations
122 | if (key.startsWith('@@')) {
123 | const regex = getRegex(key.slice(2))
124 | if (regex instanceof RegExp) {
125 | i18nRegex.set(regex, value)
126 | }
127 | } else if (regex_scope.test(key)) {
128 | // parse scope translations
129 | let { scope, skey } = key.match(regex_scope).groups
130 |
131 | if (scope.startsWith('@')) {
132 | scope = scope.slice(1)
133 | } else {
134 | scope = '#' + scope
135 | }
136 |
137 | if (!scope.length) {
138 | return value
139 | }
140 |
141 | i18nScope[scope] ||= {}
142 | i18nScope[scope][skey] = value
143 |
144 | scopedSource[skey] ||= []
145 | scopedSource[skey].push(scope)
146 | } else {
147 | return value
148 | }
149 | })
150 |
151 | logger.group('Localization file loaded.')
152 | logger.log('i18n', i18n)
153 | logger.log('i18nRegex', i18nRegex)
154 | logger.log('i18nScope', i18nScope)
155 | logger.groupEnd()
156 |
157 | translatePage()
158 | handleDropdown()
159 | }
160 |
161 | function handleDropdown() {
162 | // process gradio dropdown menu
163 | delegateEvent(gradioApp(), 'mousedown', 'ul.options .item', function (event) {
164 | const { target } = event
165 |
166 | if (!target.classList.contains('item')) {
167 | // simulate click menu item
168 | target.closest('.item').dispatchEvent(new Event('mousedown', { bubbles: true }))
169 | return
170 | }
171 |
172 | const source = target.dataset.value
173 | const $labelEl = target?.closest('.wrap')?.querySelector('.wrap-inner .single-select') // the label element
174 |
175 | if (source && $labelEl) {
176 | $labelEl.title = titles?.[source] || '' // set title from hints.js
177 | $labelEl.textContent = "__biligual__will_be_replaced__" // marked as will be replaced
178 | doTranslate($labelEl, source, 'element') // translate the label element
179 | }
180 | });
181 | }
182 |
183 | // Translate page
184 | function translatePage() {
185 | if (!i18n) return
186 |
187 | logger.time('Full Page')
188 | querySelectorAll([
189 | "label span, fieldset span, button", // major label and button description text
190 | "textarea[placeholder], select, option", // text box placeholder and select element
191 | ".transition > div > span:not([class])", ".label-wrap > span", // collapse panel added by extension
192 | ".gradio-image>div.float", // image upload description
193 | ".gradio-file>div.float", // file upload description
194 | ".gradio-code>div.float", // code editor description
195 | "#modelmerger_interp_description .output-html", // model merger description
196 | "#modelmerger_interp_description .gradio-html", // model merger description
197 | "#lightboxModal span" // image preview lightbox
198 | ])
199 | .forEach(el => translateEl(el, { deep: true }))
200 |
201 | querySelectorAll([
202 | 'div[data-testid="image"] > div > div', // description of image upload panel
203 | '#extras_image_batch > div', // description of extras image batch file upload panel
204 | ".output-html:not(#footer), .gradio-html:not(#footer), .output-markdown, .gradio-markdown", // output html exclude footer
205 | '#dynamic-prompting' // dynamic-prompting extension
206 | ])
207 | .forEach(el => translateEl(el, { rich: true }))
208 |
209 | logger.timeEnd('Full Page')
210 | }
211 |
212 | const ignore_selector = [
213 | '.bilingual__trans_wrapper', // self
214 | '.resultsFlexContainer', // tag-autocomplete
215 | '#setting_sd_model_checkpoint select', // model checkpoint
216 | '#setting_sd_vae select', // vae model
217 | '#txt2img_styles, #img2txt_styles', // styles select
218 | '.extra-network-cards .card .actions .name', // extra network cards name
219 | 'script, style, svg, g, path', // script / style / svg elements
220 | ]
221 | // Translate element
222 | function translateEl(el, { deep = false, rich = false } = {}) {
223 | if (!i18n) return // translation not ready.
224 | if (el.matches?.(ignore_selector)) return // ignore some elements.
225 |
226 | if (el.title) {
227 | doTranslate(el, el.title, 'title')
228 | }
229 |
230 | if (el.placeholder) {
231 | doTranslate(el, el.placeholder, 'placeholder')
232 | }
233 |
234 | if (el.tagName === 'OPTION') {
235 | doTranslate(el, el.textContent, 'option')
236 | }
237 |
238 | if (deep || rich) {
239 | Array.from(el.childNodes).forEach(node => {
240 | if (node.nodeName === '#text') {
241 | if (rich) {
242 | doTranslate(node, node.textContent, 'text')
243 | return
244 | }
245 |
246 | if (deep) {
247 | doTranslate(node, node.textContent, 'element')
248 | }
249 | } else if (node.childNodes.length > 0) {
250 | translateEl(node, { deep, rich })
251 | }
252 | })
253 | } else {
254 | doTranslate(el, el.textContent, 'element')
255 | }
256 | }
257 |
258 | function checkRegex(source) {
259 | for (const [regex, value] of i18nRegex.entries()) {
260 | if (regex.test(source)) {
261 | logger.log('regex', regex, source, value)
262 | return source.replace(regex, value)
263 | }
264 | }
265 | }
266 |
267 | const re_num = /^[\.\d]+$/,
268 | re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u
269 |
270 | function doTranslate(el, source, type) {
271 | if (!i18n) return // translation not ready.
272 | source = source.trim()
273 | if (!source) return
274 | if (re_num.test(source)) return
275 | // if (re_emoji.test(source)) return
276 |
277 | let translation = i18n[source] || checkRegex(source),
278 | scopes = scopedSource[source]
279 |
280 | if (scopes) {
281 | console.log('scope', el, source, scopes);
282 | for (let scope of scopes) {
283 | if (el.parentElement.closest(scope)) {
284 | translation = i18nScope[scope][source]
285 | break
286 | }
287 | }
288 | }
289 |
290 | if (!translation || source === translation) {
291 | if (el.textContent === '__biligual__will_be_replaced__') el.textContent = source // restore original text if translation not exist
292 | if (el.nextSibling?.className === 'bilingual__trans_wrapper') el.nextSibling.remove() // remove exist translation if translation not exist
293 | return
294 | }
295 |
296 | if (config.order === "Original First") {
297 | [source, translation] = [translation, source]
298 | }
299 |
300 | switch (type) {
301 | case 'text':
302 | el.textContent = translation
303 | break;
304 |
305 | case 'element':
306 | const htmlStr = `${htmlEncode(translation)}${htmlEncode(source)}
`
307 | const htmlEl = parseHtmlStringToElement(htmlStr)
308 | if (el.hasChildNodes()) {
309 | const textNode = Array.from(el.childNodes).find(node =>
310 | node.nodeName === '#text' &&
311 | (node.textContent.trim() === source || node.textContent.trim() === '__biligual__will_be_replaced__')
312 | )
313 |
314 | if (textNode) {
315 | textNode.textContent = ''
316 | if (textNode.nextSibling?.className === 'bilingual__trans_wrapper') textNode.nextSibling.remove()
317 | textNode.parentNode.insertBefore(htmlEl, textNode.nextSibling)
318 | }
319 | } else {
320 | el.textContent = ''
321 | if (el.nextSibling?.className === 'bilingual__trans_wrapper') el.nextSibling.remove()
322 | el.parentNode.insertBefore(htmlEl, el.nextSibling)
323 | }
324 | break;
325 |
326 | case 'option':
327 | el.textContent = `${translation} (${source})`
328 | break;
329 |
330 | case 'title':
331 | el.title = `${translation}\n${source}`
332 | break;
333 |
334 | case 'placeholder':
335 | el.placeholder = `${translation}\n\n${source}`
336 | break;
337 |
338 | default:
339 | return translation
340 | }
341 | }
342 |
343 | function gradioApp() {
344 | const elems = document.getElementsByTagName('gradio-app')
345 | const elem = elems.length == 0 ? document : elems[0]
346 |
347 | if (elem !== document) elem.getElementById = function (id) { return document.getElementById(id) }
348 | return elem.shadowRoot ? elem.shadowRoot : elem
349 | }
350 |
351 | function querySelector(...args) {
352 | return gradioApp()?.querySelector(...args)
353 | }
354 |
355 | function querySelectorAll(...args) {
356 | return gradioApp()?.querySelectorAll(...args)
357 | }
358 |
359 | function delegateEvent(parent, eventType, selector, handler) {
360 | parent.addEventListener(eventType, function (event) {
361 | var target = event.target;
362 | while (target !== parent) {
363 | if (target.matches(selector)) {
364 | handler.call(target, event);
365 | }
366 | target = target.parentNode;
367 | }
368 | });
369 | }
370 |
371 | function parseHtmlStringToElement(htmlStr) {
372 | const template = document.createElement('template')
373 | template.insertAdjacentHTML('afterbegin', htmlStr)
374 | return template.firstElementChild
375 | }
376 |
377 | function htmlEncode(htmlStr) {
378 | return htmlStr.replace(/&/g, '&').replace(//g, '>')
379 | .replace(/"/g, '"').replace(/'/g, ''')
380 | }
381 |
382 | // get regex object from string
383 | function getRegex(regex) {
384 | try {
385 | regex = regex.trim();
386 | let parts = regex.split('/');
387 | if (regex[0] !== '/' || parts.length < 3) {
388 | regex = regex.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); //escap common string
389 | return new RegExp(regex);
390 | }
391 |
392 | const option = parts[parts.length - 1];
393 | const lastIndex = regex.lastIndexOf('/');
394 | regex = regex.substring(1, lastIndex);
395 | return new RegExp(regex, option);
396 | } catch (e) {
397 | return null
398 | }
399 | }
400 |
401 | // Load file
402 | function readFile(filePath) {
403 | let request = new XMLHttpRequest();
404 | request.open("GET", `file=${filePath}`, false);
405 | request.send(null);
406 | return request.responseText;
407 | }
408 |
409 | const logger = (function () {
410 | const loggerTimerMap = new Map()
411 | const loggerConf = { badge: true, label: 'Logger', enable: false }
412 | return new Proxy(console, {
413 | get: (target, propKey) => {
414 | if (propKey === 'init') {
415 | return (label) => {
416 | loggerConf.label = label
417 | loggerConf.enable = true
418 | }
419 | }
420 |
421 | if (!(propKey in target)) return undefined
422 |
423 | return (...args) => {
424 | if (!loggerConf.enable) return
425 |
426 | let color = ['#39cfe1', '#006cab']
427 |
428 | let label, start
429 | switch (propKey) {
430 | case 'error':
431 | color = ['#f70000', '#a70000']
432 | break;
433 | case 'warn':
434 | color = ['#f7b500', '#b58400']
435 | break;
436 | case 'time':
437 | label = args[0]
438 | if (loggerTimerMap.has(label)) {
439 | logger.warn(`Timer '${label}' already exisits`)
440 | } else {
441 | loggerTimerMap.set(label, performance.now())
442 | }
443 | return
444 | case 'timeEnd':
445 | label = args[0], start = loggerTimerMap.get(label)
446 | if (start === undefined) {
447 | logger.warn(`Timer '${label}' does not exist`)
448 | } else {
449 | loggerTimerMap.delete(label)
450 | logger.log(`${label}: ${performance.now() - start} ms`)
451 | }
452 | return
453 | case 'groupEnd':
454 | loggerConf.badge = true
455 | break
456 | }
457 |
458 | 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;`] : []
459 |
460 | target[propKey](...badge, ...args)
461 |
462 | if (propKey === 'group' || propKey === 'groupCollapsed') {
463 | loggerConf.badge = false
464 | }
465 | }
466 | }
467 | })
468 | }())
469 |
470 | function init() {
471 | // Add style to dom
472 | let $styleEL = document.createElement('style');
473 |
474 | if ($styleEL.styleSheet) {
475 | $styleEL.styleSheet.cssText = customCSS;
476 | } else {
477 | $styleEL.appendChild(document.createTextNode(customCSS));
478 | }
479 | gradioApp().appendChild($styleEL);
480 |
481 | let loaded = false
482 | let _count = 0
483 |
484 | const observer = new MutationObserver(mutations => {
485 | if (window.localization && Object.keys(window.localization).length) return; // disabled if original translation enabled
486 | if (Object.keys(opts).length === 0) return; // does nothing if opts is not loaded
487 |
488 | let _nodesCount = 0, _now = performance.now()
489 |
490 | for (const mutation of mutations) {
491 | if (mutation.type === 'characterData') {
492 | if (mutation.target?.parentElement?.parentElement?.tagName === 'LABEL') {
493 | translateEl(mutation.target)
494 | }
495 | } else if (mutation.type === 'attributes') {
496 | _nodesCount++
497 | translateEl(mutation.target)
498 | } else {
499 | mutation.addedNodes.forEach(node => {
500 | if (node.className === 'bilingual__trans_wrapper') return
501 |
502 | _nodesCount++
503 | if (node.nodeType === 1 && /(output|gradio)-(html|markdown)/.test(node.className)) {
504 | translateEl(node, { rich: true })
505 | } else if (node.nodeType === 3) {
506 | doTranslate(node, node.textContent, 'text')
507 | } else {
508 | translateEl(node, { deep: true })
509 | }
510 | })
511 | }
512 | }
513 |
514 | if (_nodesCount > 0) {
515 | logger.info(`UI Update #${_count++}: ${performance.now() - _now} ms, ${_nodesCount} nodes`, mutations)
516 | }
517 |
518 | if (loaded) return;
519 | if (i18n) return;
520 |
521 | loaded = true
522 | setup()
523 | })
524 |
525 | observer.observe(gradioApp(), {
526 | characterData: true,
527 | childList: true,
528 | subtree: true,
529 | attributes: true,
530 | attributeFilter: ['title', 'placeholder']
531 | })
532 | }
533 |
534 | // Init after page loaded
535 | document.addEventListener('DOMContentLoaded', init)
536 | })();
537 |
--------------------------------------------------------------------------------