mirror of
https://github.com/vladmandic/automatic
synced 2026-09-05 12:30:46 +02:00
massive update to hints and add localization engine
Signed-off-by: Vladimir Mandic <mandic00@live.com>
This commit is contained in:
Vladimir Mandic
@@ -132,6 +132,7 @@ div#extras_scale_to_tab div.form { flex-direction: row; }
|
||||
width: 22em; min-height: 1.3em; font-size: var(--text-xs); transition: opacity 0.2s ease-in; pointer-events: none; opacity: 0; z-index: 999; }
|
||||
.tooltip-show { opacity: 0.9; }
|
||||
.toolbutton-selected { background: var(--background-fill-primary) !important; }
|
||||
.locale { position: fixed; top: 1em; right: 1em; background-color: none; padding: 0.1em; width: 1.2em; height: 1.2em; cursor: pointer; font-size: 0.8em; font-weight: 800; font-family: monospace; }
|
||||
#txt2img_hdr_color_row > div { min-width: unset !important; max-width: unset !important; }
|
||||
#txt2img_advanced_options, #img2img_advanced_options, #control_advanced_options { min-width: 100%; }
|
||||
#txt2img_advanced_options .gradio-checkbox, #img2img_advanced_options .gradio-checkbox, #control_advanced_options .gradio-checkbox { min-width: unset !important; max-width: fit-content; }
|
||||
|
||||
+73
-21
@@ -1,17 +1,40 @@
|
||||
const allLocales = ['en', 'de', 'es', 'fr', 'it', 'ja', 'ko', 'pt', 'hr', 'ru', 'zh'];
|
||||
const localeData = {
|
||||
prev: null,
|
||||
locale: null,
|
||||
data: [],
|
||||
timeout: null,
|
||||
finished: false,
|
||||
type: 2,
|
||||
el: null,
|
||||
hint: null,
|
||||
btn: null,
|
||||
};
|
||||
|
||||
async function cycleLocale() {
|
||||
console.log('cycleLocale', localeData.prev, localeData.locale);
|
||||
const index = allLocales.indexOf(localeData.prev);
|
||||
localeData.locale = allLocales[(index + 1) % allLocales.length];
|
||||
localeData.btn.innerText = localeData.locale;
|
||||
localeData.btn.style.backgroundColor = localeData.locale !== 'en' ? 'var(--primary-500)' : '';
|
||||
localeData.finished = false;
|
||||
localeData.data = [];
|
||||
localeData.prev = localeData.locale;
|
||||
window.opts.ui_locale = localeData.locale;
|
||||
await setHints(); // eslint-disable-line no-use-before-define
|
||||
}
|
||||
|
||||
async function tooltipCreate() {
|
||||
localeData.el = document.createElement('div');
|
||||
localeData.el.className = 'tooltip';
|
||||
localeData.el.id = 'tooltip-container';
|
||||
localeData.el.innerText = 'this is a hint';
|
||||
gradioApp().appendChild(localeData.el);
|
||||
localeData.hint = document.createElement('div');
|
||||
localeData.hint.className = 'tooltip';
|
||||
localeData.hint.id = 'tooltip-container';
|
||||
localeData.hint.innerText = 'this is a hint';
|
||||
gradioApp().appendChild(localeData.hint);
|
||||
localeData.btn = document.createElement('div');
|
||||
localeData.btn.className = 'locale';
|
||||
localeData.btn.id = 'locale-container';
|
||||
localeData.btn.innerText = localeData.locale;
|
||||
localeData.btn.onclick = cycleLocale;
|
||||
gradioApp().appendChild(localeData.btn);
|
||||
if (window.opts.tooltips === 'None') localeData.type = 0;
|
||||
if (window.opts.tooltips === 'Browser default') localeData.type = 1;
|
||||
if (window.opts.tooltips === 'UI tooltips') localeData.type = 2;
|
||||
@@ -19,18 +42,18 @@ async function tooltipCreate() {
|
||||
|
||||
async function tooltipShow(e) {
|
||||
if (e.target.dataset.hint) {
|
||||
localeData.el.classList.add('tooltip-show');
|
||||
localeData.el.innerHTML = `<b>${e.target.textContent}</b><br>${e.target.dataset.hint}`;
|
||||
localeData.hint.classList.add('tooltip-show');
|
||||
localeData.hint.innerHTML = `<b>${e.target.textContent}</b><br>${e.target.dataset.hint}`;
|
||||
if (e.clientX > window.innerWidth / 2) {
|
||||
localeData.el.classList.add('tooltip-left');
|
||||
localeData.hint.classList.add('tooltip-left');
|
||||
} else {
|
||||
localeData.el.classList.remove('tooltip-left');
|
||||
localeData.hint.classList.remove('tooltip-left');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function tooltipHide(e) {
|
||||
localeData.el.classList.remove('tooltip-show');
|
||||
localeData.hint.classList.remove('tooltip-show');
|
||||
}
|
||||
|
||||
async function validateHints(json, elements) {
|
||||
@@ -90,29 +113,57 @@ async function replaceButtonText(el) {
|
||||
}
|
||||
}
|
||||
|
||||
async function getLocaleData(desiredLocale = null) {
|
||||
if (desiredLocale) desiredLocale = desiredLocale.split(':')[0];
|
||||
if (desiredLocale === 'Auto') {
|
||||
try {
|
||||
localeData.locale = navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language;
|
||||
localeData.locale = localeData.locale.split('-')[0];
|
||||
localeData.prev = localeData.locale;
|
||||
} catch (e) {
|
||||
localeData.locale = 'en';
|
||||
log('getLocale', e);
|
||||
}
|
||||
} else {
|
||||
localeData.locale = desiredLocale || 'en';
|
||||
localeData.prev = localeData.locale;
|
||||
}
|
||||
log('getLocale', desiredLocale, localeData.locale);
|
||||
let res = await fetch(`/file=html/locale_${localeData.locale}.json`);
|
||||
if (!res || !res.ok) {
|
||||
localeData.locale = 'en';
|
||||
res = await fetch(`/file=html/locale_${localeData.locale}.json`);
|
||||
}
|
||||
const json = await res.json();
|
||||
return json;
|
||||
}
|
||||
|
||||
async function setHints(analyze = false) {
|
||||
let json = {};
|
||||
if (localeData.finished) return;
|
||||
if (localeData.data.length === 0) {
|
||||
const res = await fetch('/file=html/locale_en.json');
|
||||
json = await res.json();
|
||||
localeData.data = Object.values(json).flat().filter((e) => e.hint.length > 0);
|
||||
for (const e of localeData.data) e.label = e.label.toLowerCase().trim();
|
||||
}
|
||||
if (Object.keys(opts).length === 0) return;
|
||||
const elements = [
|
||||
...Array.from(gradioApp().querySelectorAll('button')),
|
||||
...Array.from(gradioApp().querySelectorAll('label > span')),
|
||||
...Array.from(gradioApp().querySelectorAll('.label-wrap > span')),
|
||||
];
|
||||
if (elements.length === 0) return;
|
||||
if (Object.keys(opts).length === 0) return;
|
||||
if (!localeData.el) tooltipCreate();
|
||||
if (localeData.data.length === 0) {
|
||||
json = await getLocaleData(window.opts.ui_locale);
|
||||
localeData.data = Object.values(json).flat().filter((e) => e.hint.length > 0);
|
||||
for (const e of localeData.data) e.label = e.label.toLowerCase().trim();
|
||||
}
|
||||
if (!localeData.hint) tooltipCreate();
|
||||
let localized = 0;
|
||||
let hints = 0;
|
||||
localeData.finished = true;
|
||||
const t0 = performance.now();
|
||||
for (const el of elements) {
|
||||
const found = localeData.data.find((l) => l.label === el.textContent.toLowerCase().trim());
|
||||
let found;
|
||||
if (el.dataset.original) found = localeData.data.find((l) => l.label === el.dataset.original.toLowerCase().trim());
|
||||
else found = localeData.data.find((l) => l.label === el.textContent.toLowerCase().trim());
|
||||
if (found?.localized?.length > 0) {
|
||||
if (!el.dataset.original) el.dataset.original = el.textContent;
|
||||
localized++;
|
||||
el.textContent = found.localized;
|
||||
}
|
||||
@@ -131,7 +182,8 @@ async function setHints(analyze = false) {
|
||||
}
|
||||
}
|
||||
const t1 = performance.now();
|
||||
log('setHints', { type: localeData.type, elements: elements.length, localized, hints, data: localeData.data.length, time: t1 - t0 });
|
||||
localeData.btn.style.backgroundColor = localeData.locale !== 'en' ? 'var(--primary-500)' : '';
|
||||
log('setHints', { type: localeData.type, locale: localeData.locale, elements: elements.length, localized, hints, data: localeData.data.length, time: t1 - t0 });
|
||||
// sortUIElements();
|
||||
if (analyze) {
|
||||
const [missingHints, orphanedHints] = await validateHints(json, elements);
|
||||
|
||||
Reference in New Issue
Block a user