enhance globals

Signed-off-by: Vladimir Mandic <mandic00@live.com>

.github/skills/README.md

@@ -32,6 +32,10 @@ This folder contains repo-local Copilot skills for recurring SD.Next tasks.
   File: `check-processing/SKILL.md`
   Use when validating txt2img/img2img/control processing workflows from UI submit definitions to backend execution with parameter, type, and initialization checks.
 
+- `check-ui`
+  File: `check-ui/SKILL.md`
+  Use when auditing Python-to-JavaScript UI bindings for Gradio `_js` callbacks, verifying `window` exposure and `ui/globals.d.ts` registration.
+
 - `check-scripts`
   File: `check-scripts/SKILL.md`
   Use when auditing `scripts/*.py` for correct Script overrides (`__init__`, `title`, `show`) and verifying `ui()` output compatibility with `run()` or `process()` parameters.

.github/skills/check-ui/SKILL.md

@@ -0,0 +1,117 @@
+---
+name: check-ui
+description: "Audit Python-to-JavaScript UI bindings for Gradio _js calls, global window exposure, and ui/globals.d.ts registration."
+argument-hint: "Optionally focus on a specific extension or module path"
+---
+
+# Check Python-JavaScript UI Bindings
+
+Audit SD.Next UI integration points where Python uses Gradio `_js=...` bindings to call JavaScript. Verify each JavaScript callback is exposed on the global `window` object and included in `ui/globals.d.ts`.
+
+## When To Use
+
+- The user changes or reviews Python UI code under `modules/`, `scripts/`, or `extensions/` with `_js=` callbacks.
+- A UI integration bug involves Python-triggered JavaScript functions.
+- You need to validate UI contract consistency for Gradio-bound JS methods.
+- User adds or updates extension with JavaScript code in `extensions/*/javascript`.
+
+## Primary Files
+
+- `ui/globals.d.ts`
+- `wiki/Dev-UI.md`
+- `modules/**` and `scripts/**` Python files that declare `_js=` values
+- `extensions/*/javascript/**` TypeScript/JavaScript source files
+
+## Secondary Files To Inspect
+
+- `ui/**/*.ts`
+- `extensions-builtin/sdnext-modernui/src/**/*.ts`
+- `extensions-builtin/sdnext-kanvas/src/**/*.ts`
+- `extensions-builtin/sdnext-kanvas/javascript/kanvas.mjs`
+
+## Audit Goals
+
+For every Python `_js` usage, confirm:
+
+1. The referenced JS callback exists in code.
+2. The callback is assigned to `window.<name>` or otherwise accessible as a global function.
+3. The callback name is declared in `ui/globals.d.ts`.
+4. JavaScript-only methods called from Python are not implemented only as module-local exports.
+
+For all extension JavaScript code under `extensions/*/javascript`, confirm:
+
+- No missing JS callback registrations for Python-bound names.
+- Global names are only used for Python bindings, not for code that should instead be imported.
+- `ui/globals.d.ts` remains the source of truth for Python-visible UI globals.
+
+## Procedure
+
+### 1. Enumerate Python `_js=` Bindings
+
+- Search `modules/`, `scripts/`, and `extensions/` for `_js=` occurrences.
+- Capture the literal callback string values, including direct names and arrow-function expressions.
+- For formatted strings, enumerate all possible callback names generated by the formatting pattern.
+- Flag dynamic cases where the callback cannot be statically resolved.
+
+This is the most complex part as `_js` can be assigned a direct string, a formatted string, or an inline function. Focus on extracting the intended callback name(s) for verification in the next steps.
+
+Examples:
+
+```python
+_js="send_to_kanvas"
+_js=f"switch_to_{binding.tabname}"
+_js=f'(x, y, i, j) => [x, y, ...selected_gallery_files("{tabname}")]'
+_js='() => gallerySort("name")'
+```
+
+### 2. Enumerate any additional Extension JavaScript Sources
+
+- Review `extensions/*/javascript`, `extensions-builtin/*/src`, and the specific entry point `extensions-builtin/sdnext-kanvas/javascript/kanvas.mjs` for functions that attach to `window`.
+- Confirm extension source files are the authoritative implementation, not generated build artifacts.
+- Validate that any new JS entry points are registered by package build or extension initialization.
+
+### 3. Verify JavaScript Exposure
+
+- Search `ui/`, `extensions-builtin/sdnext-modernui/src/`, `extensions-builtin/sdnext-kanvas/src/`, and `extensions/*/javascript/` for each callback name.
+- Confirm the callback is attached to `window` as `window.<name> = ...` or equivalent.
+- If the callback is an inline function string like `() => quickSaveStyle()`, ensure the referenced helper exists and any helper used for Python integration is also globally available if needed.
+
+### 4. Check TypeScript Declarations
+
+- Open `ui/globals.d.ts` and verify each Python-visible global callback name is declared.
+- Confirm the declaration shape is compatible with its usage if type annotations are present.
+- If an extension exposes its own additional global helpers, verify the declaration file is updated accordingly.
+
+### 5. Propose Fixes for Any Issues Found
+
+- For missing global registrations, add `window.<name> = <function>` in the appropriate JavaScript source file.
+- For missing `ui/globals.d.ts` entries, add a declaration like `declare global { function <name>(...args: any[]): any; }` with appropriate types if possible.
+
+### 6. Run UI Typecheck and Lint tests
+
+- Run `pnpm eslint` to ensure there are no linting errors.
+- Run `pnpm tsc` to ensure there are no type errors, which can catch missing or mismatched declarations.
+- Run `pnpm build` to ensure the extension builds correctly with the new or updated JavaScript code.
+
+And fix any issues that arise from these checks.
+
+## Reporting Format
+
+Report findings with:
+
+- Python file and `_js` reference
+- JavaScript location and global registration status
+- `ui/globals.d.ts` declaration status
+- Severity: missing global, missing declaration, stale declaration, or dynamic/ambiguous binding
+
+If no issues are found, state that the Python/JS UI binding audit is clear and mention whether any dynamic `_js` strings remain unresolved.
+
+## Output Expectations
+
+When this skill is used, return:
+
+- Total `_js` bindings inspected
+- Total missing or invalid global registrations
+- Total missing or stale `ui/globals.d.ts` entries
+- Summary of any ambiguous `_js` cases that require manual review
+- A short summary of whether the UI binding contract is intact

