e9f3000099baef4d6602519f3417f035ac4372bc76522d0d837800d2d2233d61

javascript/aspectRatioOverlay.js

@@ -0,0 +1,112 @@
+let currentWidth = null;
+let currentHeight = null;
+let arFrameTimeout = setTimeout(function() {}, 0);
+
+function dimensionChange(e, is_width, is_height) {
+
+    if (is_width) {
+        currentWidth = e.target.value * 1.0;
+    }
+    if (is_height) {
+        currentHeight = e.target.value * 1.0;
+    }
+
+    var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block";
+
+    if (!inImg2img) {
+        return;
+    }
+
+    var targetElement = null;
+
+    var tabIndex = get_tab_index('mode_img2img');
+    if (tabIndex == 0) { // img2img
+        targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] img');
+    } else if (tabIndex == 1) { //Sketch
+        targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img');
+    } else if (tabIndex == 2) { // Inpaint
+        targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');
+    } else if (tabIndex == 3) { // Inpaint sketch
+        targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');
+    }
+
+
+    if (targetElement) {
+
+        var arPreviewRect = gradioApp().querySelector('#imageARPreview');
+        if (!arPreviewRect) {
+            arPreviewRect = document.createElement('div');
+            arPreviewRect.id = "imageARPreview";
+            gradioApp().appendChild(arPreviewRect);
+        }
+
+
+
+        var viewportOffset = targetElement.getBoundingClientRect();
+
+        var viewportscale = Math.min(targetElement.clientWidth / targetElement.naturalWidth, targetElement.clientHeight / targetElement.naturalHeight);
+
+        var scaledx = targetElement.naturalWidth * viewportscale;
+        var scaledy = targetElement.naturalHeight * viewportscale;
+
+        var cleintRectTop = (viewportOffset.top + window.scrollY);
+        var cleintRectLeft = (viewportOffset.left + window.scrollX);
+        var cleintRectCentreY = cleintRectTop + (targetElement.clientHeight / 2);
+        var cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth / 2);
+
+        var arscale = Math.min(scaledx / currentWidth, scaledy / currentHeight);
+        var arscaledx = currentWidth * arscale;
+        var arscaledy = currentHeight * arscale;
+
+        var arRectTop = cleintRectCentreY - (arscaledy / 2);
+        var arRectLeft = cleintRectCentreX - (arscaledx / 2);
+        var arRectWidth = arscaledx;
+        var arRectHeight = arscaledy;
+
+        arPreviewRect.style.top = arRectTop + 'px';
+        arPreviewRect.style.left = arRectLeft + 'px';
+        arPreviewRect.style.width = arRectWidth + 'px';
+        arPreviewRect.style.height = arRectHeight + 'px';
+
+        clearTimeout(arFrameTimeout);
+        arFrameTimeout = setTimeout(function() {
+            arPreviewRect.style.display = 'none';
+        }, 2000);
+
+        arPreviewRect.style.display = 'block';
+
+    }
+
+}
+
+
+onAfterUiUpdate(function() {
+    var arPreviewRect = gradioApp().querySelector('#imageARPreview');
+    if (arPreviewRect) {
+        arPreviewRect.style.display = 'none';
+    }
+    var tabImg2img = gradioApp().querySelector("#tab_img2img");
+    if (tabImg2img) {
+        var inImg2img = tabImg2img.style.display == "block";
+        if (inImg2img) {
+            let inputs = gradioApp().querySelectorAll('input');
+            inputs.forEach(function(e) {
+                var is_width = e.parentElement.id == "img2img_width";
+                var is_height = e.parentElement.id == "img2img_height";
+
+                if ((is_width || is_height) && !e.classList.contains('scrollwatch')) {
+                    e.addEventListener('input', function(e) {
+                        dimensionChange(e, is_width, is_height);
+                    });
+                    e.classList.add('scrollwatch');
+                }
+                if (is_width) {
+                    currentWidth = e.value * 1.0;
+                }
+                if (is_height) {
+                    currentHeight = e.value * 1.0;
+                }
+            });
+        }
+    }
+});

javascript/badScaleChecker.js

@@ -0,0 +1,108 @@
+(function() {
+    var ignore = localStorage.getItem("bad-scale-ignore-it") == "ignore-it";
+
+    function getScale() {
+        var ratio = 0,
+            screen = window.screen,
+            ua = navigator.userAgent.toLowerCase();
+
+        if (window.devicePixelRatio !== undefined) {
+            ratio = window.devicePixelRatio;
+        } else if (~ua.indexOf('msie')) {
+            if (screen.deviceXDPI && screen.logicalXDPI) {
+                ratio = screen.deviceXDPI / screen.logicalXDPI;
+            }
+        } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
+            ratio = window.outerWidth / window.innerWidth;
+        }
+
+        return ratio == 0 ? 0 : Math.round(ratio * 100);
+    }
+
+    var showing = false;
+
+    var div = document.createElement("div");
+    div.style.position = "fixed";
+    div.style.top = "0px";
+    div.style.left = "0px";
+    div.style.width = "100vw";
+    div.style.backgroundColor = "firebrick";
+    div.style.textAlign = "center";
+    div.style.zIndex = 99;
+
+    var b = document.createElement("b");
+    b.innerHTML = 'Bad Scale: ??% ';
+
+    div.appendChild(b);
+
+    var note1 = document.createElement("p");
+    note1.innerHTML = "Change your browser or your computer settings!";
+    note1.title = 'Just make sure "computer-scale" * "browser-scale" = 100% ,\n' +
+        "you can keep your computer-scale and only change this page's scale,\n" +
+        "for example: your computer-scale is 125%, just use [\"CTRL\"+\"-\"] to make your browser-scale of this page to 80%.";
+    div.appendChild(note1);
+
+    var note2 = document.createElement("p");
+    note2.innerHTML = " Otherwise, it will cause this page to not function properly!";
+    note2.title = "When you click \"Copy image to: [inpaint sketch]\" in some img2img's tab,\n" +
+        "if scale<100% the canvas will be invisible,\n" +
+        "else if scale>100% this page will take large amount of memory and CPU performance.";
+    div.appendChild(note2);
+
+    var btn = document.createElement("button");
+    btn.innerHTML = "Click here to ignore";
+
+    div.appendChild(btn);
+
+    function tryShowTopBar(scale) {
+        if (showing) return;
+
+        b.innerHTML = 'Bad Scale: ' + scale + '% ';
+
+        var updateScaleTimer = setInterval(function() {
+            var newScale = getScale();
+            b.innerHTML = 'Bad Scale: ' + newScale + '% ';
+            if (newScale == 100) {
+                var p = div.parentNode;
+                if (p != null) p.removeChild(div);
+                showing = false;
+                clearInterval(updateScaleTimer);
+                check();
+            }
+        }, 999);
+
+        btn.onclick = function() {
+            clearInterval(updateScaleTimer);
+            var p = div.parentNode;
+            if (p != null) p.removeChild(div);
+            ignore = true;
+            showing = false;
+            localStorage.setItem("bad-scale-ignore-it", "ignore-it");
+        };
+
+        document.body.appendChild(div);
+    }
+
+    function check() {
+        if (!ignore) {
+            var timer = setInterval(function() {
+                var scale = getScale();
+                if (scale != 100 && !ignore) {
+                    tryShowTopBar(scale);
+                    clearInterval(timer);
+                }
+                if (ignore) {
+                    clearInterval(timer);
+                }
+            }, 999);
+        }
+    }
+
+    if (document.readyState != "complete") {
+        document.onreadystatechange = function() {
+            if (document.readyState != "complete") check();
+        };
+    } else {
+        check();
+    }
+})();

javascript/contextMenus.js

@@ -0,0 +1,177 @@
+/*
+var contextMenuInit = function() {
+    let eventListenerApplied = false;
+    let menuSpecs = new Map();
+
+    const uid = function() {
+        return Date.now().toString(36) + Math.random().toString(36).substring(2);
+    };
+
+    function showContextMenu(event, element, menuEntries) {
+        let posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+        let posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
+
+        let oldMenu = gradioApp().querySelector('#context-menu');
+        if (oldMenu) {
+            oldMenu.remove();
+        }
+
+        let baseStyle = window.getComputedStyle(uiCurrentTab);
+
+        const contextMenu = document.createElement('nav');
+        contextMenu.id = "context-menu";
+        contextMenu.style.background = baseStyle.background;
+        contextMenu.style.color = baseStyle.color;
+        contextMenu.style.fontFamily = baseStyle.fontFamily;
+        contextMenu.style.top = posy + 'px';
+        contextMenu.style.left = posx + 'px';
+
+
+
+        const contextMenuList = document.createElement('ul');
+        contextMenuList.className = 'context-menu-items';
+        contextMenu.append(contextMenuList);
+
+        menuEntries.forEach(function(entry) {
+            let contextMenuEntry = document.createElement('a');
+            contextMenuEntry.innerHTML = entry['name'];
+            contextMenuEntry.addEventListener("click", function() {
+                entry['func']();
+            });
+            contextMenuList.append(contextMenuEntry);
+
+        });
+
+        gradioApp().appendChild(contextMenu);
+
+        let menuWidth = contextMenu.offsetWidth + 4;
+        let menuHeight = contextMenu.offsetHeight + 4;
+
+        let windowWidth = window.innerWidth;
+        let windowHeight = window.innerHeight;
+
+        if ((windowWidth - posx) < menuWidth) {
+            contextMenu.style.left = windowWidth - menuWidth + "px";
+        }
+
+        if ((windowHeight - posy) < menuHeight) {
+            contextMenu.style.top = windowHeight - menuHeight + "px";
+        }
+
+    }
+
+    function appendContextMenuOption(targetElementSelector, entryName, entryFunction) {
+
+        var currentItems = menuSpecs.get(targetElementSelector);
+
+        if (!currentItems) {
+            currentItems = [];
+            menuSpecs.set(targetElementSelector, currentItems);
+        }
+        let newItem = {
+            id: targetElementSelector + '_' + uid(),
+            name: entryName,
+            func: entryFunction,
+            isNew: true
+        };
+
+        currentItems.push(newItem);
+        return newItem['id'];
+    }
+
+    function removeContextMenuOption(uid) {
+        menuSpecs.forEach(function(v) {
+            let index = -1;
+            v.forEach(function(e, ei) {
+                if (e['id'] == uid) {
+                    index = ei;
+                }
+            });
+            if (index >= 0) {
+                v.splice(index, 1);
+            }
+        });
+    }
+
+    function addContextMenuEventListener() {
+        if (eventListenerApplied) {
+            return;
+        }
+        gradioApp().addEventListener("click", function(e) {
+            if (!e.isTrusted) {
+                return;
+            }
+
+            let oldMenu = gradioApp().querySelector('#context-menu');
+            if (oldMenu) {
+                oldMenu.remove();
+            }
+        });
+        gradioApp().addEventListener("contextmenu", function(e) {
+            let oldMenu = gradioApp().querySelector('#context-menu');
+            if (oldMenu) {
+                oldMenu.remove();
+            }
+            menuSpecs.forEach(function(v, k) {
+                if (e.composedPath()[0].matches(k)) {
+                    showContextMenu(e, e.composedPath()[0], v);
+                    e.preventDefault();
+                }
+            });
+        });
+        eventListenerApplied = true;
+
+    }
+
+    return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener];
+};
+
+var initResponse = contextMenuInit();
+var appendContextMenuOption = initResponse[0];
+var removeContextMenuOption = initResponse[1];
+var addContextMenuEventListener = initResponse[2];
+
+(function() {
+    //Start example Context Menu Items
+    let generateOnRepeat = function(genbuttonid, interruptbuttonid) {
+        let genbutton = gradioApp().querySelector(genbuttonid);
+        let interruptbutton = gradioApp().querySelector(interruptbuttonid);
+        if (!interruptbutton.offsetParent) {
+            genbutton.click();
+        }
+        clearInterval(window.generateOnRepeatInterval);
+        window.generateOnRepeatInterval = setInterval(function() {
+            if (!interruptbutton.offsetParent) {
+                genbutton.click();
+            }
+        },
+        500);
+    };
+
+    let generateOnRepeat_txt2img = function() {
+        generateOnRepeat('#txt2img_generate', '#txt2img_interrupt');
+    };
+
+    let generateOnRepeat_img2img = function() {
+        generateOnRepeat('#img2img_generate', '#img2img_interrupt');
+    };
+
+    appendContextMenuOption('#txt2img_generate', 'Generate forever', generateOnRepeat_txt2img);
+    appendContextMenuOption('#txt2img_interrupt', 'Generate forever', generateOnRepeat_txt2img);
+    appendContextMenuOption('#img2img_generate', 'Generate forever', generateOnRepeat_img2img);
+    appendContextMenuOption('#img2img_interrupt', 'Generate forever', generateOnRepeat_img2img);
+
+    let cancelGenerateForever = function() {
+        clearInterval(window.generateOnRepeatInterval);
+    };
+
+    appendContextMenuOption('#txt2img_interrupt', 'Cancel generate forever', cancelGenerateForever);
+    appendContextMenuOption('#txt2img_generate', 'Cancel generate forever', cancelGenerateForever);
+    appendContextMenuOption('#img2img_interrupt', 'Cancel generate forever', cancelGenerateForever);
+    appendContextMenuOption('#img2img_generate', 'Cancel generate forever', cancelGenerateForever);
+
+})();
+//End example Context Menu Items
+
+onAfterUiUpdate(addContextMenuEventListener);
+*/

javascript/dragdrop.js

@@ -0,0 +1,109 @@
+// allows drag-dropping files into gradio image elements, and also pasting images from clipboard
+
+function isValidImageList(files) {
+  return (
+    files &&
+    files?.length === 1 &&
+    ["image/png", "image/gif", "image/jpeg"].includes(files[0].type)
+  );
+}
+
+function dropReplaceImage(imgWrap, files) {
+  if (!isValidImageList(files)) {
+    return;
+  }
+
+  const tmpFile = files[0];
+
+  imgWrap.querySelector('[aria-label="Clear"]')?.click();
+  const callback = () => {
+    const fileInput = imgWrap.querySelector('input[type="file"]');
+    if (fileInput) {
+      if (files.length === 0) {
+        files = new DataTransfer();
+        files.items.add(tmpFile);
+        fileInput.files = files.files;
+      } else {
+        fileInput.files = files;
+      }
+      fileInput.dispatchEvent(new Event("change"));
+    }
+  };
+
+  if (imgWrap.closest("#pnginfo_image")) {
+    // special treatment for PNG Info tab, wait for fetch request to finish
+    const oldFetch = window.fetch;
+    window.fetch = async (input, options) => {
+      const response = await oldFetch(input, options);
+      if ("api/predict/" === input) {
+        const content = await response.text();
+        window.fetch = oldFetch;
+        window.requestAnimationFrame(() => callback());
+        return new Response(content, {
+          status: response.status,
+          statusText: response.statusText,
+          headers: response.headers,
+        });
+      }
+      return response;
+    };
+  } else {
+    window.requestAnimationFrame(() => callback());
+  }
+}
+
+window.document.addEventListener("dragover", (e) => {
+  const target = e.composedPath()[0];
+  const imgWrap = target.closest('[data-testid="image"]');
+  if (
+    !imgWrap &&
+    target.placeholder &&
+    target.placeholder.indexOf("Prompt") == -1
+  ) {
+    return;
+  }
+  e.stopPropagation();
+  e.preventDefault();
+  e.dataTransfer.dropEffect = "copy";
+});
+
+window.document.addEventListener("drop", (e) => {
+  const target = e.composedPath()[0];
+  if (target.placeholder.indexOf("Prompt") == -1) {
+    return;
+  }
+  const imgWrap = target.closest('[data-testid="image"]');
+  if (!imgWrap) {
+    return;
+  }
+  e.stopPropagation();
+  e.preventDefault();
+  const files = e.dataTransfer.files;
+  dropReplaceImage(imgWrap, files);
+
+});
+
+window.addEventListener("paste", (e) => {
+  const files = e.clipboardData.files;
+  if (!isValidImageList(files)) {
+    return;
+  }
+
+  const visibleImageFields = [
+    ...gradioApp().querySelectorAll('[data-testid="image"]'),
+  ].filter((el) => uiElementIsVisible(el));
+  if (!visibleImageFields.length) {
+    return;
+  }
+
+  const firstFreeImageField = visibleImageFields.filter((el) =>
+    el.querySelector("input[type=file]")
+  )?.[0];
+
+  dropReplaceImage(
+    firstFreeImageField
+      ? firstFreeImageField
+      : visibleImageFields[visibleImageFields.length - 1],
+    files
+  );
+});

