diff --git a/javascript/aspectRatioOverlay.js b/javascript/aspectRatioOverlay.js
index dd7e9f1e..bf80c886 100644
--- a/javascript/aspectRatioOverlay.js
+++ b/javascript/aspectRatioOverlay.js
@@ -10,90 +10,112 @@ function dimensionChange(e, is_width, is_height) {
         currentHeight = e.target.value * 1.0;
     }
 
-    var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block";
+    let inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block";
 
     if (!inImg2img) {
         return;
     }
 
-    var targetElement = null;
+    let targetElement = null;
 
-    var tabIndex = get_tab_index('mode_img2img');
-    if (tabIndex == 0) { // img2img
-        targetElement = gradioApp().querySelector('#img2img_image div[class=forge-image-container] img');
-    } else if (tabIndex == 1) { //Sketch
-        targetElement = gradioApp().querySelector('#img2img_sketch div[class=forge-image-container] img');
-    } else if (tabIndex == 2) { // Inpaint
-        targetElement = gradioApp().querySelector('#img2maskimg div[class=forge-image-container] img');
-    } else if (tabIndex == 3) { // Inpaint sketch
-        targetElement = gradioApp().querySelector('#inpaint_sketch div[class=forge-image-container] img');
-    } else if (tabIndex == 4) { // Inpaint upload
-        targetElement = gradioApp().querySelector('#img_inpaint_base div[data-testid=image] img');
+    let tabIndex = get_tab_index("mode_img2img");
+    if (tabIndex == 0) {
+        // img2img
+        targetElement = gradioApp().querySelector(
+            "#img2img_image div[class=forge-image-container] img",
+        );
+    } else if (tabIndex == 1) {
+        // Sketch
+        targetElement = gradioApp().querySelector(
+            "#img2img_sketch div[class=forge-image-container] img",
+        );
+    } else if (tabIndex == 2) {
+        // Inpaint
+        targetElement = gradioApp().querySelector(
+            "#img2maskimg div[class=forge-image-container] img",
+        );
+    } else if (tabIndex == 3) {
+        // Inpaint sketch
+        targetElement = gradioApp().querySelector(
+            "#inpaint_sketch div[class=forge-image-container] img",
+        );
+    } else if (tabIndex == 4) {
+        // Inpaint upload
+        targetElement = gradioApp().querySelector(
+            "#img_inpaint_base div[data-testid=image] img",
+        );
     }
 
     if (targetElement) {
-        var arPreviewRect = gradioApp().querySelector('#imageARPreview');
+        let arPreviewRect = gradioApp().querySelector("#imageARPreview");
         if (!arPreviewRect) {
-            arPreviewRect = document.createElement('div');
+            arPreviewRect = document.createElement("div");
             arPreviewRect.id = "imageARPreview";
             gradioApp().appendChild(arPreviewRect);
         }
 
-        var viewportOffset = targetElement.getBoundingClientRect();
-        var viewportscale = Math.min(targetElement.clientWidth / targetElement.width, targetElement.clientHeight / targetElement.height);
+        let viewportOffset = targetElement.getBoundingClientRect();
+        let viewportscale = Math.min(
+            targetElement.clientWidth / targetElement.width,
+            targetElement.clientHeight / targetElement.height,
+        );
 
-        var scaledx = targetElement.width * viewportscale;
-        var scaledy = targetElement.height * viewportscale;
+        let scaledx = targetElement.width * viewportscale;
+        let scaledy = targetElement.height * viewportscale;
 
-        var clientRectTop = (viewportOffset.top + window.scrollY);
-        var clientRectLeft = (viewportOffset.left + window.scrollX);
-        var clientRectCentreY = clientRectTop + (targetElement.clientHeight / 2);
-        var clientRectCentreX = clientRectLeft + (targetElement.clientWidth / 2);
+        let clientRectTop = viewportOffset.top + window.scrollY;
+        let clientRectLeft = viewportOffset.left + window.scrollX;
+        let clientRectCentreY = clientRectTop + targetElement.clientHeight / 2;
+        let clientRectCentreX = clientRectLeft + targetElement.clientWidth / 2;
 
-        var arscale = Math.min(scaledx / currentWidth, scaledy / currentHeight);
-        var arscaledx = currentWidth * arscale;
-        var arscaledy = currentHeight * arscale;
+        let arscale = Math.min(scaledx / currentWidth, scaledy / currentHeight);
+        let arscaledx = currentWidth * arscale;
+        let arscaledy = currentHeight * arscale;
 
-        var arRectTop = clientRectCentreY - (arscaledy / 2);
-        var arRectLeft = clientRectCentreX - (arscaledx / 2);
-        var arRectWidth = arscaledx;
-        var arRectHeight = arscaledy;
+        let arRectTop = clientRectCentreY - arscaledy / 2;
+        let arRectLeft = clientRectCentreX - arscaledx / 2;
+        let arRectWidth = arscaledx;
+        let arRectHeight = arscaledy;
 
-        arPreviewRect.style.top = arRectTop + 'px';
-        arPreviewRect.style.left = arRectLeft + 'px';
-        arPreviewRect.style.width = arRectWidth + 'px';
-        arPreviewRect.style.height = arRectHeight + 'px';
+        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';
+        arFrameTimeout = setTimeout(function () {
+            arPreviewRect.style.display = "none";
         }, 2000);
 
-        arPreviewRect.style.display = 'block';
+        arPreviewRect.style.display = "block";
     }
 }
 