modules/ui_settings.py

@@ -381,28 +381,28 @@ def create_quicksettings(interfaces):
         button_set_checkpoint = gr.Button('Change model', elem_id='change_checkpoint', visible=False)
         button_set_checkpoint.click(
             fn=lambda value, _: run_settings_single(value, key='sd_model_checkpoint', force=True),
-            _js="function(v){ var res = desiredCheckpointName; desiredCheckpointName = ''; return [res || v, null]; }",
+            _js="consumeDesiredCheckpointName",
             inputs=[shared.settings_components['sd_model_checkpoint'], dummy_component],
             outputs=[shared.settings_components['sd_model_checkpoint'], text_settings],
         )
         button_set_refiner = gr.Button('Change refiner', elem_id='change_refiner', visible=False)
         button_set_refiner.click(
             fn=lambda value, _: run_settings_single(value, key='sd_model_checkpoint'),
-            _js="function(v){ var res = desiredCheckpointName; desiredCheckpointName = ''; return [res || v, null]; }",
+            _js="consumeDesiredCheckpointName",
             inputs=[shared.settings_components['sd_model_refiner'], dummy_component],
             outputs=[shared.settings_components['sd_model_refiner'], text_settings],
         )
         button_set_vae = gr.Button('Change VAE', elem_id='change_vae', visible=False)
         button_set_vae.click(
             fn=lambda value, _: run_settings_single(value, key='sd_vae'),
-            _js="function(v){ var res = desiredVAEName; desiredVAEName = ''; return [res || v, null]; }",
+            _js="consumeDesiredVAEName",
             inputs=[shared.settings_components['sd_vae'], dummy_component],
             outputs=[shared.settings_components['sd_vae'], text_settings],
         )
         button_set_unet = gr.Button("Change UNet", elem_id="change_unet", visible=False)
         button_set_unet.click(
             fn=lambda value, _: run_settings_single(value, key="sd_unet"),
-            _js="function(v){ var res = desiredUNetName; desiredUNetName = ''; return [res || v, null]; }",
+            _js="consumeDesiredUNetName",
             inputs=[shared.settings_components["sd_unet"], dummy_component],
             outputs=[shared.settings_components["sd_unet"], text_settings],
         )