javascript/edit-attention.js

@@ -0,0 +1,121 @@
+function keyupEditAttention(event) {
+    let target = event.originalTarget || event.composedPath()[0];
+    if (!target.matches("*:is([id*='_toprow'] [id*='_prompt'], .prompt) textarea")) return;
+    if (!(event.metaKey || event.ctrlKey)) return;
+
+    let isPlus = event.key == "ArrowUp";
+    let isMinus = event.key == "ArrowDown";
+    if (!isPlus && !isMinus) return;
+
+    let selectionStart = target.selectionStart;
+    let selectionEnd = target.selectionEnd;
+    let text = target.value;
+
+    function selectCurrentParenthesisBlock(OPEN, CLOSE) {
+        if (selectionStart !== selectionEnd) return false;
+
+        // Find opening parenthesis around current cursor
+        const before = text.substring(0, selectionStart);
+        let beforeParen = before.lastIndexOf(OPEN);
+        if (beforeParen == -1) return false;
+        let beforeParenClose = before.lastIndexOf(CLOSE);
+        while (beforeParenClose !== -1 && beforeParenClose > beforeParen) {
+            beforeParen = before.lastIndexOf(OPEN, beforeParen - 1);
+            beforeParenClose = before.lastIndexOf(CLOSE, beforeParenClose - 1);
+        }
+
+        // Find closing parenthesis around current cursor
+        const after = text.substring(selectionStart);
+        let afterParen = after.indexOf(CLOSE);
+        if (afterParen == -1) return false;
+        let afterParenOpen = after.indexOf(OPEN);
+        while (afterParenOpen !== -1 && afterParen > afterParenOpen) {
+            afterParen = after.indexOf(CLOSE, afterParen + 1);
+            afterParenOpen = after.indexOf(OPEN, afterParenOpen + 1);
+        }
+        if (beforeParen === -1 || afterParen === -1) return false;
+
+        // Set the selection to the text between the parenthesis
+        const parenContent = text.substring(beforeParen + 1, selectionStart + afterParen);
+        const lastColon = parenContent.lastIndexOf(":");
+        selectionStart = beforeParen + 1;
+        selectionEnd = selectionStart + lastColon;
+        target.setSelectionRange(selectionStart, selectionEnd);
+        return true;
+    }
+
+    function selectCurrentWord() {
+        if (selectionStart !== selectionEnd) return false;
+        const delimiters = opts.keyedit_delimiters + " \r\n\t";
+
+        // seek backward until to find beggining
+        while (!delimiters.includes(text[selectionStart - 1]) && selectionStart > 0) {
+            selectionStart--;
+        }
+
+        // seek forward to find end
+        while (!delimiters.includes(text[selectionEnd]) && selectionEnd < text.length) {
+            selectionEnd++;
+        }
+
+        target.setSelectionRange(selectionStart, selectionEnd);
+        return true;
+    }
+
+    // If the user hasn't selected anything, let's select their current parenthesis block or word
+    if (!selectCurrentParenthesisBlock('<', '>') && !selectCurrentParenthesisBlock('(', ')')) {
+        selectCurrentWord();
+    }
+
+    event.preventDefault();
+
+    var closeCharacter = ')';
+    var delta = opts.keyedit_precision_attention;
+
+    if (selectionStart > 0 && text[selectionStart - 1] == '<') {
+        closeCharacter = '>';
+        delta = opts.keyedit_precision_extra;
+    } else if (selectionStart == 0 || text[selectionStart - 1] != "(") {
+
+        // do not include spaces at the end
+        while (selectionEnd > selectionStart && text[selectionEnd - 1] == ' ') {
+            selectionEnd -= 1;
+        }
+        if (selectionStart == selectionEnd) {
+            return;
+        }
+
+        text = text.slice(0, selectionStart) + "(" + text.slice(selectionStart, selectionEnd) + ":1.0)" + text.slice(selectionEnd);
+
+        selectionStart += 1;
+        selectionEnd += 1;
+    }
+
+    var end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1;
+    var weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + 1 + end));
+    if (isNaN(weight)) return;
+
+    weight += isPlus ? delta : -delta;
+    weight = parseFloat(weight.toPrecision(12));
+    if (String(weight).length == 1) weight += ".0";
+
+    if (closeCharacter == ')' && weight == 1) {
+        var endParenPos = text.substring(selectionEnd).indexOf(')');
+        text = text.slice(0, selectionStart - 1) + text.slice(selectionStart, selectionEnd) + text.slice(selectionEnd + endParenPos + 1);
+        selectionStart--;
+        selectionEnd--;
+    } else {
+        text = text.slice(0, selectionEnd + 1) + weight + text.slice(selectionEnd + end);
+    }
+
+    target.focus();
+    target.value = text;
+    target.selectionStart = selectionStart;
+    target.selectionEnd = selectionEnd;
+
+    updateInput(target);
+}
+
+addEventListener('keydown', (event) => {
+    keyupEditAttention(event);
+});

javascript/edit-order.js

@@ -0,0 +1,41 @@
+/* alt+left/right moves text in prompt */
+
+function keyupEditOrder(event) {
+    if (!opts.keyedit_move) return;
+
+    let target = event.originalTarget || event.composedPath()[0];
+    if (!target.matches("*:is([id*='_toprow'] [id*='_prompt'], .prompt) textarea")) return;
+    if (!event.altKey) return;
+
+    let isLeft = event.key == "ArrowLeft";
+    let isRight = event.key == "ArrowRight";
+    if (!isLeft && !isRight) return;
+    event.preventDefault();
+
+    let selectionStart = target.selectionStart;
+    let selectionEnd = target.selectionEnd;
+    let text = target.value;
+    let items = text.split(",");
+    let indexStart = (text.slice(0, selectionStart).match(/,/g) || []).length;
+    let indexEnd = (text.slice(0, selectionEnd).match(/,/g) || []).length;
+    let range = indexEnd - indexStart + 1;
+
+    if (isLeft && indexStart > 0) {
+        items.splice(indexStart - 1, 0, ...items.splice(indexStart, range));
+        target.value = items.join();
+        target.selectionStart = items.slice(0, indexStart - 1).join().length + (indexStart == 1 ? 0 : 1);
+        target.selectionEnd = items.slice(0, indexEnd).join().length;
+    } else if (isRight && indexEnd < items.length - 1) {
+        items.splice(indexStart + 1, 0, ...items.splice(indexStart, range));
+        target.value = items.join();
+        target.selectionStart = items.slice(0, indexStart + 1).join().length + 1;
+        target.selectionEnd = items.slice(0, indexEnd + 2).join().length;
+    }
+
+    event.preventDefault();
+    updateInput(target);
+}
+
+addEventListener('keydown', (event) => {
+    keyupEditOrder(event);
+});

javascript/extensions.js

@@ -0,0 +1,91 @@
+function extensions_apply(_disabled_list, _update_list, disable_all) {
+    var disable = [];
+    var update = [];
+
+    gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x) {
+        if (x.name.startsWith("enable_") && !x.checked) {
+            disable.push(x.name.substring(7));
+        }
+
+        if (x.name.startsWith("update_") && x.checked) {
+            update.push(x.name.substring(7));
+        }
+    });
+
+    restart_reload();
+
+    return [JSON.stringify(disable), JSON.stringify(update), disable_all];
+}
+
+function extensions_check() {
+    var disable = [];
+
+    gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x) {
+        if (x.name.startsWith("enable_") && !x.checked) {
+            disable.push(x.name.substring(7));
+        }
+    });
+
+    gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x) {
+        x.innerHTML = "Loading...";
+    });
+
+
+    var id = randomId();
+    requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function() {
+
+    });
+
+    return [id, JSON.stringify(disable)];
+}
+
+function install_extension_from_index(button, url) {
+    button.disabled = "disabled";
+    button.value = "Installing...";
+
+    var textarea = gradioApp().querySelector('#extension_to_install textarea');
+    textarea.value = url;
+    updateInput(textarea);
+
+    gradioApp().querySelector('#install_extension_button').click();
+}
+
+function config_state_confirm_restore(_, config_state_name, config_restore_type) {
+    if (config_state_name == "Current") {
+        return [false, config_state_name, config_restore_type];
+    }
+    let restored = "";
+    if (config_restore_type == "extensions") {
+        restored = "all saved extension versions";
+    } else if (config_restore_type == "webui") {
+        restored = "the webui version";
+    } else {
+        restored = "the webui version and all saved extension versions";
+    }
+    let confirmed = confirm("Are you sure you want to restore from this state?\nThis will reset " + restored + ".");
+    if (confirmed) {
+        restart_reload();
+        gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x) {
+            x.innerHTML = "Loading...";
+        });
+    }
+    return [confirmed, config_state_name, config_restore_type];
+}
+
+function toggle_all_extensions(event) {
+    gradioApp().querySelectorAll('#extensions .extension_toggle').forEach(function(checkbox_el) {
+        checkbox_el.checked = event.target.checked;
+    });
+}
+
+function toggle_extension() {
+    let all_extensions_toggled = true;
+    for (const checkbox_el of gradioApp().querySelectorAll('#extensions .extension_toggle')) {
+        if (!checkbox_el.checked) {
+            all_extensions_toggled = false;
+            break;
+        }
+    }
+
+    gradioApp().querySelector('#extensions .all_extensions_toggle').checked = all_extensions_toggled;
+}

javascript/extraNetworks.js