-onAfterUiUpdate(function() {
-    var arPreviewRect = gradioApp().querySelector('#imageARPreview');
+onAfterUiUpdate(function () {
+    let arPreviewRect = gradioApp().querySelector("#imageARPreview");
     if (arPreviewRect) {
-        arPreviewRect.style.display = 'none';
+        arPreviewRect.style.display = "none";
     }
 
-    var tabImg2img = gradioApp().querySelector("#tab_img2img");
+    let tabImg2img = gradioApp().querySelector("#tab_img2img");
     if (tabImg2img) {
         if (tabImg2img.style.display == "block") {
-            let inputs = gradioApp().querySelectorAll('input');
-            inputs.forEach(function(e) {
-                var is_width = (e.parentElement.id == "img2img_width" && e.type == "range") || 
-					(e.parentElement.parentElement.parentElement.id == "img2img_width" && e.type == "number");
-                var is_height = (e.parentElement.id == "img2img_height" && e.type == "range") || 
-					(e.parentElement.parentElement.parentElement.id == "img2img_height" && e.type == "number");
+            let inputs = gradioApp().querySelectorAll("input");
+            inputs.forEach(function (e) {
+                let is_width =
+                    (e.parentElement.id == "img2img_width" && e.type == "range") ||
+                    (e.parentElement.parentElement.parentElement.id == "img2img_width" &&
+                        e.type == "number");
+                let is_height =
+                    (e.parentElement.id == "img2img_height" && e.type == "range") ||
+                    (e.parentElement.parentElement.parentElement.id == "img2img_height" &&
+                        e.type == "number");
 
-                if ((is_width || is_height) && !e.classList.contains('scrollwatch')) {
-                    e.addEventListener('input', function(e) {
+                if ((is_width || is_height) && !e.classList.contains("scrollwatch")) {
+                    e.addEventListener("input", function (e) {
                         dimensionChange(e, is_width, is_height);
                     });
-                    e.classList.add('scrollwatch');
+                    e.classList.add("scrollwatch");
                 }
                 if (is_width) {
                     currentWidth = e.value * 1.0;
diff --git a/javascript/contextMenus.js b/javascript/contextMenus.js
index fc2ae43c..f2931d4e 100644
--- a/javascript/contextMenus.js
+++ b/javascript/contextMenus.js
@@ -1,69 +1,70 @@
-
-var contextMenuInit = function() {
+let contextMenuInit = function () {
     let eventListenerApplied = false;
     let menuSpecs = new Map();
 
-    const uid = function() {
+    const uid = function () {
         return Date.now().toString(36) + Math.random().toString(36).substring(2);
     };
 
     function showContextMenu(event, element, menuEntries) {
-        let oldMenu = gradioApp().querySelector('#context-menu');
+        let oldMenu = gradioApp().querySelector("#context-menu");
         if (oldMenu) {
             oldMenu.remove();
         }
 
         let baseStyle = window.getComputedStyle(uiCurrentTab);
 
-        const contextMenu = document.createElement('nav');
+        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 = event.pageY + 'px';
-        contextMenu.style.left = event.pageX + 'px';
+        contextMenu.style.top = event.pageY + "px";
+        contextMenu.style.left = event.pageX + "px";
 
-        const contextMenuList = document.createElement('ul');
-        contextMenuList.className = 'context-menu-items';
+        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']();
+        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);
     }
 
-    function appendContextMenuOption(targetElementSelector, entryName, entryFunction) {
-
-        var currentItems = menuSpecs.get(targetElementSelector);
+    function appendContextMenuOption(
+        targetElementSelector,
+        entryName,
+        entryFunction,
+    ) {
+        let currentItems = menuSpecs.get(targetElementSelector);
 
         if (!currentItems) {
             currentItems = [];
             menuSpecs.set(targetElementSelector, currentItems);
         }
         let newItem = {
-            id: targetElementSelector + '_' + uid(),
+            id: targetElementSelector + "_" + uid(),
             name: entryName,
             func: entryFunction,
-            isNew: true
+            isNew: true,
         };
 
         currentItems.push(newItem);
-        return newItem['id'];
+        return newItem["id"];
     }
 
     function removeContextMenuOption(uid) {
-        menuSpecs.forEach(function(v) {
+        menuSpecs.forEach(function (v) {
             let index = -1;
-            v.forEach(function(e, ei) {
-                if (e['id'] == uid) {
+            v.forEach(function (e, ei) {
+                if (e["id"] == uid) {
                     index = ei;
                 }
             });
@@ -77,28 +78,28 @@ var contextMenuInit = function() {
         if (eventListenerApplied) {
             return;
         }
-        gradioApp().addEventListener("click", function(e) {
+        gradioApp().addEventListener("click", function (e) {
             if (!e.isTrusted) {
                 return;
             }
 
-            let oldMenu = gradioApp().querySelector('#context-menu');
+            let oldMenu = gradioApp().querySelector("#context-menu");
             if (oldMenu) {
                 oldMenu.remove();
             }
         });
-        ['contextmenu', 'touchstart'].forEach((eventType) => {
-            gradioApp().addEventListener(eventType, function(e) {
+        ["contextmenu", "touchstart"].forEach((eventType) => {
+            gradioApp().addEventListener(eventType, function (e) {
                 let ev = e;
-                if (eventType.startsWith('touch')) {
+                if (eventType.startsWith("touch")) {
                     if (e.touches.length !== 2) return;
                     ev = e.touches[0];
                 }
-                let oldMenu = gradioApp().querySelector('#context-menu');
+                let oldMenu = gradioApp().querySelector("#context-menu");
                 if (oldMenu) {
                     oldMenu.remove();
                 }
-                menuSpecs.forEach(function(v, k) {
+                menuSpecs.forEach(function (v, k) {
                     if (e.composedPath()[0].matches(k)) {
                         showContextMenu(ev, e.composedPath()[0], v);
                         e.preventDefault();
@@ -107,77 +108,108 @@ var contextMenuInit = function() {
             });
         });
         eventListenerApplied = true;
-
     }
 
-    return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener];
+    return [
+        appendContextMenuOption,
+        removeContextMenuOption,
+        addContextMenuEventListener,
+    ];
 };
 
-var initResponse = contextMenuInit();
-var appendContextMenuOption = initResponse[0];
-var removeContextMenuOption = initResponse[1];
-var addContextMenuEventListener = initResponse[2];
+let initResponse = contextMenuInit();
+let appendContextMenuOption = initResponse[0];
+let removeContextMenuOption = initResponse[1];
+let addContextMenuEventListener = initResponse[2];
 
-var regen_txt2img = null;
-var regen_img2img = null;
+let regen_txt2img = null;
+let regen_img2img = null;
 
-(function() {
+(function () {
     //Start example Context Menu Items
-    let generateOnRepeat_txt2img = function() {
-		if ((regen_txt2img == null) && (regen_img2img == null)) {
-			let generate = gradioApp().querySelector('#txt2img_generate');
-			let interrupt = gradioApp().querySelector('#txt2img_interrupt');
-			if (!interrupt.offsetParent) {
-				generate.click();
-			}
+    let generateOnRepeat_txt2img = function () {
+        if (regen_txt2img == null && regen_img2img == null) {
+            let generate = gradioApp().querySelector("#txt2img_generate");
+            let interrupt = gradioApp().querySelector("#txt2img_interrupt");
+            if (!interrupt.offsetParent) {
+                generate.click();
+            }
 
-			regen_txt2img = setInterval(function() {
-				if (interrupt.style.display == 'none') {
-					generate.click();
-					interrupt.style.display = 'block';
-				}
-			},
-			500);
-		}
+            regen_txt2img = setInterval(function () {
+                if (interrupt.style.display == "none") {
+                    generate.click();
+                    interrupt.style.display = "block";
+                }
+            }, 500);
+        }
     };
-    appendContextMenuOption('#txt2img_generate', 'Generate forever', generateOnRepeat_txt2img);
-    appendContextMenuOption('#txt2img_interrupt', 'Generate forever', generateOnRepeat_txt2img);
+    appendContextMenuOption(
+        "#txt2img_generate",
+        "Generate forever",
+        generateOnRepeat_txt2img,
+    );
+    appendContextMenuOption(
+        "#txt2img_interrupt",
+        "Generate forever",
+        generateOnRepeat_txt2img,
+    );
 
-    let cancel_regen_txt2img = function() {
+    let cancel_regen_txt2img = function () {
         clearInterval(regen_txt2img);
-		regen_txt2img = null;
+        regen_txt2img = null;
     };
-    appendContextMenuOption('#txt2img_interrupt', 'Cancel generate forever', cancel_regen_txt2img);
-    appendContextMenuOption('#txt2img_generate', 'Cancel generate forever', cancel_regen_txt2img);
+    appendContextMenuOption(
+        "#txt2img_interrupt",
+        "Cancel generate forever",
+        cancel_regen_txt2img,
+    );
+    appendContextMenuOption(
+        "#txt2img_generate",
+        "Cancel generate forever",
+        cancel_regen_txt2img,
+    );
 
-    let generateOnRepeat_img2img = function() {
-		if ((regen_txt2img == null) && (regen_img2img == null)) {
-			let generate = gradioApp().querySelector('#img2img_generate');
-			let interrupt = gradioApp().querySelector('#img2img_interrupt');
-			if (!interrupt.offsetParent) {
-				generate.click();
-			}
+    let generateOnRepeat_img2img = function () {
+        if (regen_txt2img == null && regen_img2img == null) {
+            let generate = gradioApp().querySelector("#img2img_generate");
+            let interrupt = gradioApp().querySelector("#img2img_interrupt");
+            if (!interrupt.offsetParent) {
+                generate.click();
+            }
 
-			regen_img2img = setInterval(function() {
-				if (interrupt.style.display == 'none') {
-					generate.click();
-					interrupt.style.display = 'block';
-				}
-			},
-			500);
-		}
+            regen_img2img = setInterval(function () {
+                if (interrupt.style.display == "none") {
+                    generate.click();
+                    interrupt.style.display = "block";
+                }
+            }, 500);
+        }
     };
-    appendContextMenuOption('#img2img_generate', 'Generate forever', generateOnRepeat_img2img);
-    appendContextMenuOption('#img2img_interrupt', 'Generate forever', generateOnRepeat_img2img);
+    appendContextMenuOption(
+        "#img2img_generate",
+        "Generate forever",
+        generateOnRepeat_img2img,
+    );
+    appendContextMenuOption(
+        "#img2img_interrupt",
+        "Generate forever",
+        generateOnRepeat_img2img,
+    );
 
-    let cancel_regen_img2img = function() {
+    let cancel_regen_img2img = function () {
         clearInterval(regen_img2img);
-		regen_img2img = null;
+        regen_img2img = null;
     };
-    appendContextMenuOption('#img2img_interrupt', 'Cancel generate forever', cancel_regen_img2img);
-    appendContextMenuOption('#img2img_generate', 'Cancel generate forever', cancel_regen_img2img);
-
+    appendContextMenuOption(
+        "#img2img_interrupt",
+        "Cancel generate forever",
+        cancel_regen_img2img,
+    );
+    appendContextMenuOption(
+        "#img2img_generate",
+        "Cancel generate forever",
+        cancel_regen_img2img,
+    );
 })();
 
-
 onAfterUiUpdate(addContextMenuEventListener);
diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js
index 2b7a1456..eca83496 100644
--- a/javascript/dragdrop.js
+++ b/javascript/dragdrop.js
@@ -1,7 +1,11 @@
 // 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);
+    return (
+        files &&
+        files?.length === 1 &&
+        ["image/png", "image/gif", "image/jpeg"].includes(files[0].type)
+    );
 }
 
 function dropReplaceImage(imgWrap, files) {
@@ -11,7 +15,11 @@ function dropReplaceImage(imgWrap, files) {
 
     const tmpFile = files[0];
 
-    imgWrap.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click();
+    imgWrap
+        .querySelector(
+            ".modify-upload button + button, .touch-none + div button + button",
+        )
+        ?.click();
     const callback = () => {
         const fileInput = imgWrap.querySelector('input[type="file"]');
         if (fileInput) {
@@ -22,7 +30,7 @@ function dropReplaceImage(imgWrap, files) {
             } else {
                 fileInput.files = files;
             }
-            fileInput.dispatchEvent(new Event('change'));
+            fileInput.dispatchEvent(new Event("change"));
         }
     };
 
@@ -32,7 +40,8 @@ function dropReplaceImage(imgWrap, files) {
 function eventHasFiles(e) {
     if (!e.dataTransfer || !e.dataTransfer.files) return false;
     if (e.dataTransfer.files.length > 0) return true;
-    if (e.dataTransfer.items.length > 0 && e.dataTransfer.items[0].kind == "file") return true;
+    if (e.dataTransfer.items.length > 0 && e.dataTransfer.items[0].kind == "file")
+        return true;
 
     return false;
 }
@@ -47,60 +56,66 @@ function isURL(url) {
 }
 
 function dragDropTargetIsPrompt(target) {
-    if (target?.placeholder && target?.placeholder.indexOf("Prompt") >= 0) return true;
-    if (target?.parentNode?.parentNode?.className?.indexOf("prompt") > 0) return true;
+    if (target?.placeholder && target?.placeholder.indexOf("Prompt") >= 0)
+        return true;
+    if (target?.parentNode?.parentNode?.className?.indexOf("prompt") > 0)
+        return true;
     return false;
 }
 
-window.document.addEventListener('dragover', e => {
+window.document.addEventListener("dragover", (e) => {
     const target = e.composedPath()[0];
     if (!eventHasFiles(e)) return;
 
-    var targetImage = target.closest('[data-testid="image"]');
+    let targetImage = target.closest('[data-testid="image"]');
     if (!dragDropTargetIsPrompt(target) && !targetImage) return;
 
     e.stopPropagation();
     e.preventDefault();
-    e.dataTransfer.dropEffect = 'copy';
+    e.dataTransfer.dropEffect = "copy";
 });
 
-window.document.addEventListener('drop', async e => {
+window.document.addEventListener("drop", async (e) => {
     const target = e.composedPath()[0];
-    const url = e.dataTransfer.getData('text/uri-list') || e.dataTransfer.getData('text/plain');
+    const url =
+        e.dataTransfer.getData("text/uri-list") ||
+        e.dataTransfer.getData("text/plain");
     if (!eventHasFiles(e) && !isURL(url)) return;
 
     if (dragDropTargetIsPrompt(target)) {
         e.stopPropagation();
         e.preventDefault();
 
-        const isImg2img = get_tab_index('tabs') == 1;
-        let prompt_image_target = isImg2img ? "img2img_prompt_image" : "txt2img_prompt_image";
+        const isImg2img = get_tab_index("tabs") == 1;
+        let prompt_image_target = isImg2img
+            ? "img2img_prompt_image"
+            : "txt2img_prompt_image";
 
         const imgParent = gradioApp().getElementById(prompt_image_target);
         const files = e.dataTransfer.files;
         const fileInput = imgParent.querySelector('input[type="file"]');
         if (eventHasFiles(e) && fileInput) {
             fileInput.files = files;
-            fileInput.dispatchEvent(new Event('change'));
+            fileInput.dispatchEvent(new Event("change"));
         } else if (url) {
             try {
                 const request = await fetch(url);
                 if (!request.ok) {
-                    console.error('Error fetching URL:', url, request.status);
+                    console.error("Error fetching URL:", url, request.status);
                     return;
                 }
                 const data = new DataTransfer();
-                data.items.add(new File([await request.blob()], 'image.png'));
+                data.items.add(new File([await request.blob()], "image.png"));
                 fileInput.files = data.files;
-                fileInput.dispatchEvent(new Event('change'));
+                fileInput.dispatchEvent(new Event("change"));
             } catch (error) {
-                console.error('Error fetching URL:', url, error);
+                console.error("Error fetching URL:", url, error);
                 return;
             }
         }
     }
 
-    var targetImage = target.closest('[data-testid="image"]');
+    let targetImage = target.closest('[data-testid="image"]');
     if (targetImage) {
         e.stopPropagation();
         e.preventDefault();
@@ -110,28 +125,30 @@ window.document.addEventListener('drop', async e => {
     }
 });
 
-window.addEventListener('paste', e => {
+window.addEventListener("paste", (e) => {
     const files = e.clipboardData.files;
     if (!isValidImageList(files)) {
         return;
     }
 
-    const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
-        .filter(el => uiElementIsVisible(el))
+    const visibleImageFields = [
+        ...gradioApp().querySelectorAll('[data-testid="image"]'),
+    ]
+        .filter((el) => uiElementIsVisible(el))
         .sort((a, b) => uiElementInSight(b) - uiElementInSight(a));
 
-
     if (!visibleImageFields.length) {
         return;
     }
 
-    const firstFreeImageField = visibleImageFields
-        .filter(el => !el.querySelector('img'))?.[0];
+    const firstFreeImageField = visibleImageFields.filter(
+        (el) => !el.querySelector("img"),
+    )?.[0];
 
     dropReplaceImage(
-        firstFreeImageField ?
-            firstFreeImageField :
-            visibleImageFields[visibleImageFields.length - 1]
-        , files
+        firstFreeImageField
+            ? firstFreeImageField
+            : visibleImageFields[visibleImageFields.length - 1],
+        files,
     );
 });
diff --git a/javascript/edit-attention.js b/javascript/edit-attention.js
index b07ba97c..46ff6eb6 100644
--- a/javascript/edit-attention.js
+++ b/javascript/edit-attention.js
@@ -47,7 +47,7 @@ function keyupEditAttention(event) {
 
     function selectCurrentWord() {
         if (selectionStart !== selectionEnd) return false;
-        const whitespace_delimiters = {"Tab": "\t", "Carriage Return": "\r", "Line Feed": "\n"};
+        const whitespace_delimiters = { "Tab": "\t", "Carriage Return": "\r", "Line Feed": "\n" };
         let delimiters = opts.keyedit_delimiters;
 
         for (let i of opts.keyedit_delimiters_whitespace) {
diff --git a/javascript/edit-order.js b/javascript/edit-order.js
index ed4ef9ac..44a5120e 100644
--- a/javascript/edit-order.js
+++ b/javascript/edit-order.js
@@ -4,7 +4,10 @@ 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 (
+        !target.matches("*:is([id*='_toprow'] [id*='_prompt'], .prompt) textarea")
+    )
+        return;
     if (!event.altKey) return;
 
     let isLeft = event.key == "ArrowLeft";
@@ -23,7 +26,8 @@ function keyupEditOrder(event) {
     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.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));
@@ -36,6 +40,6 @@ function keyupEditOrder(event) {
     updateInput(target);
 }
 
-addEventListener('keydown', (event) => {
+addEventListener("keydown", (event) => {
     keyupEditOrder(event);
 });
diff --git a/javascript/extensions.js b/javascript/extensions.js
index cc8ee220..c7b34380 100644
--- a/javascript/extensions.js
+++ b/javascript/extensions.js
@@ -1,12 +1,13 @@
-
 function extensions_apply(_disabled_list, _update_list, disable_all) {
-    var disable = [];
-    var update = [];
-    const extensions_input = gradioApp().querySelectorAll('#extensions input[type="checkbox"]');
+    let disable = [];
+    let update = [];
+    const extensions_input = gradioApp().querySelectorAll(
+        '#extensions input[type="checkbox"]',
+    );
     if (extensions_input.length == 0) {
         throw Error("Extensions page not yet loaded.");
     }
-    extensions_input.forEach(function(x) {
+    extensions_input.forEach(function (x) {
         if (x.name.startsWith("enable_") && !x.checked) {
             disable.push(x.name.substring(7));
         }
@@ -22,23 +23,29 @@ function extensions_apply(_disabled_list, _update_list, disable_all) {
 }
 
 function extensions_check() {
-    var disable = [];
+    let 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 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...";
-    });
+    gradioApp()
+        .querySelectorAll("#extensions .extension_status")
+        .forEach(function (x) {
+            x.innerHTML = "Loading...";
+        });
 
-
-    var id = randomId();
-    requestProgress(id, gradioApp().getElementById('extensions_installed_html'), null, function() {
-
-    });
+    let id = randomId();
+    requestProgress(
+        id,
+        gradioApp().getElementById("extensions_installed_html"),
+        null,
+        function () { },
+    );
 
     return [id, JSON.stringify(disable)];
 }
@@ -47,14 +54,18 @@ function install_extension_from_index(button, url) {
     button.disabled = "disabled";
     button.value = "Installing...";
 
-    var textarea = gradioApp().querySelector('#extension_to_install textarea');
+    let textarea = gradioApp().querySelector("#extension_to_install textarea");
     textarea.value = url;
     updateInput(textarea);
 
-    gradioApp().querySelector('#install_extension_button').click();
+    gradioApp().querySelector("#install_extension_button").click();
 }
 
-function config_state_confirm_restore(_, config_state_name, config_restore_type) {
+function config_state_confirm_restore(
+    _,
+    config_state_name,
+    config_restore_type,
+) {
     if (config_state_name == "Current") {
         return [false, config_state_name, config_restore_type];
     }
@@ -66,30 +77,41 @@ function config_state_confirm_restore(_, config_state_name, config_restore_type)
     } 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 + ".");
+    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...";
-        });
+        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;
-    });
+    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')) {
+    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;
+    gradioApp().querySelector("#extensions .all_extensions_toggle").checked =
+        all_extensions_toggled;
 }
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 1306302f..58f3db41 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -1,172 +1,209 @@
 function toggleCss(key, css, enable) {
-    var style = document.getElementById(key);
+    let style = document.getElementById(key);
     if (enable && !style) {
-        style = document.createElement('style');
+        style = document.createElement("style");
         style.id = key;
-        style.type = 'text/css';
+        style.type = "text/css";
         document.head.appendChild(style);
     }
     if (style && !enable) {
         document.head.removeChild(style);
     }
     if (style) {
-        style.innerHTML == '';
+        style.innerHTML == "";
         style.appendChild(document.createTextNode(css));
     }
 }
 
 function setupExtraNetworksForTab(tabname) {
     function registerPrompt(tabname, id) {
-        var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
+        let textarea = gradioApp().querySelector("#" + id + " > label > textarea");
 
         if (!activePromptTextarea[tabname]) {
             activePromptTextarea[tabname] = textarea;
         }
 
-        textarea.addEventListener("focus", function() {
+        textarea.addEventListener("focus", function () {
             activePromptTextarea[tabname] = textarea;
         });
     }
 
-    var tabnav = gradioApp().querySelector('#' + tabname + '_extra_tabs > div.tab-nav');
-    var controlsDiv = document.createElement('DIV');
-    controlsDiv.classList.add('extra-networks-controls-div');
+    let tabnav = gradioApp().querySelector(
+        "#" + tabname + "_extra_tabs > div.tab-nav",
+    );
+    let controlsDiv = document.createElement("DIV");
+    controlsDiv.classList.add("extra-networks-controls-div");
     tabnav.appendChild(controlsDiv);
     tabnav.insertBefore(controlsDiv, null);
 
-    var this_tab = gradioApp().querySelector('#' + tabname + '_extra_tabs');
-    this_tab.querySelectorAll(":scope > [id^='" + tabname + "_']").forEach(function(elem) {
-        // tabname_full = {tabname}_{extra_networks_tabname}
-        var tabname_full = elem.id;
-        var search = gradioApp().querySelector("#" + tabname_full + "_extra_search");
-        var sort_dir = gradioApp().querySelector("#" + tabname_full + "_extra_sort_dir");
-        var refresh = gradioApp().querySelector("#" + tabname_full + "_extra_refresh");
-        var currentSort = '';
+    let this_tab = gradioApp().querySelector("#" + tabname + "_extra_tabs");
+    this_tab
+        .querySelectorAll(":scope > [id^='" + tabname + "_']")
+        .forEach(function (elem) {
+            // tabname_full = {tabname}_{extra_networks_tabname}
+            let tabname_full = elem.id;
+            let search = gradioApp().querySelector(
+                "#" + tabname_full + "_extra_search",
+            );
+            let sort_dir = gradioApp().querySelector(
+                "#" + tabname_full + "_extra_sort_dir",
+            );
+            let refresh = gradioApp().querySelector(
+                "#" + tabname_full + "_extra_refresh",
+            );
+            let currentSort = "";
 
-        // If any of the buttons above don't exist, we want to skip this iteration of the loop.
-        if (!search || !sort_dir || !refresh) {
-            return; // `return` is equivalent of `continue` but for forEach loops.
-        }
-
-        var applyFilter = function(force) {
-            var searchTerm = search.value.toLowerCase();
-
-            // get UI preset
-            radioUI = gradioApp().querySelector('#forge_ui_preset');
-            radioButtons = radioUI.getElementsByTagName('input');
-            UIresult = 3;   //  default to 'all'
-            for (i = 0; i < radioButtons.length; i++) {
-                if (radioButtons[i].checked) {
-                    UIresult = i;
-                }
+            // If any of the buttons above don't exist, we want to skip this iteration of the loop.
+            if (!search || !sort_dir || !refresh) {
+                return; // `return` is equivalent of `continue` but for forEach loops.
             }
 
-            gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) {
-                var searchOnly = elem.querySelector('.search_only');
-                var text = Array.prototype.map.call(elem.querySelectorAll('.search_terms, .description'), function(t) {
-                    return t.textContent.toLowerCase();
-                }).join(" ");
+            let applyFilter = function (force) {
+                let searchTerm = search.value.toLowerCase();
 
-                var visible = true;
-                if (searchOnly && searchTerm.length < 4)    visible = false;
+                // get UI preset
+                radioUI = gradioApp().querySelector("#forge_ui_preset");
+                radioButtons = radioUI.getElementsByTagName("input");
+                UIresult = 3; //  default to 'all'
+                for (i = 0; i < radioButtons.length; i++) {
+                    if (radioButtons[i].checked) {
+                        UIresult = i;
+                    }
+                }
 
-                splitSearch = searchTerm.split(" ");
-                splitSearch.forEach(function(partial) {
-                    if (text.indexOf(partial) == -1)        visible = false;
-                })
+                gradioApp()
+                    .querySelectorAll("#" + tabname + "_extra_tabs div.card")
+                    .forEach(function (elem) {
+                        let searchOnly = elem.querySelector(".search_only");
+                        let text = Array.prototype.map
+                            .call(
+                                elem.querySelectorAll(".search_terms, .description"),
+                                function (t) {
+                                    return t.textContent.toLowerCase();
+                                },
+                            )
+                            .join(" ");
 
-                sdversion = elem.getAttribute('data-sort-sdversion');
-                if (sdversion == null) ;
-                else if (sdversion == 'SdVersion.Unknown')  ;
-                else if (opts.lora_filter_disabled == True) ;
-                else if (UIresult == 3) ;   //  'all'
-                else if (UIresult == 0) {   //  'sd'
-                    if (sdversion != 'SdVersion.SD1' && sdversion != 'SdVersion.SD2')   visible = false;
+                        let visible = true;
+                        if (searchOnly && searchTerm.length < 4) visible = false;
+
+                        splitSearch = searchTerm.split(" ");
+                        splitSearch.forEach(function (partial) {
+                            if (text.indexOf(partial) == -1) visible = false;
+                        });
+
+                        sdversion = elem.getAttribute("data-sort-sdversion");
+                        if (sdversion == null);
+                        else if (sdversion == "SdVersion.Unknown");
+                        else if (opts.lora_filter_disabled == True);
+                        else if (UIresult == 3); //  'all'
+                        else if (UIresult == 0) {
+                            //  'sd'
+                            if (sdversion != "SdVersion.SD1" && sdversion != "SdVersion.SD2")
+                                visible = false;
+                        } else if (UIresult == 1) {
+                            //  'xl'
+                            if (sdversion != "SdVersion.SDXL") visible = false;
+                        } else if (UIresult == 2) {
+                            //  'flux'
+                            if (sdversion != "SdVersion.Flux") visible = false;
+                        }
+
+                        if (visible) {
+                            elem.classList.remove("hidden");
+                        } else {
+                            elem.classList.add("hidden");
+                        }
+                    });
+
+                applySort(force);
+            };
+
+            let applySort = function (force) {
+                let cards = gradioApp().querySelectorAll(
+                    "#" + tabname_full + " div.card",
+                );
+                let parent = gradioApp().querySelector("#" + tabname_full + "_cards");
+                let reverse = sort_dir.dataset.sortdir == "Descending";
+                let activeSearchElem = gradioApp().querySelector(
+                    "#" +
+                    tabname_full +
+                    "_controls .extra-network-control--sort.extra-network-control--enabled",
+                );
+                let sortKey = activeSearchElem
+                    ? activeSearchElem.dataset.sortkey
+                    : "default";
+                let sortKeyDataField =
+                    "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1);
+                let sortKeyStore =
+                    sortKey + "-" + sort_dir.dataset.sortdir + "-" + cards.length;
+
+                if (sortKeyStore == currentSort && !force) {
+                    return;
                 }
-                else if (UIresult == 1) {   //  'xl'
-                    if (sdversion != 'SdVersion.SDXL')  visible = false;
-                }
-                else if (UIresult == 2) {   //  'flux'
-                    if (sdversion != 'SdVersion.Flux')  visible = false;
-                }
-                
-                if (visible) {
-                    elem.classList.remove("hidden");
-                } else {
-                    elem.classList.add("hidden");
+                currentSort = sortKeyStore;
+
+                let sortedCards = Array.from(cards);
+                sortedCards.sort(function (cardA, cardB) {
+                    let a = cardA.dataset[sortKeyDataField];
+                    let b = cardB.dataset[sortKeyDataField];
+                    if (!isNaN(a) && !isNaN(b)) {
+                        return parseInt(a) - parseInt(b);
+                    }
+
+                    return a < b ? -1 : a > b ? 1 : 0;
+                });
+
+                if (reverse) {
+                    sortedCards.reverse();
                 }
+
+                parent.innerHTML = "";
+
+                let frag = document.createDocumentFragment();
+                sortedCards.forEach(function (card) {
+                    frag.appendChild(card);
+                });
+                parent.appendChild(frag);
+            };
+
+            search.addEventListener("input", function () {
+                applyFilter();
             });
-
-            applySort(force);
-        };
-
-
-        var applySort = function(force) {
-            var cards = gradioApp().querySelectorAll('#' + tabname_full + ' div.card');
-            var parent = gradioApp().querySelector('#' + tabname_full + "_cards");
-            var reverse = sort_dir.dataset.sortdir == "Descending";
-            var activeSearchElem = gradioApp().querySelector('#' + tabname_full + "_controls .extra-network-control--sort.extra-network-control--enabled");
-            var sortKey = activeSearchElem ? activeSearchElem.dataset.sortkey : "default";
-            var sortKeyDataField = "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1);
-            var sortKeyStore = sortKey + "-" + sort_dir.dataset.sortdir + "-" + cards.length;
-
-            if (sortKeyStore == currentSort && !force) {
-                return;
-            }
-            currentSort = sortKeyStore;
-
-            var sortedCards = Array.from(cards);
-            sortedCards.sort(function(cardA, cardB) {
-                var a = cardA.dataset[sortKeyDataField];
-                var b = cardB.dataset[sortKeyDataField];
-                if (!isNaN(a) && !isNaN(b)) {
-                    return parseInt(a) - parseInt(b);
-                }
-
-                return (a < b ? -1 : (a > b ? 1 : 0));
-            });
-
-            if (reverse) {
-                sortedCards.reverse();
-            }
-
-            parent.innerHTML = '';
-
-            var frag = document.createDocumentFragment();
-            sortedCards.forEach(function(card) {
-                frag.appendChild(card);
-            });
-            parent.appendChild(frag);
-        };
-
-        search.addEventListener("input", function() {
+            applySort();
             applyFilter();
+
+            extraNetworksApplySort[tabname_full] = applySort;
+            extraNetworksApplyFilter[tabname_full] = applyFilter;
+
+            let controls = gradioApp().querySelector(
+                "#" + tabname_full + "_controls",
+            );
+            controlsDiv.insertBefore(controls, null);
+
+            if (elem.style.display != "none") {
+                extraNetworksShowControlsForPage(tabname, tabname_full);
+            }
         });
-        applySort();
-        applyFilter();
-
-        extraNetworksApplySort[tabname_full] = applySort;
-        extraNetworksApplyFilter[tabname_full] = applyFilter;
-
-        var controls = gradioApp().querySelector("#" + tabname_full + "_controls");
-        controlsDiv.insertBefore(controls, null);
-
-        if (elem.style.display != "none") {
-            extraNetworksShowControlsForPage(tabname, tabname_full);
-        }
-    });
 
     registerPrompt(tabname, tabname + "_prompt");
     registerPrompt(tabname, tabname + "_neg_prompt");
 }
 
-function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt) {
-    if (!gradioApp().querySelector('.toprow-compact-tools')) return; // only applicable for compact prompt layout
+function extraNetworksMovePromptToTab(
+    tabname,
+    id,
+    showPrompt,
+    showNegativePrompt,
+) {
+    if (!gradioApp().querySelector(".toprow-compact-tools")) return; // only applicable for compact prompt layout
 
-    var promptContainer = gradioApp().getElementById(tabname + '_prompt_container');
-    var prompt = gradioApp().getElementById(tabname + '_prompt_row');
-    var negPrompt = gradioApp().getElementById(tabname + '_neg_prompt_row');
-    var elem = id ? gradioApp().getElementById(id) : null;
+    let promptContainer = gradioApp().getElementById(
+        tabname + "_prompt_container",
+    );
+    let prompt = gradioApp().getElementById(tabname + "_prompt_row");
+    let negPrompt = gradioApp().getElementById(tabname + "_neg_prompt_row");
+    let elem = id ? gradioApp().getElementById(id) : null;
 
     if (showNegativePrompt && elem) {
         elem.insertBefore(negPrompt, elem.firstChild);
@@ -181,34 +218,47 @@ function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePromp
     }
 
     if (elem) {
-        elem.classList.toggle('extra-page-prompts-active', showNegativePrompt || showPrompt);
+        elem.classList.toggle(
+            "extra-page-prompts-active",
+            showNegativePrompt || showPrompt,
+        );
     }
 }
 
-
 function extraNetworksShowControlsForPage(tabname, tabname_full) {
-    gradioApp().querySelectorAll('#' + tabname + '_extra_tabs .extra-networks-controls-div > div').forEach(function(elem) {
-        var targetId = tabname_full + "_controls";
-        elem.style.display = elem.id == targetId ? "" : "none";
-    });
+    gradioApp()
+        .querySelectorAll(
+            "#" + tabname + "_extra_tabs .extra-networks-controls-div > div",
+        )
+        .forEach(function (elem) {
+            let targetId = tabname_full + "_controls";
+            elem.style.display = elem.id == targetId ? "" : "none";
+        });
 }
 
-
-function extraNetworksUnrelatedTabSelected(tabname) { // called from python when user selects an unrelated tab (generate)
-    extraNetworksMovePromptToTab(tabname, '', false, false);
+function extraNetworksUnrelatedTabSelected(tabname) {
+    // called from python when user selects an unrelated tab (generate)
+    extraNetworksMovePromptToTab(tabname, "", false, false);
 
     extraNetworksShowControlsForPage(tabname, null);
 }
 
-function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt, tabname_full) { // called from python when user selects an extra networks tab
+function extraNetworksTabSelected(
+    tabname,
+    id,
+    showPrompt,
+    showNegativePrompt,
+    tabname_full,
+) {
+    // called from python when user selects an extra networks tab
     extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt);
 
     extraNetworksShowControlsForPage(tabname, tabname_full);
 }
 
 function applyExtraNetworkFilter(tabname_full) {
-    var doFilter = function() {
-        var applyFunction = extraNetworksApplyFilter[tabname_full];
+    let doFilter = function () {
+        let applyFunction = extraNetworksApplyFilter[tabname_full];
 
         if (applyFunction) {
             applyFunction(true);
@@ -218,55 +268,76 @@ function applyExtraNetworkFilter(tabname_full) {
 }
 
 function applyExtraNetworkSort(tabname_full) {
-    var doSort = function() {
+    let doSort = function () {
         extraNetworksApplySort[tabname_full](true);
     };
     setTimeout(doSort, 1);
 }
 
-var extraNetworksApplyFilter = {};
-var extraNetworksApplySort = {};
-var activePromptTextarea = {};
+let extraNetworksApplyFilter = {};
+let extraNetworksApplySort = {};
+let activePromptTextarea = {};
 
 function setupExtraNetworks() {
-    setupExtraNetworksForTab('txt2img');
-    setupExtraNetworksForTab('img2img');
+    setupExtraNetworksForTab("txt2img");
+    setupExtraNetworksForTab("img2img");
 }
 
-var re_extranet = /<([^:^>]+:[^:]+):[\d.]+>(.*)/;
-var re_extranet_g = /<([^:^>]+:[^:]+):[\d.]+>/g;
+let re_extranet = /<([^:^>]+:[^:]+):[\d.]+>(.*)/;
+let re_extranet_g = /<([^:^>]+:[^:]+):[\d.]+>/g;
 
-var re_extranet_neg = /\(([^:^>]+:[\d.]+)\)/;
-var re_extranet_g_neg = /\(([^:^>]+:[\d.]+)\)/g;
+let re_extranet_neg = /\(([^:^>]+:[\d.]+)\)/;
+let re_extranet_g_neg = /\(([^:^>]+:[\d.]+)\)/g;
 function tryToRemoveExtraNetworkFromPrompt(textarea, text, isNeg) {
-    var m = text.match(isNeg ? re_extranet_neg : re_extranet);
-    var replaced = false;
-    var newTextareaText;
-    var extraTextBeforeNet = opts.extra_networks_add_text_separator;
+    let m = text.match(isNeg ? re_extranet_neg : re_extranet);
+    let replaced = false;
+    let newTextareaText;
+    let extraTextBeforeNet = opts.extra_networks_add_text_separator;
     if (m) {
-        var extraTextAfterNet = m[2];
-        var partToSearch = m[1];
-        var foundAtPosition = -1;
-        newTextareaText = textarea.value.replaceAll(isNeg ? re_extranet_g_neg : re_extranet_g, function(found, net, pos) {
-            m = found.match(isNeg ? re_extranet_neg : re_extranet);
-            if (m[1] == partToSearch) {
-                replaced = true;
-                foundAtPosition = pos;
-                return "";
-            }
-            return found;
-        });
+        let extraTextAfterNet = m[2];
+        let partToSearch = m[1];
+        let foundAtPosition = -1;
+        newTextareaText = textarea.value.replaceAll(
+            isNeg ? re_extranet_g_neg : re_extranet_g,
+            function (found, net, pos) {
+                m = found.match(isNeg ? re_extranet_neg : re_extranet);
+                if (m[1] == partToSearch) {
+                    replaced = true;
+                    foundAtPosition = pos;
+                    return "";
+                }
+                return found;
+            },
+        );
         if (foundAtPosition >= 0) {
-            if (extraTextAfterNet && newTextareaText.substr(foundAtPosition, extraTextAfterNet.length) == extraTextAfterNet) {
-                newTextareaText = newTextareaText.substr(0, foundAtPosition) + newTextareaText.substr(foundAtPosition + extraTextAfterNet.length);
+            if (
+                extraTextAfterNet &&
+                newTextareaText.substr(foundAtPosition, extraTextAfterNet.length) ==
+                extraTextAfterNet
+            ) {
+                newTextareaText =
+                    newTextareaText.substr(0, foundAtPosition) +
+                    newTextareaText.substr(foundAtPosition + extraTextAfterNet.length);
             }
-            if (newTextareaText.substr(foundAtPosition - extraTextBeforeNet.length, extraTextBeforeNet.length) == extraTextBeforeNet) {
-                newTextareaText = newTextareaText.substr(0, foundAtPosition - extraTextBeforeNet.length) + newTextareaText.substr(foundAtPosition);
+            if (
+                newTextareaText.substr(
+                    foundAtPosition - extraTextBeforeNet.length,
+                    extraTextBeforeNet.length,
+                ) == extraTextBeforeNet
+            ) {
+                newTextareaText =
+                    newTextareaText.substr(
+                        0,
+                        foundAtPosition - extraTextBeforeNet.length,
+                    ) + newTextareaText.substr(foundAtPosition);
             }
         }
     } else {
-        newTextareaText = textarea.value.replaceAll(new RegExp(`((?:${extraTextBeforeNet})?${text})`, "g"), "");
-        replaced = (newTextareaText != textarea.value);
+        newTextareaText = textarea.value.replaceAll(
+            new RegExp(`((?:${extraTextBeforeNet})?${text})`, "g"),
+            "",
+        );
+        replaced = newTextareaText != textarea.value;
     }
 
     if (replaced) {
@@ -279,25 +350,44 @@ function tryToRemoveExtraNetworkFromPrompt(textarea, text, isNeg) {
 
 function updatePromptArea(text, textArea, isNeg) {
     if (!tryToRemoveExtraNetworkFromPrompt(textArea, text, isNeg)) {
-        textArea.value = textArea.value + opts.extra_networks_add_text_separator + text;
+        textArea.value =
+            textArea.value + opts.extra_networks_add_text_separator + text;
     }
 
     updateInput(textArea);
 }
 
-function cardClicked(tabname, textToAdd, textToAddNegative, allowNegativePrompt) {
+function cardClicked(
+    tabname,
+    textToAdd,
+    textToAddNegative,
+    allowNegativePrompt,
+) {
     if (textToAddNegative.length > 0) {
-        updatePromptArea(textToAdd, gradioApp().querySelector("#" + tabname + "_prompt > label > textarea"));
-        updatePromptArea(textToAddNegative, gradioApp().querySelector("#" + tabname + "_neg_prompt > label > textarea"), true);
+        updatePromptArea(
+            textToAdd,
+            gradioApp().querySelector("#" + tabname + "_prompt > label > textarea"),
+        );
+        updatePromptArea(
+            textToAddNegative,
+            gradioApp().querySelector(
+                "#" + tabname + "_neg_prompt > label > textarea",
+            ),
+            true,
+        );
     } else {
-        var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea");
+        let textarea = allowNegativePrompt
+            ? activePromptTextarea[tabname]
+            : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea");
         updatePromptArea(textToAdd, textarea);
     }
 }
 
 function saveCardPreview(event, tabname, filename) {
-    var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename  > label > textarea');
-    var button = gradioApp().getElementById(tabname + '_save_preview');
+    let textarea = gradioApp().querySelector(
+        "#" + tabname + "_preview_filename  > label > textarea",
+    );
+    let button = gradioApp().getElementById(tabname + "_save_preview");
 
     textarea.value = filename;
     updateInput(textarea);
@@ -309,15 +399,24 @@ function saveCardPreview(event, tabname, filename) {
 }
 
 function extraNetworksSearchButton(tabname, extra_networks_tabname, event) {
-    var searchTextarea = gradioApp().querySelector("#" + tabname + "_" + extra_networks_tabname + "_extra_search");
-    var button = event.target;
-    var text = button.classList.contains("search-all") ? "" : button.textContent.trim();
+    let searchTextarea = gradioApp().querySelector(
+        "#" + tabname + "_" + extra_networks_tabname + "_extra_search",
+    );
+    let button = event.target;
+    let text = button.classList.contains("search-all")
+        ? ""
+        : button.textContent.trim();
 
     searchTextarea.value = text;
     updateInput(searchTextarea);
 }
 
-function extraNetworksTreeProcessFileClick(event, btn, tabname, extra_networks_tabname) {
+function extraNetworksTreeProcessFileClick(
+    event,
+    btn,
+    tabname,
+    extra_networks_tabname,
+) {
     /**
      * Processes `onclick` events when user clicks on files in tree.
      *
@@ -330,7 +429,12 @@ function extraNetworksTreeProcessFileClick(event, btn, tabname, extra_networks_t
     return;
 }
 
-function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, extra_networks_tabname) {
+function extraNetworksTreeProcessDirectoryClick(
+    event,
+    btn,
+    tabname,
+    extra_networks_tabname,
+) {
     /**
      * Processes `onclick` events when user clicks on directories in tree.
      *
@@ -345,10 +449,10 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, extra_netwo
      * @param tabname                   The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
      * @param extra_networks_tabname    The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
      */
-    var ul = btn.nextElementSibling;
+    let ul = btn.nextElementSibling;
     // This is the actual target that the user clicked on within the target button.
     // We use this to detect if the chevron was clicked.
-    var true_targ = event.target;
+    let true_targ = event.target;
 
     function _expand_or_collapse(_ul, _btn) {
         // Expands <ul> if it is collapsed, collapses otherwise. Updates button attributes.
@@ -363,8 +467,8 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, extra_netwo
 
     function _remove_selected_from_all() {
         // Removes the `selected` attribute from all buttons.
-        var sels = document.querySelectorAll("div.tree-list-content");
-        [...sels].forEach(el => {
+        let sels = document.querySelectorAll("div.tree-list-content");
+        [...sels].forEach((el) => {
             delete el.dataset.selected;
         });
     }
@@ -377,23 +481,28 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, extra_netwo
 
     function _update_search(_tabname, _extra_networks_tabname, _search_text) {
         // Update search input with select button's path.
-        var search_input_elem = gradioApp().querySelector("#" + tabname + "_" + extra_networks_tabname + "_extra_search");
+        let search_input_elem = gradioApp().querySelector(
+            "#" + tabname + "_" + extra_networks_tabname + "_extra_search",
+        );
         search_input_elem.value = _search_text;
         updateInput(search_input_elem);
     }
 
-
     // If user clicks on the chevron, then we do not select the folder.
-    if (true_targ.matches(".tree-list-item-action--leading, .tree-list-item-action-chevron")) {
+    if (
+        true_targ.matches(
+            ".tree-list-item-action--leading, .tree-list-item-action-chevron",
+        )
+    ) {
         _expand_or_collapse(ul, btn);
     } else {
         // User clicked anywhere else on the button.
-        if ("selected" in btn.dataset && !(ul.hasAttribute("hidden"))) {
+        if ("selected" in btn.dataset && !ul.hasAttribute("hidden")) {
             // If folder is select and open, collapse and deselect button.
             _expand_or_collapse(ul, btn);
             delete btn.dataset.selected;
             _update_search(tabname, extra_networks_tabname, "");
-        } else if (!(!("selected" in btn.dataset) && !(ul.hasAttribute("hidden")))) {
+        } else if (!(!("selected" in btn.dataset) && !ul.hasAttribute("hidden"))) {
             // If folder is open and not selected, then we don't collapse; just select.
             // NOTE: Double inversion sucks but it is the clearest way to show the branching here.
             _expand_or_collapse(ul, btn);
@@ -418,31 +527,49 @@ function extraNetworksTreeOnClick(event, tabname, extra_networks_tabname) {
      * @param tabname                   The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
      * @param extra_networks_tabname    The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
      */
-    var btn = event.currentTarget;
-    var par = btn.parentElement;
+    let btn = event.currentTarget;
+    let par = btn.parentElement;
     if (par.dataset.treeEntryType === "file") {
-        extraNetworksTreeProcessFileClick(event, btn, tabname, extra_networks_tabname);
+        extraNetworksTreeProcessFileClick(
+            event,
+            btn,
+            tabname,
+            extra_networks_tabname,
+        );
     } else {
-        extraNetworksTreeProcessDirectoryClick(event, btn, tabname, extra_networks_tabname);
+        extraNetworksTreeProcessDirectoryClick(
+            event,
+            btn,
+            tabname,
+            extra_networks_tabname,
+        );
     }
 }
 
-function extraNetworksControlSortOnClick(event, tabname, extra_networks_tabname) {
+function extraNetworksControlSortOnClick(
+    event,
+    tabname,
+    extra_networks_tabname,
+) {
     /** Handles `onclick` events for Sort Mode buttons. */
 
-    var self = event.currentTarget;
-    var parent = event.currentTarget.parentElement;
+    let self = event.currentTarget;
+    let parent = event.currentTarget.parentElement;
 
-    parent.querySelectorAll('.extra-network-control--sort').forEach(function(x) {
-        x.classList.remove('extra-network-control--enabled');
+    parent.querySelectorAll(".extra-network-control--sort").forEach(function (x) {
+        x.classList.remove("extra-network-control--enabled");
     });
 
-    self.classList.add('extra-network-control--enabled');
+    self.classList.add("extra-network-control--enabled");
 
     applyExtraNetworkSort(tabname + "_" + extra_networks_tabname);
 }
 
-function extraNetworksControlSortDirOnClick(event, tabname, extra_networks_tabname) {
+function extraNetworksControlSortDirOnClick(
+    event,
+    tabname,
+    extra_networks_tabname,
+) {
     /**
      * Handles `onclick` events for the Sort Direction button.
      *
@@ -463,7 +590,11 @@ function extraNetworksControlSortDirOnClick(event, tabname, extra_networks_tabna
     applyExtraNetworkSort(tabname + "_" + extra_networks_tabname);
 }
 
-function extraNetworksControlTreeViewOnClick(event, tabname, extra_networks_tabname) {
+function extraNetworksControlTreeViewOnClick(
+    event,
+    tabname,
+    extra_networks_tabname,
+) {
     /**
      * Handles `onclick` events for the Tree View button.
      *
@@ -473,19 +604,28 @@ function extraNetworksControlTreeViewOnClick(event, tabname, extra_networks_tabn
      * @param tabname                   The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
      * @param extra_networks_tabname    The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
      */
-    var button = event.currentTarget;
+    let button = event.currentTarget;
     button.classList.toggle("extra-network-control--enabled");
-    var show = !button.classList.contains("extra-network-control--enabled");
+    let show = !button.classList.contains("extra-network-control--enabled");
 
-    var pane = gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_pane");
+    let pane = gradioApp().getElementById(
+        tabname + "_" + extra_networks_tabname + "_pane",
+    );
     pane.classList.toggle("extra-network-dirs-hidden", show);
 }
 
 function clickLoraRefresh() {
-    const targets = ['txt2img_lora', 'txt2img_checkpoints', 'txt2img_textural_inversion', 'img2img_lora', 'img2img_checkpoints', 'img2img_textural_inversion'];
-    targets.forEach(function(t) {
-        const tab = gradioApp().getElementById(t + '-button');
-        if (tab && tab.getAttribute('aria-selected') == "true") {
+    const targets = [
+        "txt2img_lora",
+        "txt2img_checkpoints",
+        "txt2img_textural_inversion",
+        "img2img_lora",
+        "img2img_checkpoints",
+        "img2img_textural_inversion",
+    ];
+    targets.forEach(function (t) {
+        const tab = gradioApp().getElementById(t + "-button");
+        if (tab && tab.getAttribute("aria-selected") == "true") {
             const applyFunction = extraNetworksApplyFilter[t];
             if (applyFunction) {
                 applyFunction(true);
@@ -494,7 +634,11 @@ function clickLoraRefresh() {
     });
 }
 
-function extraNetworksControlRefreshOnClick(event, tabname, extra_networks_tabname) {
+function extraNetworksControlRefreshOnClick(
+    event,
+    tabname,
+    extra_networks_tabname,
+) {
     /**
      * Handles `onclick` events for the Refresh Page button.
      *
@@ -507,12 +651,14 @@ function extraNetworksControlRefreshOnClick(event, tabname, extra_networks_tabna
      * @param tabname                   The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
      * @param extra_networks_tabname    The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
      */
-    var btn_refresh_internal = gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_extra_refresh_internal");
+    let btn_refresh_internal = gradioApp().getElementById(
+        tabname + "_" + extra_networks_tabname + "_extra_refresh_internal",
+    );
     btn_refresh_internal.dispatchEvent(new Event("click"));
 }
 
-var globalPopup = null;
-var globalPopupInner = null;
+let globalPopup = null;
+let globalPopupInner = null;
 
 function closePopup() {
     if (!globalPopup) return;
@@ -521,29 +667,29 @@ function closePopup() {
 
 function popup(contents) {
     if (!globalPopup) {
-        globalPopup = document.createElement('div');
-        globalPopup.classList.add('global-popup');
+        globalPopup = document.createElement("div");
+        globalPopup.classList.add("global-popup");
 
-        var close = document.createElement('div');
-        close.classList.add('global-popup-close');
+        let close = document.createElement("div");
+        close.classList.add("global-popup-close");
         close.addEventListener("click", closePopup);
         close.title = "Close";
         globalPopup.appendChild(close);
 
-        globalPopupInner = document.createElement('div');
-        globalPopupInner.classList.add('global-popup-inner');
+        globalPopupInner = document.createElement("div");
+        globalPopupInner.classList.add("global-popup-inner");
         globalPopup.appendChild(globalPopupInner);
 
-        gradioApp().querySelector('.main').appendChild(globalPopup);
+        gradioApp().querySelector(".main").appendChild(globalPopup);
     }
 
-    globalPopupInner.innerHTML = '';
+    globalPopupInner.innerHTML = "";
     globalPopupInner.appendChild(contents);
 
     globalPopup.style.display = "flex";
 }
 
-var storedPopupIds = {};
+let storedPopupIds = {};
 function popupId(id) {
     if (!storedPopupIds[id]) {
         storedPopupIds[id] = gradioApp().getElementById(id);
@@ -557,10 +703,10 @@ function extraNetworksFlattenMetadata(obj) {
 
     // Convert any stringified JSON objects to actual objects
     for (const key of Object.keys(obj)) {
-        if (typeof obj[key] === 'string') {
+        if (typeof obj[key] === "string") {
             try {
                 const parsed = JSON.parse(obj[key]);
-                if (parsed && typeof parsed === 'object') {
+                if (parsed && typeof parsed === "object") {
                     obj[key] = parsed;
                 }
             } catch (error) {
@@ -571,7 +717,7 @@ function extraNetworksFlattenMetadata(obj) {
 
     // Flatten the object
     for (const key of Object.keys(obj)) {
-        if (typeof obj[key] === 'object' && obj[key] !== null) {
+        if (typeof obj[key] === "object" && obj[key] !== null) {
             const nested = extraNetworksFlattenMetadata(obj[key]);
             for (const nestedKey of Object.keys(nested)) {
                 result[`${key}/${nestedKey}`] = nested[nestedKey];
@@ -606,7 +752,7 @@ function extraNetworksFlattenMetadata(obj) {
 function extraNetworksShowMetadata(text) {
     try {
         let parsed = JSON.parse(text);
-        if (parsed && typeof parsed === 'object') {
+        if (parsed && typeof parsed === "object") {
             parsed = extraNetworksFlattenMetadata(parsed);
             const table = createVisualizationTable(parsed, 0);
             popup(table);
@@ -616,8 +762,8 @@ function extraNetworksShowMetadata(text) {
         console.error(error);
     }
 
-    var elem = document.createElement('pre');
-    elem.classList.add('popup-metadata');
+    let elem = document.createElement("pre");
+    elem.classList.add("popup-metadata");
     elem.textContent = text;
 
     popup(elem);
@@ -625,17 +771,19 @@ function extraNetworksShowMetadata(text) {
 }
 
 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('&');
+    let xhr = new XMLHttpRequest();
+    let args = Object.keys(data)
+        .map(function (k) {
+            return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
+        })
+        .join("&");
     xhr.open("GET", url + "?" + args, true);
 
-    xhr.onreadystatechange = function() {
+    xhr.onreadystatechange = function () {
         if (xhr.readyState === 4) {
             if (xhr.status === 200) {
                 try {
-                    var js = JSON.parse(xhr.responseText);
+                    let js = JSON.parse(xhr.responseText);
                     handler(js);
                 } catch (error) {
                     console.error(error);
@@ -646,53 +794,72 @@ function requestGet(url, data, handler, errorHandler) {
             }
         }
     };
-    var js = JSON.stringify(data);
+    let js = JSON.stringify(data);
     xhr.send(js);
 }
 
 function extraNetworksCopyCardPath(event) {
-    navigator.clipboard.writeText(event.target.getAttribute("data-clipboard-text"));
+    navigator.clipboard.writeText(
+        event.target.getAttribute("data-clipboard-text"),
+    );
     event.stopPropagation();
 }
 
 function extraNetworksRequestMetadata(event, extraPage) {
-    var showError = function() {
+    let showError = function () {
         extraNetworksShowMetadata("there was an error getting metadata");
     };
 
-    var cardName = event.target.parentElement.parentElement.getAttribute("data-name");
-    if (cardName == null) { // from tree
-        cardName = event.target.parentElement.parentElement.parentElement.getAttribute("data-name");
+    let cardName =
+        event.target.parentElement.parentElement.getAttribute("data-name");
+    if (cardName == null) {
+        // from tree
+        cardName =
+            event.target.parentElement.parentElement.parentElement.getAttribute(
+                "data-name",
+            );
     }
 
-    requestGet("./sd_extra_networks/metadata", {page: extraPage, item: cardName}, function(data) {
-        if (data && data.metadata) {
-            extraNetworksShowMetadata(data.metadata);
-        } else {
-            showError();
-        }
-    }, showError);
+    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 = {};
+let extraPageUserMetadataEditors = {};
 
 function extraNetworksEditUserMetadata(event, tabname, extraPage) {
-    var id = tabname + '_' + extraPage + '_edit_user_metadata';
+    let id = tabname + "_" + extraPage + "_edit_user_metadata";
 
-    var editor = extraPageUserMetadataEditors[id];
+    let editor = extraPageUserMetadataEditors[id];
     if (!editor) {
         editor = {};
         editor.page = gradioApp().getElementById(id);
-        editor.nameTextarea = gradioApp().querySelector("#" + id + "_name" + ' textarea');
+        editor.nameTextarea = gradioApp().querySelector(
+            "#" + id + "_name" + " textarea",
+        );
         editor.button = gradioApp().querySelector("#" + id + "_button");
         extraPageUserMetadataEditors[id] = editor;
     }
 
-    var cardName = event.target.parentElement.parentElement.getAttribute("data-name");
-    if (cardName == null) { // from tree
-        cardName = event.target.parentElement.parentElement.parentElement.getAttribute("data-name");
+    let cardName =
+        event.target.parentElement.parentElement.getAttribute("data-name");
+    if (cardName == null) {
+        // from tree
+        cardName =
+            event.target.parentElement.parentElement.parentElement.getAttribute(
+                "data-name",
+            );
     }
     editor.nameTextarea.value = cardName;
     updateInput(editor.nameTextarea);
@@ -705,22 +872,28 @@ function extraNetworksEditUserMetadata(event, tabname, extraPage) {
 }
 
 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(`#${tabname}_${page.replace(" ", "_")}_cards > .card[data-name="${name}"]`);
+    requestGet(
+        "./sd_extra_networks/get-single-card",
+        { page: page, tabname: tabname, name: name },
+        function (data) {
+            if (data && data.html) {
+                let card = gradioApp().querySelector(
+                    `#${tabname}_${page.replace(" ", "_")}_cards > .card[data-name="${name}"]`,
+                );
 
-            var newDiv = document.createElement('DIV');
-            newDiv.innerHTML = data.html;
-            var newCard = newDiv.firstElementChild;
+                let newDiv = document.createElement("DIV");
+                newDiv.innerHTML = data.html;
+                let newCard = newDiv.firstElementChild;
 
-            newCard.style.display = '';
-            card.parentElement.insertBefore(newCard, card);
-            card.parentElement.removeChild(card);
-        }
-    });
+                newCard.style.display = "";
+                card.parentElement.insertBefore(newCard, card);
+                card.parentElement.removeChild(card);
+            }
+        },
+    );
 }
 
-window.addEventListener("keydown", function(event) {
+window.addEventListener("keydown", function (event) {
     if (event.key == "Escape") {
         closePopup();
     }
@@ -735,21 +908,25 @@ window.addEventListener("keydown", function(event) {
  *
  */
 
-var uiAfterScriptsCallbacks = [];
-var uiAfterScriptsTimeout = null;
-var executedAfterScripts = false;
+let uiAfterScriptsCallbacks = [];
+let uiAfterScriptsTimeout = null;
+let executedAfterScripts = false;
 
 function scheduleAfterScriptsCallbacks() {
     clearTimeout(uiAfterScriptsTimeout);
-    uiAfterScriptsTimeout = setTimeout(function() {
+    uiAfterScriptsTimeout = setTimeout(function () {
         executeCallbacks(uiAfterScriptsCallbacks);
     }, 200);
 }
 
-onUiLoaded(function() {
-    var mutationObserver = new MutationObserver(function(m) {
-        let existingSearchfields = gradioApp().querySelectorAll("[id$='_extra_search']").length;
-        let neededSearchfields = gradioApp().querySelectorAll("[id$='_extra_tabs'] > .tab-nav > button").length - 2;
+onUiLoaded(function () {
+    let mutationObserver = new MutationObserver(function (m) {
+        let existingSearchfields = gradioApp().querySelectorAll(
+            "[id$='_extra_search']",
+        ).length;
+        let neededSearchfields =
+            gradioApp().querySelectorAll("[id$='_extra_tabs'] > .tab-nav > button")
+                .length - 2;
 
         if (!executedAfterScripts && existingSearchfields >= neededSearchfields) {
             mutationObserver.disconnect();
@@ -757,7 +934,7 @@ onUiLoaded(function() {
             scheduleAfterScriptsCallbacks();
         }
     });
-    mutationObserver.observe(gradioApp(), {childList: true, subtree: true});
+    mutationObserver.observe(gradioApp(), { childList: true, subtree: true });
 });
 
 uiAfterScriptsCallbacks.push(setupExtraNetworks);
diff --git a/javascript/generationParams.js b/javascript/generationParams.js
index 7c0fd221..052872de 100644
--- a/javascript/generationParams.js
+++ b/javascript/generationParams.js
@@ -1,7 +1,9 @@
 // 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() {
+let txt2img_gallery,
+    img2img_gallery,
+    modal = undefined;
+onAfterUiUpdate(function () {
     if (!txt2img_gallery) {
         txt2img_gallery = attachGalleryListeners("txt2img");
     }
@@ -9,26 +11,43 @@ onAfterUiUpdate(function() {
         img2img_gallery = attachGalleryListeners("img2img");
     }
     if (!modal) {
-        modal = gradioApp().getElementById('lightboxModal');
-        modalObserver.observe(modal, {attributes: true, attributeFilter: ['style']});
+        modal = gradioApp().getElementById("lightboxModal");
+        modalObserver.observe(modal, {
+            attributes: true,
+            attributeFilter: ["style"],
+        });
     }
 });
 
-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();
+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();
+    let 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;
diff --git a/javascript/gradio.js b/javascript/gradio.js
index e68b98b0..96988771 100644
--- a/javascript/gradio.js
+++ b/javascript/gradio.js
@@ -1,7 +1,6 @@
-
 // added to fix a weird error in gradio 4.19 at page load
-Object.defineProperty(Array.prototype, 'toLowerCase', {
-    value: function() {
+Object.defineProperty(Array.prototype, "toLowerCase", {
+    value: function () {
         return this;
-    }
+    },
 });
diff --git a/javascript/hints.js b/javascript/hints.js
index 6de9372e..0469adef 100644
--- a/javascript/hints.js
+++ b/javascript/hints.js
@@ -1,187 +1,71 @@
 // 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",
+const titles = {
+    "Sampling method": "The algorithm used to refine each step of the image",
+    "Schedule type": "The algorithm used to adjust the magnitude of refinement",
+    "Sampling steps": "The number of times the image is iteratively refined",
 
-    "\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{1f300}": "Restore progress",
+    "Batch count": "How many batches of images to generate (in sequence)",
+    "Batch size": "How many images to generate in a single batch (in parallel)",
 
-    "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",
+    "CFG Scale": "The strength used to calculate conditionings",
 
-    "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.",
+    "Seed": 'Given the same prompts and parameters, you "should" generate the same image if the Seed is also the same',
 
-    "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",
+    "Just resize": "Resize input image directly to target resolution",
+    "Crop and resize": "Resize the image while maintaining the aspect ratio; crop the excessive parts",
+    "Resize and fill": "Resize the image while maintaining the aspect ratio; fill the empty parts with neighboring colors",
 
-    "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.",
+    "Mask blur": "How much feathering to apply to the mask (in pixels)",
+    "fill": "Fill the masked areas with neighboring colors",
+    "original": "Keep whatever was within the masked areas",
+    "latent noise": "Fill the masked areas with noise (requires high Denoising strength)",
+    "latent nothing": "Fill the masked areas with zero values (requires high Denoising strength)",
 
-    "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.",
+    "Denoising strength": "How strong should the image be changed",
 
-    "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."
+    "Hires. fix": "Automatically perform an additional pass of img2img",
+    "Hires steps": "Sampling Steps for the img2img pass; use original if 0",
+    "Upscale by": "Multiply the txt2img dimension by this ratio, to serve as the target dimension",
+    "Resize width to": 'Resize image to this width; use "Upscale by" if 0',
+    "Resize height to": 'Resize image to this height; use "Upscale by" if 0',
 };
 
 function updateTooltip(element) {
-    if (element.title) return; // already has a title
+    if (element.title) return;
 
-    let text = element.textContent;
+    const text = element.textContent || element.value;
     let tooltip = localization[titles[text]] || titles[text];
 
-    if (!tooltip) {
-        let value = element.value;
-        if (value) tooltip = localization[titles[value]] || titles[value];
-    }
+    if (!tooltip) return;
+    element.title = tooltip;
 
-    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;
-    }
+    const field = element.parentNode.querySelector("input");
+    if (field != null) field.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);
-    }
+    for (const node of tooltipCheckNodes) updateTooltip(node);
     tooltipCheckNodes.clear();
 }
 
-onUiUpdate(function(mutationRecords) {
+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.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
-                    ) {
+                    if (["SPAN", "BUTTON", "P"].includes(node.tagName))
                         tooltipCheckNodes.add(node);
-                    }
                 }
-                node.querySelectorAll('span, button, p').forEach(n => tooltipCheckNodes.add(n));
+                node
+                    .querySelectorAll("span, button, p")
+                    .forEach((n) => tooltipCheckNodes.add(n));
             }
         }
     }
@@ -191,13 +75,11 @@ onUiUpdate(function(mutationRecords) {
     }
 });
 
-onUiLoaded(function() {
-    for (var comp of window.gradio_config.components) {
+onUiLoaded(() => {
+    for (const comp of window.gradio_config.components) {
         if (comp.props.webui_tooltip && comp.props.elem_id) {
-            var elem = gradioApp().getElementById(comp.props.elem_id);
-            if (elem) {
-                elem.title = comp.props.webui_tooltip;
-            }
+            const elem = gradioApp().getElementById(comp.props.elem_id);
+            if (elem) elem.title = comp.props.webui_tooltip;
         }
     }
 });
diff --git a/javascript/hires_fix.js b/javascript/hires_fix.js
index 0d04ab3b..fdc071e4 100644
--- a/javascript/hires_fix.js
+++ b/javascript/hires_fix.js
@@ -1,18 +1,34 @@
-
-function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y) {
+function onCalcResolutionHires(
+    enable,
+    width,
+    height,
+    hr_scale,
+    hr_resize_x,
+    hr_resize_y,
+) {
     function setInactive(elem, inactive) {
-        elem.classList.toggle('inactive', !!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');
+    let hrUpscaleBy = gradioApp().getElementById("txt2img_hr_scale");
+    let hrResizeX = gradioApp().getElementById("txt2img_hr_resize_x");
+    let hrResizeY = gradioApp().getElementById("txt2img_hr_resize_y");
 
-    gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : "";
+    gradioApp().getElementById("txt2img_hires_fix_row2").style.display =
+        opts.use_old_hires_fix_width_height ? "none" : "";
 
-    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);
+    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,
+    );
 
     return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y];
 }
diff --git a/javascript/imageMaskFix.js b/javascript/imageMaskFix.js
index 900c56f3..77ea3e27 100644
--- a/javascript/imageMaskFix.js
+++ b/javascript/imageMaskFix.js
@@ -3,17 +3,19 @@
  * @see https://github.com/gradio-app/gradio/issues/1721
  */
 function imageMaskResize() {
-    const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas');
+    const canvases = gradioApp().querySelectorAll(
+        "#img2maskimg .touch-none canvas",
+    );
     if (!canvases.length) {
-        window.removeEventListener('resize', imageMaskResize);
+        window.removeEventListener("resize", imageMaskResize);
         return;
     }
 
-    const wrapper = canvases[0].closest('.touch-none');
+    const wrapper = canvases[0].closest(".touch-none");
     const previewImage = wrapper.previousElementSibling;
 
     if (!previewImage.complete) {
-        previewImage.addEventListener('load', imageMaskResize);
+        previewImage.addEventListener("load", imageMaskResize);
         return;
     }
 
@@ -23,21 +25,21 @@ function imageMaskResize() {
     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);
+    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';
+    canvases.forEach((c) => {
+        c.style.width = c.style.height = "";
+        c.style.maxWidth = "100%";
+        c.style.maxHeight = "100%";
+        c.style.objectFit = "contain";
     });
 }
 
 onAfterUiUpdate(imageMaskResize);
-window.addEventListener('resize', imageMaskResize);
+window.addEventListener("resize", imageMaskResize);
diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index a87dd5cd..92111189 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -6,12 +6,16 @@ function closeModal() {
 function showModal(event) {
     const source = event.target || event.srcElement;
     const modalImage = gradioApp().getElementById("modalImage");
-    const modalToggleLivePreviewBtn = gradioApp().getElementById("modal_toggle_live_preview");
-    modalToggleLivePreviewBtn.innerHTML = opts.js_live_preview_in_modal_lightbox ? "&#x1F5C7;" : "&#x1F5C6;";
+    const modalToggleLivePreviewBtn = gradioApp().getElementById(
+        "modal_toggle_live_preview",
+    );
+    modalToggleLivePreviewBtn.innerHTML = opts.js_live_preview_in_modal_lightbox
+        ? "&#x1F5C7;"
+        : "&#x1F5C6;";
     const lb = gradioApp().getElementById("lightboxModal");
     modalImage.src = source.src;
-    if (modalImage.style.display === 'none') {
-        lb.style.setProperty('background-image', 'url(' + source.src + ')');
+    if (modalImage.style.display === "none") {
+        lb.style.setProperty("background-image", "url(" + source.src + ")");
     }
     lb.style.display = "flex";
     lb.focus();
@@ -19,7 +23,10 @@ function showModal(event) {
     const tabTxt2Img = gradioApp().getElementById("tab_txt2img");
     const tabImg2Img = gradioApp().getElementById("tab_img2img");
     // show the save button in modal only on txt2img or img2img tabs
-    if (tabTxt2Img.style.display != "none" || tabImg2Img.style.display != "none") {
+    if (
+        tabTxt2Img.style.display != "none" ||
+        tabImg2Img.style.display != "none"
+    ) {
         gradioApp().getElementById("modal_save").style.display = "inline";
     } else {
         gradioApp().getElementById("modal_save").style.display = "none";
@@ -35,36 +42,40 @@ function updateOnBackgroundChange() {
     const modalImage = gradioApp().getElementById("modalImage");
     if (modalImage && modalImage.offsetParent) {
         let currentButton = selected_gallery_button();
-        let preview = gradioApp().querySelectorAll('.livePreview > img');
+        let preview = gradioApp().querySelectorAll(".livePreview > img");
         if (opts.js_live_preview_in_modal_lightbox && preview.length > 0) {
             // show preview image if available
             modalImage.src = preview[preview.length - 1].src;
-        } else if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {
+        } else if (
+            currentButton?.children?.length > 0 &&
+            modalImage.src != currentButton.children[0].src
+        ) {
             modalImage.src = currentButton.children[0].src;
-            if (modalImage.style.display === 'none') {
+            if (modalImage.style.display === "none") {
                 const modal = gradioApp().getElementById("lightboxModal");
-                modal.style.setProperty('background-image', `url(${modalImage.src})`);
+                modal.style.setProperty("background-image", `url(${modalImage.src})`);
             }
         }
     }
 }
 
 function modalImageSwitch(offset) {
-    var galleryButtons = all_gallery_buttons();
+    let galleryButtons = all_gallery_buttons();
 
     if (galleryButtons.length > 1) {
-        var result = selected_gallery_index();
+        let result = selected_gallery_index();
 
         if (result != -1) {
-            var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)];
+            let nextButton =
+                galleryButtons[negmod(result + offset, galleryButtons.length)];
             nextButton.click();
             const modalImage = gradioApp().getElementById("modalImage");
             const modal = gradioApp().getElementById("lightboxModal");
             modalImage.src = nextButton.children[0].src;
-            if (modalImage.style.display === 'none') {
-                modal.style.setProperty('background-image', `url(${modalImage.src})`);
+            if (modalImage.style.display === "none") {
+                modal.style.setProperty("background-image", `url(${modalImage.src})`);
             }
-            setTimeout(function() {
+            setTimeout(function () {
                 modal.focus();
             }, 10);
         }
@@ -102,18 +113,18 @@ function modalPrevImage(event) {
 
 function modalKeyHandler(event) {
     switch (event.key) {
-    case "s":
-        saveImage();
-        break;
-    case "ArrowLeft":
-        modalPrevImage(event);
-        break;
-    case "ArrowRight":
-        modalNextImage(event);
-        break;
-    case "Escape":
-        closeModal();
-        break;
+        case "s":
+            saveImage();
+            break;
+        case "ArrowLeft":
+            modalPrevImage(event);
+            break;
+        case "ArrowRight":
+            modalNextImage(event);
+            break;
+        case "Escape":
+            closeModal();
+            break;
     }
 }
 
@@ -123,90 +134,110 @@ function setupImageForLightbox(e) {
     }
 
     e.dataset.modded = true;
-    e.style.cursor = 'pointer';
-    e.style.userSelect = 'none';
+    e.style.cursor = "pointer";
+    e.style.userSelect = "none";
 
-    e.addEventListener('mousedown', function(evt) {
-        if (evt.button == 1) {
-            open(evt.target.src);
+    e.addEventListener(
+        "mousedown",
+        function (evt) {
+            if (evt.button == 1) {
+                open(evt.target.src);
+                evt.preventDefault();
+                return;
+            }
+        },
+        true,
+    );
+
+    e.addEventListener(
+        "click",
+        function (evt) {
+            if (!opts.js_modal_lightbox || evt.button != 0) return;
+
+            modalZoomSet(
+                gradioApp().getElementById("modalImage"),
+                opts.js_modal_lightbox_initially_zoomed,
+            );
             evt.preventDefault();
-            return;
-        }
-    }, true);
-
-    e.addEventListener('click', function(evt) {
-        if (!opts.js_modal_lightbox || evt.button != 0) return;
-
-        modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed);
-        evt.preventDefault();
-        showModal(evt);
-    }, true);
-
+            showModal(evt);
+        },
+        true,
+    );
 }
 
 function modalZoomSet(modalImage, enable) {
-    if (modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable);
+    if (modalImage) modalImage.classList.toggle("modalImageFullscreen", !!enable);
 }
 
 function modalZoomToggle(event) {
-    var modalImage = gradioApp().getElementById("modalImage");
-    modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'));
+    let modalImage = gradioApp().getElementById("modalImage");
+    modalZoomSet(
+        modalImage,
+        !modalImage.classList.contains("modalImageFullscreen"),
+    );
     event.stopPropagation();
 }
 
 function modalLivePreviewToggle(event) {
-    const modalToggleLivePreview = gradioApp().getElementById("modal_toggle_live_preview");
-    opts.js_live_preview_in_modal_lightbox = !opts.js_live_preview_in_modal_lightbox;
-    modalToggleLivePreview.innerHTML = opts.js_live_preview_in_modal_lightbox ? "&#x1F5C7;" : "&#x1F5C6;";
+    const modalToggleLivePreview = gradioApp().getElementById(
+        "modal_toggle_live_preview",
+    );
+    opts.js_live_preview_in_modal_lightbox =
+        !opts.js_live_preview_in_modal_lightbox;
+    modalToggleLivePreview.innerHTML = opts.js_live_preview_in_modal_lightbox
+        ? "&#x1F5C7;"
+        : "&#x1F5C6;";
     event.stopPropagation();
 }
 
 function modalTileImageToggle(event) {
     const modalImage = gradioApp().getElementById("modalImage");
     const modal = gradioApp().getElementById("lightboxModal");
-    const isTiling = modalImage.style.display === 'none';
+    const isTiling = modalImage.style.display === "none";
     if (isTiling) {
-        modalImage.style.display = 'block';
-        modal.style.setProperty('background-image', 'none');
+        modalImage.style.display = "block";
+        modal.style.setProperty("background-image", "none");
     } else {
-        modalImage.style.display = 'none';
-        modal.style.setProperty('background-image', `url(${modalImage.src})`);
+        modalImage.style.display = "none";
+        modal.style.setProperty("background-image", `url(${modalImage.src})`);
     }
 
     event.stopPropagation();
 }
 
-onAfterUiUpdate(function() {
-    var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > button > button > img, .gradio-gallery > .livePreview');
+onAfterUiUpdate(function () {
+    let fullImg_preview = gradioApp().querySelectorAll(
+        ".gradio-gallery > button > button > img, .gradio-gallery > .livePreview",
+    );
     if (fullImg_preview != null) {
         fullImg_preview.forEach(setupImageForLightbox);
     }
     updateOnBackgroundChange();
 });
 
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
     //const modalFragment = document.createDocumentFragment();
-    const modal = document.createElement('div');
+    const modal = document.createElement("div");
     modal.onclick = closeModal;
     modal.id = "lightboxModal";
     modal.tabIndex = 0;
-    modal.addEventListener('keydown', modalKeyHandler, true);
+    modal.addEventListener("keydown", modalKeyHandler, true);
 
-    const modalControls = document.createElement('div');
-    modalControls.className = 'modalControls gradio-container';
+    const modalControls = document.createElement("div");
+    modalControls.className = "modalControls gradio-container";
     modal.append(modalControls);
 
-    const modalZoom = document.createElement('span');
-    modalZoom.className = 'modalZoom cursor';
-    modalZoom.innerHTML = '&#10529;';
-    modalZoom.addEventListener('click', modalZoomToggle, true);
+    const modalZoom = document.createElement("span");
+    modalZoom.className = "modalZoom cursor";
+    modalZoom.innerHTML = "&#10529;";
+    modalZoom.addEventListener("click", modalZoomToggle, true);
     modalZoom.title = "Toggle zoomed view";
     modalControls.appendChild(modalZoom);
 
-    const modalTileImage = document.createElement('span');
-    modalTileImage.className = 'modalTileImage cursor';
-    modalTileImage.innerHTML = '&#8862;';
-    modalTileImage.addEventListener('click', modalTileImageToggle, true);
+    const modalTileImage = document.createElement("span");
+    modalTileImage.className = "modalTileImage cursor";
+    modalTileImage.innerHTML = "&#8862;";
+    modalTileImage.addEventListener("click", modalTileImageToggle, true);
     modalTileImage.title = "Preview tiling";
     modalControls.appendChild(modalTileImage);
 
@@ -218,42 +249,42 @@ document.addEventListener("DOMContentLoaded", function() {
     modalSave.title = "Save Image(s)";
     modalControls.appendChild(modalSave);
 
-    const modalToggleLivePreview = document.createElement('span');
-    modalToggleLivePreview.className = 'modalToggleLivePreview cursor';
+    const modalToggleLivePreview = document.createElement("span");
+    modalToggleLivePreview.className = "modalToggleLivePreview cursor";
     modalToggleLivePreview.id = "modal_toggle_live_preview";
     modalToggleLivePreview.innerHTML = "&#x1F5C6;";
     modalToggleLivePreview.onclick = modalLivePreviewToggle;
     modalToggleLivePreview.title = "Toggle live preview";
     modalControls.appendChild(modalToggleLivePreview);
 
-    const modalClose = document.createElement('span');
-    modalClose.className = 'modalClose cursor';
-    modalClose.innerHTML = '&times;';
+    const modalClose = document.createElement("span");
+    modalClose.className = "modalClose cursor";
+    modalClose.innerHTML = "&times;";
     modalClose.onclick = closeModal;
     modalClose.title = "Close image viewer";
     modalControls.appendChild(modalClose);
 
-    const modalImage = document.createElement('img');
-    modalImage.id = 'modalImage';
+    const modalImage = document.createElement("img");
+    modalImage.id = "modalImage";
     modalImage.onclick = closeModal;
     modalImage.tabIndex = 0;
-    modalImage.addEventListener('keydown', modalKeyHandler, true);
+    modalImage.addEventListener("keydown", modalKeyHandler, true);
     modal.appendChild(modalImage);
 
-    const modalPrev = document.createElement('a');
-    modalPrev.className = 'modalPrev';
-    modalPrev.innerHTML = '&#10094;';
+    const modalPrev = document.createElement("a");
+    modalPrev.className = "modalPrev";
+    modalPrev.innerHTML = "&#10094;";
     modalPrev.tabIndex = 0;
-    modalPrev.addEventListener('click', modalPrevImage, true);
-    modalPrev.addEventListener('keydown', modalKeyHandler, true);
+    modalPrev.addEventListener("click", modalPrevImage, true);
+    modalPrev.addEventListener("keydown", modalKeyHandler, true);
     modal.appendChild(modalPrev);
 
-    const modalNext = document.createElement('a');
-    modalNext.className = 'modalNext';
-    modalNext.innerHTML = '&#10095;';
+    const modalNext = document.createElement("a");
+    modalNext.className = "modalNext";
+    modalNext.innerHTML = "&#10095;";
     modalNext.tabIndex = 0;
-    modalNext.addEventListener('click', modalNextImage, true);
-    modalNext.addEventListener('keydown', modalKeyHandler, true);
+    modalNext.addEventListener("click", modalNextImage, true);
+    modalNext.addEventListener("keydown", modalKeyHandler, true);
 
     modal.appendChild(modalNext);
 
@@ -264,5 +295,4 @@ document.addEventListener("DOMContentLoaded", function() {
     }
 
     document.body.appendChild(modal);
-
 });
diff --git a/javascript/imageviewerGamepad.js b/javascript/imageviewerGamepad.js
index a22c7e6e..5389f971 100644
--- a/javascript/imageviewerGamepad.js
+++ b/javascript/imageviewerGamepad.js
@@ -1,9 +1,9 @@
 let gamepads = [];
 
-window.addEventListener('gamepadconnected', (e) => {
+window.addEventListener("gamepadconnected", (e) => {
     const index = e.gamepad.index;
     let isWaiting = false;
-    gamepads[index] = setInterval(async() => {
+    gamepads[index] = setInterval(async () => {
         if (!opts.js_modal_lightbox_gamepad || isWaiting) return;
         const gamepad = navigator.getGamepads()[index];
         const xValue = gamepad.axes[0];
@@ -26,7 +26,7 @@ window.addEventListener('gamepadconnected', (e) => {
     }, 10);
 });
 
-window.addEventListener('gamepaddisconnected', (e) => {
+window.addEventListener("gamepaddisconnected", (e) => {
     clearInterval(gamepads[e.gamepad.index]);
 });
 
@@ -35,7 +35,7 @@ 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) => {
+window.addEventListener("wheel", (e) => {
     if (!opts.js_modal_lightbox_gamepad || isScrolling) return;
     isScrolling = true;
 
@@ -53,7 +53,7 @@ window.addEventListener('wheel', (e) => {
 function sleepUntil(f, timeout) {
     return new Promise((resolve) => {
         const timeStart = new Date();
-        const wait = setInterval(function() {
+        const wait = setInterval(function () {
             if (f() || new Date() - timeStart > timeout) {
                 clearInterval(wait);
                 resolve();
diff --git a/javascript/inputAccordion.js b/javascript/inputAccordion.js
index 7570309a..8f65a2f6 100644
--- a/javascript/inputAccordion.js
+++ b/javascript/inputAccordion.js
@@ -1,23 +1,25 @@
 function inputAccordionChecked(id, checked) {
-    var accordion = gradioApp().getElementById(id);
+    let accordion = gradioApp().getElementById(id);
     accordion.visibleCheckbox.checked = checked;
     accordion.onVisibleCheckboxChange();
 }
 
 function setupAccordion(accordion) {
-    var labelWrap = accordion.querySelector('.label-wrap');
-    var gradioCheckbox = gradioApp().querySelector('#' + accordion.id + "-checkbox input");
-    var extra = gradioApp().querySelector('#' + accordion.id + "-extra");
-    var span = labelWrap.querySelector('span');
-    var linked = true;
+    let labelWrap = accordion.querySelector(".label-wrap");
+    let gradioCheckbox = gradioApp().querySelector(
+        "#" + accordion.id + "-checkbox input",
+    );
+    let extra = gradioApp().querySelector("#" + accordion.id + "-extra");
+    let span = labelWrap.querySelector("span");
+    let linked = true;
 
-    var isOpen = function() {
-        return labelWrap.classList.contains('open');
+    let isOpen = function () {
+        return labelWrap.classList.contains("open");
     };
 
-    var observerAccordionOpen = new MutationObserver(function(mutations) {
-        mutations.forEach(function(mutationRecord) {
-            accordion.classList.toggle('input-accordion-open', isOpen());
+    let observerAccordionOpen = new MutationObserver(function (mutations) {
+        mutations.forEach(function (mutationRecord) {
+            accordion.classList.toggle("input-accordion-open", isOpen());
 
             if (linked) {
                 accordion.visibleCheckbox.checked = isOpen();
@@ -25,27 +27,31 @@ function setupAccordion(accordion) {
             }
         });
     });
-    observerAccordionOpen.observe(labelWrap, {attributes: true, attributeFilter: ['class']});
+    observerAccordionOpen.observe(labelWrap, {
+        attributes: true,
+        attributeFilter: ["class"],
+    });
 
     if (extra) {
         labelWrap.insertBefore(extra, labelWrap.lastElementChild);
     }
 
-    accordion.onChecked = function(checked) {
+    accordion.onChecked = function (checked) {
         if (isOpen() != checked) {
             labelWrap.click();
         }
     };
 
-    var visibleCheckbox = document.createElement('INPUT');
-    visibleCheckbox.type = 'checkbox';
+    let visibleCheckbox = document.createElement("INPUT");
+    visibleCheckbox.type = "checkbox";
     visibleCheckbox.checked = isOpen();
     visibleCheckbox.id = accordion.id + "-visible-checkbox";
-    visibleCheckbox.className = gradioCheckbox.className + " input-accordion-checkbox";
+    visibleCheckbox.className =
+        gradioCheckbox.className + " input-accordion-checkbox";
     span.insertBefore(visibleCheckbox, span.firstChild);
 
     accordion.visibleCheckbox = visibleCheckbox;
-    accordion.onVisibleCheckboxChange = function() {
+    accordion.onVisibleCheckboxChange = function () {
         if (linked && isOpen() != visibleCheckbox.checked) {
             labelWrap.click();
         }
@@ -54,15 +60,15 @@ function setupAccordion(accordion) {
         updateInput(gradioCheckbox);
     };
 
-    visibleCheckbox.addEventListener('click', function(event) {
+    visibleCheckbox.addEventListener("click", function (event) {
         linked = false;
         event.stopPropagation();
     });
-    visibleCheckbox.addEventListener('input', accordion.onVisibleCheckboxChange);
+    visibleCheckbox.addEventListener("input", accordion.onVisibleCheckboxChange);
 }
 
-onUiLoaded(function() {
-    for (var accordion of gradioApp().querySelectorAll('.input-accordion')) {
+onUiLoaded(function () {
+    for (let accordion of gradioApp().querySelectorAll(".input-accordion")) {
         setupAccordion(accordion);
     }
 });
diff --git a/javascript/localStorage.js b/javascript/localStorage.js
index dc1a36c3..0429ee28 100644
--- a/javascript/localStorage.js
+++ b/javascript/localStorage.js
@@ -1,4 +1,3 @@
-
 function localSet(k, v) {
     try {
         localStorage.setItem(k, v);
diff --git a/javascript/localization.js b/javascript/localization.js
index 1abff708..945503bd 100644
--- a/javascript/localization.js
+++ b/javascript/localization.js
@@ -1,32 +1,34 @@
-
 // localization = {} -- the dict with translations is created by the backend
 
-var ignore_ids_for_localization = {
-    setting_sd_model_checkpoint: 'OPTION',
-    modelmerger_primary_model_name: 'OPTION',
-    modelmerger_secondary_model_name: 'OPTION',
-    modelmerger_tertiary_model_name: 'OPTION',
-    txt2img_styles: 'OPTION',
-    img2img_styles: 'OPTION',
-    setting_random_artist_categories: 'OPTION',
-    setting_face_restoration_model: 'OPTION',
-    setting_realesrgan_enabled_models: 'OPTION',
-    extras_upscaler_1: 'OPTION',
-    extras_upscaler_2: 'OPTION',
+let ignore_ids_for_localization = {
+    setting_sd_model_checkpoint: "OPTION",
+    modelmerger_primary_model_name: "OPTION",
+    modelmerger_secondary_model_name: "OPTION",
+    modelmerger_tertiary_model_name: "OPTION",
+    txt2img_styles: "OPTION",
+    img2img_styles: "OPTION",
+    setting_random_artist_categories: "OPTION",
+    setting_face_restoration_model: "OPTION",
+    setting_realesrgan_enabled_models: "OPTION",
+    extras_upscaler_1: "OPTION",
+    extras_upscaler_2: "OPTION",
 };
 
-var re_num = /^[.\d]+$/;
-var re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u;
+let re_num = /^[.\d]+$/;
+let re_emoji =
+    /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u;
 
-var original_lines = {};
-var translated_lines = {};
+let original_lines = {};
+let 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);
+    let n,
+        a = [],
+        walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
     while ((n = walk.nextNode())) a.push(n);
     return a;
 }
@@ -35,12 +37,17 @@ 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;
+    let 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++) {
+    if (parentType == "OPTION" || parentType == "SPAN") {
+        let pnode = node;
+        for (let level = 0; level < 4; level++) {
             pnode = pnode.parentElement;
             if (!pnode) break;
 
@@ -60,7 +67,7 @@ function getTranslation(text) {
         original_lines[text] = 1;
     }
 
-    var tl = localization[text];
+    let tl = localization[text];
     if (tl !== undefined) {
         translated_lines[tl] = 1;
     }
@@ -69,11 +76,11 @@ function getTranslation(text) {
 }
 
 function processTextNode(node) {
-    var text = node.textContent.trim();
+    let text = node.textContent.trim();
 
     if (!canBeTranslated(node, text)) return;
 
-    var tl = getTranslation(text);
+    let tl = getTranslation(text);
     if (tl !== undefined) {
         node.textContent = tl;
     }
@@ -99,7 +106,7 @@ function processNode(node) {
         }
     }
 
-    textNodesUnder(node).forEach(function(node) {
+    textNodesUnder(node).forEach(function (node) {
         processTextNode(node);
     });
 }
@@ -108,11 +115,13 @@ function localizeWholePage() {
     processNode(gradioApp());
 
     function elem(comp) {
-        var elem_id = comp.props.elem_id ? comp.props.elem_id : "component-" + comp.id;
+        let elem_id = comp.props.elem_id
+            ? comp.props.elem_id
+            : "component-" + comp.id;
         return gradioApp().getElementById(elem_id);
     }
 
-    for (var comp of window.gradio_config.components) {
+    for (let comp of window.gradio_config.components) {
         if (comp.props.webui_tooltip) {
             let e = elem(comp);
 
@@ -123,7 +132,7 @@ function localizeWholePage() {
         }
         if (comp.props.placeholder) {
             let e = elem(comp);
-            let textbox = e ? e.querySelector('[placeholder]') : null;
+            let textbox = e ? e.querySelector("[placeholder]") : null;
 
             let tl = textbox ? getTranslation(textbox.placeholder) : undefined;
             if (tl !== undefined) {
@@ -140,7 +149,7 @@ function dumpTranslations() {
         // original_lines, so do that now.
         localizeWholePage();
     }
-    var dumped = {};
+    let dumped = {};
     if (localization.rtl) {
         dumped.rtl = true;
     }
@@ -154,12 +163,15 @@ function dumpTranslations() {
 }
 
 function download_localization() {
-    var text = JSON.stringify(dumpTranslations(), null, 4);
+    let 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';
+    let 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();
@@ -167,14 +179,14 @@ function download_localization() {
     document.body.removeChild(element);
 }
 
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
     if (!hasLocalization()) {
         return;
     }
 
-    onUiUpdate(function(m) {
-        m.forEach(function(mutation) {
-            mutation.addedNodes.forEach(function(node) {
+    onUiUpdate(function (m) {
+        m.forEach(function (mutation) {
+            mutation.addedNodes.forEach(function (node) {
                 processNode(node);
             });
         });
@@ -182,21 +194,24 @@ document.addEventListener("DOMContentLoaded", function() {
 
     localizeWholePage();
 
-    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') {
+    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
+                        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});
+        }).observe(gradioApp(), { childList: true });
     }
 });
diff --git a/javascript/notification.js b/javascript/notification.js
index 45ad220b..d6fbdc82 100644
--- a/javascript/notification.js
+++ b/javascript/notification.js
@@ -4,18 +4,24 @@ let lastHeadImg = null;
 
 let notificationButton = null;
 
-onAfterUiUpdate(function() {
+onAfterUiUpdate(function () {
     if (notificationButton == null) {
-        notificationButton = gradioApp().getElementById('request_notifications');
+        notificationButton = gradioApp().getElementById("request_notifications");
 
         if (notificationButton != null) {
-            notificationButton.addEventListener('click', () => {
-                void Notification.requestPermission();
-            }, true);
+            notificationButton.addEventListener(
+                "click",
+                () => {
+                    void Notification.requestPermission();
+                },
+                true,
+            );
         }
     }
 
-    const galleryPreviews = gradioApp().querySelectorAll('div[id^="tab_"] div[id$="_results"] .thumbnail-item > img');
+    const galleryPreviews = gradioApp().querySelectorAll(
+        'div[id^="tab_"] div[id$="_results"] .thumbnail-item > img',
+    );
 
     if (galleryPreviews == null) return;
 
@@ -26,7 +32,9 @@ onAfterUiUpdate(function() {
     lastHeadImg = headImg;
 
     // play notification sound if available
-    const notificationAudio = gradioApp().querySelector('#audio_notification #waveform > div')?.shadowRoot?.querySelector('audio');
+    const notificationAudio = gradioApp()
+        .querySelector("#audio_notification #waveform > div")
+        ?.shadowRoot?.querySelector("audio");
     if (notificationAudio) {
         notificationAudio.volume = opts.notification_volume / 100.0 || 1.0;
         notificationAudio.play();
@@ -35,18 +43,15 @@ onAfterUiUpdate(function() {
     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 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,
-        }
-    );
+    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(_) {
+    notification.onclick = function (_) {
         parent.focus();
         this.close();
     };
diff --git a/javascript/profilerVisualization.js b/javascript/profilerVisualization.js
index 9822f4b2..3c512b21 100644
--- a/javascript/profilerVisualization.js
+++ b/javascript/profilerVisualization.js
@@ -1,21 +1,20 @@
-
 function createRow(table, cellName, items) {
-    var tr = document.createElement('tr');
-    var res = [];
+    let tr = document.createElement("tr");
+    let res = [];
 
-    items.forEach(function(x, i) {
+    items.forEach(function (x, i) {
         if (x === undefined) {
             res.push(null);
             return;
         }
 
-        var td = document.createElement(cellName);
+        let 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++) {
+        let colspan = 1;
+        for (let n = i + 1; n < items.length; n++) {
             if (items[n] !== undefined) {
                 break;
             }
@@ -34,67 +33,67 @@ function createRow(table, cellName, items) {
 }
 
 function createVisualizationTable(data, cutoff = 0, sort = "") {
-    var table = document.createElement('table');
-    table.className = 'popup-table';
+    let table = document.createElement("table");
+    table.className = "popup-table";
 
-    var keys = Object.keys(data);
+    let keys = Object.keys(data);
     if (sort === "number") {
-        keys = keys.sort(function(a, b) {
+        keys = keys.sort(function (a, b) {
             return data[b] - data[a];
         });
     } else {
         keys = keys.sort();
     }
-    var items = keys.map(function(x) {
-        return {key: x, parts: x.split('/'), value: data[x]};
+    let items = keys.map(function (x) {
+        return { key: x, parts: x.split("/"), value: data[x] };
     });
-    var maxLength = items.reduce(function(a, b) {
+    let maxLength = items.reduce(function (a, b) {
         return Math.max(a, b.parts.length);
     }, 0);
 
-    var cols = createRow(
-        table,
-        'th',
-        [
-            cutoff === 0 ? 'key' : 'record',
-            cutoff === 0 ? 'value' : 'seconds'
-        ]
-    );
+    let cols = createRow(table, "th", [
+        cutoff === 0 ? "key" : "record",
+        cutoff === 0 ? "value" : "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);
+    let addLevel = function (level, parent, hide) {
+        let matching = items.filter(function (x) {
+            return (
+                x.parts[level] &&
+                !x.parts[level + 1] &&
+                arraysEqual(x.parts.slice(0, level), parent)
+            );
         });
         if (sort === "number") {
-            matching = matching.sort(function(a, b) {
+            matching = matching.sort(function (a, b) {
                 return b.value - a.value;
             });
         } else {
             matching = matching.sort();
         }
-        var othersTime = 0;
-        var othersList = [];
-        var othersRows = [];
-        var childrenRows = [];
-        matching.forEach(function(x) {
-            var visible = (cutoff === 0 && !hide) || (x.value >= cutoff && !hide);
+        let othersTime = 0;
+        let othersList = [];
+        let othersRows = [];
+        let childrenRows = [];
+        matching.forEach(function (x) {
+            let visible = (cutoff === 0 && !hide) || (x.value >= cutoff && !hide);
 
-            var cells = [];
-            for (var i = 0; i < maxLength; i++) {
+            let cells = [];
+            for (let i = 0; i < maxLength; i++) {
                 cells.push(x.parts[i]);
             }
             cells.push(cutoff === 0 ? x.value : x.value.toFixed(3));
-            var cols = createRow(table, 'td', cells);
+            let cols = createRow(table, "td", cells);
             for (i = 0; i < level; i++) {
-                cols[i].className = 'muted';
+                cols[i].className = "muted";
             }
 
-            var tr = cols[0].parentNode;
+            let tr = cols[0].parentNode;
             if (!visible) {
                 tr.classList.add("hidden");
             }
@@ -107,13 +106,13 @@ function createVisualizationTable(data, cutoff = 0, sort = "") {
                 othersRows.push(tr);
             }
 
-            var children = addLevel(level + 1, parent.concat([x.parts[level]]), true);
+            let children = addLevel(level + 1, parent.concat([x.parts[level]]), true);
             if (children.length > 0) {
-                var cell = cols[level];
-                var onclick = function() {
+                let cell = cols[level];
+                let onclick = function () {
                     cell.classList.remove("link");
                     cell.removeEventListener("click", onclick);
-                    children.forEach(function(x) {
+                    children.forEach(function (x) {
                         x.classList.remove("hidden");
                     });
                 };
@@ -123,24 +122,24 @@ function createVisualizationTable(data, cutoff = 0, sort = "") {
         });
 
         if (othersTime > 0) {
-            var cells = [];
-            for (var i = 0; i < maxLength; i++) {
+            let cells = [];
+            for (let i = 0; i < maxLength; i++) {
                 cells.push(parent[i]);
             }
             cells.push(othersTime.toFixed(3));
-            cells[level] = 'others';
-            var cols = createRow(table, 'td', cells);
+            cells[level] = "others";
+            let cols = createRow(table, "td", cells);
             for (i = 0; i < level; i++) {
-                cols[i].className = 'muted';
+                cols[i].className = "muted";
             }
 
-            var cell = cols[level];
-            var tr = cell.parentNode;
-            var onclick = function() {
+            let cell = cols[level];
+            let tr = cell.parentNode;
+            let onclick = function () {
                 tr.classList.add("hidden");
                 cell.classList.remove("link");
                 cell.removeEventListener("click", onclick);
-                othersRows.forEach(function(x) {
+                othersRows.forEach(function (x) {
                     x.classList.remove("hidden");
                 });
             };
@@ -165,10 +164,9 @@ function createVisualizationTable(data, cutoff = 0, sort = "") {
 }
 
 function showProfile(path, cutoff = 0.05) {
-    requestGet(path, {}, function(data) {
-        data.records['total'] = data.total;
+    requestGet(path, {}, function (data) {
+        data.records["total"] = data.total;
         const table = createVisualizationTable(data.records, cutoff, "number");
         popup(table);
     });
 }
-
diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index 23dea64c..deb1c62a 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -1,22 +1,18 @@
 // code related to showing and updating progressbar shown as the image is being made
 
-function rememberGallerySelection() {
+function rememberGallerySelection() { }
 
-}
-
-function getGallerySelectedIndex() {
-
-}
+function getGallerySelectedIndex() { }
 
 function request(url, data, handler, errorHandler) {
-    var xhr = new XMLHttpRequest();
+    let xhr = new XMLHttpRequest();
     xhr.open("POST", url, true);
     xhr.setRequestHeader("Content-Type", "application/json");
-    xhr.onreadystatechange = function() {
+    xhr.onreadystatechange = function () {
         if (xhr.readyState === 4) {
             if (xhr.status === 200) {
                 try {
-                    var js = JSON.parse(xhr.responseText);
+                    let js = JSON.parse(xhr.responseText);
                     handler(js);
                 } catch (error) {
                     console.error(error);
@@ -27,17 +23,23 @@ function request(url, data, handler, errorHandler) {
             }
         }
     };
-    var js = JSON.stringify(data);
+    let js = JSON.stringify(data);
     xhr.send(js);
 }
 
 function pad2(x) {
-    return x < 10 ? '0' + x : 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);
+        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 {
@@ -45,18 +47,17 @@ function formatTime(secs) {
     }
 }
 
+let originalAppTitle = undefined;
 
-var originalAppTitle = undefined;
-
-onUiLoaded(function() {
+onUiLoaded(function () {
     originalAppTitle = document.title;
 });
 
 function setTitle(progress) {
-    var title = originalAppTitle;
+    let title = originalAppTitle;
 
     if (opts.show_progress_in_title && progress) {
-        title = '[' + progress.trim() + '] ' + title;
+        title = "[" + progress.trim() + "] " + title;
     }
 
     if (document.title != title) {
@@ -64,51 +65,63 @@ function setTitle(progress) {
     }
 }
 
-
 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) + ")";
+    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 wakeLock = null;
+function requestProgress(
+    id_task,
+    progressbarContainer,
+    gallery,
+    atEnd,
+    onProgress,
+    inactivityTimeout = 40,
+) {
+    let dateStart = new Date();
+    let wasEverActive = false;
+    let parentProgressbar = progressbarContainer.parentNode;
+    let wakeLock = null;
 
-    var requestWakeLock = async function() {
+    let requestWakeLock = async function () {
         if (!opts.prevent_screen_sleep_during_generation || wakeLock) return;
         try {
-            wakeLock = await navigator.wakeLock.request('screen');
+            wakeLock = await navigator.wakeLock.request("screen");
         } catch (err) {
-            console.error('Wake Lock is not supported.');
+            console.error("Wake Lock is not supported.");
         }
     };
 
-    var releaseWakeLock = async function() {
+    let releaseWakeLock = async function () {
         if (!opts.prevent_screen_sleep_during_generation || !wakeLock) return;
         try {
             await wakeLock.release();
             wakeLock = null;
         } catch (err) {
-            console.error('Wake Lock release failed', err);
+            console.error("Wake Lock release failed", err);
         }
     };
 
-    var divProgress = document.createElement('div');
-    divProgress.className = 'progressDiv';
+    let divProgress = document.createElement("div");
+    divProgress.className = "progressDiv";
     divProgress.style.display = opts.show_progressbar ? "block" : "none";
-    var divInner = document.createElement('div');
-    divInner.className = 'progress';
+    let divInner = document.createElement("div");
+    divInner.className = "progress";
 
     divProgress.appendChild(divInner);
     parentProgressbar.insertBefore(divProgress, progressbarContainer);
 
-    var livePreview = null;
+    let livePreview = null;
 
-    var removeProgressBar = function() {
+    let removeProgressBar = function () {
         releaseWakeLock();
         if (!divProgress) return;
 
@@ -120,90 +133,104 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
         divProgress = null;
     };
 
-    var funProgress = function(id_task) {
+    let funProgress = function (id_task) {
         requestWakeLock();
-        request("./internal/progress", {id_task: id_task, live_preview: false}, function(res) {
-            if (res.completed) {
+        request(
+            "./internal/progress",
+            { id_task: id_task, live_preview: false },
+            function (res) {
+                if (res.completed) {
+                    removeProgressBar();
+                    return;
+                }
+
+                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;
+
+                let 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 (onProgress) {
+                    onProgress(res);
+                }
+
+                setTimeout(() => {
+                    funProgress(id_task, res.id_live_preview);
+                }, opts.live_preview_refresh_period || 500);
+            },
+            function () {
                 removeProgressBar();
-                return;
-            }
-
-            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 (onProgress) {
-                onProgress(res);
-            }
-
-            setTimeout(() => {
-                funProgress(id_task, res.id_live_preview);
-            }, opts.live_preview_refresh_period || 500);
-        }, function() {
-            removeProgressBar();
-        });
+            },
+        );
     };
 
-    var funLivePreview = function(id_task, id_live_preview) {
-        request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) {
-            if (!divProgress) {
-                return;
-            }
+    let funLivePreview = function (id_task, id_live_preview) {
+        request(
+            "./internal/progress",
+            { id_task: id_task, id_live_preview: id_live_preview },
+            function (res) {
+                if (!divProgress) {
+                    return;
+                }
 
-            if (res.live_preview && gallery) {
-                var img = new Image();
-                img.onload = function() {
-                    if (!livePreview) {
-                        livePreview = document.createElement('div');
-                        livePreview.className = 'livePreview';
-                        gallery.insertBefore(livePreview, gallery.firstElementChild);
-                    }
+                if (res.live_preview && gallery) {
+                    let img = new Image();
+                    img.onload = function () {
+                        if (!livePreview) {
+                            livePreview = document.createElement("div");
+                            livePreview.className = "livePreview";
+                            gallery.insertBefore(livePreview, gallery.firstElementChild);
+                        }
 
-                    livePreview.appendChild(img);
-                    if (livePreview.childElementCount > 2) {
-                        livePreview.removeChild(livePreview.firstElementChild);
-                    }
-                };
-                img.src = res.live_preview;
-            }
+                        livePreview.appendChild(img);
+                        if (livePreview.childElementCount > 2) {
+                            livePreview.removeChild(livePreview.firstElementChild);
+                        }
+                    };
+                    img.src = res.live_preview;
+                }
 
-            setTimeout(() => {
-                funLivePreview(id_task, res.id_live_preview);
-            }, opts.live_preview_refresh_period || 500);
-        }, function() {
-            removeProgressBar();
-        });
+                setTimeout(() => {
+                    funLivePreview(id_task, res.id_live_preview);
+                }, opts.live_preview_refresh_period || 500);
+            },
+            function () {
+                removeProgressBar();
+            },
+        );
     };
 
     funProgress(id_task, 0);
@@ -211,5 +238,4 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
     if (gallery) {
         funLivePreview(id_task, 0);
     }
-
 }
diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js
index 4aeb14b4..c3a029d4 100644
--- a/javascript/resizeHandle.js
+++ b/javascript/resizeHandle.js
@@ -1,4 +1,4 @@
-(function() {
+(function () {
     const GRADIO_MIN_WIDTH = 320;
     const PAD = 16;
     const DEBOUNCE_TIME = 100;
@@ -26,25 +26,32 @@
             return true;
         }
         if (window.innerWidth < GRADIO_MIN_WIDTH * 2 + PAD * 4) {
-            parent.style.display = 'flex';
+            parent.style.display = "flex";
             parent.resizeHandle.style.display = "none";
             return false;
         } else {
-            parent.style.display = 'grid';
+            parent.style.display = "grid";
             parent.resizeHandle.style.display = "block";
             return true;
         }
     }
 
     function afterResize(parent) {
-        if (displayResizeHandle(parent) && parent.style.gridTemplateColumns != parent.style.originalGridTemplateColumns) {
+        if (
+            displayResizeHandle(parent) &&
+            parent.style.gridTemplateColumns !=
+            parent.style.originalGridTemplateColumns
+        ) {
             const oldParentWidth = R.parentWidth;
             const newParentWidth = parent.offsetWidth;
-            const widthL = parseInt(parent.style.gridTemplateColumns.split(' ')[0]);
+            const widthL = parseInt(parent.style.gridTemplateColumns.split(" ")[0]);
 
             const ratio = newParentWidth / oldParentWidth;
 
-            const newWidthL = Math.max(Math.floor(ratio * widthL), parent.minLeftColWidth);
+            const newWidthL = Math.max(
+                Math.floor(ratio * widthL),
+                parent.minLeftColWidth,
+            );
             setLeftColGridTemplate(parent, newWidthL);
 
             R.parentWidth = newParentWidth;
@@ -52,12 +59,12 @@
     }
 
     function setup(parent) {
-
         function onDoubleClick(evt) {
             evt.preventDefault();
             evt.stopPropagation();
 
-            parent.style.gridTemplateColumns = parent.style.originalGridTemplateColumns;
+            parent.style.gridTemplateColumns =
+                parent.style.originalGridTemplateColumns;
         }
 
         const leftCol = parent.firstElementChild;
@@ -65,8 +72,8 @@
 
         parents.push(parent);
 
-        parent.style.display = 'grid';
-        parent.style.gap = '0';
+        parent.style.display = "grid";
+        parent.style.gap = "0";
         let leftColTemplate = "";
         if (parent.children[0].style.flexGrow) {
             leftColTemplate = `${parent.children[0].style.flexGrow}fr`;
@@ -75,33 +82,37 @@
             parent.needHideOnMoblie = true;
         } else {
             leftColTemplate = parent.children[0].style.flexBasis;
-            parent.minLeftColWidth = parent.children[0].style.flexBasis.slice(0, -2) / 2;
+            parent.minLeftColWidth =
+                parent.children[0].style.flexBasis.slice(0, -2) / 2;
             parent.minRightColWidth = 0;
             parent.needHideOnMoblie = false;
         }
 
         if (!leftColTemplate) {
-            leftColTemplate = '1fr';
+            leftColTemplate = "1fr";
         }
 
         const gridTemplateColumns = `${leftColTemplate} ${PAD}px ${parent.children[1].style.flexGrow}fr`;
         parent.style.gridTemplateColumns = gridTemplateColumns;
         parent.style.originalGridTemplateColumns = gridTemplateColumns;
 
-        const resizeHandle = document.createElement('div');
-        resizeHandle.classList.add('resize-handle');
+        const resizeHandle = document.createElement("div");
+        resizeHandle.classList.add("resize-handle");
         parent.insertBefore(resizeHandle, rightCol);
         parent.resizeHandle = resizeHandle;
 
-        ['mousedown', 'touchstart'].forEach((eventType) => {
+        ["mousedown", "touchstart"].forEach((eventType) => {
             resizeHandle.addEventListener(eventType, (evt) => {
-                if (eventType.startsWith('mouse')) {
+                if (eventType.startsWith("mouse")) {
                     if (evt.button !== 0) return;
                 } else {
                     if (evt.changedTouches.length !== 1) return;
 
                     const currentTime = new Date().getTime();
-                    if (R.lastTapTime && currentTime - R.lastTapTime <= DOUBLE_TAP_DELAY) {
+                    if (
+                        R.lastTapTime &&
+                        currentTime - R.lastTapTime <= DOUBLE_TAP_DELAY
+                    ) {
                         onDoubleClick(evt);
                         return;
                     }
@@ -112,14 +123,14 @@
                 evt.preventDefault();
                 evt.stopPropagation();
 
-                document.body.classList.add('resizing');
+                document.body.classList.add("resizing");
 
                 R.tracking = true;
                 R.parent = parent;
                 R.parentWidth = parent.offsetWidth;
                 R.leftCol = leftCol;
                 R.leftColStartWidth = leftCol.offsetWidth;
-                if (eventType.startsWith('mouse')) {
+                if (eventType.startsWith("mouse")) {
                     R.screenX = evt.screenX;
                 } else {
                     R.screenX = evt.changedTouches[0].screenX;
@@ -127,40 +138,46 @@
             });
         });
 
-        resizeHandle.addEventListener('dblclick', onDoubleClick);
+        resizeHandle.addEventListener("dblclick", onDoubleClick);
 
         afterResize(parent);
     }
 
-    ['mousemove', 'touchmove'].forEach((eventType) => {
+    ["mousemove", "touchmove"].forEach((eventType) => {
         window.addEventListener(eventType, (evt) => {
-            if (eventType.startsWith('mouse')) {
+            if (eventType.startsWith("mouse")) {
                 if (evt.button !== 0) return;
             } else {
                 if (evt.changedTouches.length !== 1) return;
             }
 
             if (R.tracking) {
-                if (eventType.startsWith('mouse')) {
+                if (eventType.startsWith("mouse")) {
                     evt.preventDefault();
                 }
                 evt.stopPropagation();
 
                 let delta = 0;
-                if (eventType.startsWith('mouse')) {
+                if (eventType.startsWith("mouse")) {
                     delta = R.screenX - evt.screenX;
                 } else {
                     delta = R.screenX - evt.changedTouches[0].screenX;
                 }
-                const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - R.parent.minRightColWidth - PAD), R.parent.minLeftColWidth);
+                const leftColWidth = Math.max(
+                    Math.min(
+                        R.leftColStartWidth - delta,
+                        R.parent.offsetWidth - R.parent.minRightColWidth - PAD,
+                    ),
+                    R.parent.minLeftColWidth,
+                );
                 setLeftColGridTemplate(R.parent, leftColWidth);
             }
         });
     });
 
-    ['mouseup', 'touchend'].forEach((eventType) => {
+    ["mouseup", "touchend"].forEach((eventType) => {
         window.addEventListener(eventType, (evt) => {
-            if (eventType.startsWith('mouse')) {
+            if (eventType.startsWith("mouse")) {
                 if (evt.button !== 0) return;
             } else {
                 if (evt.changedTouches.length !== 1) return;
@@ -172,16 +189,15 @@
 
                 R.tracking = false;
 
-                document.body.classList.remove('resizing');
+                document.body.classList.remove("resizing");
             }
         });
     });
 
-
-    window.addEventListener('resize', () => {
+    window.addEventListener("resize", () => {
         clearTimeout(resizeTimer);
 
-        resizeTimer = setTimeout(function() {
+        resizeTimer = setTimeout(function () {
             for (const parent of parents) {
                 afterResize(parent);
             }
@@ -191,15 +207,15 @@
     setupResizeHandle = setup;
 })();
 
-
 function setupAllResizeHandles() {
-    for (var elem of gradioApp().querySelectorAll('.resize-handle-row')) {
-        if (!elem.querySelector('.resize-handle') && !elem.children[0].classList.contains("hidden")) {
+    for (let elem of gradioApp().querySelectorAll(".resize-handle-row")) {
+        if (
+            !elem.querySelector(".resize-handle") &&
+            !elem.children[0].classList.contains("hidden")
+        ) {
             setupResizeHandle(elem);
         }
     }
 }
 
-
 onUiLoaded(setupAllResizeHandles);
-
diff --git a/javascript/settings.js b/javascript/settings.js
index b2d981c2..a1c9b2d2 100644
--- a/javascript/settings.js
+++ b/javascript/settings.js
@@ -6,30 +6,41 @@ let settingsExcludeTabsFromShowAll = {
 };
 
 function settingsShowAllTabs() {
-    gradioApp().querySelectorAll('#settings > div').forEach(function(elem) {
-        if (settingsExcludeTabsFromShowAll[elem.id]) return;
+    gradioApp()
+        .querySelectorAll("#settings > div")
+        .forEach(function (elem) {
+            if (settingsExcludeTabsFromShowAll[elem.id]) return;
 
-        elem.style.display = "block";
-    });
+            elem.style.display = "block";
+        });
 }
 
 function settingsShowOneTab() {
-    gradioApp().querySelector('#settings_show_one_page').click();
+    gradioApp().querySelector("#settings_show_one_page").click();
 }
 
-onUiLoaded(function() {
-    var edit = gradioApp().querySelector('#settings_search');
-    var editTextarea = gradioApp().querySelector('#settings_search > label > input');
-    var buttonShowAllPages = gradioApp().getElementById('settings_show_all_pages');
-    var settings_tabs = gradioApp().querySelector('#settings div');
+onUiLoaded(function () {
+    let edit = gradioApp().querySelector("#settings_search");
+    let editTextarea = gradioApp().querySelector(
+        "#settings_search > label > input",
+    );
+    let buttonShowAllPages = gradioApp().getElementById(
+        "settings_show_all_pages",
+    );
+    let settings_tabs = gradioApp().querySelector("#settings div");
 
-    onEdit('settingsSearch', editTextarea, 250, function() {
-        var searchText = (editTextarea.value || "").trim().toLowerCase();
+    onEdit("settingsSearch", editTextarea, 250, function () {
+        let searchText = (editTextarea.value || "").trim().toLowerCase();
 
-        gradioApp().querySelectorAll('#settings > div[id^=settings_] div[id^=column_settings_] > *').forEach(function(elem) {
-            var visible = elem.textContent.trim().toLowerCase().indexOf(searchText) != -1;
-            elem.style.display = visible ? "" : "none";
-        });
+        gradioApp()
+            .querySelectorAll(
+                "#settings > div[id^=settings_] div[id^=column_settings_] > *",
+            )
+            .forEach(function (elem) {
+                let visible =
+                    elem.textContent.trim().toLowerCase().indexOf(searchText) != -1;
+                elem.style.display = visible ? "" : "none";
+            });
 
         if (searchText != "") {
             settingsShowAllTabs();
@@ -41,31 +52,30 @@ onUiLoaded(function() {
     settings_tabs.insertBefore(edit, settings_tabs.firstChild);
     settings_tabs.appendChild(buttonShowAllPages);
 
-
     buttonShowAllPages.addEventListener("click", settingsShowAllTabs);
 });
 
+onOptionsChanged(function () {
+    if (gradioApp().querySelector("#settings .settings-category")) return;
 
-onOptionsChanged(function() {
-    if (gradioApp().querySelector('#settings .settings-category')) return;
+    let sectionMap = {};
+    gradioApp()
+        .querySelectorAll("#settings > div > button")
+        .forEach(function (x) {
+            sectionMap[x.textContent.trim()] = x;
+        });
 
-    var sectionMap = {};
-    gradioApp().querySelectorAll('#settings > div > button').forEach(function(x) {
-        sectionMap[x.textContent.trim()] = x;
-    });
+    opts._categories.forEach(function (x) {
+        let section = localization[x[0]] ?? x[0];
+        let category = localization[x[1]] ?? x[1];
 
-    opts._categories.forEach(function(x) {
-        var section = localization[x[0]] ?? x[0];
-        var category = localization[x[1]] ?? x[1];
-
-        var span = document.createElement('SPAN');
+        let span = document.createElement("SPAN");
         span.textContent = category;
-        span.className = 'settings-category';
+        span.className = "settings-category";
 
-        var sectionElem = sectionMap[section];
+        let sectionElem = sectionMap[section];
         if (!sectionElem) return;
 
         sectionElem.parentElement.insertBefore(span, sectionElem);
     });
 });
-
diff --git a/javascript/textualInversion.js b/javascript/textualInversion.js
deleted file mode 100644
index 20443fcc..00000000
--- a/javascript/textualInversion.js
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
-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;
-}
diff --git a/javascript/token-counters.js b/javascript/token-counters.js
index eeea7a5d..30d12f33 100644
--- a/javascript/token-counters.js
+++ b/javascript/token-counters.js
@@ -24,29 +24,28 @@ function update_token_counter(button_id) {
     promptTokenCountUpdateFunctions[button_id]?.();
 }
 
-
 function recalculatePromptTokens(name) {
     promptTokenCountUpdateFunctions[name]?.();
 }
 
 function recalculate_prompts_txt2img() {
     // Called from Gradio
-    recalculatePromptTokens('txt2img_prompt');
-    recalculatePromptTokens('txt2img_neg_prompt');
+    recalculatePromptTokens("txt2img_prompt");
+    recalculatePromptTokens("txt2img_neg_prompt");
     return Array.from(arguments);
 }
 
 function recalculate_prompts_img2img() {
     // Called from Gradio
-    recalculatePromptTokens('img2img_prompt');
-    recalculatePromptTokens('img2img_neg_prompt');
+    recalculatePromptTokens("img2img_prompt");
+    recalculatePromptTokens("img2img_neg_prompt");
     return Array.from(arguments);
 }
 
 function setupTokenCounting(id, id_counter, id_button) {
-    var prompt = gradioApp().getElementById(id);
-    var counter = gradioApp().getElementById(id_counter);
-    var textarea = gradioApp().querySelector(`#${id} > label > textarea`);
+    let prompt = gradioApp().getElementById(id);
+    let counter = gradioApp().getElementById(id_counter);
+    let textarea = gradioApp().querySelector(`#${id} > label > textarea`);
 
     if (counter.parentElement == prompt.parentElement) {
         return;
@@ -55,7 +54,7 @@ function setupTokenCounting(id, id_counter, id_button) {
     prompt.parentElement.insertBefore(counter, prompt);
     prompt.parentElement.style.position = "relative";
 
-    var func = onEdit(id, textarea, 800, function() {
+    let func = onEdit(id, textarea, 800, function () {
         if (counter.classList.contains("token-counter-visible")) {
             gradioApp().getElementById(id_button)?.click();
         }
@@ -65,23 +64,34 @@ function setupTokenCounting(id, id_counter, id_button) {
 }
 
 function toggleTokenCountingVisibility(id, id_counter, id_button) {
-    var counter = gradioApp().getElementById(id_counter);
+    let counter = gradioApp().getElementById(id_counter);
 
     counter.style.display = opts.disable_token_counters ? "none" : "block";
-    counter.classList.toggle("token-counter-visible", !opts.disable_token_counters);
+    counter.classList.toggle(
+        "token-counter-visible",
+        !opts.disable_token_counters,
+    );
 }
 
 function runCodeForTokenCounters(fun) {
-    fun('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button');
-    fun('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button');
-    fun('img2img_prompt', 'img2img_token_counter', 'img2img_token_button');
-    fun('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button');
+    fun("txt2img_prompt", "txt2img_token_counter", "txt2img_token_button");
+    fun(
+        "txt2img_neg_prompt",
+        "txt2img_negative_token_counter",
+        "txt2img_negative_token_button",
+    );
+    fun("img2img_prompt", "img2img_token_counter", "img2img_token_button");
+    fun(
+        "img2img_neg_prompt",
+        "img2img_negative_token_counter",
+        "img2img_negative_token_button",
+    );
 }
 
-onUiLoaded(function() {
+onUiLoaded(function () {
     runCodeForTokenCounters(setupTokenCounting);
 });
 
-onOptionsChanged(function() {
+onOptionsChanged(function () {
     runCodeForTokenCounters(toggleTokenCountingVisibility);
 });
diff --git a/javascript/ui.js b/javascript/ui.js
index e46ccfdb..d38d5b20 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -1,16 +1,18 @@
 // various functions for interaction with ui.py not large enough to warrant putting them in separate files
 
 function set_theme(theme) {
-    var gradioURL = window.location.href;
-    if (!gradioURL.includes('?__theme=')) {
-        window.location.replace(gradioURL + '?__theme=' + theme);
+    let gradioURL = window.location.href;
+    if (!gradioURL.includes("?__theme=")) {
+        window.location.replace(gradioURL + "?__theme=" + theme);
     }
 }
 
 function all_gallery_buttons() {
-    var allGalleryButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small');
-    var visibleGalleryButtons = [];
-    allGalleryButtons.forEach(function(elem) {
+    let allGalleryButtons = gradioApp().querySelectorAll(
+        '[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small',
+    );
+    let visibleGalleryButtons = [];
+    allGalleryButtons.forEach(function (elem) {
         if (elem.parentElement.offsetParent) {
             visibleGalleryButtons.push(elem);
         }
@@ -19,19 +21,28 @@ function all_gallery_buttons() {
 }
 
 function selected_gallery_button() {
-    return all_gallery_buttons().find(elem => elem.classList.contains('selected')) ?? null;
+    return (
+        all_gallery_buttons().find((elem) => elem.classList.contains("selected")) ??
+        null
+    );
 }
 
 function selected_gallery_index() {
-    return all_gallery_buttons().findIndex(elem => elem.classList.contains('selected'));
+    return all_gallery_buttons().findIndex((elem) =>
+        elem.classList.contains("selected"),
+    );
 }
 
 function gallery_container_buttons(gallery_container) {
-    return gradioApp().querySelectorAll(`#${gallery_container} .thumbnail-item.thumbnail-small`);
+    return gradioApp().querySelectorAll(
+        `#${gallery_container} .thumbnail-item.thumbnail-small`,
+    );
 }
 
 function selected_gallery_index_id(gallery_container) {
-    return Array.from(gallery_container_buttons(gallery_container)).findIndex(elem => elem.classList.contains('selected'));
+    return Array.from(gallery_container_buttons(gallery_container)).findIndex(
+        (elem) => elem.classList.contains("selected"),
+    );
 }
 
 function extract_image_from_gallery(gallery) {
@@ -39,7 +50,7 @@ function extract_image_from_gallery(gallery) {
         return [null];
     }
 
-    var index = selected_gallery_index();
+    let index = selected_gallery_index();
 
     if (index < 0 || index >= gallery.length) {
         // Use the first image in the gallery as the default
@@ -52,14 +63,17 @@ function extract_image_from_gallery(gallery) {
 window.args_to_array = Array.from; // Compatibility with e.g. extensions that may expect this to be around
 
 function switch_to_txt2img() {
-    gradioApp().querySelector('#tabs').querySelectorAll('button')[0].click();
+    gradioApp().querySelector("#tabs").querySelectorAll("button")[0].click();
 
     return Array.from(arguments);
 }
 
 function switch_to_img2img_tab(no) {
-    gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
-    gradioApp().getElementById('mode_img2img').querySelectorAll('button')[no].click();
+    gradioApp().querySelector("#tabs").querySelectorAll("button")[1].click();
+    gradioApp()
+        .getElementById("mode_img2img")
+        .querySelectorAll("button")
+    [no].click();
 }
 function switch_to_img2img() {
     switch_to_img2img_tab(0);
@@ -82,15 +96,18 @@ function switch_to_inpaint_sketch() {
 }
 
 function switch_to_extras() {
-    gradioApp().querySelector('#tabs').querySelectorAll('button')[3].click();
+    gradioApp().querySelector("#tabs").querySelectorAll("button")[3].click();
 
     return Array.from(arguments);
 }
 
 function get_tab_index(tabId) {
-    let buttons = gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button');
+    let buttons = gradioApp()
+        .getElementById(tabId)
+        .querySelector("div")
+        .querySelectorAll("button");
     for (let i = 0; i < buttons.length; i++) {
-        if (buttons[i].classList.contains('selected')) {
+        if (buttons[i].classList.contains("selected")) {
             return i;
         }
     }
@@ -98,7 +115,7 @@ function get_tab_index(tabId) {
 }
 
 function create_tab_index_args(tabId, args) {
-    var res = Array.from(args);
+    let res = Array.from(args);
     res[0] = get_tab_index(tabId);
     return res;
 }
@@ -106,12 +123,12 @@ function create_tab_index_args(tabId, args) {
 function get_img2img_tab_index() {
     let res = Array.from(arguments);
     res.splice(-2);
-    res[0] = get_tab_index('mode_img2img');
+    res[0] = get_tab_index("mode_img2img");
     return res;
 }
 
 function create_submit_args(args) {
-    var res = Array.from(args);
+    let res = Array.from(args);
 
     // As it is currently, txt2img and img2img send back the previous output args (txt2img_gallery, generation_info, html_info) whenever you generate a new image.
     // This can lead to uploading a huge gallery of previously generated images, which leads to an unnecessary delay between submitting and beginning to generate.
@@ -131,10 +148,19 @@ function create_submit_args(args) {
     return res;
 }
 
-function setSubmitButtonsVisibility(tabname, showInterrupt, showSkip, showInterrupting) {
-    gradioApp().getElementById(tabname + '_interrupt').style.display = showInterrupt ? "block" : "none";
-    gradioApp().getElementById(tabname + '_skip').style.display = showSkip ? "block" : "none";
-    gradioApp().getElementById(tabname + '_interrupting').style.display = showInterrupting ? "block" : "none";
+function setSubmitButtonsVisibility(
+    tabname,
+    showInterrupt,
+    showSkip,
+    showInterrupting,
+) {
+    gradioApp().getElementById(tabname + "_interrupt").style.display =
+        showInterrupt ? "block" : "none";
+    gradioApp().getElementById(tabname + "_skip").style.display = showSkip
+        ? "block"
+        : "none";
+    gradioApp().getElementById(tabname + "_interrupting").style.display =
+        showInterrupting ? "block" : "none";
 }
 
 function showSubmitButtons(tabname, show) {
@@ -146,24 +172,29 @@ function showSubmitInterruptingPlaceholder(tabname) {
 }
 
 function showRestoreProgressButton(tabname, show) {
-    var button = gradioApp().getElementById(tabname + "_restore_progress");
+    let button = gradioApp().getElementById(tabname + "_restore_progress");
     if (!button) return;
-    button.style.setProperty('display', show ? 'flex' : 'none', 'important');
+    button.style.setProperty("display", show ? "flex" : "none", "important");
 }
 
 function submit() {
-    showSubmitButtons('txt2img', false);
+    showSubmitButtons("txt2img", false);
 
-    var id = randomId();
+    let id = randomId();
     localSet("txt2img_task_id", id);
 
-    requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
-        showSubmitButtons('txt2img', true);
-        localRemove("txt2img_task_id");
-        showRestoreProgressButton('txt2img', false);
-    });
+    requestProgress(
+        id,
+        gradioApp().getElementById("txt2img_gallery_container"),
+        gradioApp().getElementById("txt2img_gallery"),
+        function () {
+            showSubmitButtons("txt2img", true);
+            localRemove("txt2img_task_id");
+            showRestoreProgressButton("txt2img", false);
+        },
+    );
 
-    var res = create_submit_args(arguments);
+    let res = create_submit_args(arguments);
 
     res[0] = id;
 
@@ -171,7 +202,7 @@ function submit() {
 }
 
 function submit_txt2img_upscale() {
-    var res = submit(...arguments);
+    let res = submit(...arguments);
 
     res[2] = selected_gallery_index();
 
@@ -179,18 +210,23 @@ function submit_txt2img_upscale() {
 }
 
 function submit_img2img() {
-    showSubmitButtons('img2img', false);
+    showSubmitButtons("img2img", false);
 
-    var id = randomId();
+    let id = randomId();
     localSet("img2img_task_id", id);
 
-    requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
-        showSubmitButtons('img2img', true);
-        localRemove("img2img_task_id");
-        showRestoreProgressButton('img2img', false);
-    });
+    requestProgress(
+        id,
+        gradioApp().getElementById("img2img_gallery_container"),
+        gradioApp().getElementById("img2img_gallery"),
+        function () {
+            showSubmitButtons("img2img", true);
+            localRemove("img2img_task_id");
+            showRestoreProgressButton("img2img", false);
+        },
+    );
 
-    var res = create_submit_args(arguments);
+    let res = create_submit_args(arguments);
 
     res[0] = id;
 
@@ -198,15 +234,20 @@ function submit_img2img() {
 }
 
 function submit_extras() {
-    showSubmitButtons('extras', false);
+    showSubmitButtons("extras", false);
 
-    var id = randomId();
+    let id = randomId();
 
-    requestProgress(id, gradioApp().getElementById('extras_gallery_container'), gradioApp().getElementById('extras_gallery'), function() {
-        showSubmitButtons('extras', true);
-    });
+    requestProgress(
+        id,
+        gradioApp().getElementById("extras_gallery_container"),
+        gradioApp().getElementById("extras_gallery"),
+        function () {
+            showSubmitButtons("extras", true);
+        },
+    );
 
-    var res = create_submit_args(arguments);
+    let res = create_submit_args(arguments);
 
     res[0] = id;
 
@@ -215,13 +256,20 @@ function submit_extras() {
 
 function restoreProgressTxt2img() {
     showRestoreProgressButton("txt2img", false);
-    var id = localGet("txt2img_task_id");
+    let id = localGet("txt2img_task_id");
 
     if (id) {
-        showSubmitInterruptingPlaceholder('txt2img');
-        requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
-            showSubmitButtons('txt2img', true);
-        }, null, 0);
+        showSubmitInterruptingPlaceholder("txt2img");
+        requestProgress(
+            id,
+            gradioApp().getElementById("txt2img_gallery_container"),
+            gradioApp().getElementById("txt2img_gallery"),
+            function () {
+                showSubmitButtons("txt2img", true);
+            },
+            null,
+            0,
+        );
     }
 
     return id;
@@ -230,30 +278,38 @@ function restoreProgressTxt2img() {
 function restoreProgressImg2img() {
     showRestoreProgressButton("img2img", false);
 
-    var id = localGet("img2img_task_id");
+    let id = localGet("img2img_task_id");
 
     if (id) {
-        showSubmitInterruptingPlaceholder('img2img');
-        requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
-            showSubmitButtons('img2img', true);
-        }, null, 0);
+        showSubmitInterruptingPlaceholder("img2img");
+        requestProgress(
+            id,
+            gradioApp().getElementById("img2img_gallery_container"),
+            gradioApp().getElementById("img2img_gallery"),
+            function () {
+                showSubmitButtons("img2img", true);
+            },
+            null,
+            0,
+        );
     }
 
     return id;
 }
 
-
 /**
  * Configure the width and height elements on `tabname` to accept
  * pasting of resolutions in the form of "width x height".
  */
 function setupResolutionPasting(tabname) {
-    var width = gradioApp().querySelector(`#${tabname}_width input[type=number]`);
-    var height = gradioApp().querySelector(`#${tabname}_height input[type=number]`);
+    let width = gradioApp().querySelector(`#${tabname}_width input[type=number]`);
+    let height = gradioApp().querySelector(
+        `#${tabname}_height input[type=number]`,
+    );
     for (const el of [width, height]) {
-        el.addEventListener('paste', function(event) {
-            var pasteData = event.clipboardData.getData('text/plain');
-            var parsed = pasteData.match(/^\s*(\d+)\D+(\d+)\s*$/);
+        el.addEventListener("paste", function (event) {
+            let pasteData = event.clipboardData.getData("text/plain");
+            let parsed = pasteData.match(/^\s*(\d+)\D+(\d+)\s*$/);
             if (parsed) {
                 width.value = parsed[1];
                 height.value = parsed[2];
@@ -265,26 +321,29 @@ function setupResolutionPasting(tabname) {
     }
 }
 
-onUiLoaded(function() {
-    showRestoreProgressButton('txt2img', localGet("txt2img_task_id"));
-    showRestoreProgressButton('img2img', localGet("img2img_task_id"));
-    setupResolutionPasting('txt2img');
-    setupResolutionPasting('img2img');
+onUiLoaded(function () {
+    showRestoreProgressButton("txt2img", localGet("txt2img_task_id"));
+    showRestoreProgressButton("img2img", localGet("img2img_task_id"));
+    setupResolutionPasting("txt2img");
+    setupResolutionPasting("img2img");
 });
 
-
 function modelmerger() {
-    var id = randomId();
-    requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null, function() {});
+    let id = randomId();
+    requestProgress(
+        id,
+        gradioApp().getElementById("modelmerger_results_panel"),
+        null,
+        function () { },
+    );
 
-    var res = create_submit_args(arguments);
+    let res = create_submit_args(arguments);
     res[0] = id;
     return res;
 }
 
-
 function ask_for_style_name(_, prompt_text, negative_prompt_text) {
-    var name_ = prompt('Style name:');
+    let name_ = prompt("Style name:");
     return [name_, prompt_text, negative_prompt_text];
 }
 
@@ -297,25 +356,29 @@ function confirm_clear_prompt(prompt, negative_prompt) {
     return [prompt, negative_prompt];
 }
 
-
-var opts = {};
-onAfterUiUpdate(function() {
+let opts = {};
+onAfterUiUpdate(function () {
     if (Object.keys(opts).length != 0) return;
 
-    var json_elem = gradioApp().getElementById('settings_json');
+    let json_elem = gradioApp().getElementById("settings_json");
     if (json_elem == null) return;
 
-    var textarea = json_elem.querySelector('textarea');
-    var jsdata = textarea.value;
+    let textarea = json_elem.querySelector("textarea");
+    let jsdata = textarea.value;
     opts = JSON.parse(jsdata);
 
-    executeCallbacks(optionsAvailableCallbacks); /*global optionsAvailableCallbacks*/
+    executeCallbacks(
+        optionsAvailableCallbacks,
+    ); /*global optionsAvailableCallbacks*/
     executeCallbacks(optionsChangedCallbacks); /*global optionsChangedCallbacks*/
 
-    Object.defineProperty(textarea, 'value', {
-        set: function(newValue) {
-            var valueProp = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
-            var oldValue = valueProp.get.call(textarea);
+    Object.defineProperty(textarea, "value", {
+        set: function (newValue) {
+            let valueProp = Object.getOwnPropertyDescriptor(
+                HTMLTextAreaElement.prototype,
+                "value",
+            );
+            let oldValue = valueProp.get.call(textarea);
             valueProp.set.call(textarea, newValue);
 
             if (oldValue != newValue) {
@@ -324,19 +387,22 @@ onAfterUiUpdate(function() {
 
             executeCallbacks(optionsChangedCallbacks);
         },
-        get: function() {
-            var valueProp = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
+        get: function () {
+            let valueProp = Object.getOwnPropertyDescriptor(
+                HTMLTextAreaElement.prototype,
+                "value",
+            );
             return valueProp.get.call(textarea);
-        }
+        },
     });
 
     json_elem.parentElement.style.display = "none";
 });
 
-onOptionsChanged(function() {
-    var elem = gradioApp().getElementById('sd_checkpoint_hash');
-    var sd_checkpoint_hash = opts.sd_checkpoint_hash || "";
-    var shorthash = sd_checkpoint_hash.substring(0, 10);
+onOptionsChanged(function () {
+    let elem = gradioApp().getElementById("sd_checkpoint_hash");
+    let sd_checkpoint_hash = opts.sd_checkpoint_hash || "";
+    let shorthash = sd_checkpoint_hash.substring(0, 10);
 
     if (elem && elem.textContent != shorthash) {
         elem.textContent = shorthash;
@@ -345,17 +411,24 @@ onOptionsChanged(function() {
     }
 });
 
-let txt2img_textarea, img2img_textarea = undefined;
+let txt2img_textarea,
+    img2img_textarea = undefined;
 
 function restart_reload() {
     document.body.style.backgroundColor = "var(--background-fill-primary)";
-    document.body.innerHTML = '<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
-    var requestPing = function() {
-        requestGet("./internal/ping", {}, function(data) {
-            location.reload();
-        }, function() {
-            setTimeout(requestPing, 500);
-        });
+    document.body.innerHTML =
+        '<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
+    let requestPing = function () {
+        requestGet(
+            "./internal/ping",
+            {},
+            function (data) {
+                location.reload();
+            },
+            function () {
+                setTimeout(requestPing, 500);
+            },
+        );
     };
 
     setTimeout(requestPing, 2000);
@@ -366,43 +439,43 @@ function restart_reload() {
 // Simulate an `input` DOM event for Gradio Textbox component. Needed after you edit its contents in javascript, otherwise your edits
 // will only visible on web page and not sent to python.
 function updateInput(target) {
-    let e = new Event("input", {bubbles: true});
-    Object.defineProperty(e, "target", {value: target});
+    let e = new Event("input", { bubbles: true });
+    Object.defineProperty(e, "target", { value: target });
     target.dispatchEvent(e);
 }
 
-
-var desiredCheckpointName = null;
+let desiredCheckpointName = null;
 function selectCheckpoint(name) {
     desiredCheckpointName = name;
-    gradioApp().getElementById('change_checkpoint').click();
+    gradioApp().getElementById("change_checkpoint").click();
 }
-var desiredVAEName = 0;
+let desiredVAEName = 0;
 function selectVAE(vae) {
     desiredVAEName = vae;
 }
 
 function currentImg2imgSourceResolution(w, h, r) {
-    var img = gradioApp().querySelector('#mode_img2img > div[style="display: block;"] :is(img, canvas)');
-    return img ? [img.naturalWidth || img.width, img.naturalHeight || img.height, r] : [0, 0, r];
+    let img = gradioApp().querySelector(
+        '#mode_img2img > div[style="display: block;"] :is(img, canvas)',
+    );
+    return img
+        ? [img.naturalWidth || img.width, img.naturalHeight || img.height, r]
+        : [0, 0, r];
 }
 
 function updateImg2imgResizeToTextAfterChangingImage() {
     // At the time this is called from gradio, the image has no yet been replaced.
     // There may be a better solution, but this is simple and straightforward so I'm going with it.
 
-    setTimeout(function() {
-        gradioApp().getElementById('img2img_update_resize_to').click();
+    setTimeout(function () {
+        gradioApp().getElementById("img2img_update_resize_to").click();
     }, 500);
 
     return [];
-
 }
 
-
-
 function setRandomSeed(elem_id) {
-    var input = gradioApp().querySelector("#" + elem_id + " input");
+    let input = gradioApp().querySelector("#" + elem_id + " input");
     if (!input) return [];
 
     input.value = "-1";
@@ -411,11 +484,15 @@ function setRandomSeed(elem_id) {
 }
 
 function switchWidthHeight(tabname) {
-    var width = gradioApp().querySelector("#" + tabname + "_width input[type=number]");
-    var height = gradioApp().querySelector("#" + tabname + "_height input[type=number]");
+    let width = gradioApp().querySelector(
+        "#" + tabname + "_width input[type=number]",
+    );
+    let height = gradioApp().querySelector(
+        "#" + tabname + "_height input[type=number]",
+    );
     if (!width || !height) return [];
 
-    var tmp = width.value;
+    let tmp = width.value;
     width.value = height.value;
     height.value = tmp;
 
@@ -424,13 +501,12 @@ function switchWidthHeight(tabname) {
     return [];
 }
 
-
-var onEditTimers = {};
+let onEditTimers = {};
 
 // calls func after afterMs milliseconds has passed since the input elem has been edited by user
 function onEdit(editId, elem, afterMs, func) {
-    var edited = function() {
-        var existingTimer = onEditTimers[editId];
+    let edited = function () {
+        let existingTimer = onEditTimers[editId];
         if (existingTimer) clearTimeout(existingTimer);
 
         onEditTimers[editId] = setTimeout(func, afterMs);
diff --git a/javascript/ui_settings_hints.js b/javascript/ui_settings_hints.js
index c3984bd0..9625260b 100644
--- a/javascript/ui_settings_hints.js
+++ b/javascript/ui_settings_hints.js
@@ -1,62 +1,67 @@
 // various hints and extra info for the settings tab
 
-var settingsHintsSetup = false;
+let settingsHintsSetup = false;
 
-onOptionsChanged(function() {
+onOptionsChanged(function () {
     if (settingsHintsSetup) return;
     settingsHintsSetup = true;
 
-    gradioApp().querySelectorAll('#settings [id^=setting_]').forEach(function(div) {
-        var name = div.id.substr(8);
-        var commentBefore = opts._comments_before[name];
-        var commentAfter = opts._comments_after[name];
+    gradioApp()
+        .querySelectorAll("#settings [id^=setting_]")
+        .forEach(function (div) {
+            let name = div.id.substr(8);
+            let commentBefore = opts._comments_before[name];
+            let commentAfter = opts._comments_after[name];
 
-        if (!commentBefore && !commentAfter) return;
+            if (!commentBefore && !commentAfter) return;
 
-        var span = null;
-        if (div.classList.contains('gradio-checkbox')) {
-            span = div.querySelector('label span');
-        } else if (div.classList.contains('gradio-checkboxgroup')) {
-            span = div.querySelector('span').firstChild;
-        } else if (div.classList.contains('gradio-radio')) {
-            span = div.querySelector('span').firstChild;
-        } else {
-            var elem = div.querySelector('label span');
-            if (elem) span = elem.firstChild;
-        }
+            let span = null;
+            if (div.classList.contains("gradio-checkbox")) {
+                span = div.querySelector("label span");
+            } else if (div.classList.contains("gradio-checkboxgroup")) {
+                span = div.querySelector("span").firstChild;
+            } else if (div.classList.contains("gradio-radio")) {
+                span = div.querySelector("span").firstChild;
+            } else {
+                let elem = div.querySelector("label span");
+                if (elem) span = elem.firstChild;
+            }
 
-        if (!span) return;
+            if (!span) return;
 
-        if (commentBefore) {
-            var comment = document.createElement('DIV');
-            comment.className = 'settings-comment';
-            comment.innerHTML = commentBefore;
-            span.parentElement.insertBefore(document.createTextNode('\xa0'), span);
-            span.parentElement.insertBefore(comment, span);
-            span.parentElement.insertBefore(document.createTextNode('\xa0'), span);
-        }
-        if (commentAfter) {
-            comment = document.createElement('DIV');
-            comment.className = 'settings-comment';
-            comment.innerHTML = commentAfter;
-            span.parentElement.insertBefore(comment, span.nextSibling);
-            span.parentElement.insertBefore(document.createTextNode('\xa0'), span.nextSibling);
-        }
-    });
+            if (commentBefore) {
+                let comment = document.createElement("DIV");
+                comment.className = "settings-comment";
+                comment.innerHTML = commentBefore;
+                span.parentElement.insertBefore(document.createTextNode("\xa0"), span);
+                span.parentElement.insertBefore(comment, span);
+                span.parentElement.insertBefore(document.createTextNode("\xa0"), span);
+            }
+            if (commentAfter) {
+                comment = document.createElement("DIV");
+                comment.className = "settings-comment";
+                comment.innerHTML = commentAfter;
+                span.parentElement.insertBefore(comment, span.nextSibling);
+                span.parentElement.insertBefore(
+                    document.createTextNode("\xa0"),
+                    span.nextSibling,
+                );
+            }
+        });
 });
 
 function settingsHintsShowQuicksettings() {
-    requestGet("./internal/quicksettings-hint", {}, function(data) {
-        var table = document.createElement('table');
-        table.className = 'popup-table';
+    requestGet("./internal/quicksettings-hint", {}, function (data) {
+        let table = document.createElement("table");
+        table.className = "popup-table";
 
-        data.forEach(function(obj) {
-            var tr = document.createElement('tr');
-            var td = document.createElement('td');
+        data.forEach(function (obj) {
+            let tr = document.createElement("tr");
+            let td = document.createElement("td");
             td.textContent = obj.name;
             tr.appendChild(td);
 
-            td = document.createElement('td');
+            td = document.createElement("td");
             td.textContent = obj.label;
             tr.appendChild(td);