js optimizations

javascript/aspectRatioOverlay.js

@@ -1,5 +1,3 @@
-/* global gradioApp, onUiUpdate, get_tab_index */
-
 let currentWidth = null;
 let currentHeight = null;
 let arFrameTimeout = setTimeout(() => {}, 0);
@@ -52,7 +50,7 @@ function dimensionChange(e, is_width, is_height) {
   }
 }
 
-onUiUpdate(() => {
+onAfterUiUpdate(() => {
   const arPreviewRect = gradioApp().querySelector('#imageARPreview');
   if (arPreviewRect) arPreviewRect.style.display = 'none';
   const tabImg2img = gradioApp().querySelector('#tab_img2img');

javascript/contextMenus.js

@@ -1,5 +1,3 @@
-/* global gradioApp, uiCurrentTab, onUiUpdate, get_uiCurrentTabContent */
-
 const contextMenuInit = () => {
   let eventListenerApplied = false;
   const menuSpecs = new Map();
@@ -137,4 +135,4 @@ const addContextMenuEventListener = initResponse[2];
 }());
 // End example Context Menu Items
 
-onUiUpdate(() => addContextMenuEventListener());
+onAfterUiUpdate(() => addContextMenuEventListener());

javascript/generationParams.js

@@ -1,4 +1,3 @@
-/* global gradioApp, onUiUpdate */
 // attaches listeners to the txt2img and img2img galleries to update displayed generation param text when the image changes
 
 function attachGalleryListeners(tab_name) {
@@ -22,7 +21,7 @@ let txt2img_gallery;
 let img2img_gallery;
 let modal;
 
-onUiUpdate(() => {
+onAfterUiUpdate(() => {
   if (!txt2img_gallery) txt2img_gallery = attachGalleryListeners('txt2img');
   if (!img2img_gallery) img2img_gallery = attachGalleryListeners('img2img');
   if (!modal) {

javascript/hires.js

@@ -1,4 +1,3 @@
-/* global gradioApp, opts */
 function onCalcResolutionHires(enable_hr, width, height, hr_scale, hr_resize_x, hr_resize_y) {
   function setInactive(elem, inactive) {
     elem.classList.toggle('inactive', !!inactive);

javascript/imageMaskFix.js

@@ -1,4 +1,3 @@
-/* global gradioApp, onUiUpdate */
 /**
  * temporary fix for https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/668
  * @see https://github.com/gradio-app/gradio/issues/1721
@@ -41,5 +40,5 @@ function imageMaskResize() {
   });
 }
 
-onUiUpdate(imageMaskResize);
+onAfterUiUpdate(imageMaskResize);
 window.addEventListener('resize', imageMaskResize);

javascript/imageParams.js

@@ -1,4 +1,3 @@
-/* global gradioApp, get_tab_index */
 window.onload = (function () {
   window.addEventListener('drop', (e) => {
     const target = e.composedPath()[0];

javascript/imageviewer.js

@@ -1,4 +1,3 @@
-/* global gradioApp, onUiUpdate */
 // A full size 'lightbox' preview modal shown when left clicking on gallery previews
 function closeModal() {
   gradioApp().getElementById('lightboxModal').style.display = 'none';
@@ -143,7 +142,7 @@ function galleryImageHandler(e) {
   e.onclick = showGalleryImage;
 }
 
-onUiUpdate(() => {
+onAfterUiUpdate(() => {
   fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img');
   if (fullImg_preview != null) fullImg_preview.forEach(setupImageForLightbox);
   updateOnBackgroundChange();

javascript/notification.js

@@ -3,7 +3,7 @@
 let lastHeadImg = null;
 let notificationButton = null;
 
-onUiUpdate(function () {
+onAfterUiUpdate(function () {
   if (!notificationButton) {
     notificationButton = gradioApp().getElementById('request_notifications');
     if (notificationButton) notificationButton.addEventListener('click', (evt) => Notification.requestPermission(), true);

javascript/progressbar.js

@@ -1,4 +1,3 @@
-/* global opts */
 let lastState = {};
 
 function rememberGallerySelection(id_gallery) {}

javascript/script.js

@@ -13,33 +13,48 @@ function get_uiCurrentTabContent() {
   return gradioApp().querySelector('.tabitem[id^=tab_]:not([style*="display: none"])');
 }
 
-uiUpdateCallbacks = [];
-uiLoadedCallbacks = [];
-uiTabChangeCallbacks = [];
-optionsChangedCallbacks = [];
+const uiAfterUpdateCallbacks = [];
+const uiUpdateCallbacks = [];
+const uiLoadedCallbacks = [];
+const uiTabChangeCallbacks = [];
+const optionsChangedCallbacks = [];
 let uiCurrentTab = null;
+let uiAfterUpdateTimeout = null;
+
+function onAfterUiUpdate(callback) {
+  uiAfterUpdateCallbacks.push(callback);
+}
 
 function onUiUpdate(callback) {
   uiUpdateCallbacks.push(callback);
 }
+
 function onUiLoaded(callback) {
   uiLoadedCallbacks.push(callback);
 }
+
 function onUiTabChange(callback) {
   uiTabChangeCallbacks.push(callback);
 }
+
 function onOptionsChanged(callback) {
   optionsChangedCallbacks.push(callback);
 }
 
-function runCallback(x, m) {
-  try {
-    x(m);
-  } catch (e) { (console.error || console.log).call(console, e.message, e); }
+function executeCallbacks(queue, arg) {
+  if (!uiLoaded) return
+  for (const callback of queue) {
+      try {
+          callback(arg);
+      } catch (e) {
+          console.error("error running callback", callback, ":", e);
+      }
+  }
 }
 
-function executeCallbacks(queue, m) {
-  queue.forEach((x) => { runCallback(x, m); });
+function scheduleAfterUiUpdateCallbacks() {
+  clearTimeout(uiAfterUpdateTimeout);
+  uiAfterUpdateTimeout = setTimeout(() => executeCallbacks(uiAfterUpdateCallbacks, 500));
 }
 
 let executedOnLoaded = false;
@@ -51,6 +66,7 @@ document.addEventListener('DOMContentLoaded', () => {
       executeCallbacks(uiLoadedCallbacks);
     }
     executeCallbacks(uiUpdateCallbacks, m);
+    scheduleAfterUiUpdateCallbacks();
     const newTab = get_uiCurrentTab();
     if (newTab && (newTab !== uiCurrentTab)) {
       uiCurrentTab = newTab;

javascript/set-hints.js

@@ -1,4 +1,4 @@
-onUiUpdate(() => {
+onAfterUiUpdate(() => {
   gradioApp().querySelectorAll('span, button, select, p').forEach((span) => {
     tooltip = titles[span.textContent];
     if (!tooltip) tooltip = titles[span.value];
@@ -22,7 +22,7 @@ onUiUpdate(() => {
 /*
 // dump elements 
 const elements = [
-  ...Array.from(gradioApp().querySelectorAll('button')).map(el => ({id: el.id, text: el.textContent, title: el.title })),
-  ...Array.from(gradioApp().querySelectorAll('label > span')).map(el => ({id: el.id, text: el.textContent, title: el.title })),
+  ...Array.from(gradioApp().querySelectorAll('button')).map(el => ({id: el.id, text: el.textContent, localized: '', hint: el.title })),
+  ...Array.from(gradioApp().querySelectorAll('label > span')).map(el => ({id: el.id, text: el.textContent, localized: '', hint: el.title })),
 ];
 */

javascript/ui.js

@@ -1,5 +1,3 @@
-/* global gradioApp, onUiUpdate, opts */
-
 window.opts = {};
 window.localization = {};
 let tabSelected = '';
@@ -201,7 +199,7 @@ function register_drag_drop() {
   });
 }
 
-onUiUpdate(() => {
+onAfterUiUpdate(() => {
   sort_ui_elements();
   if (Object.keys(opts).length !== 0) return;
   const json_elem = gradioApp().getElementById('settings_json');
@@ -415,6 +413,8 @@ function preview_theme() {
   }
 }
 
+let uiLoaded = false;
+
 function reconnect_ui() {
   const api_logo = Array.from(gradioApp().querySelectorAll('img')).filter((el) => el?.src?.endsWith('api-logo.svg'));
   if (api_logo.length > 0) api_logo[0].remove();
@@ -428,6 +428,7 @@ function reconnect_ui() {
     rememberGallerySelection('txt2img_gallery');
     requestProgress(task_id, null, gallery, null, null, true);
   }
+  uiLoaded = true;
 
   const sd_model = gradioApp().getElementById('setting_sd_model_checkpoint');
   let loadingStarted = 0;