@@ -0,0 +1,579 @@
+function setupExtraNetworksForTab(tabname) {
+  gradioApp()
+    .querySelector("#" + tabname + "_extra_tabs")
+    .classList.add("extra-networks");
+
+  let tabs = gradioApp().querySelector("#" + tabname + "_extra_tabs > div");
+  let search = gradioApp().querySelector("#" + tabname + "_extra_search textarea" );
+  let refresh = gradioApp().getElementById(tabname + "_extra_refresh");
+
+  //let sort = gradioApp().getElementById(tabname + '_extra_sort');
+  //let sortOrder = gradioApp().getElementById(tabname + '_extra_sortorder');
+
+  let clear = document.createElement("div");
+  clear.id = tabname + "_extra_clear";
+  clear.classList.add("token-remove", "remove-all", "svelte-a6vu2r", "hide");
+  clear.title = "Clear search";
+  clear.innerHTML =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>';
+
+  search.classList.add("search");
+
+  tabs.appendChild(search);
+  tabs.appendChild(clear);
+  tabs.appendChild(refresh);
+
+/*     
+  sort.classList.add('sort');
+  sortOrder.classList.add('sortorder');
+  sort.dataset.sortkey = 'sortDefault';
+  tabs.appendChild(sort);
+  tabs.appendChild(sortOrder); */
+
+  clear.addEventListener("click", function (evt) {
+    search.value = "";
+    updateInput(search);
+  });
+  
+  setTimeout(function () {
+    refresh.click();
+  }, 500);
+  
+  
+  setTimeout(extraNetworksApplyFilter[tabname], 1);
+
+  search.addEventListener("input", function (evt) {
+    searchTerm = search.value.toLowerCase();
+
+    gradioApp()
+      .querySelectorAll("#" + tabname + "_extra_tabs div.card")
+      .forEach(function (elem) {
+        let text =
+          elem.querySelector(".name").textContent.toLowerCase() +
+          " " +
+          elem.querySelector(".search_term").textContent.toLowerCase();
+        elem.parentElement.style.display =
+          text.indexOf(searchTerm) == -1 ? "none" : "";
+      });
+  });
+}
+
+function applyExtraNetworkFilter(tabname){
+    setTimeout(extraNetworksApplyFilter[tabname], 1);
+}
+
+var extraNetworksApplyFilter = {}
+var activePromptTextarea = {};
+
+function setupExtraNetworks() {
+  setupExtraNetworksForTab("txt2img");
+  setupExtraNetworksForTab("img2img");
+
+  function registerPrompt(tabname, id) {
+    var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
+
+    if (!activePromptTextarea[tabname]) {
+      activePromptTextarea[tabname] = textarea;
+    }
+
+    textarea.addEventListener("focus", function () {
+      activePromptTextarea[tabname] = textarea;
+    });
+  }
+
+  registerPrompt("txt2img", "txt2img_prompt");
+  registerPrompt("txt2img", "txt2img_neg_prompt");
+  registerPrompt("img2img", "img2img_prompt");
+  registerPrompt("img2img", "img2img_neg_prompt");
+}
+
+onUiLoaded(setupExtraNetworks);
+
+var re_extranet = /<([^:]+:[^:]+):[\d\.]+>/;
+var re_extranet_g = /\s+<([^:]+:[^:]+):[\d\.]+>/g;
+
+function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
+  var m = text.match(re_extranet);
+  if (!m) return false;
+
+  var partToSearch = m[1];
+  var replaced = false;
+  var newTextareaText = textarea.value.replaceAll(
+    re_extranet_g,
+    function (found) {
+      m = found.match(re_extranet);
+      if (m[1] == partToSearch) {
+        replaced = true;
+        return "";
+      }
+      return found;
+    }
+  );
+
+  if (replaced) {
+    textarea.value = newTextareaText;
+    return true;
+  }
+
+  return false;
+}
+
+function cardClicked(tabname, textToAdd, allowNegativePrompt) {
+  var textarea = allowNegativePrompt
+    ? activePromptTextarea[tabname]
+    : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea");
+
+  if (!tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)) {
+    textarea.value =
+      textarea.value + opts.extra_networks_add_text_separator + textToAdd;
+  }
+
+  updateInput(textarea);
+}
+
+function saveCardPreview(event, tabname, filename) {
+  var textarea = gradioApp().querySelector(
+    "#" + tabname + "_preview_filename  > label > textarea"
+  );
+  var button = gradioApp().getElementById(tabname + "_save_preview");
+
+  textarea.value = filename;
+  updateInput(textarea);
+
+  button.click();
+
+  var search = gradioApp().querySelector(
+    "#" + tabname + "_extra_tabs textarea"
+  );
+
+  setTimeout(function () {
+    search.value = search.value.toLowerCase();
+    updateInput(search);
+  }, 1000);
+
+  event.stopPropagation();
+  event.preventDefault();
+}
+
+function extraNetworksSearchButton(tabs_id, event) {
+  var searchTextarea = gradioApp().querySelector(
+    "#" + tabs_id + " > div > textarea"
+  );
+  var button = event.target;
+  var text = button.classList.contains("search-all")
+    ? ""
+    : button.textContent.trim();
+  //text = event.target.selectedIndex == 0 ? "" : event.target.options[event.target.selectedIndex].text;
+
+  searchTextarea.value = text;
+  updateInput(searchTextarea);
+}
+
+var globalPopup = null;
+var globalPopupInner = null;
+function popup(contents) {
+  if (!globalPopup) {
+    globalPopup = document.createElement("div");
+    globalPopup.onclick = function () {
+      globalPopup.style.display = "none";
+    };
+    globalPopup.classList.add("global-popup");
+
+    var close = document.createElement("div");
+    close.classList.add("global-popup-close");
+    close.onclick = function () {
+      globalPopup.style.display = "none";
+    };
+    close.title = "Close";
+    globalPopup.appendChild(close);
+
+    globalPopupInner = document.createElement("div");
+    globalPopupInner.onclick = function (event) {
+      event.stopPropagation();
+      return false;
+    };
+    globalPopupInner.classList.add("global-popup-inner");
+    globalPopup.appendChild(globalPopupInner);
+
+    gradioApp().appendChild(globalPopup);
+  }
+
+  globalPopupInner.innerHTML = "";
+  globalPopupInner.appendChild(contents);
+
+  globalPopup.style.display = "flex";
+}
+
+function extraNetworksShowMetadata(text) {
+  var elem = document.createElement("pre");
+  elem.classList.add("popup-metadata");
+  elem.textContent = text;
+
+  popup(elem);
+}
+
+function requestGet(url, data, handler, errorHandler) {
+  var xhr = new XMLHttpRequest();
+  var args = Object.keys(data)
+    .map(function (k) {
+      return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
+    })
+    .join("&");
+  xhr.open("GET", url + "?" + args, true);
+
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      if (xhr.status === 200) {
+        try {
+          var js = JSON.parse(xhr.responseText);
+          handler(js);
+        } catch (error) {
+          console.error(error);
+          errorHandler();
+        }
+      } else {
+        errorHandler();
+      }
+    }
+  };
+  var js = JSON.stringify(data);
+  xhr.send(js);
+}
+
+function extraNetworksRequestMetadata(event, extraPage, cardName) {
+  var showError = function () {
+    extraNetworksShowMetadata("there was an error getting metadata");
+  };
+
+  requestGet(
+    "./sd_extra_networks/metadata",
+    { page: extraPage, item: cardName },
+    function (data) {
+      if (data && data.metadata) {
+        extraNetworksShowMetadata(data.metadata);
+      } else {
+        showError();
+      }
+    },
+    showError
+  );
+
+  event.stopPropagation();
+}
+
+
+/*
+function setupExtraNetworksForTab(tabname) {
+    gradioApp().querySelector('#' + tabname + '_extra_tabs').classList.add('extra-networks');
+
+    var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div');
+    var search = gradioApp().querySelector('#' + tabname + '_extra_search textarea');
+    var sort = gradioApp().getElementById(tabname + '_extra_sort');
+    var sortOrder = gradioApp().getElementById(tabname + '_extra_sortorder');
+    var refresh = gradioApp().getElementById(tabname + '_extra_refresh');
+
+    search.classList.add('search');
+    sort.classList.add('sort');
+    sortOrder.classList.add('sortorder');
+    sort.dataset.sortkey = 'sortDefault';
+    tabs.appendChild(search);
+    tabs.appendChild(sort);
+    tabs.appendChild(sortOrder);
+    tabs.appendChild(refresh);
+
+    var applyFilter = function() {
+        var searchTerm = search.value.toLowerCase();
+
+        gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) {
+            var searchOnly = elem.querySelector('.search_only');
+            var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase();
+
+            var visible = text.indexOf(searchTerm) != -1;
+
+            if (searchOnly && searchTerm.length < 4) {
+                visible = false;
+            }
+
+            elem.style.display = visible ? "" : "none";
+        });
+    };
+
+    var applySort = function() {
+        var reverse = sortOrder.classList.contains("sortReverse");
+        var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort", "").replaceAll(" ", "_").replace(/_+$/, "").trim();
+        sortKey = sortKey ? "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1) : "";
+        var sortKeyStore = sortKey ? sortKey + (reverse ? "Reverse" : "") : "";
+        if (!sortKey || sortKeyStore == sort.dataset.sortkey) {
+            return;
+        }
+
+        sort.dataset.sortkey = sortKeyStore;
+
+        var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card');
+        cards.forEach(function(card) {
+            card.originalParentElement = card.parentElement;
+        });
+        var sortedCards = Array.from(cards);
+        sortedCards.sort(function(cardA, cardB) {
+            var a = cardA.dataset[sortKey];
+            var b = cardB.dataset[sortKey];
+            if (!isNaN(a) && !isNaN(b)) {
+                return parseInt(a) - parseInt(b);
+            }
+
+            return (a < b ? -1 : (a > b ? 1 : 0));
+        });
+        if (reverse) {
+            sortedCards.reverse();
+        }
+        cards.forEach(function(card) {
+            card.remove();
+        });
+        sortedCards.forEach(function(card) {
+            card.originalParentElement.appendChild(card);
+        });
+    };
+
+    search.addEventListener("input", applyFilter);
+    applyFilter();
+    ["change", "blur", "click"].forEach(function(evt) {
+        sort.querySelector("input").addEventListener(evt, applySort);
+    });
+    sortOrder.addEventListener("click", function() {
+        sortOrder.classList.toggle("sortReverse");
+        applySort();
+    });
+
+    extraNetworksApplyFilter[tabname] = applyFilter;
+}
+
+function applyExtraNetworkFilter(tabname) {
+    setTimeout(extraNetworksApplyFilter[tabname], 1);
+}
+
+var extraNetworksApplyFilter = {};
+var activePromptTextarea = {};
+
+function setupExtraNetworks() {
+    setupExtraNetworksForTab('txt2img');
+    setupExtraNetworksForTab('img2img');
+
+    function registerPrompt(tabname, id) {
+        var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
+
+        if (!activePromptTextarea[tabname]) {
+            activePromptTextarea[tabname] = textarea;
+        }
+
+        textarea.addEventListener("focus", function() {
+            activePromptTextarea[tabname] = textarea;
+        });
+    }
+
+    registerPrompt('txt2img', 'txt2img_prompt');
+    registerPrompt('txt2img', 'txt2img_neg_prompt');
+    registerPrompt('img2img', 'img2img_prompt');
+    registerPrompt('img2img', 'img2img_neg_prompt');
+}
+
+onUiLoaded(setupExtraNetworks);
+
+var re_extranet = /<([^:]+:[^:]+):[\d.]+>(.*)/;
+var re_extranet_g = /\s+<([^:]+:[^:]+):[\d.]+>/g;
+
+function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
+    var m = text.match(re_extranet);
+    var replaced = false;
+    var newTextareaText;
+    if (m) {
+        var extraTextAfterNet = m[2];
+        var partToSearch = m[1];
+        var foundAtPosition = -1;
+        newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found, net, pos) {
+            m = found.match(re_extranet);
+            if (m[1] == partToSearch) {
+                replaced = true;
+                foundAtPosition = pos;
+                return "";
+            }
+            return found;
+        });
+
+        if (foundAtPosition >= 0 && newTextareaText.substr(foundAtPosition, extraTextAfterNet.length) == extraTextAfterNet) {
+            newTextareaText = newTextareaText.substr(0, foundAtPosition) + newTextareaText.substr(foundAtPosition + extraTextAfterNet.length);
+        }
+    } else {
+        newTextareaText = textarea.value.replaceAll(new RegExp(text, "g"), function(found) {
+            if (found == text) {
+                replaced = true;
+                return "";
+            }
+            return found;
+        });
+    }
+
+    if (replaced) {
+        textarea.value = newTextareaText;
+        return true;
+    }
+
+    return false;
+}
+
+function cardClicked(tabname, textToAdd, allowNegativePrompt) {
+    var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea");
+
+    if (!tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)) {
+        textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd;
+    }
+
+    updateInput(textarea);
+}
+
+function saveCardPreview(event, tabname, filename) {
+    var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename  > label > textarea');
+    var button = gradioApp().getElementById(tabname + '_save_preview');
+
+    textarea.value = filename;
+    updateInput(textarea);
+
+    button.click();
+
+    event.stopPropagation();
+    event.preventDefault();
+}
+
+function extraNetworksSearchButton(tabs_id, event) {
+    var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea');
+    var button = event.target;
+    var text = button.classList.contains("search-all") ? "" : button.textContent.trim();
+
+    searchTextarea.value = text;
+    updateInput(searchTextarea);
+}
+
+var globalPopup = null;
+var globalPopupInner = null;
+function closePopup() {
+    if (!globalPopup) return;
+
+    globalPopup.style.display = "none";
+}
+function popup(contents) {
+    if (!globalPopup) {
+        globalPopup = document.createElement('div');
+        globalPopup.onclick = closePopup;
+        globalPopup.classList.add('global-popup');
+
+        var close = document.createElement('div');
+        close.classList.add('global-popup-close');
+        close.onclick = closePopup;
+        close.title = "Close";
+        globalPopup.appendChild(close);
+
+        globalPopupInner = document.createElement('div');
+        globalPopupInner.onclick = function(event) {
+            event.stopPropagation(); return false;
+        };
+        globalPopupInner.classList.add('global-popup-inner');
+        globalPopup.appendChild(globalPopupInner);
+
+        gradioApp().querySelector('.main').appendChild(globalPopup);
+    }
+
+    globalPopupInner.innerHTML = '';
+    globalPopupInner.appendChild(contents);
+
+    globalPopup.style.display = "flex";
+}
+
+function extraNetworksShowMetadata(text) {
+    var elem = document.createElement('pre');
+    elem.classList.add('popup-metadata');
+    elem.textContent = text;
+
+    popup(elem);
+}
+
+function requestGet(url, data, handler, errorHandler) {
+    var xhr = new XMLHttpRequest();
+    var args = Object.keys(data).map(function(k) {
+        return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
+    }).join('&');
+    xhr.open("GET", url + "?" + args, true);
+
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                try {
+                    var js = JSON.parse(xhr.responseText);
+                    handler(js);
+                } catch (error) {
+                    console.error(error);
+                    errorHandler();
+                }
+            } else {
+                errorHandler();
+            }
+        }
+    };
+    var js = JSON.stringify(data);
+    xhr.send(js);
+}
+
+function extraNetworksRequestMetadata(event, extraPage, cardName) {
+    var showError = function() {
+        extraNetworksShowMetadata("there was an error getting metadata");
+    };
+
+    requestGet("./sd_extra_networks/metadata", {page: extraPage, item: cardName}, function(data) {
+        if (data && data.metadata) {
+            extraNetworksShowMetadata(data.metadata);
+        } else {
+            showError();
+        }
+    }, showError);
+
+    event.stopPropagation();
+}
+
+var extraPageUserMetadataEditors = {};
+
+function extraNetworksEditUserMetadata(event, tabname, extraPage, cardName) {
+    var id = tabname + '_' + extraPage + '_edit_user_metadata';
+
+    var editor = extraPageUserMetadataEditors[id];
+    if (!editor) {
+        editor = {};
+        editor.page = gradioApp().getElementById(id);
+        editor.nameTextarea = gradioApp().querySelector("#" + id + "_name" + ' textarea');
+        editor.button = gradioApp().querySelector("#" + id + "_button");
+        extraPageUserMetadataEditors[id] = editor;
+    }
+
+    editor.nameTextarea.value = cardName;
+    updateInput(editor.nameTextarea);
+
+    editor.button.click();
+
+    popup(editor.page);
+
+    event.stopPropagation();
+}
+
+function extraNetworksRefreshSingleCard(page, tabname, name) {
+    requestGet("./sd_extra_networks/get-single-card", {page: page, tabname: tabname, name: name}, function(data) {
+        if (data && data.html) {
+            var card = gradioApp().querySelector('.card[data-name=' + JSON.stringify(name) + ']'); // likely using the wrong stringify function
+
+            var newDiv = document.createElement('DIV');
+            newDiv.innerHTML = data.html;
+            var newCard = newDiv.firstElementChild;
+
+            newCard.style = '';
+            card.parentElement.insertBefore(newCard, card);
+            card.parentElement.removeChild(card);
+        }
+    });
+}
+*/

javascript/generationParams.js

@@ -0,0 +1,30 @@
+// attaches listeners to the txt2img and img2img galleries to update displayed generation param text when the image changes
+let txt2img_gallery, img2img_gallery, modal = undefined;
+onAfterUiUpdate(function() {
+    if (!txt2img_gallery) {
+        txt2img_gallery = attachGalleryListeners("txt2img");
+    }
+    if (!img2img_gallery) {
+        img2img_gallery = attachGalleryListeners("img2img");
+    }
+});
+
+let modalObserver = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutationRecord) {
+        let selectedTab = gradioApp().querySelector('#tabs div button.selected')?.innerText;
+        if (mutationRecord.target.style.display === 'none' && (selectedTab === 'txt2img' || selectedTab === 'img2img')) {
+            gradioApp().getElementById(selectedTab + "_generation_info_button")?.click();
+        }
+    });
+});
+
+function attachGalleryListeners(tab_name) {
+    var gallery = gradioApp().querySelector('#' + tab_name + '_gallery');
+    gallery?.addEventListener('click', () => gradioApp().getElementById(tab_name + "_generation_info_button").click());
+    gallery?.addEventListener('keydown', (e) => {
+        if (e.keyCode == 37 || e.keyCode == 39) { // left or right arrow
+            gradioApp().getElementById(tab_name + "_generation_info_button").click();
+        }
+    });
+    return gallery;
+}

javascript/hints.js