@@ -427,7 +427,7 @@ def create_quicksettings(interfaces):
         button_set_reference = gr.Button('Change reference', elem_id='change_reference', visible=False)
         button_set_reference.click(
             fn=reference_submit,
-            _js="function(v){ return desiredCheckpointName; }",
+            _js="getDesiredCheckpointName",
             inputs=[shared.settings_components['sd_model_checkpoint']],
             outputs=[shared.settings_components['sd_model_checkpoint']],
         )

ui/contextMenus.ts

@@ -73,32 +73,34 @@ const contextMenuInit = () => {
   async function addContextMenuEventListener(): Promise<void> {
     if (eventListenerApplied) return;
     log('initContextMenu');
-    gradioApp().addEventListener('click', (e) => {
-      if (!e.isTrusted) return;
+    gradioApp().addEventListener('click', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
+      if (!mouseEvent.isTrusted) return;
       const oldMenu = gradioApp().querySelector('#context-menu');
       if (oldMenu) oldMenu.remove();
       menuSpecs.forEach((v, k) => {
         const items = v.filter((item) => item.primary);
-        const target = e.target as Element | null;
+        const target = mouseEvent.target as Element | null;
         if (!target) return;
         const matched = target.closest(k);
         if (items.length > 0 && matched) {
-          showContextMenu(e, matched, items);
-          e.preventDefault();
+          showContextMenu(mouseEvent, matched, items);
+          mouseEvent.preventDefault();
         }
       });
     });
-    gradioApp().addEventListener('contextmenu', (e) => {
+    gradioApp().addEventListener('contextmenu', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
       const oldMenu = gradioApp().querySelector('#context-menu');
       if (oldMenu) oldMenu.remove();
       menuSpecs.forEach((v, k) => {
         const items = v.filter((item) => !item.primary);
-        const target = e.target as Element | null;
+        const target = mouseEvent.target as Element | null;
         if (!target) return;
         const matched = target.closest(k);
         if (items.length > 0 && matched) {
-          showContextMenu(e, matched, items);
-          e.preventDefault();
+          showContextMenu(mouseEvent, matched, items);
+          mouseEvent.preventDefault();
         }
       });
     });

ui/dist/sdnext.mjs

@@ -6784,10 +6784,10 @@ var require_iframeResizer = __commonJS({
             function chkDimension(dimension) {
               return "0px" === (settings[settingId] && settings[settingId].iframe.style[dimension]);
             }
-            function isVisible(el2) {
+            function isVisible2(el2) {
               return null !== el2.offsetParent;
             }
-            if (settings[settingId] && isVisible(settings[settingId].iframe) && (chkDimension("height") || chkDimension("width"))) {
+            if (settings[settingId] && isVisible2(settings[settingId].iframe) && (chkDimension("height") || chkDimension("width"))) {
               trigger(
                 "Visibility change",
                 "resize",
@@ -9938,9 +9938,12 @@ async function sleep(ms) {
 }
 function gradioApp() {
   const elems = document.getElementsByTagName("gradio-app");
-  const elem = elems.length === 0 ? document.documentElement : elems[0];
+  const elem = elems.length === 0 ? document : elems[0];
   if (elem !== document) elem.getElementById = (id) => document.getElementById(id);
-  return elem.shadowRoot ? elem.shadowRoot : elem;
+  if (elem !== document && elem.shadowRoot) {
+    return elem.shadowRoot;
+  }
+  return elem;
 }
 window.gradioApp = gradioApp;
 function getUICurrentTab() {
@@ -10161,8 +10164,8 @@ window.deleteFile = deleteFile;
 function uiElementIsVisible(el2) {
   if (el2 === document) return true;
   const computedStyle = getComputedStyle(el2);
-  const isVisible = computedStyle.display !== "none";
-  if (!isVisible) return false;
+  const isVisible2 = computedStyle.display !== "none";
+  if (!isVisible2) return false;
   return uiElementIsVisible(el2.parentNode);
 }
 function uiElementInSight(el2) {
@@ -11118,6 +11121,12 @@ function clip_gallery_urls(gallery) {
     (err) => error(`clipboard: ${files} ${err}`)
   );
 }
+function isVisible(el2) {
+  if (!el2) return false;
+  const rect = el2.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0) return false;
+  return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+}
 function all_gallery_buttons() {
   let allGalleryButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small');
   if (allGalleryButtons.length === 0) allGalleryButtons = gradioApp().querySelectorAll(".gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small");
@@ -11151,6 +11160,26 @@ function selected_gallery_index() {
   }
   return result;
 }
+function selected_gallery_files(tabname) {
+  let allImages = [];
+  let allThumbnails;
+  if (tabname && tabname !== "gallery") allThumbnails = gradioApp().querySelectorAll("div[id$=_gallery].gradio-gallery .thumbnail-item.thumbnail-small");
+  else allThumbnails = gradioApp().querySelectorAll(".gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small");
+  try {
+    allImages = Array.from(allThumbnails).map((v) => v.querySelector("img"));
+    if (tabname && tabname !== "gallery") allImages = allImages.filter((img) => isVisible(img));
+    allImages = allImages.map((img) => {
+      let fn = img.src;
+      if (fn.includes("file=")) fn = fn.split("file=")[1];
+      return decodeURI(fn);
+    });
+  } catch (err) {
+    error(`selected_gallery_files: ${err}`);
+  }
+  let selectedIndex = -1;
+  if (tabname && tabname !== "gallery") selectedIndex = selected_gallery_index();
+  return [allImages, selectedIndex];
+}
 function extract_image_from_gallery(gallery) {
   if (gallery.length === 0) return [null];
   if (gallery.length === 1) return [gallery[0]];
@@ -11212,6 +11241,56 @@ function setFontSize(val, old) {
     timer("setFontSize", t1 - t0);
   });
 }
+function switchToTab(tab) {
+  const tabs = Array.from(gradioApp().querySelectorAll("#tabs > .tab-nav > button"));
+  const btn = tabs?.find((t) => t.innerText === tab);
+  log("switchToTab", tab);
+  if (btn) btn.click();
+}
+function switch_to_txt2img(...args) {
+  switchToTab("Text");
+  return Array.from(arguments);
+}
+function switch_to_img2img_tab(no) {
+  switchToTab("Image");
+  gradioApp().getElementById("mode_img2img").querySelectorAll("button")[no].click();
+}
+function switch_to_img2img(...args) {
+  switchToTab("Image");
+  switch_to_img2img_tab(0);
+  return Array.from(arguments);
+}
+function switch_to_inpaint(...args) {
+  switchToTab("Image");
+  switch_to_img2img_tab(1);
+  return Array.from(arguments);
+}
+function switch_to_sketch(...args) {
+  switchToTab("Image");
+  switch_to_img2img_tab(2);
+  return Array.from(arguments);
+}
+function switch_to_composite(...args) {
+  switchToTab("Image");
+  switch_to_img2img_tab(3);
+  return Array.from(arguments);
+}
+function switch_to_extras(...args) {
+  switchToTab("Process");
+  return Array.from(arguments);
+}
+function switch_to_control(...args) {
+  switchToTab("Control");
+  return Array.from(arguments);
+}
+function switch_to_video(...args) {
+  switchToTab("Video");
+  return Array.from(arguments);
+}
+function switch_to_caption(...args) {
+  switchToTab("Caption");
+  return Array.from(arguments);
+}
 function get_tab_index(tabId) {
   let res = 0;
   gradioApp().getElementById(tabId)?.querySelector("div").querySelectorAll("button").forEach((button, i) => {
@@ -11353,6 +11432,31 @@ function scheduleIdleUI(task) {
     setTimeout(task, 0);
   }
 }
+function recalculatePromptTokens(name) {
+  if (promptTokenCountUpdateFuncs[name]) {
+    promptTokenCountUpdateFuncs[name]();
+  }
+}
+function recalculate_prompts_txt2img(...args) {
+  recalculatePromptTokens("txt2img_prompt");
+  recalculatePromptTokens("txt2img_neg_prompt");
+  return Array.from(arguments);
+}
+function recalculate_prompts_img2img(...args) {
+  recalculatePromptTokens("img2img_prompt");
+  recalculatePromptTokens("img2img_neg_prompt");
+  return Array.from(arguments);
+}
+function recalculate_prompts_inpaint(...args) {
+  recalculatePromptTokens("img2img_prompt");
+  recalculatePromptTokens("img2img_neg_prompt");
+  return Array.from(arguments);
+}
+function recalculate_prompts_control(...args) {
+  recalculatePromptTokens("control_prompt");
+  recalculatePromptTokens("control_neg_prompt");
+  return Array.from(arguments);
+}
 function registerDragDrop() {
   const qs = gradioApp().getElementById("quicksettings");
   if (!qs) return;
@@ -11468,6 +11572,7 @@ function updateInput2(target) {
   Object.defineProperty(e, "target", { value: target });
   target.dispatchEvent(e);
 }
+window.restartReload = restartReload;
 window.updateInput = updateInput2;
 window.clip_gallery_urls = clip_gallery_urls;
 window.extract_image_from_gallery = extract_image_from_gallery;
@@ -11475,6 +11580,7 @@ window.getCaptionActiveTab = getCaptionActiveTab;
 window.get_img2img_tab_index = get_img2img_tab_index;
 window.modelmerger = modelmerger;
 window.selected_gallery_index = selected_gallery_index;
+window.selected_gallery_files = selected_gallery_files;
 window.send_to_kanvas = send_to_kanvas;
 window.submit_control = submit_control;
 window.submit_framepack = submit_framepack;
@@ -11484,11 +11590,60 @@ window.submit_postprocessing = submit_postprocessing;
 window.submit_txt2img = submit_txt2img;
 window.submit_video = submit_video;
 window.submit_video_wrapper = submit_video_wrapper;
+window.switch_to_txt2img = switch_to_txt2img;
+window.switch_to_img2img_tab = switch_to_img2img_tab;
+window.switch_to_img2img = switch_to_img2img;
+window.switch_to_inpaint = switch_to_inpaint;
+window.switch_to_sketch = switch_to_sketch;
+window.switch_to_composite = switch_to_composite;
+window.switch_to_extras = switch_to_extras;
+window.switch_to_control = switch_to_control;
+window.switch_to_video = switch_to_video;
+window.switch_to_caption = switch_to_caption;
+window.recalculate_prompts_txt2img = recalculate_prompts_txt2img;
+window.recalculate_prompts_img2img = recalculate_prompts_img2img;
+window.recalculate_prompts_inpaint = recalculate_prompts_inpaint;
+window.recalculate_prompts_control = recalculate_prompts_control;
+var desiredCheckpointName = null;
+var desiredVAEName = null;
+var desiredUNetName = null;
+function consumeDesiredCheckpointName(v) {
+  const res = desiredCheckpointName;
+  desiredCheckpointName = null;
+  return [res || v, null];
+}
+function consumeDesiredVAEName(v) {
+  const res = desiredVAEName;
+  desiredVAEName = null;
+  return [res || v, null];
+}
+function consumeDesiredUNetName(v) {
+  const res = desiredUNetName;
+  desiredUNetName = null;
+  return [res || v, null];
+}
+function getDesiredCheckpointName() {
+  return desiredCheckpointName;
+}
+window.consumeDesiredCheckpointName = consumeDesiredCheckpointName;
+window.consumeDesiredVAEName = consumeDesiredVAEName;
+window.consumeDesiredUNetName = consumeDesiredUNetName;
+window.getDesiredCheckpointName = getDesiredCheckpointName;
+function currentImageResolutionimg2img(_a, _b, scaleBy) {
+  const img = gradioApp().querySelector('#mode_img2img > div[style="display: block;"] img');
+  return img ? [img.naturalWidth, img.naturalHeight, scaleBy] : [0, 0, scaleBy];
+}
+function currentImageResolutioncontrol(_a, _b, scaleBy) {
+  const img = gradioApp().querySelector('#control-tab-input > div[style="display: block;"] img');
+  return img ? [img.naturalWidth, img.naturalHeight, scaleBy] : [0, 0, scaleBy];
+}
 function updateImg2imgResizeToTextAfterChangingImage() {
   const el2 = gradioApp().getElementById("img2img_update_resize_to");
   if (el2) setTimeout(() => gradioApp().getElementById("img2img_update_resize_to").click(), 500);
   return [];
 }
+window.currentImageResolutionimg2img = currentImageResolutionimg2img;
+window.currentImageResolutioncontrol = currentImageResolutioncontrol;
 window.updateImg2imgResizeToTextAfterChangingImage = updateImg2imgResizeToTextAfterChangingImage;
 async function toggleCompact(val, old) {
   if (val === old) return;
@@ -14072,7 +14227,7 @@ async function bindImageViewer() {
   const galleryPreviews = gradioApp().querySelectorAll(".gradio-gallery > div.preview");
   for (const galleryPreview of galleryPreviews) {
     if (!galleryPreview.hasAttribute("data-listener")) galleryPreview.addEventListener("click", galleryClickEventHandler, true);
-    galleryPreview.setAttribute("data-listener", true);
+    galleryPreview.setAttribute("data-listener", "true");
     galleryPreview.querySelectorAll("img").forEach(setupImageForLightbox);
   }
 }
@@ -15343,31 +15498,33 @@ var contextMenuInit = () => {
     if (eventListenerApplied) return;
     log("initContextMenu");
     gradioApp().addEventListener("click", (e) => {
-      if (!e.isTrusted) return;
+      const mouseEvent = e;
+      if (!mouseEvent.isTrusted) return;
       const oldMenu = gradioApp().querySelector("#context-menu");
       if (oldMenu) oldMenu.remove();
       menuSpecs.forEach((v, k) => {
         const items = v.filter((item) => item.primary);
-        const target = e.target;
+        const target = mouseEvent.target;
         if (!target) return;
         const matched = target.closest(k);
         if (items.length > 0 && matched) {
-          showContextMenu(e, matched, items);
-          e.preventDefault();
+          showContextMenu(mouseEvent, matched, items);
+          mouseEvent.preventDefault();
         }
       });
     });
     gradioApp().addEventListener("contextmenu", (e) => {
+      const mouseEvent = e;
       const oldMenu = gradioApp().querySelector("#context-menu");
       if (oldMenu) oldMenu.remove();
       menuSpecs.forEach((v, k) => {
         const items = v.filter((item) => !item.primary);
-        const target = e.target;
+        const target = mouseEvent.target;
         if (!target) return;
         const matched = target.closest(k);
         if (items.length > 0 && matched) {
-          showContextMenu(e, matched, items);
-          e.preventDefault();
+          showContextMenu(mouseEvent, matched, items);
+          mouseEvent.preventDefault();
         }
       });
     });

ui/generationParams.ts

@@ -5,8 +5,8 @@ import { getENActiveTab } from './extraNetworks';
 import { log } from './logger';
 import { timer } from './timers';
 
-function attachGalleryListeners(tabName: string): Element | null {
-  const gallery = gradioApp().querySelector(`#${tabName}_gallery`);
+function attachGalleryListeners(tabName: string): HTMLElement | null {
+  const gallery: HTMLElement | null = gradioApp().querySelector(`#${tabName}_gallery`);
   if (!gallery) return null;
   gallery.addEventListener('click', () => {
     // log('galleryItemSelected:', tabName);

ui/globals.d.ts

@@ -45,7 +45,9 @@ declare global {
     getCaptionActiveTab?: (...args: unknown[]) => unknown[]; // ui/ui.ts
     get_img2img_tab_index?: (...args: unknown[]) => unknown[]; // ui/ui.ts
     modelmerger?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    restartReload?: (initial?: boolean) => void; // ui/ui.ts
     selected_gallery_index?: () => number; // ui/ui.ts
+    selected_gallery_files?: (...args: unknown[]) => unknown[]; // ui/ui.ts
     send_to_kanvas?: (gallery: { data?: string }[]) => void; // ui/ui.ts
     submit_control?: (...args: unknown[]) => unknown[]; // ui/ui.ts
     submit_framepack?: (...args: unknown[]) => unknown[]; // ui/ui.ts
@@ -55,6 +57,26 @@ declare global {
     submit_txt2img?: (...args: unknown[]) => unknown[]; // ui/ui.ts
     submit_video?: (...args: unknown[]) => unknown[]; // ui/ui.ts
     submit_video_wrapper?: (...args: unknown[]) => void; // ui/ui.ts
+    currentImageResolutionimg2img?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    currentImageResolutioncontrol?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    switch_to_txt2img?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    switch_to_img2img_tab?: (...args: unknown[]) => void; // ui/ui.ts
+    switch_to_img2img?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    switch_to_inpaint?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    switch_to_sketch?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    switch_to_composite?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    switch_to_extras?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    switch_to_control?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    switch_to_video?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    switch_to_caption?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    recalculate_prompts_txt2img?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    recalculate_prompts_img2img?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    recalculate_prompts_inpaint?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    recalculate_prompts_control?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    consumeDesiredCheckpointName?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    consumeDesiredVAEName?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    consumeDesiredUNetName?: (...args: unknown[]) => unknown[]; // ui/ui.ts
+    getDesiredCheckpointName?: () => string | null; // ui/ui.ts
     updateImg2imgResizeToTextAfterChangingImage?: () => unknown[]; // ui/ui.ts
     authFetch: (url: RequestInfo | URL, options?: RequestInit) => Promise<Response | undefined>; // ui/authWrap.ts
     controlInputMode?: (inputMode: string, ...args: unknown[]) => unknown[]; // ui/control.ts
@@ -95,8 +117,7 @@ declare global {
     checkPaused?: (state?: boolean) => void; // ui/progressBar.ts
     requestInterrupt?: () => void; // ui/progressBar.ts
     deleteFile?: (filename: string) => Promise<void>; // ui/script.ts
-    executeCallbacks?: (queue: ((...args: unknown[]) => void)[], arg?: unknown) => void; // ui/script.ts
-    gradioApp: () => HTMLElement; // ui/script.ts
+    gradioApp: () => Document | Element | ShadowRoot; // ui/script.ts
     onAfterUiUpdate?: (callback: () => void) => void; // ui/script.ts
     onOptionsChanged?: (callback: () => void) => void; // ui/script.ts
     onUiLoaded?: (callback: () => void) => void; // ui/script.ts
@@ -130,6 +151,7 @@ declare global {
       getImage: (index: number, includeMask: boolean, includeAlpha: boolean) => { kanvas: true; image: string | null; mask: string | null } | null;
     }; // extensions-builtin/sdnext-kanvas/src/Kanvas.ts
     loadFromURL?: (url: string) => unknown; // external
+    getKanvasData?: () => { kanvas: true; image: string | null; mask: string | null } | null; // extensions-builtin/sdnext-kanvas/javascript/kanvas.mjs
 
     // browser api
     showDirectoryPicker: () => Promise<FileSystemDirectoryHandle>;

ui/imageViewer.ts

@@ -245,7 +245,7 @@ async function bindImageViewer() {
   const galleryPreviews = gradioApp().querySelectorAll('.gradio-gallery > div.preview');
   for (const galleryPreview of galleryPreviews) {
     if (!galleryPreview.hasAttribute('data-listener')) galleryPreview.addEventListener('click', galleryClickEventHandler, true);
-    galleryPreview.setAttribute('data-listener', true);
+    galleryPreview.setAttribute('data-listener', 'true');
     galleryPreview.querySelectorAll('img').forEach(setupImageForLightbox);
   }
 }

ui/script.ts

@@ -8,11 +8,14 @@ export async function sleep(ms) {
   return new Promise((resolve) => { setTimeout(resolve, ms); });
 }
 
-export function gradioApp(): Element {
+export function gradioApp(): Document | Element | ShadowRoot {
   const elems = document.getElementsByTagName('gradio-app');
-  const elem = elems.length === 0 ? document.documentElement : elems[0];
+  const elem: Document | Element = elems.length === 0 ? document : elems[0];
   if (elem !== document) elem.getElementById = (id) => document.getElementById(id);
-  return elem.shadowRoot ? elem.shadowRoot : elem;
+  if (elem !== document && elem.shadowRoot) {
+    return elem.shadowRoot;
+  }
+  return elem;
 }
 window.gradioApp = gradioApp;
 

ui/ui.ts

@@ -634,6 +634,8 @@ export function updateInput(target) {
   Object.defineProperty(e, 'target', { value: target });
   target.dispatchEvent(e);
 }
+
+window.restartReload = restartReload;
 window.updateInput = updateInput;
 window.clip_gallery_urls = clip_gallery_urls;
 window.extract_image_from_gallery = extract_image_from_gallery;
@@ -641,6 +643,7 @@ window.getCaptionActiveTab = getCaptionActiveTab;
 window.get_img2img_tab_index = get_img2img_tab_index;
 window.modelmerger = modelmerger;
 window.selected_gallery_index = selected_gallery_index;
+window.selected_gallery_files = selected_gallery_files;
 window.send_to_kanvas = send_to_kanvas;
 window.submit_control = submit_control;
 window.submit_framepack = submit_framepack;
@@ -650,6 +653,20 @@ window.submit_postprocessing = submit_postprocessing;
 window.submit_txt2img = submit_txt2img;
 window.submit_video = submit_video;
 window.submit_video_wrapper = submit_video_wrapper;
+window.switch_to_txt2img = switch_to_txt2img;
+window.switch_to_img2img_tab = switch_to_img2img_tab;
+window.switch_to_img2img = switch_to_img2img;
+window.switch_to_inpaint = switch_to_inpaint;
+window.switch_to_sketch = switch_to_sketch;
+window.switch_to_composite = switch_to_composite;
+window.switch_to_extras = switch_to_extras;
+window.switch_to_control = switch_to_control;
+window.switch_to_video = switch_to_video;
+window.switch_to_caption = switch_to_caption;
+window.recalculate_prompts_txt2img = recalculate_prompts_txt2img;
+window.recalculate_prompts_img2img = recalculate_prompts_img2img;
+window.recalculate_prompts_inpaint = recalculate_prompts_inpaint;
+window.recalculate_prompts_control = recalculate_prompts_control;
 
 let desiredCheckpointName = null;
 function selectCheckpoint(name) {
@@ -673,6 +690,34 @@ function selectVAE(name) {
 }
 
 let desiredUNetName = null;
+
+function consumeDesiredCheckpointName(v) {
+  const res = desiredCheckpointName;
+  desiredCheckpointName = null;
+  return [res || v, null];
+}
+
+function consumeDesiredVAEName(v) {
+  const res = desiredVAEName;
+  desiredVAEName = null;
+  return [res || v, null];
+}
+
+function consumeDesiredUNetName(v) {
+  const res = desiredUNetName;
+  desiredUNetName = null;
+  return [res || v, null];
+}
+
+function getDesiredCheckpointName() {
+  return desiredCheckpointName;
+}
+
+window.consumeDesiredCheckpointName = consumeDesiredCheckpointName;
+window.consumeDesiredVAEName = consumeDesiredVAEName;
+window.consumeDesiredUNetName = consumeDesiredUNetName;
+window.getDesiredCheckpointName = getDesiredCheckpointName;
+
 function selectUNet(name) {
   desiredUNetName = name;
   gradioApp().getElementById('change_unet').click();
@@ -704,6 +749,8 @@ function updateImg2imgResizeToTextAfterChangingImage() {
   return [];
 }
 
+window.currentImageResolutionimg2img = currentImageResolutionimg2img;
+window.currentImageResolutioncontrol = currentImageResolutioncontrol;
 window.updateImg2imgResizeToTextAfterChangingImage = updateImg2imgResizeToTextAfterChangingImage;
 
 function createThemeElement(): HTMLImageElement {