add ui loading diag

Signed-off-by: Vladimir Mandic <mandic00@live.com>
This commit is contained in:
Vladimir Mandic
2026-09-09 14:29:38 +02:00
parent 94d4ccfaec
commit e2051bdf28
6 changed files with 63 additions and 18 deletions
+30 -9
View File
@@ -10051,6 +10051,7 @@ var ignoreElements = ["logMonitorData", "logWarnings", "logErrors", "tooltip-con
var ignoreElementsSet = new Set(ignoreElements);
var ignoreClasses = ["wrap"];
var mutationTimer;
var mutationTS;
var validMutations = [];
async function mutationCallback(mutations) {
if (mutations.length <= 0) return;
@@ -10064,7 +10065,10 @@ async function mutationCallback(mutations) {
if (validMutations.length < 1) return;
if (mutationTimer) clearTimeout(mutationTimer);
mutationTimer = setTimeout(async () => {
const ts = Date.now() - mutationTS;
if (!executedOnLoaded && ts > 1e3) log("onUiLoaded delayed", { ts, prompts: anyPromptExists() });
if (!executedOnLoaded && anyPromptExists()) {
log("onUiLoaded", ts);
executedOnLoaded = true;
executeCallbacks(uiLoadedCallbacks);
}
@@ -10083,6 +10087,7 @@ async function mutationCallback(mutations) {
}
document.addEventListener("DOMContentLoaded", () => {
log("DOMContentLoaded");
mutationTS = Date.now();
gradioObserver = new MutationObserver(mutationCallback);
gradioObserver.observe(gradioApp(), { childList: true, subtree: true, attributes: false });
});
@@ -13569,7 +13574,7 @@ Resolution: ${this.width} x ${this.height}`;
}
}
};
let ok2 = true;
let ok = true;
if (cachedData?.img) {
img.src = cachedData.img;
this.exif = cachedData.exif;
@@ -13582,7 +13587,7 @@ Resolution: ${this.width} x ${this.height}`;
try {
const json = await delayFetchThumb(this.src, this.#signal);
if (!json) {
ok2 = false;
ok = false;
pb.stats.failed = (pb.stats.failed || 0) + 1;
} else {
img.src = json.data;
@@ -13617,7 +13622,7 @@ Resolution: ${this.width} x ${this.height}`;
pb.stats.callback = (pb.stats.callback || 0) + Math.round(performance.now() - t0);
if (this.#signal.aborted) return;
galleryHashes.add(this.hash);
if (!ok2) return;
if (!ok) return;
img.onclick = () => {
setGallerySelectionByElement(this, { send: true });
};
@@ -16086,8 +16091,8 @@ async function createSplash() {
<div id="splashLog" class="splash-log" style="position: fixed; bottom: 0; text-align: left; padding: 8vh 8px 8px 8px; font-size: 12px; width: 100%; background: linear-gradient(0deg, darkslategray, transparent); opacity: 50%;"></div>
</div>`;
document.body.insertAdjacentHTML("beforeend", splash);
const ok2 = await preloadImages();
if (!ok2) {
const ok = await preloadImages();
if (!ok) {
removeSplash();
return;
}
@@ -16106,6 +16111,15 @@ async function createSplash() {
if (motdEl) motdEl.innerHTML = clean;
}).catch((err) => error(`getMOTD: ${err}`));
log("loadGradioUi");
const splashMonitor = setInterval(() => {
const splashVisible = !!document.getElementById("splash");
if (splashVisible) {
log("splashVisible", { visible: true, elapsed: Math.round(performance.now() - appStartTime) });
} else {
log("splashVisible", { visible: false, elapsed: Math.round(performance.now() - appStartTime) });
clearInterval(splashMonitor);
}
}, 2500);
}
window.onload = createSplash;
@@ -16124,18 +16138,22 @@ function addLegacyNotice() {
window.api = "/sdapi/v1";
window.subpath = "";
var startupPromises = [];
var ok = false;
var optsReady = false;
var initialized = false;
async function waitForOpts() {
const t0 = performance.now();
let t1 = performance.now();
while (true) {
if (t1 - t0 > 12e4) {
if (t1 - t0 > 15e3) {
log("waitForOpts delayed", t1 - t0);
}
if (t1 - t0 > 6e4) {
log("waitForOpts timeout");
break;
}
if (window.opts && Object.keys(window.opts).length > 0) {
ok = window.opts.theme_type === "Modern" ? "uiux_separator_appearance" in window.opts : true;
if (ok) {
optsReady = window.opts.theme_type === "Modern" ? "uiux_separator_appearance" in window.opts : true;
if (optsReady) {
log("waitForOpts", Math.round(t1 - t0));
timer("waitForOpts", t1 - t0);
break;
@@ -16159,6 +16177,8 @@ async function updateSubpath() {
log("API", { url: window.api });
}
async function initStartup() {
if (initialized) return;
initialized = true;
const t0 = performance.now();
log("initGradio", Math.round(t0 - appStartTime));
timer("initGradio", t0 - appStartTime);
@@ -16202,6 +16222,7 @@ async function initStartup() {
}
onUiLoaded(initStartup);
onUiReady(() => log("uiReady"));
window.initStartup = initStartup;
// ui/extensions.ts
function extensions_apply(_extensionsDisabledList, _extensionsUpdateList, disableAll) {
+3 -3
View File
File diff suppressed because one or more lines are too long
+1
View File
@@ -23,6 +23,7 @@ declare global {
// state objects
api: string; // ui/startup.ts
subpath: string; // ui/startup.ts
initStartup?: () => void; // ui/startup.ts
opts: Record<string, any>; // ui/ui.ts
localization?: Record<string, any>; // ui/ui.ts
titles?: Record<string, any>; // ui/ui.ts
+10
View File
@@ -112,6 +112,16 @@ async function createSplash() {
.catch((err) => error(`getMOTD: ${err}`));
log('loadGradioUi');
const splashMonitor = setInterval(() => {
const splashVisible = !!document.getElementById('splash');
if (splashVisible) {
log('splashVisible', { visible: true, elapsed: Math.round(performance.now() - appStartTime) });
} else {
log('splashVisible', { visible: false, elapsed: Math.round(performance.now() - appStartTime) });
clearInterval(splashMonitor);
}
}, 2500);
}
window.onload = createSplash;
+6 -1
View File
@@ -139,6 +139,7 @@ const ignoreElementsSet = new Set(ignoreElements);
const ignoreClasses = ['wrap'];
let mutationTimer: ReturnType<typeof setTimeout> | undefined;
let mutationTS: number | undefined;
let validMutations = [];
async function mutationCallback(mutations) {
@@ -152,9 +153,12 @@ async function mutationCallback(mutations) {
}
if (validMutations.length < 1) return;
if (mutationTimer) clearTimeout(mutationTimer);
if (mutationTimer) clearTimeout(mutationTimer); // bounce
mutationTimer = setTimeout(async () => {
const ts = Date.now() - mutationTS;
if (!executedOnLoaded && (ts > 1000)) log('onUiLoaded delayed', { ts, prompts: anyPromptExists() });
if (!executedOnLoaded && anyPromptExists()) { // execute once
log('onUiLoaded', ts);
executedOnLoaded = true;
executeCallbacks(uiLoadedCallbacks);
}
@@ -174,6 +178,7 @@ async function mutationCallback(mutations) {
document.addEventListener('DOMContentLoaded', () => {
log('DOMContentLoaded');
mutationTS = Date.now();
gradioObserver = new MutationObserver(mutationCallback);
gradioObserver.observe(gradioApp(), { childList: true, subtree: true, attributes: false });
});
+13 -5
View File
@@ -27,20 +27,24 @@ window.api = '/sdapi/v1';
window.subpath = '';
const startupPromises: Promise<unknown>[] = [];
let ok = false;
let optsReady = false;
let initialized = false;
async function waitForOpts() {
// make sure all of the ui is ready and options are loaded
const t0 = performance.now();
let t1 = performance.now();
while (true) {
if (t1 - t0 > 120000) {
if (t1 - t0 > 15000) {
log('waitForOpts delayed', t1 - t0);
}
if (t1 - t0 > 60000) {
log('waitForOpts timeout');
break;
}
if (window.opts && Object.keys(window.opts).length > 0) {
ok = window.opts.theme_type === 'Modern' ? 'uiux_separator_appearance' in window.opts : true;
if (ok) {
optsReady = (window.opts.theme_type === 'Modern') ? 'uiux_separator_appearance' in window.opts : true;
if (optsReady) {
log('waitForOpts', Math.round(t1 - t0));
timer('waitForOpts', t1 - t0);
break;
@@ -66,7 +70,9 @@ async function updateSubpath() {
log('API', { url: window.api });
}
async function initStartup() {
export async function initStartup() {
if (initialized) return;
initialized = true;
const t0 = performance.now();
log('initGradio', Math.round(t0 - appStartTime));
timer('initGradio', t0 - appStartTime);
@@ -126,6 +132,8 @@ async function initStartup() {
onUiLoaded(initStartup);
onUiReady(() => log('uiReady'));
window.initStartup = initStartup;
// onAfterUiUpdate(() => log('evt onAfterUiUpdate'));
// onUiLoaded(() => log('evt onUiLoaded'));
// onOptionsChanged(() => log('evt onOptionsChanged'));