@@ -0,0 +1,202 @@
+// mouseover tooltips for various UI elements
+
+var titles = {
+    "Sampling steps": "How many times to improve the generated image iteratively; higher values take longer; very low values can produce bad results",
+    "Sampling method": "Which algorithm to use to produce the image",
+    "GFPGAN": "Restore low quality faces using GFPGAN neural network",
+    "Euler a": "Euler Ancestral - very creative, each can get a completely different picture depending on step count, setting steps higher than 30-40 does not help",
+    "DDIM": "Denoising Diffusion Implicit Models - best at inpainting",
+    "UniPC": "Unified Predictor-Corrector Framework for Fast Sampling of Diffusion Models",
+    "DPM adaptive": "Ignores step count - uses a number of steps determined by the CFG and resolution",
+
+    "\u{1F4D0}": "Auto detect size from img2img",
+    "Batch count": "How many batches of images to create (has no impact on generation performance or VRAM usage)",
+    "Batch size": "How many image to create in a single batch (increases generation performance at cost of higher VRAM usage)",
+    "CFG Scale": "Classifier Free Guidance Scale - how strongly the image should conform to prompt - lower values produce more creative results",
+    "Seed": "A value that determines the output of random number generator - if you create an image with same parameters and seed as another image, you'll get the same result",
+    "\u{1f3b2}\ufe0f": "Set seed to -1, which will cause a new random number to be used every time",
+    "\u267b\ufe0f": "Reuse seed from last generation, mostly useful if it was randomized",
+    "\u2199\ufe0f": "Read generation parameters from prompt or last generation if prompt is empty into user interface.",
+    "\u{1f4c2}": "Open images output directory",
+    "\u{1f4be}": "Save style",
+    "\u{1f5d1}\ufe0f": "Clear prompt",
+    "\u{1f4cb}": "Apply selected styles to current prompt",
+    "\u{1f4d2}": "Paste available values into the field",
+    "\u{1f3b4}": "Show/hide extra networks",
+
+	"\u{1f5e8}": "Interogate Clip",
+	"\u{1f5ea}": "Interogate Deepbooru",							
+	"\u{1F300}": "Restore progress",
+    "\u{267E}": "Toggle generate forever",
+
+
+    "Inpaint a part of image": "Draw a mask over an image, and the script will regenerate the masked area with content according to prompt",
+    "SD upscale": "Upscale image normally, split result into tiles, improve each tile using img2img, merge whole image back",
+
+    "Just resize": "Resize image to target resolution. Unless height and width match, you will get incorrect aspect ratio.",
+    "Crop and resize": "Resize the image so that entirety of target resolution is filled with the image. Crop parts that stick out.",
+    "Resize and fill": "Resize the image so that entirety of image is inside target resolution. Fill empty space with image's colors.",
+
+    "Mask blur": "How much to blur the mask before processing, in pixels.",
+    "Masked content": "What to put inside the masked area before processing it with Stable Diffusion.",
+    "fill": "fill it with colors of the image",
+    "original": "keep whatever was there originally",
+    "latent noise": "fill it with latent space noise",
+    "latent nothing": "fill it with latent space zeroes",
+    "Inpaint at full resolution": "Upscale masked region to target resolution, do inpainting, downscale back and paste into original image",
+
+    "Denoising strength": "Determines how little respect the algorithm should have for image's content. At 0, nothing will change, and at 1 you'll get an unrelated image. With values below 1.0, processing will take less steps than the Sampling Steps slider specifies.",
+
+    "Skip": "Stop processing current image and continue processing.",
+    "Interrupt": "Stop processing images and return any results accumulated so far.",
+    "Save": "Write image to a directory (default - log/images) and generation parameters into csv file.",
+	"Zip": "Save as Zip",
+	"Send to txt2img": "Send to txt2img",
+	"Send to img2img": "Send to img2img",
+	"Send to inpaint": "Send to inpaint",
+	"Send to extras": "Send to extras",				  
+
+    "X values": "Separate values for X axis using commas.",
+    "Y values": "Separate values for Y axis using commas.",
+
+    "None": "Do not do anything special",
+    "Prompt matrix": "Separate prompts into parts using vertical pipe character (|) and the script will create a picture for every combination of them (except for the first part, which will be present in all combinations)",
+    "X/Y/Z plot": "Create grid(s) where images will have different parameters. Use inputs below to specify which parameters will be shared by columns and rows",
+    "Custom code": "Run Python code. Advanced user only. Must run program with --allow-code for this to work",
+
+    "Prompt S/R": "Separate a list of words with commas, and the first word will be used as a keyword: script will search for this word in the prompt, and replace it with others",
+    "Prompt order": "Separate a list of words with commas, and the script will make a variation of prompt with those words for their every possible order",
+
+    "Tiling": "Produce an image that can be tiled.",
+    "Tile overlap": "For SD upscale, how much overlap in pixels should there be between tiles. Tiles overlap so that when they are merged back into one picture, there is no clearly visible seam.",
+
+    "Variation seed": "Seed of a different picture to be mixed into the generation.",
+    "Variation strength": "How strong of a variation to produce. At 0, there will be no effect. At 1, you will get the complete picture with variation seed (except for ancestral samplers, where you will just get something).",
+    "Resize seed from height": "Make an attempt to produce a picture similar to what would have been produced with same seed at specified resolution",
+    "Resize seed from width": "Make an attempt to produce a picture similar to what would have been produced with same seed at specified resolution",
+
+    "Interrogate": "Reconstruct prompt from existing image and put it into the prompt field.",
+
+    "Images filename pattern": "Use tags like [seed] and [date] to define how filenames for images are chosen. Leave empty for default.",
+    "Directory name pattern": "Use tags like [seed] and [date] to define how subdirectories for images and grids are chosen. Leave empty for default.",
+    "Max prompt words": "Set the maximum number of words to be used in the [prompt_words] option; ATTENTION: If the words are too long, they may exceed the maximum length of the file path that the system can handle",
+
+    "Loopback": "Performs img2img processing multiple times. Output images are used as input for the next loop.",
+    "Loops": "How many times to process an image. Each output is used as the input of the next loop. If set to 1, behavior will be as if this script were not used.",
+    "Final denoising strength": "The denoising strength for the final loop of each image in the batch.",
+    "Denoising strength curve": "The denoising curve controls the rate of denoising strength change each loop. Aggressive: Most of the change will happen towards the start of the loops. Linear: Change will be constant through all loops. Lazy: Most of the change will happen towards the end of the loops.",
+
+    "Style 1": "Style to apply; styles have components for both positive and negative prompts and apply to both",
+    "Style 2": "Style to apply; styles have components for both positive and negative prompts and apply to both",
+    "Apply style": "Insert selected styles into prompt fields",
+    "Create style": "Save current prompts as a style. If you add the token {prompt} to the text, the style uses that as a placeholder for your prompt when you use the style in the future.",
+
+    "Checkpoint name": "Loads weights from checkpoint before making images. You can either use hash or a part of filename (as seen in settings) for checkpoint name. Recommended to use with Y axis for less switching.",
+    "Inpainting conditioning mask strength": "Only applies to inpainting models. Determines how strongly to mask off the original image for inpainting and img2img. 1.0 means fully masked, which is the default behaviour. 0.0 means a fully unmasked conditioning. Lower values will help preserve the overall composition of the image, but will struggle with large changes.",
+
+    "Eta noise seed delta": "If this values is non-zero, it will be added to seed and used to initialize RNG for noises when using samplers with Eta. You can use this to produce even more variation of images, or you can use this to match images of other software if you know what you are doing.",
+
+    "Filename word regex": "This regular expression will be used extract words from filename, and they will be joined using the option below into label text used for training. Leave empty to keep filename text as it is.",
+    "Filename join string": "This string will be used to join split words into a single line if the option above is enabled.",
+
+    "Quicksettings list": "List of setting names, separated by commas, for settings that should go to the quick access bar at the top, rather than the usual setting tab. See modules/shared.py for setting names. Requires restarting to apply.",
+
+    "Weighted sum": "Result = A * (1 - M) + B * M",
+    "Add difference": "Result = A + (B - C) * M",
+    "No interpolation": "Result = A",
+
+    "Initialization text": "If the number of tokens is more than the number of vectors, some may be skipped.\nLeave the textbox empty to start with zeroed out vectors",
+    "Learning rate": "How fast should training go. Low values will take longer to train, high values may fail to converge (not generate accurate results) and/or may break the embedding (This has happened if you see Loss: nan in the training info textbox. If this happens, you need to manually restore your embedding from an older not-broken backup).\n\nYou can set a single numeric value, or multiple learning rates using the syntax:\n\n   rate_1:max_steps_1, rate_2:max_steps_2, ...\n\nEG:   0.005:100, 1e-3:1000, 1e-5\n\nWill train with rate of 0.005 for first 100 steps, then 1e-3 until 1000 steps, then 1e-5 for all remaining steps.",
+
+    "Clip skip": "Early stopping parameter for CLIP model; 1 is stop at last layer as usual, 2 is stop at penultimate layer, etc.",
+
+    "Approx NN": "Cheap neural network approximation. Very fast compared to VAE, but produces pictures with 4 times smaller horizontal/vertical resolution and lower quality.",
+    "Approx cheap": "Very cheap approximation. Very fast compared to VAE, but produces pictures with 8 times smaller horizontal/vertical resolution and extremely low quality.",
+
+    "Hires. fix": "Use a two step process to partially create an image at smaller resolution, upscale, and then improve details in it without changing composition",
+    "Hires steps": "Number of sampling steps for upscaled picture. If 0, uses same as for original.",
+    "Upscale by": "Adjusts the size of the image by multiplying the original width and height by the selected value. Ignored if either Resize width to or Resize height to are non-zero.",
+    "Resize width to": "Resizes image to this width. If 0, width is inferred from either of two nearby sliders.",
+    "Resize height to": "Resizes image to this height. If 0, height is inferred from either of two nearby sliders.",
+    "Discard weights with matching name": "Regular expression; if weights's name matches it, the weights is not written to the resulting checkpoint. Use ^model_ema to discard EMA weights.",
+    "Extra networks tab order": "Comma-separated list of tab names; tabs listed here will appear in the extra networks UI first and in order listed.",
+    "Negative Guidance minimum sigma": "Skip negative prompt for steps where image is already mostly denoised; the higher this value, the more skips there will be; provides increased performance in exchange for minor quality reduction."
+};
+
+function updateTooltip(element) {
+    if (element.title) return; // already has a title
+
+    let text = element.textContent;
+    let tooltip = localization[titles[text]] || titles[text];
+
+    if (!tooltip) {
+        let value = element.value;
+        if (value) tooltip = localization[titles[value]] || titles[value];
+    }
+
+    if (!tooltip) {
+        // Gradio dropdown options have `data-value`.
+        let dataValue = element.dataset.value;
+        if (dataValue) tooltip = localization[titles[dataValue]] || titles[dataValue];
+    }
+
+    if (!tooltip) {
+        for (const c of element.classList) {
+            if (c in titles) {
+                tooltip = localization[titles[c]] || titles[c];
+                break;
+            }
+        }
+    }
+
+    if (tooltip) {
+        element.title = tooltip;
+    }
+}
+
+// Nodes to check for adding tooltips.
+const tooltipCheckNodes = new Set();
+// Timer for debouncing tooltip check.
+let tooltipCheckTimer = null;
+
+function processTooltipCheckNodes() {
+    for (const node of tooltipCheckNodes) {
+        updateTooltip(node);
+    }
+    tooltipCheckNodes.clear();
+}
+
+onUiUpdate(function(mutationRecords) {
+    for (const record of mutationRecords) {
+        if (record.type === "childList" && record.target.classList.contains("options")) {
+            // This smells like a Gradio dropdown menu having changed,
+            // so let's enqueue an update for the input element that shows the current value.
+            let wrap = record.target.parentNode;
+            let input = wrap?.querySelector("input");
+            if (input) {
+                input.title = ""; // So we'll even have a chance to update it.
+                tooltipCheckNodes.add(input);
+            }
+        }
+        for (const node of record.addedNodes) {
+            if (node.nodeType === Node.ELEMENT_NODE && !node.classList.contains("hide")) {
+                if (!node.title) {
+                    if (
+                        node.tagName === "SPAN" ||
+                        node.tagName === "BUTTON" ||
+                        node.tagName === "P" ||
+                        node.tagName === "INPUT" ||
+                        (node.tagName === "LI" && node.classList.contains("item")) // Gradio dropdown item
+                    ) {
+                        tooltipCheckNodes.add(node);
+                    }
+                }
+                node.querySelectorAll('span, button, p').forEach(n => tooltipCheckNodes.add(n));
+            }
+        }
+    }
+    if (tooltipCheckNodes.size) {
+        clearTimeout(tooltipCheckTimer);
+        tooltipCheckTimer = setTimeout(processTooltipCheckNodes, 1000);
+    }
+});

javascript/hires_fix.js

@@ -0,0 +1,19 @@
+function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y) {
+    function setInactive(elem, inactive) {
+        elem.classList.toggle('inactive', !!inactive);
+    }
+
+    var hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale');
+    var hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x');
+    var hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y');
+
+    gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : "block";
+
+    setInactive(hrUpscaleBy, opts.use_old_hires_fix_width_height || hr_resize_x > 0 || hr_resize_y > 0);
+    setInactive(hrResizeX, opts.use_old_hires_fix_width_height || hr_resize_x == 0);
+    setInactive(hrResizeY, opts.use_old_hires_fix_width_height || hr_resize_y == 0);
+
+    setTimeout(function () {
+      return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y];
+    }, 100);
+}

javascript/imageMaskFix.js

@@ -0,0 +1,339 @@
+/**
+ * temporary fix for https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/668
+ * @see https://github.com/gradio-app/gradio/issues/1721
+ */
+
+/*
+window.addEventListener( 'resize', () => imageMaskResize());
+
+function imageMaskResize() {
+    const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas');
+    if (!canvases.length) {
+        window.removeEventListener('resize', imageMaskResize);
+        return;
+    }
+
+    const wrapper = canvases[0].closest('.touch-none');
+    const previewImage = wrapper.previousElementSibling;
+
+    if (!previewImage.complete) {
+        previewImage.addEventListener('load', imageMaskResize);
+        return;
+    }
+
+    const w = previewImage.width;
+    const h = previewImage.height;
+    const nw = previewImage.naturalWidth;
+    const nh = previewImage.naturalHeight;
+    const portrait = nh > nw;
+
+    const wW = Math.min(w, portrait ? h / nh * nw : w / nw * nw);
+    const wH = Math.min(h, portrait ? h / nh * nh : w / nw * nh);
+
+    wrapper.style.width = `${wW}px`;
+    wrapper.style.height = `${wH}px`;
+    wrapper.style.left = `0px`;
+    wrapper.style.top = `0px`;
+
+    canvases.forEach(c => {
+        c.style.width = c.style.height = '';
+        c.style.maxWidth = '100%';
+        c.style.maxHeight = '100%';
+        c.style.objectFit = 'contain';
+    });
+ }
+
+ onUiUpdate(() => imageMaskResize());
+*/
+
+onUiLoaded(function () {
+  const color_box = '<input type="color">';
+  const brush_size = '<input type="range" min="0.75" max="110.0">';
+  let is_drawing = false;
+  let img_src = [];
+  let spl_instances = [];
+  let spl_pan_instances = [];
+  let img2img_tab_index = 0;
+  let intervalLastUIUpdate;
+  const container = gradioApp().querySelector(".gradio-container");
+  const observer = new MutationObserver(() =>
+    gradioApp()
+      .querySelectorAll('div[data-testid="image"]')
+      .forEach(function (elem, i) {
+        let img_parent = elem.parentElement.querySelector(
+          'div[data-testid="image"] > div'
+        );
+        let img = img_parent.querySelector("img");
+        if (img) {
+          if (img_src[i] != img.src) {
+            let tool_buttons = img_parent.querySelectorAll("button");
+            //console.log(tool_buttons);
+            if (tool_buttons.length > 2) {
+              img_parent.style.visibility = "hidden";
+
+              if (intervalLastUIUpdate != null)
+                clearInterval(intervalLastUIUpdate);
+
+              intervalLastUIUpdate = setInterval(function () {
+                clearInterval(intervalLastUIUpdate);
+                img_parent.addEventListener("mouseup", function (e) {});
+
+                let spl_parent = elem.parentElement;
+                let spl;
+                let spl_pan;
+                let isPanning;
+                let splid;
+
+                if (spl_parent.className != "spl-pane") {
+                  spl = new Spotlight();
+                  spl.init(spl_parent, "-" + spl_parent.id);
+
+                  spl.addControl("undo", spl_undo_handler);
+                  spl_pan = spl.addControl("pan", spl_pan_handler);
+                  spl.addControl("brush", spl_brush_handler, brush_size);
+                  if (tool_buttons.length == 5) {
+                    spl.addControl("color", spl_color_handler, color_box);
+                  }
+                  spl.addControl("clear", spl_clear_handler);
+
+                  spl_instances[i] = spl;
+                  spl_pan_instances[i] = spl_pan;
+                } else {
+                  spl = spl_instances[i];
+                  spl_pan = spl_pan_instances[i];
+                }
+
+                img_src[i] = img.src;
+                //console.log("NEWIMAGE");
+
+                function spl_undo_handler(e) {
+                  tool_buttons[0].click();
+                }
+
+                function spl_clear_handler(e) {
+                  tool_buttons[2].click();
+                  spl.panzoom(false);
+                  img_parent.classList.remove("no-point-events");
+                  img_parent.parentElement.classList.remove("move");
+                  document.removeEventListener("wheel", preventDefault, false);
+                  setTimeout(function () {
+                    spl.close(false, true);
+                    img_parent.style.flexGrow = "1";
+                    img_src[i] = "";
+                    elem.style.transform = "none";
+                  }, 500);
+                }
+
+                function spl_color_handler(e) {}
+                function spl_brush_handler(e) {}
+
+                function preventDefault(e) {
+                  e = e || window.event;
+                  if (e.preventDefault) {
+                    e.preventDefault();
+                  }
+                  e.returnValue = false;
+                }
+
+                function pan_toggle(val, target) {
+                  isPanning = val;
+                  target.classList.toggle("on", isPanning);
+                  spl.panzoom(val);
+
+                  if (isPanning) {
+                    img_parent.classList.add("no-point-events");
+                    img_parent.parentElement.classList.add("move");
+                    document.addEventListener("wheel", preventDefault, {
+                      passive: false,
+                    });
+                  } else {
+                    img_parent.classList.remove("no-point-events");
+                    img_parent.parentElement.classList.remove("move");
+                    document.removeEventListener(
+                      "wheel",
+                      preventDefault,
+                      false
+                    );
+                  }
+                }
+
+                function spl_pan_handler(e) {
+                  isPanning = !isPanning;
+                  pan_toggle(isPanning, this);
+                }
+
+                function update_color(listener) {
+                  let input_color = img_parent.querySelector(
+                    "input[type='color']"
+                  );
+                  let spl =
+                    img_parent.parentElement.parentElement.parentElement
+                      .parentElement.parentElement;
+                  let spl_color = spl.querySelector(
+                    ".spl-color input[type='color']"
+                  );
+                  spl_color.value = input_color.value;
+
+                  if (listener) {
+                    spl_color.addEventListener("input", function (ev) {
+                      input_color.value = ev.target.value;
+                      updateInput(input_color);
+                      pan_toggle(false, spl_pan);
+                    });
+                  }
+                }
+
+                function update_brush(listener) {
+                  let input_range = img_parent.querySelector(
+                    "input[type='range']"
+                  );
+                  let spl =
+                    img_parent.parentElement.parentElement.parentElement
+                      .parentElement.parentElement;
+                  let spl_brush = spl.querySelector(
+                    ".spl-brush input[type='range']"
+                  );
+                  spl_brush.value = input_range.value;
+
+                  if (listener) {
+                    spl_brush.addEventListener("input", function (ev) {
+                      input_range.value = ev.target.value;
+                      updateInput(input_range);
+                    });
+                  }
+                }
+
+                function init_drawing_tools() {
+                  let input_color = img_parent.querySelector(
+                    "input[type='color']"
+                  );
+                  if (!input_color) {
+                    let tbcolor = img_parent.querySelector(
+                      "button[aria-label='Select brush color']"
+                    );
+                    if (tbcolor) {
+                      tbcolor.click();
+                      setTimeout(function () {
+                        update_color(true);
+                      }, 100);
+                    }
+                  } else {
+                    setTimeout(function () {
+                      update_color(false);
+                    }, 100);
+                  }
+
+                  let input_range = img_parent.querySelector(
+                    "input[type='range']"
+                  );
+                  if (!input_range) {
+                    let tbrange = img_parent.querySelector(
+                      "button[aria-label='Use brush']"
+                    );
+
+                    if (tbrange) {
+                      tbrange.click();
+                      setTimeout(function () {
+                        update_brush(true);
+                      }, 100);
+                    }
+                  } else {
+                    setTimeout(function () {
+                      update_brush(false);
+                    }, 100);
+                  }
+                }
+
+                let w = img.naturalWidth;
+                let h = img.naturalHeight;
+                img_parent.style.width = `${w}px`;
+                img_parent.style.height = `${h}px`;
+
+                spl.show([
+                  {
+                    media: "node",
+                    src: elem,
+                    //autohide: true,
+                    //control: ["pan","clear","undo","fullscreen","autofit","zoom-in","zoom-out","close"],
+                    class: "relative",
+                  },
+                ]);
+
+                img_parent.style.flexGrow = "0";
+                pan_toggle(false, spl_pan);
+                spl.panzoom(false);
+                setTimeout(function () {
+                  init_drawing_tools();
+                }, 500);
+                img_parent.style.visibility = "visible";
+              }, 1000);
+            }
+          }
+        }
+      })
+  );
+  observer.observe(container, { childList: true, subtree: true });
+
+  /* 	gradioApp().querySelectorAll('#mode_img2img > .tabitem').forEach(function (tb, ti){	
+		tb.querySelectorAll('[id^="img2img_copy_to_"] > button').forEach(function (btn, bi){	
+			
+			btn.addEventListener("click", function(e) {
+				console.log(ti + " > " + bi);
+				let src_canvas = tb.querySelector('[key="drawing"]');
+				if(src_canvas){					
+					let dest_canvas = gradioApp().querySelector('#mode_img2img .tabitem:nth-child('+parseInt(bi+1)+') [key="drawing"]');
+					//let destCtx = dest_canvas.getContext('2d');
+					//destCtx.drawImage(src_canvas, 0, 0);	
+					console.log(src_canvas);
+					console.log(dest_canvas);
+				}
+			})
+		})
+	})
+	
+ */
+});
+
+/* 
+let intervalLastUIUpdate;
+function onLastUIUpdate(){
+	clearInterval(intervalLastUIUpdate);
+	const img2img_tab = gradioApp().querySelector('#img2img_img2img_tab');
+	if(img2img_tab && selectedTabItemId=="tab_img2img"){
+		const current_img2img_tab_index = get_img2img_tab_index()[0];
+		//if(img2img_tab_index != current_img2img_tab_index){
+			console.log(current_img2img_tab_index);
+			if(current_img2img_tab_index > 3 || current_img2img_tab_index == 0) return;
+			img2img_tab_index = current_img2img_tab_index;
+			let tabid;
+			
+			if(img2img_tab_index == 1){
+				tabid = "#img2img_img2img_sketch_tab";// #img2img_sketch";			
+			}else if(img2img_tab_index == 2){
+				tabid = "#img2img_inpaint_tab";// #img2maskimg";
+			}else if(img2img_tab_index == 3){
+				tabid = "#img2img_inpaint_sketch_tab";// #inpaint_sketch";
+			}
+			//const parent_img2img_tab_img = gradioApp().querySelector('#mode_img2img > div:nth-child('+(img2img_tab_index+2)+') div[data-testid="image"] > div');
+			const parent_img2img_tab_img = gradioApp().querySelector('#mode_img2img '+tabid+' div[data-testid="image"] > div');		
+			const img2img_tab_img = parent_img2img_tab_img.querySelector('img');			
+			if(img2img_tab_img){			
+				parent_img2img_tab_img.style.flexGrow = "0";				
+				img2img_tab_img.onload = function() {
+					let w = this.naturalWidth; 
+					let h = this.naturalHeight; 
+					parent_img2img_tab_img.style.width = `${w}px`;
+					parent_img2img_tab_img.style.height = `${h}px`;
+				}
+			}else{
+				parent_img2img_tab_img.style.flexGrow = "1";
+			}
+		//}
+	}
+}
+
+onUiUpdate(function() {	
+	if(intervalLastUIUpdate != null) clearInterval(intervalLastUIUpdate);
+	intervalLastUIUpdate = setInterval(onLastUIUpdate, 1000);	
+}) */
+

javascript/imageviewer.js

@@ -0,0 +1,242 @@
+//called from progressbar
+function showGalleryImage() {
+  //need to clean up the old code
+}
+
+let like;
+let tile;
+
+let slide = 0;
+let gallery = [];
+let fullImg_src;
+//let control = ["pan","undo","like","tile","page","fullscreen","autofit","zoom-in","zoom-out","clear","close","download","prev","next"];
+let control = [
+  "like",
+  "tile",
+  "page",
+  "fullscreen",
+  "autofit",
+  "zoom-in",
+  "zoom-out",
+  "clear",
+  "close",
+  "download",
+  "prev",
+  "next",
+];
+
+let img_browser;
+let img_file_name;
+
+let spl_pane;
+let spl_zoom_out;
+let spl_zoom_in;
+let spotlight_gallery;
+
+function tile_zoom_update(val) {
+  let current_tile_state_size = gallery[slide].tile_size;
+  current_tile_state_size += val * 5;
+  current_tile_state_size = Math.max(5, Math.min(100, current_tile_state_size));
+  spl_pane.style.setProperty("background-size", current_tile_state_size + "%");
+  gallery[slide].tile_size = current_tile_state_size;
+}
+
+function tile_wheel(event) {
+  let delta = event["deltaY"];
+  delta = (delta < 0 ? 1 : delta ? -1 : 0) * 0.5;
+  tile_zoom_update(delta);
+}
+function tile_zoom_in(event) {
+  tile_zoom_update(1);
+}
+function tile_zoom_out(event) {
+  tile_zoom_update(-1);
+}
+
+function removeTile() {
+  spl_pane.removeEventListener("wheel", tile_wheel);
+  spl_zoom_out.removeEventListener("click", tile_zoom_out);
+  spl_zoom_in.removeEventListener("click", tile_zoom_in);
+
+  spl_pane.classList.remove("hide");
+  spl_pane.style.setProperty("background-image", "none");
+  spotlight_gallery.zoom(0.0);
+}
+
+function addTile(spl_img) {
+  spl_pane.addEventListener("wheel", tile_wheel);
+  spl_zoom_out.addEventListener("click", tile_zoom_out);
+  spl_zoom_in.addEventListener("click", tile_zoom_in);
+
+  const current_tile_state_size = gallery[slide].tile_size;
+  spl_pane.classList.add("hide");
+  spl_pane.style.setProperty("background-position", "center");
+  spl_pane.style.setProperty("background-size", current_tile_state_size + "%");
+  if (spl_img) {
+    spl_pane.style.setProperty("background-image", `url(${spl_img.src})`);
+  }
+}
+
+function tile_handler(event) {
+  const current_tile_state = !gallery[slide].tile;
+  gallery[slide].tile = current_tile_state;
+
+  this.classList.toggle("on");
+
+  if (current_tile_state) {
+    const spl_img = gradioApp().querySelector("#spotlight-gal .spl-pane img");
+    addTile(spl_img);
+  } else {
+    removeTile();
+  }
+}
+function like_handler(event) {
+  const current_like_state = !gallery[slide].like;
+  gallery[slide].like = current_like_state;
+  this.classList.toggle("on");
+
+  if (current_like_state) {
+    // add to favorites ...
+    //img_file_name.value = gallery[slide].src;
+    //console.log(gallery[slide].src);
+  } else {
+    // remove from favorites ...
+  }
+}
+
+function createGallerySpotlight() {
+  //console.log("clicked");
+  slide = 0;
+  gallery = [];
+
+  gradioApp()
+    .querySelectorAll("#" + selectedTabItemId + " .thumbnails img")
+    .forEach(function (elem, i) {
+      elem.setAttribute("gal-id", i);
+      //if(fullImg_src == elem.src) slide = parseInt(i+1);
+      if (elem.parentElement.className.indexOf("selected") != -1)
+        slide = parseInt(i + 1);
+      //console.log(slide);
+      gallery[i] = {
+        src: elem.src,
+        title: "Seed:" + elem.src,
+        //description: "This is a description.",
+        like: false,
+        tile: false,
+        tile_size: 50,
+      };
+    });
+
+  const options = {
+    class: "sd-gallery",
+    index: slide,
+    //control: ["like","page","theme","fullscreen","autofit","zoom-in","zoom-out","close","download","play","prev","next"],
+    control: control,
+    //animation: animation,
+    onshow: function (index) {},
+    onchange: function (index, options) {
+      slide = index - 1;
+      tile.classList.toggle("on", gallery[slide].tile);
+      //if(img_browser){
+      like.classList.toggle("on", gallery[slide].like);
+
+      //}
+
+      spl_pane = gradioApp().querySelector(
+        "#spotlight-gal .spl-pane:nth-child(" + index + ")"
+      );
+      spl_zoom_out = gradioApp().querySelector("#spotlight-gal .spl-zoom-out");
+      spl_zoom_in = gradioApp().querySelector("#spotlight-gal .spl-zoom-in");
+
+      const current_tile_state = gallery[slide].tile;
+      if (current_tile_state) {
+        addTile();
+      } else {
+        removeTile();
+      }
+    },
+    onclose: function (index) {
+      gradioApp()
+        .querySelector(
+          "#" +
+            selectedTabItemId +
+            " .thumbnails .thumbnail-item:nth-child(" +
+            (slide + 1) +
+            ")"
+        )
+        .click();
+    },
+  };
+
+  //assign(options, modifier);
+
+  spotlight_gallery.show(gallery, options);
+  spotlight_gallery.panzoom(true);
+}
+
+function fullImg_click_handler(e) {
+  e.stopPropagation();
+  e.preventDefault();
+  createGallerySpotlight();
+}
+
+let intervalUiUpdateIViewer;
+function onUiHeaderTabUpdate() {
+  if (intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer);
+  intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500);
+}
+
+let fullImg_preview;
+function onUiUpdateIViewer() {
+  clearInterval(intervalUiUpdateIViewer);
+  //update_performant_inputs(selectedTabItemId);
+
+  //fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' [id$="2img_results"] .modify-upload + img.w-full.object-contain');
+  fullImg_preview = gradioApp().querySelector(
+    "#" + selectedTabItemId + " .preview > img"
+  );
+  if (opts.js_modal_lightbox && fullImg_preview) {
+    fullImg_src = fullImg_preview.src;
+    fullImg_preview.removeEventListener("click", fullImg_click_handler);
+    fullImg_preview.addEventListener("click", fullImg_click_handler, true); //bubbling phase
+
+    /*
+		// this is an idea to integrate image browser extension seamlesly, 
+		// without the need to change to the image browser tab extension users will be able to review images after generation
+		// and add them to favorites or delete the ones that don't like on the spot
+		const img_browser = gradioApp().querySelector('[id$="2img_images_history"]');
+		const tbname = selectedTabItemId.split("_")[1];
+		if(img_browser && tbname ==("txt2img" || "img2img")){
+			const images_history = gradioApp().querySelector('[id$="'+tbname+'_images_history"]');
+			const history_button_panel = images_history.querySelector('[id$="'+tbname+'_images_history_button_panel"]');
+			const labels = images_history.querySelectorAll('label.block span');
+			for(let i=0;i<labels.length;i++){
+				//console.log(labels[i].innerHTML)
+				if(labels[i].innerHTML == 'File Name'){
+					img_file_name = labels[i].parentElement.querySelector("textarea");
+					console.log(img_file_name.value);
+					break;
+				}
+			}
+		}
+		*/
+  }
+}
+
+onUiUpdate(function () {
+  if (intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer);
+  intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500);
+
+});
+
+onUiLoaded(function () {
+  spotlight_gallery = new Spotlight();
+  spotlight_gallery.init(
+    gradioApp().querySelector(".gradio-container"),
+    "-gal"
+  );
+  tile = spotlight_gallery.addControl("tile", tile_handler);
+  like = spotlight_gallery.addControl("like", like_handler);
+});
+
+document.addEventListener("DOMContentLoaded", function () {});

javascript/imageviewerGamepad.js

@@ -0,0 +1,63 @@
+let gamepads = [];
+
+window.addEventListener('gamepadconnected', (e) => {
+    const index = e.gamepad.index;
+    let isWaiting = false;
+    gamepads[index] = setInterval(async() => {
+        if (!opts.js_modal_lightbox_gamepad || isWaiting) return;
+        const gamepad = navigator.getGamepads()[index];
+        const xValue = gamepad.axes[0];
+        if (xValue <= -0.3) {
+            modalPrevImage(e);
+            isWaiting = true;
+        } else if (xValue >= 0.3) {
+            modalNextImage(e);
+            isWaiting = true;
+        }
+        if (isWaiting) {
+            await sleepUntil(() => {
+                const xValue = navigator.getGamepads()[index].axes[0];
+                if (xValue < 0.3 && xValue > -0.3) {
+                    return true;
+                }
+            }, opts.js_modal_lightbox_gamepad_repeat);
+            isWaiting = false;
+        }
+    }, 10);
+});
+
+window.addEventListener('gamepaddisconnected', (e) => {
+    clearInterval(gamepads[e.gamepad.index]);
+});
+
+/*
+Primarily for vr controller type pointer devices.
+I use the wheel event because there's currently no way to do it properly with web xr.
+ */
+let isScrolling = false;
+window.addEventListener('wheel', (e) => {
+    if (!opts.js_modal_lightbox_gamepad || isScrolling) return;
+    isScrolling = true;
+
+    if (e.deltaX <= -0.6) {
+        modalPrevImage(e);
+    } else if (e.deltaX >= 0.6) {
+        modalNextImage(e);
+    }
+
+    setTimeout(() => {
+        isScrolling = false;
+    }, opts.js_modal_lightbox_gamepad_repeat);
+});
+
+function sleepUntil(f, timeout) {
+    return new Promise((resolve) => {
+        const timeStart = new Date();
+        const wait = setInterval(function() {
+            if (f() || new Date() - timeStart > timeout) {
+                clearInterval(wait);
+                resolve();
+            }
+        }, 20);
+    });
+}

javascript/localization.js

@@ -0,0 +1,175 @@
+// localization = {} -- the dict with translations is created by the backend
+
+var ignore_ids_for_localization = {
+    setting_sd_hypernetwork: 'OPTION',
+    setting_sd_model_checkpoint: 'OPTION',
+    modelmerger_primary_model_name: 'OPTION',
+    modelmerger_secondary_model_name: 'OPTION',
+    modelmerger_tertiary_model_name: 'OPTION',
+    train_embedding: 'OPTION',
+    train_hypernetwork: 'OPTION',
+    txt2img_styles: 'OPTION',
+    img2img_styles: 'OPTION',
+    setting_random_artist_categories: 'SPAN',
+    setting_face_restoration_model: 'SPAN',
+    setting_realesrgan_enabled_models: 'SPAN',
+    extras_upscaler_1: 'SPAN',
+    extras_upscaler_2: 'SPAN',
+};
+
+var re_num = /^[.\d]+$/;
+var re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u;
+
+var original_lines = {};
+var translated_lines = {};
+
+function hasLocalization() {
+    return window.localization && Object.keys(window.localization).length > 0;
+}
+
+function textNodesUnder(el) {
+    var n, a = [], walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
+    while ((n = walk.nextNode())) a.push(n);
+    return a;
+}
+
+function canBeTranslated(node, text) {
+    if (!text) return false;
+    if (!node.parentElement) return false;
+
+    var parentType = node.parentElement.nodeName;
+    if (parentType == 'SCRIPT' || parentType == 'STYLE' || parentType == 'TEXTAREA') return false;
+
+    if (parentType == 'OPTION' || parentType == 'SPAN') {
+        var pnode = node;
+        for (var level = 0; level < 4; level++) {
+            pnode = pnode.parentElement;
+            if (!pnode) break;
+
+            if (ignore_ids_for_localization[pnode.id] == parentType) return false;
+        }
+    }
+
+    if (re_num.test(text)) return false;
+    if (re_emoji.test(text)) return false;
+    return true;
+}
+
+function getTranslation(text) {
+    if (!text) return undefined;
+
+    if (translated_lines[text] === undefined) {
+        original_lines[text] = 1;
+    }
+
+    var tl = localization[text];
+    if (tl !== undefined) {
+        translated_lines[tl] = 1;
+    }
+
+    return tl;
+}
+
+function processTextNode(node) {
+    var text = node.textContent.trim();
+
+    if (!canBeTranslated(node, text)) return;
+
+    var tl = getTranslation(text);
+    if (tl !== undefined) {
+        node.textContent = tl;
+    }
+}
+
+function processNode(node) {
+    if (node.nodeType == 3) {
+        processTextNode(node);
+        return;
+    }
+
+    if (node.title) {
+        let tl = getTranslation(node.title);
+        if (tl !== undefined) {
+            node.title = tl;
+        }
+    }
+
+    if (node.placeholder) {
+        let tl = getTranslation(node.placeholder);
+        if (tl !== undefined) {
+            node.placeholder = tl;
+        }
+    }
+
+    textNodesUnder(node).forEach(function(node) {
+        processTextNode(node);
+    });
+}
+
+function dumpTranslations() {
+    if (!hasLocalization()) {
+        // If we don't have any localization,
+        // we will not have traversed the app to find
+        // original_lines, so do that now.
+        processNode(gradioApp());
+    }
+    var dumped = {};
+    if (localization.rtl) {
+        dumped.rtl = true;
+    }
+
+    for (const text in original_lines) {
+        if (dumped[text] !== undefined) continue;
+        dumped[text] = localization[text] || text;
+    }
+
+    return dumped;
+}
+
+function download_localization() {
+    var text = JSON.stringify(dumpTranslations(), null, 4);
+
+    var element = document.createElement('a');
+    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+    element.setAttribute('download', "localization.json");
+    element.style.display = 'none';
+    document.body.appendChild(element);
+
+    element.click();
+
+    document.body.removeChild(element);
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+    if (!hasLocalization()) {
+        return;
+    }
+
+    onUiUpdate(function(m) {
+        m.forEach(function(mutation) {
+            mutation.addedNodes.forEach(function(node) {
+                processNode(node);
+            });
+        });
+    });
+
+    processNode(gradioApp());
+
+    if (localization.rtl) { // if the language is from right to left,
+        (new MutationObserver((mutations, observer) => { // wait for the style to load
+            mutations.forEach(mutation => {
+                mutation.addedNodes.forEach(node => {
+                    if (node.tagName === 'STYLE') {
+                        observer.disconnect();
+
+                        for (const x of node.sheet.rules) { // find all rtl media rules
+                            if (Array.from(x.media || []).includes('rtl')) {
+                                x.media.appendMedium('all'); // enable them
+                            }
+                        }
+                    }
+                });
+            });
+        })).observe(gradioApp(), {childList: true});
+    }
+});

javascript/notification.js

@@ -0,0 +1,47 @@
+let lastHeadImg = null;
+
+let notificationButton = null;
+
+onAfterUiUpdate(function() {
+    if (notificationButton == null) {
+        notificationButton = gradioApp().getElementById('request_notifications');
+
+        if (notificationButton != null) {
+            notificationButton.addEventListener('click', () => {
+                void Notification.requestPermission();
+            }, true);
+        }
+    }
+
+    const galleryPreviews = gradioApp().querySelectorAll('div[id^="tab_"][style*="display: block"] div[id$="_results"] .thumbnail-item > img');
+
+    if (galleryPreviews == null) return;
+
+    const headImg = galleryPreviews[0]?.src;
+
+    if (headImg == null || headImg == lastHeadImg) return;
+
+    lastHeadImg = headImg;
+
+    // play notification sound if available
+    gradioApp().querySelector('#audio_notification audio')?.play();
+
+    if (document.hasFocus()) return;
+
+    // Multiple copies of the images are in the DOM when one is selected. Dedup with a Set to get the real number generated.
+    const imgs = new Set(Array.from(galleryPreviews).map(img => img.src));
+
+    const notification = new Notification(
+        'Stable Diffusion',
+        {
+            body: `Generated ${imgs.size > 1 ? imgs.size - opts.return_grid : 1} image${imgs.size > 1 ? 's' : ''}`,
+            icon: headImg,
+            image: headImg,
+        }
+    );
+
+    notification.onclick = function(_) {
+        parent.focus();
+        this.close();
+    };
+});

javascript/profilerVisualization.js

@@ -0,0 +1,153 @@
+
+function createRow(table, cellName, items) {
+    var tr = document.createElement('tr');
+    var res = [];
+
+    items.forEach(function(x, i) {
+        if (x === undefined) {
+            res.push(null);
+            return;
+        }
+
+        var td = document.createElement(cellName);
+        td.textContent = x;
+        tr.appendChild(td);
+        res.push(td);
+
+        var colspan = 1;
+        for (var n = i + 1; n < items.length; n++) {
+            if (items[n] !== undefined) {
+                break;
+            }
+
+            colspan += 1;
+        }
+
+        if (colspan > 1) {
+            td.colSpan = colspan;
+        }
+    });
+
+    table.appendChild(tr);
+
+    return res;
+}
+
+function showProfile(path, cutoff = 0.05) {
+    requestGet(path, {}, function(data) {
+        var table = document.createElement('table');
+        table.className = 'popup-table';
+
+        data.records['total'] = data.total;
+        var keys = Object.keys(data.records).sort(function(a, b) {
+            return data.records[b] - data.records[a];
+        });
+        var items = keys.map(function(x) {
+            return {key: x, parts: x.split('/'), time: data.records[x]};
+        });
+        var maxLength = items.reduce(function(a, b) {
+            return Math.max(a, b.parts.length);
+        }, 0);
+
+        var cols = createRow(table, 'th', ['record', 'seconds']);
+        cols[0].colSpan = maxLength;
+
+        function arraysEqual(a, b) {
+            return !(a < b || b < a);
+        }
+
+        var addLevel = function(level, parent, hide) {
+            var matching = items.filter(function(x) {
+                return x.parts[level] && !x.parts[level + 1] && arraysEqual(x.parts.slice(0, level), parent);
+            });
+            var sorted = matching.sort(function(a, b) {
+                return b.time - a.time;
+            });
+            var othersTime = 0;
+            var othersList = [];
+            var othersRows = [];
+            var childrenRows = [];
+            sorted.forEach(function(x) {
+                var visible = x.time >= cutoff && !hide;
+
+                var cells = [];
+                for (var i = 0; i < maxLength; i++) {
+                    cells.push(x.parts[i]);
+                }
+                cells.push(x.time.toFixed(3));
+                var cols = createRow(table, 'td', cells);
+                for (i = 0; i < level; i++) {
+                    cols[i].className = 'muted';
+                }
+
+                var tr = cols[0].parentNode;
+                if (!visible) {
+                    tr.classList.add("hidden");
+                }
+
+                if (x.time >= cutoff) {
+                    childrenRows.push(tr);
+                } else {
+                    othersTime += x.time;
+                    othersList.push(x.parts[level]);
+                    othersRows.push(tr);
+                }
+
+                var children = addLevel(level + 1, parent.concat([x.parts[level]]), true);
+                if (children.length > 0) {
+                    var cell = cols[level];
+                    var onclick = function() {
+                        cell.classList.remove("link");
+                        cell.removeEventListener("click", onclick);
+                        children.forEach(function(x) {
+                            x.classList.remove("hidden");
+                        });
+                    };
+                    cell.classList.add("link");
+                    cell.addEventListener("click", onclick);
+                }
+            });
+
+            if (othersTime > 0) {
+                var cells = [];
+                for (var i = 0; i < maxLength; i++) {
+                    cells.push(parent[i]);
+                }
+                cells.push(othersTime.toFixed(3));
+                cells[level] = 'others';
+                var cols = createRow(table, 'td', cells);
+                for (i = 0; i < level; i++) {
+                    cols[i].className = 'muted';
+                }
+
+                var cell = cols[level];
+                var tr = cell.parentNode;
+                var onclick = function() {
+                    tr.classList.add("hidden");
+                    cell.classList.remove("link");
+                    cell.removeEventListener("click", onclick);
+                    othersRows.forEach(function(x) {
+                        x.classList.remove("hidden");
+                    });
+                };
+
+                cell.title = othersList.join(", ");
+                cell.classList.add("link");
+                cell.addEventListener("click", onclick);
+
+                if (hide) {
+                    tr.classList.add("hidden");
+                }
+
+                childrenRows.push(tr);
+            }
+
+            return childrenRows;
+        };
+
+        addLevel(0, []);
+
+        popup(table);
+    });
+}
+

javascript/progressbar.js

@@ -0,0 +1,208 @@
+// code related to showing and updating progressbar shown as the image is being made
+
+function rememberGallerySelection() {
+
+}
+
+function getGallerySelectedIndex() {
+
+}
+
+function request(url, data, handler, errorHandler) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", url, true);
+    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                try {
+                    var js = JSON.parse(xhr.responseText);
+                    handler(js);
+                } catch (error) {
+                    console.error(error);
+                    errorHandler();
+                }
+            } else {
+                errorHandler();
+            }
+        }
+    };
+    var js = JSON.stringify(data);
+    xhr.send(js);
+}
+
+function pad2(x) {
+    return x < 10 ? '0' + x : x;
+}
+
+function formatTime(secs) {
+  if (secs > 3600) {
+      return pad2(Math.floor(secs / 60 / 60)) + ":" + pad2(Math.floor(secs / 60) % 60) + ":" + pad2(Math.floor(secs) % 60);
+  } else if (secs > 60) {
+      return pad2(Math.floor(secs / 60)) + ":" + pad2(Math.floor(secs) % 60);
+  } else {
+      return Math.floor(secs) + "s";
+  }
+}
+
+function setTitle(progress) {
+    var title = 'Stable Diffusion';
+
+    if (opts.show_progress_in_title && progress) {
+        title = '[' + progress.trim() + '] ' + title;
+    }
+
+    if (document.title != title) {
+        document.title = title;
+    }
+}
+
+function randomId() {
+    return "task(" + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + ")";
+}
+
+// starts sending progress requests to "/internal/progress" uri, creating progressbar above progressbarContainer element and
+// preview inside gallery element. Cleans up all created stuff when the task is over and calls atEnd.
+// calls onProgress every time there is a progress update
+function requestProgress(
+  id_task,
+  progressbarContainer,
+  gallery,
+  atEnd,
+  onProgress,
+  inactivityTimeout = 40
+) {
+  var dateStart = new Date();
+  var wasEverActive = false;
+  var parentProgressbar = progressbarContainer.parentNode;
+  var parentGallery = gallery ? gallery.parentNode : null;
+
+  var divProgress = document.createElement("div");
+  divProgress.className = "progressDiv";
+
+  divProgress.style.display = opts.show_progressbar ? "block" : "none";
+  var divInner = document.createElement("div");
+  divInner.className = "progress";
+
+  divProgress.appendChild(divInner);
+  parentProgressbar.insertBefore(divProgress, progressbarContainer);
+
+  if (parentGallery) {
+    var livePreview = gradioApp().querySelector(".livePreview");
+    if (!livePreview) {
+      livePreview = document.createElement("div");
+      livePreview.classList.add("livePreview", "init");
+      parentGallery.insertBefore(livePreview, gallery);
+    }
+    livePreview.classList.remove("dropPreview");
+  }
+
+  var removeProgressBar = function () {
+    setTitle("");
+    if (divProgress) {
+      parentProgressbar.removeChild(divProgress);
+    }
+
+    if (progressbarContainer.id == "txt2img_gallery_container") {
+      showSubmitButtons("txt2img", true);
+    } else if (progressbarContainer.id == "img2img_gallery_container") {
+      showSubmitButtons("img2img", true);
+    }
+    if (livePreview) {
+      if (parentGallery) parentGallery.removeChild(livePreview);
+    }
+    gradioApp()
+      .querySelectorAll("#tabs + div, #tabs + div > *:not(ul)")
+      .forEach(function (elem) {
+        elem.style.setProperty("display", "block", "important");
+      });
+    atEnd();
+  };
+
+  var fun = function (id_task, id_live_preview) {
+    request(
+      "./internal/progress",
+      { id_task: id_task, id_live_preview: id_live_preview },
+      function (res) {
+        if (res.completed) {
+          removeProgressBar();
+          return;
+        }
+
+        var rect = progressbarContainer.getBoundingClientRect();
+
+        if (rect.width) {
+          divProgress.style.width = rect.width + "px";
+        }
+
+        let progressText = "";
+
+        divInner.style.width = (res.progress || 0) * 100.0 + "%";
+        divInner.style.background = res.progress ? "" : "transparent";
+
+        if (res.progress > 0) {
+          progressText = ((res.progress || 0) * 100.0).toFixed(0) + "%";
+        }
+
+        if (res.eta) {
+          progressText += " ETA: " + formatTime(res.eta);
+        }
+
+        setTitle(progressText);
+
+        if (res.textinfo && res.textinfo.indexOf("\n") == -1) {
+          progressText = res.textinfo + " " + progressText;
+        }
+
+        divInner.textContent = progressText;
+
+        var elapsedFromStart = (new Date() - dateStart) / 1000;
+
+        if (res.active) wasEverActive = true;
+
+        if (!res.active && wasEverActive) {
+          removeProgressBar();
+          return;
+        }
+
+        if (
+          elapsedFromStart > inactivityTimeout &&
+          !res.queued &&
+          !res.active
+        ) {
+          removeProgressBar();
+          return;
+        }
+
+        if (res.live_preview && gallery) {
+
+          livePreview.classList.remove("init");
+
+          var img = new Image();
+          img.onload = function () {
+            img.width = img.naturalWidth;
+            img.height = img.naturalHeight;
+            livePreview.appendChild(img);
+            if (livePreview.childElementCount > 2) {
+              livePreview.removeChild(livePreview.firstElementChild);
+            }
+          };
+          img.src = res.live_preview;
+        }
+
+        if (onProgress) {
+          onProgress(res);
+        }
+
+        setTimeout(() => {
+          fun(id_task, res.id_live_preview);
+        }, opts.live_preview_refresh_period || 500);
+      },
+      function () {
+        removeProgressBar();
+      }
+    );
+  };
+
+  fun(id_task, 0);
+}

javascript/spotlight.js

@@ -0,0 +1,13 @@
+/**
+ * Spotlight.js v0.7.8
+ * Copyright 2019-2021 Nextapps GmbH
+ * Author: Thomas Wilkerling
+ * Licence: Apache-2.0
+ * https://github.com/nextapps-de/spotlight
+ */
+ /* 
+ this library was rewritten by anapnoe to work with https://github.com/anapnoe/stable-diffusion-webui-ux
+ it supports multi-instancing, enable-disable panzoom functionallity and input type tools
+ */
+
+!function(e){"use strict";let t=function(t,i={}){this.controls=["info","theme","download","play","page","close","autofit","zoom-in","zoom-out","prev","next","fullscreen"],this.controls_default={page:1,close:1,autofit:1,"zoom-in":1,"zoom-out":1,prev:1,next:1,fullscreen:1},this.keycodes={BACKSPACE:8,ESCAPE:27,SPACEBAR:32,LEFT:37,RIGHT:39,UP:38,NUMBLOCK_PLUS:107,PLUS:187,DOWN:40,NUMBLOCK_MINUS:109,MINUS:189,INFO:73};let s=this;Object.assign||(Object.assign=function(e,t){let i=Object.keys(t);for(let s=0,o;s<i.length;s++)e[o=i[s]]=t[o];return e}),Element.prototype.closest||(Element.prototype.closest=function(e){e=e.substring(1);let t=this;for(;t&&1===t.nodeType;){if(t.classList.contains(e))return t;t=t.parentElement}return null}),this.addClass=(e,t)=>{s.toggleClass(e,t,!0)},this.removeClass=(e,t)=>{s.toggleClass(e,t)},this.toggleClass=(e,t,i)=>{e.classList[i?"add":"remove"](t)},this.hasClass=(e,t)=>e.classList.contains(t),this.setStyle=(e,t,i)=>{i=""+i,e["_s_"+t]!==i&&(e.style.setProperty(t,i),e["_s_"+t]=i)};let o=0;this.prepareStyle=(e,t)=>{t&&(s.setStyle(e,"transition","none"),t()),o||(o=e.clientTop&&0),t&&s.setStyle(e,"transition","")},this.setText=(e,t)=>{e.firstChild.nodeValue=t},this.getByClass=(e,t)=>(t||document).getElementsByClassName(e),this.getByTag=(e,t)=>(t||document).getElementsByTagName(e),this.addListener=(e,t,i,o)=>{s.toggleListener(!0,e,t,i,o)},this.removeListener=(e,t,i,o)=>{s.toggleListener(!1,e,t,i,o)},this.toggleListener=(e,t,i,s,o)=>{t[(e?"add":"remove")+"EventListener"](i,s,!o&&!1!==o||o)},this.cancelEvent=(e,t)=>{e.stopPropagation(),t&&e.preventDefault()},this.downloadImage=(e,t)=>{let i=s.createElement("a"),o=t.src;i.href=o,i.download=o.substring(o.lastIndexOf("/")+1),s.body.appendChild(i),i.click(),s.body.removeChild(i)},this.createElement=e=>document.createElement(e),this.toggleDisplay=(e,t)=>{s.setStyle(e,"display",t?"":"none")},this.toggleVisibility=(e,t)=>{s.setStyle(e,"visibility",t?"":"hidden")},this.toggleAnimation=(e,t)=>{s.setStyle(e,"transition",t?"":"none")},this.widget=this.createElement("div"),this.widget.innerHTML="<div class=spl-spinner></div><div class=spl-track><div class=spl-scene><div class=spl-pane></div></div></div><div class=spl-header><div class=spl-page> </div></div><div class=spl-progress></div><div class=spl-footer><div class=spl-title> </div><div class=spl-description> </div><div class=spl-button> </div></div><div class=spl-prev></div><div class=spl-next></div>",this.video_support={},this.tpl_video=this.createElement("video"),this.parse_src=(e,t,i,o)=>{let n,l;if("node"!==o){let a=Object.keys(i);for(let r=0,d;r<a.length;r++)if((d=a[r]).length>3&&0===d.indexOf("src")){if("video"===o){let p=s.video_support[d];if(p){if(p>0){n=i[d];break}}else if(s.tpl_video.canPlayType("video/"+d.substring(3).replace("-","").toLowerCase())){s.video_support[d]=1,n=i[d];break}else s.video_support[d]=-1}else{let c=parseInt(d.substring(4),10);if(c){let h=Math.abs(t-c);(!l||h<l)&&(l=h,n=i[d])}}}}return n||i.src||i.href||e.src||e.href},this.controls_dom={};let n=navigator.connection,l=e.devicePixelRatio||1;this.x,this.y,this.startX,this.startY,this.viewport_w,this.viewport_h,this.media_w,this.media_h,this.scale,this.is_down,this.dragged,this.slidable,this.toggle_autofit,this.toggle_theme,this.current_slide,this.slide_count,this.anchors,this.options,this.options_media,this.options_group,this.options_infinite,this.options_progress,this.options_onshow,this.options_onchange,this.options_onclose,this.options_fit,this.options_autohide,this.options_autoslide,this.options_theme,this.options_preload,this.options_href,this.options_click,this.options_class,this.delay,this.animation_scale,this.animation_fade,this.animation_slide,this.animation_custom,this.body,this.doc,this.panel,this.panes,this.media,this.media_next=this.createElement("img"),this.slider,this.header,this.footer,this.footer_visible=0,this.title,this.description,this.button,this.page_prev,this.page_next,this.maximize,this.page,this.player,this.progress,this.spinner,this.gallery,this.gallery_next,this.playing,this.hide,this.hide_cooldown,this.id="spotlight",this.prefix_request,this.prefix_exit,this.track,this.addListener(document,"click",this.dispatch),this.init=(e,t)=>{s.body||(s.id="spotlight"+t,s.widget.id="spotlight"+t,s.doc=document.body,s.body=e,s.slider=s.getOneByClass("scene"),s.header=s.getOneByClass("header"),s.footer=s.getOneByClass("footer"),s.title=s.getOneByClass("title"),s.description=s.getOneByClass("description"),s.button=s.getOneByClass("button"),s.page_prev=s.getOneByClass("prev"),s.page_next=s.getOneByClass("next"),s.page=s.getOneByClass("page"),s.progress=s.getOneByClass("progress"),s.spinner=s.getOneByClass("spinner"),s.panes=[s.getOneByClass("pane")],s.addControl("close",s.close),s.doc[s.prefix_request="requestFullscreen"]||s.doc[s.prefix_request="msRequestFullscreen"]||s.doc[s.prefix_request="webkitRequestFullscreen"]||s.doc[s.prefix_request="mozRequestFullscreen"]||(s.prefix_request=""),s.prefix_request?(s.prefix_exit=s.prefix_request.replace("request","exit").replace("mozRequest","mozCancel").replace("Request","Exit"),s.maximize=s.addControl("fullscreen",s.fullscreen)):s.controls.pop(),s.addControl("info",s.info),s.addControl("autofit",s.autofit),s.addControl("zoom-in",s.zoom_in),s.addControl("zoom-out",s.zoom_out),s.addControl("theme",s.theme),s.player=s.addControl("play",s.play),s.addControl("download",s.download),s.addListener(s.page_prev,"click",s.prev),s.addListener(s.page_next,"click",s.next),s.track=s.getOneByClass("track"),s.addListener(s.track,"mousedown",s.start),s.addListener(s.track,"mousemove",s.move),s.addListener(s.track,"mouseleave",s.end),s.addListener(s.track,"mouseup",s.end),s.addListener(s.track,"touchstart",s.start,{passive:!1}),s.addListener(s.track,"touchmove",s.move,{passive:!0}),s.addListener(s.track,"touchend",s.end),s.addListener(s.button,"click",function(){s.options_click?s.options_click(s.current_slide,s.options):s.options_href&&(location.href=s.options_href)}))},this.getOneByClass=e=>this.controls_dom[e]=this.getByClass("spl-"+e,this.widget)[0],this.addControl=(e,t,i="")=>{let o=s.createElement("div");return o.className="spl-"+e,o.innerHTML=i,s.addListener(o,"click",t),s.header.appendChild(o),s.controls_dom[e]=o},this.removeControl=e=>{let t=s.controls_dom[e];t&&(s.header.removeChild(t),s.controls_dom[e]=null)},this.dispatch=e=>{let t=e.target.closest(".spotlight");if(t){s.cancelEvent(e,!0);let i=t.closest(".spotlight-group");s.anchors=s.getByClass("spotlight",i);for(let o=0;o<s.anchors.length;o++)if(s.anchors[o]===t){s.options_group=i&&i.dataset,s.init_gallery(o+1);break}}},this.show=(e,t,i)=>{s.anchors=e,t&&(s.options_group=t,s.options_onshow=t.onshow,s.options_onchange=t.onchange,s.options_onclose=t.onclose,i=i||t.index),s.init_gallery(i)},this.panzoom=e=>{s.toggleListener(e,s.track,"wheel",s.wheel_listener,{passive:!1}),s.toggleListener(e,s.track,"mousedown",s.start),s.toggleListener(e,s.track,"mousemove",s.move),s.toggleListener(e,s.track,"mouseleave",s.end),s.toggleListener(e,s.track,"mouseup",s.end),s.toggleListener(e,s.track,"touchstart",s.start,{passive:!1}),s.toggleListener(e,s.track,"touchmove",s.move,{passive:!0}),s.toggleListener(e,s.track,"touchend",s.end)},this.init_gallery=e=>{if(s.slide_count=s.anchors.length,s.slide_count){s.body||s.init(),s.options_onshow&&s.options_onshow(e);let t=s.panes[0],i=t.parentElement;for(let o=s.panes.length;o<s.slide_count;o++){let n=t.cloneNode(!1);s.setStyle(n,"left",100*o+"%"),i.appendChild(n),s.panes[o]=n}s.panel||(s.body.appendChild(s.widget),s.update_widget_viewport()),s.current_slide=e||1,s.toggleAnimation(s.slider),s.setup_page(!0),s.prefix_request&&s.detect_fullscreen(),s.show_gallery()}},this.parse_option=(e,t)=>{let s=i[e];return void 0!==s?"false"!=(s=""+s)&&(s||t):t},this.apply_options=e=>{s.options={},s.options_group&&Object.assign(s.options,s.options_group),Object.assign(s.options,e.dataset||e),s.options_media=s.options.media,s.options_click=s.options.onclick,s.options_theme=s.options.theme,s.options_class=s.options.class,s.options_autohide=s.parse_option("autohide",!1),s.options_infinite=s.parse_option("infinite"),s.options_progress=s.parse_option("progress",!0),s.options_autoslide=s.parse_option("autoslide"),s.options_preload=s.parse_option("preload",!0),s.options_href=s.options.buttonHref,s.delay=s.options_autoslide&&parseFloat(s.options_autoslide)||7,s.toggle_theme||s.options_theme&&s.theme(s.options_theme),s.options_class&&s.addClass(s.widget,s.options_class),s.options_class&&s.prepareStyle(s.widget);let t=s.options.control;if(t){let i="string"==typeof t?t.split(","):t;for(let o=0;o<s.controls.length;o++)s.options[s.controls[o]]=!1;for(let n=0;n<i.length;n++){let l=i[n].trim();"zoom"===l?s.options["zoom-in"]=s.options["zoom-out"]=!0:s.options[l]=!0}}let a=s.options.animation;if(s.animation_scale=s.animation_fade=s.animation_slide=!a,s.animation_custom=!1,a){let r="string"==typeof a?a.split(","):a;for(let d=0;d<r.length;d++){let p=r[d].trim();"scale"===p?s.animation_scale=!0:"fade"===p?s.animation_fade=!0:"slide"===p?s.animation_slide=!0:p&&(s.animation_custom=p)}}s.options_fit=s.options.fit},this.prepare_animation=e=>{e?s.prepareStyle(s.media,s.prepare_animation):(s.toggleAnimation(s.slider,s.animation_slide),s.setStyle(s.media,"opacity",s.animation_fade?0:1),s.update_scroll(s.animation_scale&&.8),s.animation_custom&&s.addClass(s.media,s.animation_custom))},this.init_slide=e=>{if(s.panel=s.panes[e-1],s.media=s.panel.firstChild,s.current_slide=e,s.media)s.disable_autoresizer(),s.options_fit&&s.addClass(s.media,s.options_fit),s.prepare_animation(!0),s.animation_custom&&s.removeClass(s.media,s.animation_custom),s.animation_fade&&s.setStyle(s.media,"opacity",1),s.animation_scale&&s.setStyle(s.media,"transform",""),s.setStyle(s.media,"visibility","visible"),s.gallery_next&&(s.media_next.src=s.gallery_next),s.options_autoslide&&s.animate_bar(s.playing);else{let t=s.gallery.media;if(s.parse_option("spinner",!0),"node"===t){s.media=s.gallery.src,"string"==typeof s.media&&(s.media=gradioApp().querySelector(s.media)),s.media&&(s.media._root||(s.media._root=s.media.parentElement),s.update_media_viewport(),s.panel.appendChild(s.media),s.init_slide(e));return}s.toggle_spinner(s.options_spinner,!0),s.media=s.createElement("img"),s.media.onload=function(){s.media===s&&(s.media.onerror=null,s.toggle_spinner(s.options_spinner),s.init_slide(e),s.update_media_viewport())},s.media.src=s.gallery.src,s.panel.appendChild(s.media),s.media&&(s.options_spinner||s.setStyle(s.media,"visibility","visible"),s.media.onerror=function(){s.media===s&&(s.checkout(s.media),s.addClass(s.spinner,"error"),s.toggle_spinner(s.options_spinner))})}},this.toggle_spinner=(e,t)=>{e&&s.toggleClass(s.spinner,"spin",t)},this.has_fullscreen=()=>document.fullscreen||document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement,this.resize_listener=()=>{if(s.update_widget_viewport(),s.media&&s.update_media_viewport(),s.prefix_request){let e=s.has_fullscreen();s.toggleClass(s.maximize,"on",e),e||s.detect_fullscreen()}},this.detect_fullscreen=()=>{s.toggleDisplay(s.maximize,screen.availHeight-e.innerHeight>0)},this.update_widget_viewport=()=>{s.viewport_w=s.widget.clientWidth,s.viewport_h=s.widget.clientHeight},this.update_media_viewport=()=>{s.media_w=s.media.clientWidth,s.media_h=s.media.clientHeight},this.update_scroll=e=>{s.setStyle(s.media,"transform","translate(-50%, -50%) scale("+(e||s.scale)+")")},this.update_panel=(e,t)=>{s.setStyle(s.panel,"transform",e||t?"translate("+e+"px, "+t+"px)":"")},this.update_slider=(e,t,i)=>{t?s.prepareStyle(s.slider,function(){s.update_slider(e,!1,i)}):s.setStyle(s.slider,"transform","translateX("+(-(100*e)+(i||0))+"%)")},this.toggle_listener=t=>{s.toggleListener(t,e,"keydown",s.key_listener),s.toggleListener(t,e,"resize",s.resize_listener)},this.history_listener=e=>{s.panel&&e.state.spl&&s.close(!0)},this.key_listener=e=>{if(s.panel){let t=!1!==s.options["zoom-in"];switch(e.keyCode){case s.keycodes.BACKSPACE:t&&s.autofit();break;case s.keycodes.SPACEBAR:s.options_autoslide&&s.play();break;case s.keycodes.LEFT:s.prev();break;case s.keycodes.RIGHT:s.next();break;case s.keycodes.NUMBLOCK_PLUS:case s.keycodes.PLUS:t&&s.zoom_in();break;case s.keycodes.NUMBLOCK_MINUS:case s.keycodes.MINUS:t&&s.zoom_out();break;case s.keycodes.INFO:s.info()}}},this.wheel_listener=e=>{if(s.panel&&!1!==s.options["zoom-in"]){let t=e.deltaY;(t=(t<0?1:t?-1:0)*.5)<0?s.zoom_out():s.zoom_in()}},this.play=(e,t)=>{let i="boolean"==typeof e?e:!this.playing;!s.playing===i&&(s.playing=s.playing?clearTimeout(s.playing):1,s.toggleClass(s.player,"on",s.playing),t||s.animate_bar(s.playing))},this.animate_bar=e=>{s.options_progress&&(s.prepareStyle(s.progress,function(){s.setStyle(s.progress,"transition-duration",""),s.setStyle(s.progress,"transform","")}),e&&(s.setStyle(s.progress,"transition-duration",s.delay+"s"),s.setStyle(s.progress,"transform","translateX(0)"))),e&&(s.playing=setTimeout(s.next,1e3*s.delay))},this.autohide=()=>{s.options_autohide&&(s.hide_cooldown=Date.now()+2950,s.hide||(s.addClass(s.widget,"menu"),s.schedule(3e3)))},this.schedule=e=>{s.hide=setTimeout(function(){let e=Date.now();e>=s.hide_cooldown?(s.removeClass(s.widget,"menu"),s.hide=0):s.schedule(s.hide_cooldown-e)},e)},this.menu=e=>{"boolean"==typeof e&&(s.hide=e?s.hide:0),s.hide?(s.hide=clearTimeout(s.hide),s.removeClass(s.widget,"menu")):s.autohide()},this.start=e=>{s.cancelEvent(e,!0),s.is_down=!0,s.dragged=!1;let t=e.touches;t&&(t=t[0])&&(e=t),s.slidable=s.media_w*s.scale<=s.viewport_w,s.startX=e.pageX,s.startY=e.pageY,s.toggleAnimation(s.panel)},this.end=e=>{if(s.cancelEvent(e),s.is_down){if(s.dragged){if(s.slidable&&s.dragged){let t=s.x<-(s.viewport_w/7)&&(s.current_slide<s.slide_count||s.options_infinite),i=t||s.x>s.viewport_w/7&&(s.current_slide>1||s.options_infinite);(t||i)&&(s.update_slider(s.current_slide-1,!0,s.x/s.viewport_w*100),t&&s.next()||i&&s.prev()),s.x=0,s.update_panel()}s.toggleAnimation(s.panel,!0)}else s.menu();s.is_down=!1}},this.move=e=>{if(s.cancelEvent(e),s.is_down){let t=e.touches;t&&(t=t[0])&&(e=t);let i=(s.media_w*s.scale-s.viewport_w)/2;s.x-=s.startX-(s.startX=e.pageX),!s.slidable&&(s.x>i?s.x=i:s.x<-i&&(s.x=-i),s.media_h*s.scale>s.viewport_h&&(i=(s.media_h*s.scale-s.viewport_h)/2,s.y-=s.startY-(s.startY=e.pageY),s.y>i?s.y=i:s.y<-i&&(s.y=-i))),s.dragged=!0,s.update_panel(s.x,s.y)}else s.autohide()},this.fullscreen=e=>{let t=s.has_fullscreen();("boolean"!=typeof e||!!t!==e)&&(t?document[s.prefix_exit]():s.widget[s.prefix_request]())},this.theme=e=>{"string"!=typeof e&&(e=s.toggle_theme?"":s.options_theme||"white"),s.toggle_theme!==e&&(s.toggle_theme&&s.removeClass(s.widget,s.toggle_theme),e&&s.addClass(s.widget,e),s.toggle_theme=e)},this.autofit=e=>{"boolean"==typeof e&&(s.toggle_autofit=!e),s.toggle_autofit=1===s.scale&&!s.toggle_autofit,s.toggleClass(s.media,"autofit",s.toggle_autofit),s.setStyle(s.media,"transform",""),s.scale=1,s.x=0,s.y=0,s.update_media_viewport(),s.toggleAnimation(s.panel),s.update_panel()},this.zoom_in=e=>{let t=s.scale/.65;t<=50&&(s.disable_autoresizer(),s.x/=.65,s.y/=.65,s.update_panel(s.x,s.y),s.zoom(t))},this.zoom_out=e=>{let t=.65*s.scale;s.disable_autoresizer(),t>=1&&(1===t?s.x=s.y=0:(s.x*=.65,s.y*=.65),s.update_panel(s.x,s.y),s.zoom(t))},this.zoom=e=>{s.scale=e||1,s.update_scroll()},this.info=()=>{s.footer_visible=!s.footer_visible,s.toggleVisibility(s.footer,s.footer_visible)},this.disable_autoresizer=()=>{s.toggle_autofit&&s.autofit()},this.show_gallery=()=>{s.toggleAnimation(s.widget,!0),s.addClass(s.body,"hide-scrollbars"),s.addClass(s.widget,"show"),s.toggle_listener(!0),s.update_widget_viewport(),s.resize_listener(),s.autohide(),s.options_autoslide&&s.play(!0,!0)},this.download=()=>{s.downloadImage(s.body,s.media)},this.close=(e,t)=>{if(s.hasClass(s.body,"relative")&&!t){s.fullscreen(!1);return}t||setTimeout(function(){s.body.removeChild(s.widget),s.panel=s.media=s.gallery=s.options=s.options_group=s.anchors=s.options_onshow=s.options_onchange=s.options_onclose=s.options_click=null},200),s.removeClass(s.body,"hide-scrollbars"),s.removeClass(s.widget,"show"),s.fullscreen(!1),s.toggle_listener(),s.gallery_next&&(s.media_next.src=""),s.playing&&s.play(),s.media&&s.checkout(s.media),s.hide&&(s.hide=clearTimeout(s.hide)),s.toggle_theme&&s.theme(),s.options_class&&s.removeClass(s.widget,s.options_class),s.options_onclose&&s.options_onclose(),t&&(s.body.removeChild(s.widget),s.panel=s.media=s.gallery=s.options=s.options_group=s.anchors=s.options_onshow=s.options_onchange=s.options_onclose=s.options_click=null)},this.checkout=e=>{if(e._root)e._root.appendChild(e),e._root=null;else{let t=e.parentNode;t&&t.removeChild(e),e=e.src=e.onerror=""}},this.prev=e=>{if(e&&s.autohide(),s.slide_count>1){if(s.current_slide>1)return s.goto(s.current_slide-1);if(s.options_infinite)return s.update_slider(s.slide_count,!0),s.goto(s.slide_count)}},this.next=e=>{if(e&&s.autohide(),s.slide_count>1){if(s.current_slide<s.slide_count)return s.goto(s.current_slide+1);if(s.options_infinite)return s.update_slider(-1,!0),s.goto(1);s.playing&&s.play()}},this.goto=e=>{if(e!==s.current_slide){s.playing?(clearTimeout(s.playing),s.animate_bar()):s.autohide();let t=e>s.current_slide;return s.current_slide=e,s.setup_page(t),!0}},this.prepare=e=>{let t=s.anchors[s.current_slide-1];s.apply_options(t);let i=n&&n.downlink,o=Math.max(s.viewport_h,s.viewport_w)*l;i&&1200*i<o&&(o=1200*i);let a;if(s.gallery={media:s.options_media,src:s.parse_src(t,o,s.options,s.options_media),title:s.parse_option("title",t.alt||t.title||(a=t.firstElementChild)&&(a.alt||a.title))},s.gallery_next&&(s.media_next.src=s.gallery_next=""),s.options_preload&&e&&(t=s.anchors[s.current_slide])){let r=t.dataset||t,d=r.media;d&&"image"!==d||(s.gallery_next=s.parse_src(t,o,r,d))}for(let p=0;p<s.controls.length;p++){let c=s.controls[p];s.toggleDisplay(s.controls_dom[c],s.parse_option(c,s.controls_default[c]))}},this.setup_page=e=>{if(s.x=0,s.y=0,s.scale=1,s.media){if(s.media.onerror)s.checkout(s.media);else{let t=s.media;setTimeout(function(){t&&s.media!==t&&(s.checkout(t),t=null)},650),s.prepare_animation(),s.update_panel()}}s.footer&&s.toggleVisibility(s.footer,0),s.prepare(e),s.update_slider(s.current_slide-1),s.removeClass(s.spinner,"error"),s.init_slide(s.current_slide),s.toggleAnimation(s.panel),s.update_panel();let i=s.gallery.title,o=s.parse_option("description"),n=s.parse_option("button"),l=i||o||n;l&&(i&&s.setText(s.title,i),o&&s.setText(s.description,o),n&&s.setText(s.button,n),s.toggleDisplay(s.title,i),s.toggleDisplay(s.description,o),s.toggleDisplay(s.button,n),s.setStyle(s.footer,"transform","all"===s.options_autohide?"":"none")),s.options_autohide||s.addClass(s.widget,"menu"),s.toggleVisibility(s.footer,s.footer_visible&&l),s.toggleVisibility(s.page_prev,s.options_infinite||s.current_slide>1),s.toggleVisibility(s.page_next,s.options_infinite||s.current_slide<s.slide_count),s.setText(s.page,s.slide_count>1?s.current_slide+" / "+s.slide_count:""),s.options_onchange&&s.options_onchange(s.current_slide,s.options)}};"undefined"!=typeof module&&void 0!==module.exports?module.exports=t:e.Spotlight=t}(window);

javascript/textualInversion.js

@@ -0,0 +1,14 @@
+function start_training_textual_inversion() {
+    gradioApp().querySelector('#ti_error').innerHTML = '';
+
+    var id = randomId();
+    requestProgress(id, gradioApp().getElementById('ti_output'), gradioApp().getElementById('ti_gallery'), function() {}, function(progress) {
+        gradioApp().getElementById('ti_progress').innerHTML = progress.textinfo;
+    });
+
+    var res = Array.from(arguments);
+
+    res[0] = id;
+
+    return res;
+}