Merge branch 'eslint' into dev

19 files changed, 1455 insertions, 1432 deletions

diff --git a/javascript/aspectRatioOverlay.js b/javascript/aspectRatioOverlay.js
index 5160081d..1c08a1a9 100644
--- a/javascript/aspectRatioOverlay.js
+++ b/javascript/aspectRatioOverlay.js
@@ -1,111 +1,113 @@
-

-let currentWidth = null;

-let currentHeight = null;

-let arFrameTimeout = setTimeout(function(){},0);

-

-function dimensionChange(e, is_width, is_height){

-

-	if(is_width){

-		currentWidth = e.target.value*1.0

-	}

-	if(is_height){

-		currentHeight = e.target.value*1.0

-	}

-

-	var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block";

-

-	if(!inImg2img){

-		return;

-	}

-

-	var targetElement = null;

-

-    var tabIndex = get_tab_index('mode_img2img')

-	if(tabIndex == 0){ // img2img

-		targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] img');

-	} else if(tabIndex == 1){ //Sketch

-		targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img');

-	} else if(tabIndex == 2){ // Inpaint

-		targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');

-	} else if(tabIndex == 3){ // Inpaint sketch

-		targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');

-	}

-

-

-	if(targetElement){

-

-		var arPreviewRect = gradioApp().querySelector('#imageARPreview');

-		if(!arPreviewRect){

-		    arPreviewRect = document.createElement('div')

-		    arPreviewRect.id = "imageARPreview";

-		    gradioApp().appendChild(arPreviewRect)

-		}

-

-

-

-		var viewportOffset = targetElement.getBoundingClientRect();

-

-		var viewportscale = Math.min(  targetElement.clientWidth/targetElement.naturalWidth, targetElement.clientHeight/targetElement.naturalHeight )

-

-		var scaledx = targetElement.naturalWidth*viewportscale

-		var scaledy = targetElement.naturalHeight*viewportscale

-

-		var cleintRectTop    = (viewportOffset.top+window.scrollY)

-		var cleintRectLeft   = (viewportOffset.left+window.scrollX)

-		var cleintRectCentreY = cleintRectTop  + (targetElement.clientHeight/2)

-		var cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth/2)

-

-		var arscale = Math.min(  scaledx/currentWidth, scaledy/currentHeight )

-		var arscaledx = currentWidth*arscale

-		var arscaledy = currentHeight*arscale

-

-		var arRectTop    = cleintRectCentreY-(arscaledy/2)

-		var arRectLeft   = cleintRectCentreX-(arscaledx/2)

-		var arRectWidth  = arscaledx

-		var arRectHeight = arscaledy

-

-	    arPreviewRect.style.top  = arRectTop+'px';

-	    arPreviewRect.style.left = arRectLeft+'px';

-	    arPreviewRect.style.width = arRectWidth+'px';

-	    arPreviewRect.style.height = arRectHeight+'px';

-

-	    clearTimeout(arFrameTimeout);

-	    arFrameTimeout = setTimeout(function(){

-	    	arPreviewRect.style.display = 'none';

-	    },2000);

-

-	    arPreviewRect.style.display = 'block';

-

-	}

-

-}

-

-

-onUiUpdate(function(){

-	var arPreviewRect = gradioApp().querySelector('#imageARPreview');

-	if(arPreviewRect){

-		arPreviewRect.style.display = 'none';

-	}

-    var tabImg2img = gradioApp().querySelector("#tab_img2img");

-    if (tabImg2img) {

-        var inImg2img = tabImg2img.style.display == "block";

-        if(inImg2img){

-            let inputs = gradioApp().querySelectorAll('input');

-            inputs.forEach(function(e){

-                var is_width = e.parentElement.id == "img2img_width"

-                var is_height = e.parentElement.id == "img2img_height"

-

-                if((is_width || is_height) && !e.classList.contains('scrollwatch')){

-                    e.addEventListener('input', function(e){dimensionChange(e, is_width, is_height)} )

-                    e.classList.add('scrollwatch')

-                }

-                if(is_width){

-                    currentWidth = e.value*1.0

-                }

-                if(is_height){

-                    currentHeight = e.value*1.0

-                }

-            })

-        }

-    }

-});

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

-contextMenuInit = function(){

-  let eventListenerApplied=false;

-  let menuSpecs = new Map();

-

-  const uid = function(){

-    return Date.now().toString(36) + Math.random().toString(36).substring(2);

-  }

-

-  function showContextMenu(event,element,menuEntries){

-    let posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;

-    let posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;

-

-    let oldMenu = gradioApp().querySelector('#context-menu')

-    if(oldMenu){

-      oldMenu.remove()

-    }

-

-    let baseStyle = window.getComputedStyle(uiCurrentTab)

-

-    const contextMenu = document.createElement('nav')

-    contextMenu.id = "context-menu"

-    contextMenu.style.background = baseStyle.background

-    contextMenu.style.color = baseStyle.color

-    contextMenu.style.fontFamily = baseStyle.fontFamily

-    contextMenu.style.top = posy+'px'

-    contextMenu.style.left = posx+'px'

-

-

-

-    const contextMenuList = document.createElement('ul')

-    contextMenuList.className = 'context-menu-items';

-    contextMenu.append(contextMenuList);

-

-    menuEntries.forEach(function(entry){

-      let contextMenuEntry = document.createElement('a')

-      contextMenuEntry.innerHTML = entry['name']

-      contextMenuEntry.addEventListener("click", function() {

-        entry['func']();

-      })

-      contextMenuList.append(contextMenuEntry);

-

-    })

-

-    gradioApp().appendChild(contextMenu)

-

-    let menuWidth = contextMenu.offsetWidth + 4;

-    let menuHeight = contextMenu.offsetHeight + 4;

-

-    let windowWidth = window.innerWidth;

-    let windowHeight = window.innerHeight;

-

-    if ( (windowWidth - posx) < menuWidth ) {

-      contextMenu.style.left = windowWidth - menuWidth + "px";

-    }

-

-    if ( (windowHeight - posy) < menuHeight ) {

-      contextMenu.style.top = windowHeight - menuHeight + "px";

-    }

-

-  }

-

-  function appendContextMenuOption(targetElementSelector,entryName,entryFunction){

-

-    var currentItems = menuSpecs.get(targetElementSelector)

-

-    if(!currentItems){

-      currentItems = []

-      menuSpecs.set(targetElementSelector,currentItems);

-    }

-    let newItem = {'id':targetElementSelector+'_'+uid(),

-                   'name':entryName,

-                   'func':entryFunction,

-                   'isNew':true}

-

-    currentItems.push(newItem)

-    return newItem['id']

-  }

-

-  function removeContextMenuOption(uid){

-    menuSpecs.forEach(function(v) {

-      let index = -1

-      v.forEach(function(e,ei){if(e['id']==uid){index=ei}})

-      if(index>=0){

-        v.splice(index, 1);

-      }

-    })

-  }

-

-  function addContextMenuEventListener(){

-    if(eventListenerApplied){

-      return;

-    }

-    gradioApp().addEventListener("click", function(e) {

-      if(! e.isTrusted){

-        return

-      }

-

-      let oldMenu = gradioApp().querySelector('#context-menu')

-      if(oldMenu){

-        oldMenu.remove()

-      }

-    });

-    gradioApp().addEventListener("contextmenu", function(e) {

-      let oldMenu = gradioApp().querySelector('#context-menu')

-      if(oldMenu){

-        oldMenu.remove()

-      }

-      menuSpecs.forEach(function(v,k) {

-        if(e.composedPath()[0].matches(k)){

-          showContextMenu(e,e.composedPath()[0],v)

-          e.preventDefault()

-        }

-      })

-    });

-    eventListenerApplied=true

-

-  }

-

-  return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener]

-}

-

-initResponse = contextMenuInit();

-appendContextMenuOption     = initResponse[0];

-removeContextMenuOption     = initResponse[1];

-addContextMenuEventListener = initResponse[2];

-

-(function(){

-  //Start example Context Menu Items

-  let generateOnRepeat = function(genbuttonid,interruptbuttonid){

-    let genbutton = gradioApp().querySelector(genbuttonid);

-    let interruptbutton = gradioApp().querySelector(interruptbuttonid);

-    if(!interruptbutton.offsetParent){

-      genbutton.click();

-    }

-    clearInterval(window.generateOnRepeatInterval)

-    window.generateOnRepeatInterval = setInterval(function(){

-      if(!interruptbutton.offsetParent){

-        genbutton.click();

-      }

-    },

-    500)

-  }

-

-  appendContextMenuOption('#txt2img_generate','Generate forever',function(){

-    generateOnRepeat('#txt2img_generate','#txt2img_interrupt');

-  })

-  appendContextMenuOption('#img2img_generate','Generate forever',function(){

-    generateOnRepeat('#img2img_generate','#img2img_interrupt');

-  })

-

-  let cancelGenerateForever = function(){

-    clearInterval(window.generateOnRepeatInterval)

-  }

-

-  appendContextMenuOption('#txt2img_interrupt','Cancel generate forever',cancelGenerateForever)

-  appendContextMenuOption('#txt2img_generate', 'Cancel generate forever',cancelGenerateForever)

-  appendContextMenuOption('#img2img_interrupt','Cancel generate forever',cancelGenerateForever)

-  appendContextMenuOption('#img2img_generate', 'Cancel generate forever',cancelGenerateForever)

-

-})();

-//End example Context Menu Items

-

-onUiUpdate(function(){

-  addContextMenuEventListener()

-});

+
+var contextMenuInit = function() {
+    let eventListenerApplied = false;
+    let menuSpecs = new Map();
+
+    const uid = function() {
+        return Date.now().toString(36) + Math.random().toString(36).substring(2);
+    };
+
+    function showContextMenu(event, element, menuEntries) {
+        let posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+        let posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
+
+        let oldMenu = gradioApp().querySelector('#context-menu');
+        if (oldMenu) {
+            oldMenu.remove();
+        }
+
+        let baseStyle = window.getComputedStyle(uiCurrentTab);
+
+        const contextMenu = document.createElement('nav');
+        contextMenu.id = "context-menu";
+        contextMenu.style.background = baseStyle.background;
+        contextMenu.style.color = baseStyle.color;
+        contextMenu.style.fontFamily = baseStyle.fontFamily;
+        contextMenu.style.top = posy + 'px';
+        contextMenu.style.left = posx + 'px';
+
+
+
+        const contextMenuList = document.createElement('ul');
+        contextMenuList.className = 'context-menu-items';
+        contextMenu.append(contextMenuList);
+
+        menuEntries.forEach(function(entry) {
+            let contextMenuEntry = document.createElement('a');
+            contextMenuEntry.innerHTML = entry['name'];
+            contextMenuEntry.addEventListener("click", function() {
+                entry['func']();
+            });
+            contextMenuList.append(contextMenuEntry);
+
+        });
+
+        gradioApp().appendChild(contextMenu);
+
+        let menuWidth = contextMenu.offsetWidth + 4;
+        let menuHeight = contextMenu.offsetHeight + 4;
+
+        let windowWidth = window.innerWidth;
+        let windowHeight = window.innerHeight;
+
+        if ((windowWidth - posx) < menuWidth) {
+            contextMenu.style.left = windowWidth - menuWidth + "px";
+        }
+
+        if ((windowHeight - posy) < menuHeight) {
+            contextMenu.style.top = windowHeight - menuHeight + "px";
+        }
+
+    }
+
+    function appendContextMenuOption(targetElementSelector, entryName, entryFunction) {
+
+        var currentItems = menuSpecs.get(targetElementSelector);
+
+        if (!currentItems) {
+            currentItems = [];
+            menuSpecs.set(targetElementSelector, currentItems);
+        }
+        let newItem = {
+            id: targetElementSelector + '_' + uid(),
+            name: entryName,
+            func: entryFunction,
+            isNew: true
+        };
+
+        currentItems.push(newItem);
+        return newItem['id'];
+    }
+
+    function removeContextMenuOption(uid) {
+        menuSpecs.forEach(function(v) {
+            let index = -1;
+            v.forEach(function(e, ei) {
+                if (e['id'] == uid) {
+                    index = ei;
+                }
+            });
+            if (index >= 0) {
+                v.splice(index, 1);
+            }
+        });
+    }
+
+    function addContextMenuEventListener() {
+        if (eventListenerApplied) {
+            return;
+        }
+        gradioApp().addEventListener("click", function(e) {
+            if (!e.isTrusted) {
+                return;
+            }
+
+            let oldMenu = gradioApp().querySelector('#context-menu');
+            if (oldMenu) {
+                oldMenu.remove();
+            }
+        });
+        gradioApp().addEventListener("contextmenu", function(e) {
+            let oldMenu = gradioApp().querySelector('#context-menu');
+            if (oldMenu) {
+                oldMenu.remove();
+            }
+            menuSpecs.forEach(function(v, k) {
+                if (e.composedPath()[0].matches(k)) {
+                    showContextMenu(e, e.composedPath()[0], v);
+                    e.preventDefault();
+                }
+            });
+        });
+        eventListenerApplied = true;
+
+    }
+
+    return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener];
+};
+
+var initResponse = contextMenuInit();
+var appendContextMenuOption = initResponse[0];
+var removeContextMenuOption = initResponse[1];
+var addContextMenuEventListener = initResponse[2];
+
+(function() {
+    //Start example Context Menu Items
+    let generateOnRepeat = function(genbuttonid, interruptbuttonid) {
+        let genbutton = gradioApp().querySelector(genbuttonid);
+        let interruptbutton = gradioApp().querySelector(interruptbuttonid);
+        if (!interruptbutton.offsetParent) {
+            genbutton.click();
+        }
+        clearInterval(window.generateOnRepeatInterval);
+        window.generateOnRepeatInterval = setInterval(function() {
+            if (!interruptbutton.offsetParent) {
+                genbutton.click();
+            }
+        },
+        500);
+    };
+
+    appendContextMenuOption('#txt2img_generate', 'Generate forever', function() {
+        generateOnRepeat('#txt2img_generate', '#txt2img_interrupt');
+    });
+    appendContextMenuOption('#img2img_generate', 'Generate forever', function() {
+        generateOnRepeat('#img2img_generate', '#img2img_interrupt');
+    });
+
+    let cancelGenerateForever = function() {
+        clearInterval(window.generateOnRepeatInterval);
+    };
+
+    appendContextMenuOption('#txt2img_interrupt', 'Cancel generate forever', cancelGenerateForever);
+    appendContextMenuOption('#txt2img_generate', 'Cancel generate forever', cancelGenerateForever);
+    appendContextMenuOption('#img2img_interrupt', 'Cancel generate forever', cancelGenerateForever);
+    appendContextMenuOption('#img2img_generate', 'Cancel generate forever', cancelGenerateForever);
+
+})();
+//End example Context Menu Items
+
+onUiUpdate(function() {
+    addContextMenuEventListener();
+});
diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js
index fe008924..e316a365 100644
--- a/javascript/dragdrop.js
+++ b/javascript/dragdrop.js
@@ -1,11 +1,11 @@
 // allows drag-dropping files into gradio image elements, and also pasting images from clipboard
 
-function isValidImageList( files ) {
+function isValidImageList(files) {
     return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type);
 }
 
-function dropReplaceImage( imgWrap, files ) {
-    if ( ! isValidImageList( files ) ) {
+function dropReplaceImage(imgWrap, files) {
+    if (!isValidImageList(files)) {
         return;
     }
 
@@ -14,44 +14,44 @@ function dropReplaceImage( imgWrap, files ) {
     imgWrap.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click();
     const callback = () => {
         const fileInput = imgWrap.querySelector('input[type="file"]');
-        if ( fileInput ) {
-            if ( files.length === 0 ) {
+        if (fileInput) {
+            if (files.length === 0) {
                 files = new DataTransfer();
                 files.items.add(tmpFile);
                 fileInput.files = files.files;
             } else {
                 fileInput.files = files;
             }
-            fileInput.dispatchEvent(new Event('change'));   
+            fileInput.dispatchEvent(new Event('change'));
         }
     };
-    
-    if ( imgWrap.closest('#pnginfo_image') ) {
+
+    if (imgWrap.closest('#pnginfo_image')) {
         // special treatment for PNG Info tab, wait for fetch request to finish
         const oldFetch = window.fetch;
-        window.fetch = async (input, options) => {
+        window.fetch = async(input, options) => {
             const response = await oldFetch(input, options);
-            if ( 'api/predict/' === input ) {
+            if ('api/predict/' === input) {
                 const content = await response.text();
                 window.fetch = oldFetch;
-                window.requestAnimationFrame( () => callback() );
+                window.requestAnimationFrame(() => callback());
                 return new Response(content, {
                     status: response.status,
                     statusText: response.statusText,
                     headers: response.headers
-                })
+                });
             }
             return response;
-        };        
+        };
     } else {
-        window.requestAnimationFrame( () => callback() );
+        window.requestAnimationFrame(() => callback());
     }
 }
 
 window.document.addEventListener('dragover', e => {
     const target = e.composedPath()[0];
     const imgWrap = target.closest('[data-testid="image"]');
-    if ( !imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1) {
+    if (!imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1) {
         return;
     }
     e.stopPropagation();
@@ -65,33 +65,34 @@ window.document.addEventListener('drop', e => {
         return;
     }
     const imgWrap = target.closest('[data-testid="image"]');
-    if ( !imgWrap ) {
+    if (!imgWrap) {
         return;
     }
     e.stopPropagation();
     e.preventDefault();
     const files = e.dataTransfer.files;
-    dropReplaceImage( imgWrap, files );
+    dropReplaceImage(imgWrap, files);
 });
 
 window.addEventListener('paste', e => {
     const files = e.clipboardData.files;
-    if ( ! isValidImageList( files ) ) {
+    if (!isValidImageList(files)) {
         return;
     }
 
     const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
         .filter(el => uiElementIsVisible(el));
-    if ( ! visibleImageFields.length ) {
+    if (!visibleImageFields.length) {
         return;
     }
-    
+
     const firstFreeImageField = visibleImageFields
         .filter(el => el.querySelector('input[type=file]'))?.[0];
 
     dropReplaceImage(
         firstFreeImageField ?
-        firstFreeImageField :
-        visibleImageFields[visibleImageFields.length - 1]
-    , files );
+            firstFreeImageField :
+            visibleImageFields[visibleImageFields.length - 1]
+        , files
+    );
 });
diff --git a/javascript/edit-attention.js b/javascript/edit-attention.js
index d2c2f190..fdf00b4d 100644
--- a/javascript/edit-attention.js
+++ b/javascript/edit-attention.js
@@ -1,120 +1,120 @@
-function keyupEditAttention(event){

-	let target = event.originalTarget || event.composedPath()[0];

-	if (! target.matches("[id*='_toprow'] [id*='_prompt'] textarea")) return;

-	if (! (event.metaKey || event.ctrlKey)) return;

-

-	let isPlus = event.key == "ArrowUp"

-	let isMinus = event.key == "ArrowDown"

-	if (!isPlus && !isMinus) return;

-

-	let selectionStart = target.selectionStart;

-	let selectionEnd = target.selectionEnd;

-	let text = target.value;

-

-    function selectCurrentParenthesisBlock(OPEN, CLOSE){

-        if (selectionStart !== selectionEnd) return false;

-

-		// Find opening parenthesis around current cursor

-		const before = text.substring(0, selectionStart);

-		let beforeParen = before.lastIndexOf(OPEN);

-		if (beforeParen == -1) return false;

-		let beforeParenClose = before.lastIndexOf(CLOSE);

-		while (beforeParenClose !== -1 && beforeParenClose > beforeParen) {

-			beforeParen = before.lastIndexOf(OPEN, beforeParen - 1);

-			beforeParenClose = before.lastIndexOf(CLOSE, beforeParenClose - 1);

-		}

-

-		// Find closing parenthesis around current cursor

-		const after = text.substring(selectionStart);

-		let afterParen = after.indexOf(CLOSE);

-		if (afterParen == -1) return false;

-		let afterParenOpen = after.indexOf(OPEN);

-		while (afterParenOpen !== -1 && afterParen > afterParenOpen) {

-			afterParen = after.indexOf(CLOSE, afterParen + 1);

-			afterParenOpen = after.indexOf(OPEN, afterParenOpen + 1);

-		}

-		if (beforeParen === -1 || afterParen === -1) return false;

-

-		// Set the selection to the text between the parenthesis

-		const parenContent = text.substring(beforeParen + 1, selectionStart + afterParen);

-		const lastColon = parenContent.lastIndexOf(":");

-		selectionStart = beforeParen + 1;

-		selectionEnd = selectionStart + lastColon;

-		target.setSelectionRange(selectionStart, selectionEnd);

-		return true;

-    }

-    

-    function selectCurrentWord(){

-        if (selectionStart !== selectionEnd) return false;

-        const delimiters = opts.keyedit_delimiters + " \r\n\t";

-        

-        // seek backward until to find beggining

-        while (!delimiters.includes(text[selectionStart - 1]) && selectionStart > 0) {

-            selectionStart--;

-        }

-        

-        // seek forward to find end

-        while (!delimiters.includes(text[selectionEnd]) && selectionEnd < text.length) {

-            selectionEnd++;

-        }

-

-        target.setSelectionRange(selectionStart, selectionEnd);

-        return true;

-    }

-

-	// If the user hasn't selected anything, let's select their current parenthesis block or word

-    if (!selectCurrentParenthesisBlock('<', '>') && !selectCurrentParenthesisBlock('(', ')')) {

-        selectCurrentWord();

-    }

-

-	event.preventDefault();

-

-    var closeCharacter = ')'

-    var delta = opts.keyedit_precision_attention

-

-    if (selectionStart > 0 && text[selectionStart - 1] == '<'){

-        closeCharacter = '>'

-        delta = opts.keyedit_precision_extra

-    } else if (selectionStart == 0 || text[selectionStart - 1] != "(") {

-

-        // do not include spaces at the end

-        while(selectionEnd > selectionStart && text[selectionEnd-1] == ' '){

-            selectionEnd -= 1;

-        }

-        if(selectionStart == selectionEnd){

-            return

-        }

-

-        text = text.slice(0, selectionStart) + "(" + text.slice(selectionStart, selectionEnd) + ":1.0)" + text.slice(selectionEnd);

-

-        selectionStart += 1;

-        selectionEnd += 1;

-    }

-

-	var end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1;

-	var weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + 1 + end));

-	if (isNaN(weight)) return;

-

-	weight += isPlus ? delta : -delta;

-	weight = parseFloat(weight.toPrecision(12));

-	if(String(weight).length == 1) weight += ".0"

-

-    if (closeCharacter == ')' && weight == 1) {

-        text = text.slice(0, selectionStart - 1) + text.slice(selectionStart, selectionEnd) + text.slice(selectionEnd + 5);

-        selectionStart--;

-        selectionEnd--;

-    } else {

-        text = text.slice(0, selectionEnd + 1) + weight + text.slice(selectionEnd + 1 + end - 1);

-    }

-

-	target.focus();

-	target.value = text;

-	target.selectionStart = selectionStart;

-	target.selectionEnd = selectionEnd;

-

-	updateInput(target)

-}

-

-addEventListener('keydown', (event) => {

-    keyupEditAttention(event);

-});

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

-function extensions_apply(_disabled_list, _update_list, disable_all){

-    var disable = []

-    var update = []

-

-    gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x){

-        if(x.name.startsWith("enable_") && ! x.checked)

-            disable.push(x.name.substring(7))

-

-        if(x.name.startsWith("update_") && x.checked)

-            update.push(x.name.substring(7))

-    })

-

-    restart_reload()

-

-    return [JSON.stringify(disable), JSON.stringify(update), disable_all]

-}

-

-function extensions_check(){

-    var disable = []

-

-    gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x){

-        if(x.name.startsWith("enable_") && ! x.checked)

-            disable.push(x.name.substring(7))

-    })

-

-    gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){

-        x.innerHTML = "Loading..."

-    })

-

-

-    var id = randomId()

-    requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function(){

-

-    })

-

-    return [id, JSON.stringify(disable)]

-}

-

-function install_extension_from_index(button, url){

-    button.disabled = "disabled"

-    button.value = "Installing..."

-

-    var textarea = gradioApp().querySelector('#extension_to_install textarea')

-    textarea.value = url

-    updateInput(textarea)

-

-    gradioApp().querySelector('#install_extension_button').click()

-}

-

-function config_state_confirm_restore(_, config_state_name, config_restore_type) {

-    if (config_state_name == "Current") {

-        return [false, config_state_name, config_restore_type];

-    }

-    let restored = "";

-    if (config_restore_type == "extensions") {

-        restored = "all saved extension versions";

-    } else if (config_restore_type == "webui") {

-        restored = "the webui version";

-    } else {

-        restored = "the webui version and all saved extension versions";

-    }

-    let confirmed = confirm("Are you sure you want to restore from this state?\nThis will reset " + restored + ".");

-    if (confirmed) {

-        restart_reload();

-        gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){

-            x.innerHTML = "Loading..."

-        })

-    }

-    return [confirmed, config_state_name, config_restore_type];

-}

+
+function extensions_apply(_disabled_list, _update_list, disable_all) {
+    var disable = [];
+    var update = [];
+
+    gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x) {
+        if (x.name.startsWith("enable_") && !x.checked) {
+            disable.push(x.name.substring(7));
+        }
+
+        if (x.name.startsWith("update_") && x.checked) {
+            update.push(x.name.substring(7));
+        }
+    });
+
+    restart_reload();
+
+    return [JSON.stringify(disable), JSON.stringify(update), disable_all];
+}
+
+function extensions_check() {
+    var disable = [];
+
+    gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x) {
+        if (x.name.startsWith("enable_") && !x.checked) {
+            disable.push(x.name.substring(7));
+        }
+    });
+
+    gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x) {
+        x.innerHTML = "Loading...";
+    });
+
+
+    var id = randomId();
+    requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function() {
+
+    });
+
+    return [id, JSON.stringify(disable)];
+}
+
+function install_extension_from_index(button, url) {
+    button.disabled = "disabled";
+    button.value = "Installing...";
+
+    var textarea = gradioApp().querySelector('#extension_to_install textarea');
+    textarea.value = url;
+    updateInput(textarea);
+
+    gradioApp().querySelector('#install_extension_button').click();
+}
+
+function config_state_confirm_restore(_, config_state_name, config_restore_type) {
+    if (config_state_name == "Current") {
+        return [false, config_state_name, config_restore_type];
+    }
+    let restored = "";
+    if (config_restore_type == "extensions") {
+        restored = "all saved extension versions";
+    } else if (config_restore_type == "webui") {
+        restored = "the webui version";
+    } else {
+        restored = "the webui version and all saved extension versions";
+    }
+    let confirmed = confirm("Are you sure you want to restore from this state?\nThis will reset " + restored + ".");
+    if (confirmed) {
+        restart_reload();
+        gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x) {
+            x.innerHTML = "Loading...";
+        });
+    }
+    return [confirmed, config_state_name, config_restore_type];
+}
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 4d9a522c..aafe0a00 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -1,205 +1,215 @@
-function setupExtraNetworksForTab(tabname){

-    gradioApp().querySelector('#'+tabname+'_extra_tabs').classList.add('extra-networks')

-

-    var tabs = gradioApp().querySelector('#'+tabname+'_extra_tabs > div')

-    var search = gradioApp().querySelector('#'+tabname+'_extra_search textarea')

-    var refresh = gradioApp().getElementById(tabname+'_extra_refresh')

-

-    search.classList.add('search')

-    tabs.appendChild(search)

-    tabs.appendChild(refresh)

-

-    var applyFilter = function(){

-        var searchTerm = search.value.toLowerCase()

-

-        gradioApp().querySelectorAll('#'+tabname+'_extra_tabs div.card').forEach(function(elem){

-            var searchOnly = elem.querySelector('.search_only')

-            var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase()

-

-            var visible = text.indexOf(searchTerm) != -1

-

-            if(searchOnly && searchTerm.length < 4){

-                visible = false

-            }

-

-            elem.style.display = visible ? "" : "none"

-        })

-    }

-

-    search.addEventListener("input", applyFilter);

-    applyFilter();

-

-    extraNetworksApplyFilter[tabname] = applyFilter;

-}

-

-function applyExtraNetworkFilter(tabname){

-    setTimeout(extraNetworksApplyFilter[tabname], 1);

-}

-

-var extraNetworksApplyFilter = {}

-var activePromptTextarea = {};

-

-function setupExtraNetworks(){

-    setupExtraNetworksForTab('txt2img')

-    setupExtraNetworksForTab('img2img')

-

-    function registerPrompt(tabname, id){

-        var textarea = gradioApp().querySelector("#" + id + " > label > textarea");

-

-        if (! activePromptTextarea[tabname]){

-            activePromptTextarea[tabname] = textarea

-        }

-

-		textarea.addEventListener("focus", function(){

-            activePromptTextarea[tabname] = textarea;

-		});

-    }

-

-    registerPrompt('txt2img', 'txt2img_prompt')

-    registerPrompt('txt2img', 'txt2img_neg_prompt')

-    registerPrompt('img2img', 'img2img_prompt')

-    registerPrompt('img2img', 'img2img_neg_prompt')

-}

-

-onUiLoaded(setupExtraNetworks)

-

-var re_extranet   =    /<([^:]+:[^:]+):[\d\.]+>/;

-var re_extranet_g = /\s+<([^:]+:[^:]+):[\d\.]+>/g;

-

-function tryToRemoveExtraNetworkFromPrompt(textarea, text){

-    var m = text.match(re_extranet)

-    var replaced = false

-    var newTextareaText

-    if(m) {

-        var partToSearch = m[1]

-        newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found){

-            m = found.match(re_extranet);

-            if(m[1] == partToSearch){

-                replaced = true;

-                return ""

-            }

-            return found;

-        })

-    } else {

-        newTextareaText = textarea.value.replaceAll(new RegExp(text, "g"), function(found){

-            if(found == text) {

-                replaced = true;

-                return ""

-            }

-            return found;

-        })

-    }

-

-    if(replaced){

-        textarea.value = newTextareaText

-        return true;

-    }

-

-    return false

-}

-

-function cardClicked(tabname, textToAdd, allowNegativePrompt){

-    var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea")

-

-    if(! tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)){

-        textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd

-    }

-

-    updateInput(textarea)

-}

-

-function saveCardPreview(event, tabname, filename){

-    var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename  > label > textarea')

-    var button = gradioApp().getElementById(tabname + '_save_preview')

-

-    textarea.value = filename

-    updateInput(textarea)

-

-    button.click()

-

-    event.stopPropagation()

-    event.preventDefault()

-}

-

-function extraNetworksSearchButton(tabs_id, event){

-    var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea')

-    var button = event.target

-    var text = button.classList.contains("search-all") ? "" : button.textContent.trim()

-

-    searchTextarea.value = text

-    updateInput(searchTextarea)

-}

-

-var globalPopup = null;

-var globalPopupInner = null;

-function popup(contents){

-    if(! globalPopup){

-        globalPopup = document.createElement('div')

-        globalPopup.onclick = function(){ globalPopup.style.display = "none"; };

-        globalPopup.classList.add('global-popup');

-

-        var close = document.createElement('div')

-        close.classList.add('global-popup-close');

-        close.onclick = function(){ globalPopup.style.display = "none"; };

-        close.title = "Close";

-        globalPopup.appendChild(close)

-

-        globalPopupInner = document.createElement('div')

-        globalPopupInner.onclick = function(event){ event.stopPropagation(); return false; };

-        globalPopupInner.classList.add('global-popup-inner');

-        globalPopup.appendChild(globalPopupInner)

-

-        gradioApp().appendChild(globalPopup);

-    }

-

-    globalPopupInner.innerHTML = '';

-    globalPopupInner.appendChild(contents);

-

-    globalPopup.style.display = "flex";

-}

-

-function extraNetworksShowMetadata(text){

-    var elem = document.createElement('pre')

-    elem.classList.add('popup-metadata');

-    elem.textContent = text;

-

-    popup(elem);

-}

-

-function requestGet(url, data, handler, errorHandler){

-    var xhr = new XMLHttpRequest();

-    var args = Object.keys(data).map(function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }).join('&')

-    xhr.open("GET", url + "?" + args, true);

-

-    xhr.onreadystatechange = function () {

-        if (xhr.readyState === 4) {

-            if (xhr.status === 200) {

-                try {

-                    var js = JSON.parse(xhr.responseText);

-                    handler(js)

-                } catch (error) {

-                    console.error(error);

-                    errorHandler()

-                }

-            } else{

-                errorHandler()

-            }

-        }

-    };

-    var js = JSON.stringify(data);

-    xhr.send(js);

-}

-

-function extraNetworksRequestMetadata(event, extraPage, cardName){

-    var showError = function(){ extraNetworksShowMetadata("there was an error getting metadata"); }

-

-    requestGet("./sd_extra_networks/metadata", {"page": extraPage, "item": cardName}, function(data){

-        if(data && data.metadata){

-            extraNetworksShowMetadata(data.metadata)

-        } else{

-            showError()

-        }

-    }, showError)

-

-    event.stopPropagation()

-}

+function setupExtraNetworksForTab(tabname) {
+    gradioApp().querySelector('#' + tabname + '_extra_tabs').classList.add('extra-networks');
+
+    var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div');
+    var search = gradioApp().querySelector('#' + tabname + '_extra_search textarea');
+    var refresh = gradioApp().getElementById(tabname + '_extra_refresh');
+
+    search.classList.add('search');
+    tabs.appendChild(search);
+    tabs.appendChild(refresh);
+
+    var applyFilter = function() {
+        var searchTerm = search.value.toLowerCase();
+
+        gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) {
+            var searchOnly = elem.querySelector('.search_only');
+            var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase();
+
+            var visible = text.indexOf(searchTerm) != -1;
+
+            if (searchOnly && searchTerm.length < 4) {
+                visible = false;
+            }
+
+            elem.style.display = visible ? "" : "none";
+        });
+    };
+
+    search.addEventListener("input", applyFilter);
+    applyFilter();
+
+    extraNetworksApplyFilter[tabname] = applyFilter;
+}
+
+function applyExtraNetworkFilter(tabname) {
+    setTimeout(extraNetworksApplyFilter[tabname], 1);
+}
+
+var extraNetworksApplyFilter = {};
+var activePromptTextarea = {};
+
+function setupExtraNetworks() {
+    setupExtraNetworksForTab('txt2img');
+    setupExtraNetworksForTab('img2img');
+
+    function registerPrompt(tabname, id) {
+        var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
+
+        if (!activePromptTextarea[tabname]) {
+            activePromptTextarea[tabname] = textarea;
+        }
+
+        textarea.addEventListener("focus", function() {
+            activePromptTextarea[tabname] = textarea;
+        });
+    }
+
+    registerPrompt('txt2img', 'txt2img_prompt');
+    registerPrompt('txt2img', 'txt2img_neg_prompt');
+    registerPrompt('img2img', 'img2img_prompt');
+    registerPrompt('img2img', 'img2img_neg_prompt');
+}
+
+onUiLoaded(setupExtraNetworks);
+
+var re_extranet = /<([^:]+:[^:]+):[\d.]+>/;
+var re_extranet_g = /\s+<([^:]+:[^:]+):[\d.]+>/g;
+
+function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
+    var m = text.match(re_extranet);
+    var replaced = false;
+    var newTextareaText;
+    if (m) {
+        var partToSearch = m[1];
+        newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found) {
+            m = found.match(re_extranet);
+            if (m[1] == partToSearch) {
+                replaced = true;
+                return "";
+            }
+            return found;
+        });
+    } else {
+        newTextareaText = textarea.value.replaceAll(new RegExp(text, "g"), function(found) {
+            if (found == text) {
+                replaced = true;
+                return "";
+            }
+            return found;
+        });
+    }
+
+    if (replaced) {
+        textarea.value = newTextareaText;
+        return true;
+    }
+
+    return false;
+}
+
+function cardClicked(tabname, textToAdd, allowNegativePrompt) {
+    var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea");
+
+    if (!tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)) {
+        textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd;
+    }
+
+    updateInput(textarea);
+}
+
+function saveCardPreview(event, tabname, filename) {
+    var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename  > label > textarea');
+    var button = gradioApp().getElementById(tabname + '_save_preview');
+
+    textarea.value = filename;
+    updateInput(textarea);
+
+    button.click();
+
+    event.stopPropagation();
+    event.preventDefault();
+}
+
+function extraNetworksSearchButton(tabs_id, event) {
+    var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea');
+    var button = event.target;
+    var text = button.classList.contains("search-all") ? "" : button.textContent.trim();
+
+    searchTextarea.value = text;
+    updateInput(searchTextarea);
+}
+
+var globalPopup = null;
+var globalPopupInner = null;
+function popup(contents) {
+    if (!globalPopup) {
+        globalPopup = document.createElement('div');
+        globalPopup.onclick = function() {
+            globalPopup.style.display = "none";
+        };
+        globalPopup.classList.add('global-popup');
+
+        var close = document.createElement('div');
+        close.classList.add('global-popup-close');
+        close.onclick = function() {
+            globalPopup.style.display = "none";
+        };
+        close.title = "Close";
+        globalPopup.appendChild(close);
+
+        globalPopupInner = document.createElement('div');
+        globalPopupInner.onclick = function(event) {
+            event.stopPropagation(); return false;
+        };
+        globalPopupInner.classList.add('global-popup-inner');
+        globalPopup.appendChild(globalPopupInner);
+
+        gradioApp().appendChild(globalPopup);
+    }
+
+    globalPopupInner.innerHTML = '';
+    globalPopupInner.appendChild(contents);
+
+    globalPopup.style.display = "flex";
+}
+
+function extraNetworksShowMetadata(text) {
+    var elem = document.createElement('pre');
+    elem.classList.add('popup-metadata');
+    elem.textContent = text;
+
+    popup(elem);
+}
+
+function requestGet(url, data, handler, errorHandler) {
+    var xhr = new XMLHttpRequest();
+    var args = Object.keys(data).map(function(k) {
+        return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
+    }).join('&');
+    xhr.open("GET", url + "?" + args, true);
+
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                try {
+                    var js = JSON.parse(xhr.responseText);
+                    handler(js);
+                } catch (error) {
+                    console.error(error);
+                    errorHandler();
+                }
+            } else {
+                errorHandler();
+            }
+        }
+    };
+    var js = JSON.stringify(data);
+    xhr.send(js);
+}
+
+function extraNetworksRequestMetadata(event, extraPage, cardName) {
+    var showError = function() {
+        extraNetworksShowMetadata("there was an error getting metadata");
+    };
+
+    requestGet("./sd_extra_networks/metadata", {page: extraPage, item: cardName}, function(data) {
+        if (data && data.metadata) {
+            extraNetworksShowMetadata(data.metadata);
+        } else {
+            showError();
+        }
+    }, showError);
+
+    event.stopPropagation();
+}
diff --git a/javascript/generationParams.js b/javascript/generationParams.js
index ef64ee2e..a877f8a5 100644
--- a/javascript/generationParams.js
+++ b/javascript/generationParams.js
@@ -1,33 +1,35 @@
 // 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;
-onUiUpdate(function(){
-	if (!txt2img_gallery) {
-		txt2img_gallery = attachGalleryListeners("txt2img")
-	}
-	if (!img2img_gallery) {
-		img2img_gallery = attachGalleryListeners("img2img")
-	}
-	if (!modal) {
-		modal = gradioApp().getElementById('lightboxModal')
-		modalObserver.observe(modal,  { attributes : true, attributeFilter : ['style'] });
-	}
+onUiUpdate(function() {
+    if (!txt2img_gallery) {
+        txt2img_gallery = attachGalleryListeners("txt2img");
+    }
+    if (!img2img_gallery) {
+        img2img_gallery = attachGalleryListeners("img2img");
+    }
+    if (!modal) {
+        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()
-	});
+    mutations.forEach(function(mutationRecord) {
+        let selectedTab = gradioApp().querySelector('#tabs div button.selected')?.innerText;
+        if (mutationRecord.target.style.display === 'none' && (selectedTab === 'txt2img' || selectedTab === 'img2img')) {
+            gradioApp().getElementById(selectedTab + "_generation_info_button")?.click();
+        }
+    });
 });
 
 function attachGalleryListeners(tab_name) {
-	var gallery = gradioApp().querySelector('#'+tab_name+'_gallery')
-	gallery?.addEventListener('click', () => gradioApp().getElementById(tab_name+"_generation_info_button").click());
-	gallery?.addEventListener('keydown', (e) => {
-		if (e.keyCode == 37 || e.keyCode == 39) // left or right arrow
-			gradioApp().getElementById(tab_name+"_generation_info_button").click()
-	});
-	return gallery;
+    var gallery = gradioApp().querySelector('#' + tab_name + '_gallery');
+    gallery?.addEventListener('click', () => gradioApp().getElementById(tab_name + "_generation_info_button").click());
+    gallery?.addEventListener('keydown', (e) => {
+        if (e.keyCode == 37 || e.keyCode == 39) { // left or right arrow
+            gradioApp().getElementById(tab_name + "_generation_info_button").click();
+        }
+    });
+    return gallery;
 }
diff --git a/javascript/hints.js b/javascript/hints.js
index d2efd35e..615ac264 100644
--- a/javascript/hints.js
+++ b/javascript/hints.js
@@ -1,6 +1,6 @@
 // mouseover tooltips for various UI elements
 
-titles = {
+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",
@@ -41,7 +41,7 @@ titles = {
     "Inpaint at full resolution": "Upscale masked region to target resolution, do inpainting, downscale back and paste into original image",
 
     "Denoising strength": "Determines how little respect the algorithm should have for image's content. At 0, nothing will change, and at 1 you'll get an unrelated image. With values below 1.0, processing will take less steps than the Sampling Steps slider specifies.",
-    
+
     "Skip": "Stop processing current image and continue processing.",
     "Interrupt": "Stop processing images and return any results accumulated so far.",
     "Save": "Write image to a directory (default - log/images) and generation parameters into csv file.",
@@ -97,7 +97,7 @@ titles = {
     "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",
+    "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.",
@@ -114,7 +114,7 @@ titles = {
     "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 lsited.",
     "Negative Guidance minimum sigma": "Skip negative prompt for steps where image is already mostly denoised; the higher this value, the more skips there will be; provides increased performance in exchange for minor quality reduction."
-}
+};
 
 function updateTooltipForSpan(span){
     if (span.title) return;  // already has a title
diff --git a/javascript/hires_fix.js b/javascript/hires_fix.js
index 48196be4..0d04ab3b 100644
--- a/javascript/hires_fix.js
+++ b/javascript/hires_fix.js
@@ -1,18 +1,18 @@
-

-function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y){

-    function setInactive(elem, inactive){

-        elem.classList.toggle('inactive', !!inactive)

-    }

-

-    var hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale')

-    var hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x')

-    var hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y')

-

-    gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : ""

-

-    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]

-}

+
+function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y) {
+    function setInactive(elem, inactive) {
+        elem.classList.toggle('inactive', !!inactive);
+    }
+
+    var hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale');
+    var hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x');
+    var hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y');
+
+    gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : "";
+
+    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 a612705d..3c9b8a6f 100644
--- a/javascript/imageMaskFix.js
+++ b/javascript/imageMaskFix.js
@@ -4,17 +4,16 @@
  */
 function imageMaskResize() {
     const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas');
-    if ( ! canvases.length ) {
-    canvases_fixed = false; // TODO: this is unused..?
-    window.removeEventListener( 'resize', imageMaskResize );
-    return;
+    if (!canvases.length) {
+        window.removeEventListener('resize', imageMaskResize);
+        return;
     }
 
     const wrapper = canvases[0].closest('.touch-none');
     const previewImage = wrapper.previousElementSibling;
 
-    if ( ! previewImage.complete ) {
-        previewImage.addEventListener( 'load', imageMaskResize);
+    if (!previewImage.complete) {
+        previewImage.addEventListener('load', imageMaskResize);
         return;
     }
 
@@ -24,15 +23,15 @@ 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 => {
+    canvases.forEach(c => {
         c.style.width = c.style.height = '';
         c.style.maxWidth = '100%';
         c.style.maxHeight = '100%';
@@ -41,4 +40,4 @@ function imageMaskResize() {
 }
 
 onUiUpdate(imageMaskResize);
-window.addEventListener( 'resize', imageMaskResize);
+window.addEventListener('resize', imageMaskResize);
diff --git a/javascript/imageParams.js b/javascript/imageParams.js
index 64aee93b..057e2d39 100644
--- a/javascript/imageParams.js
+++ b/javascript/imageParams.js
@@ -1,4 +1,4 @@
-window.onload = (function(){
+window.onload = (function() {
     window.addEventListener('drop', e => {
         const target = e.composedPath()[0];
         if (target.placeholder.indexOf("Prompt") == -1) return;
@@ -10,7 +10,7 @@ window.onload = (function(){
         const imgParent = gradioApp().getElementById(prompt_target);
         const files = e.dataTransfer.files;
         const fileInput = imgParent.querySelector('input[type="file"]');
-        if ( fileInput ) {
+        if (fileInput) {
             fileInput.files = files;
             fileInput.dispatchEvent(new Event('change'));
         }
diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index 32066ab8..78e24eb9 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -5,24 +5,24 @@ function closeModal() {
 
 function showModal(event) {
     const source = event.target || event.srcElement;
-    const modalImage = gradioApp().getElementById("modalImage")
-    const lb = gradioApp().getElementById("lightboxModal")
-    modalImage.src = source.src
+    const modalImage = gradioApp().getElementById("modalImage");
+    const lb = gradioApp().getElementById("lightboxModal");
+    modalImage.src = source.src;
     if (modalImage.style.display === 'none') {
         lb.style.setProperty('background-image', 'url(' + source.src + ')');
     }
     lb.style.display = "flex";
-    lb.focus()
+    lb.focus();
 
-    const tabTxt2Img = gradioApp().getElementById("tab_txt2img")
-    const tabImg2Img = gradioApp().getElementById("tab_img2img")
+    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") {
-        gradioApp().getElementById("modal_save").style.display = "inline"
+        gradioApp().getElementById("modal_save").style.display = "inline";
     } else {
-        gradioApp().getElementById("modal_save").style.display = "none"
+        gradioApp().getElementById("modal_save").style.display = "none";
     }
-    event.stopPropagation()
+    event.stopPropagation();
 }
 
 function negmod(n, m) {
@@ -30,14 +30,15 @@ function negmod(n, m) {
 }
 
 function updateOnBackgroundChange() {
-    const modalImage = gradioApp().getElementById("modalImage")
+    const modalImage = gradioApp().getElementById("modalImage");
     if (modalImage && modalImage.offsetParent) {
         let currentButton = selected_gallery_button();
 
         if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {
             modalImage.src = currentButton.children[0].src;
             if (modalImage.style.display === 'none') {
-                modal.style.setProperty('background-image', `url(${modalImage.src})`)
+                const modal = gradioApp().getElementById("lightboxModal");
+                modal.style.setProperty('background-image', `url(${modalImage.src})`);
             }
         }
     }
@@ -49,108 +50,109 @@ function modalImageSwitch(offset) {
     if (galleryButtons.length > 1) {
         var currentButton = selected_gallery_button();
 
-        var result = -1
+        var result = -1;
         galleryButtons.forEach(function(v, i) {
             if (v == currentButton) {
-                result = i
+                result = i;
             }
-        })
+        });
 
         if (result != -1) {
-            var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)]
-            nextButton.click()
+            var 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})`)
+                modal.style.setProperty('background-image', `url(${modalImage.src})`);
             }
             setTimeout(function() {
-                modal.focus()
-            }, 10)
+                modal.focus();
+            }, 10);
         }
     }
 }
 
-function saveImage(){
-    const tabTxt2Img = gradioApp().getElementById("tab_txt2img")
-    const tabImg2Img = gradioApp().getElementById("tab_img2img")
-    const saveTxt2Img = "save_txt2img"
-    const saveImg2Img = "save_img2img"
+function saveImage() {
+    const tabTxt2Img = gradioApp().getElementById("tab_txt2img");
+    const tabImg2Img = gradioApp().getElementById("tab_img2img");
+    const saveTxt2Img = "save_txt2img";
+    const saveImg2Img = "save_img2img";
     if (tabTxt2Img.style.display != "none") {
-        gradioApp().getElementById(saveTxt2Img).click()
+        gradioApp().getElementById(saveTxt2Img).click();
     } else if (tabImg2Img.style.display != "none") {
-        gradioApp().getElementById(saveImg2Img).click()
+        gradioApp().getElementById(saveImg2Img).click();
     } else {
-        console.error("missing implementation for saving modal of this type")
+        console.error("missing implementation for saving modal of this type");
     }
 }
 
 function modalSaveImage(event) {
-    saveImage()
-    event.stopPropagation()
+    saveImage();
+    event.stopPropagation();
 }
 
 function modalNextImage(event) {
-    modalImageSwitch(1)
-    event.stopPropagation()
+    modalImageSwitch(1);
+    event.stopPropagation();
 }
 
 function modalPrevImage(event) {
-    modalImageSwitch(-1)
-    event.stopPropagation()
+    modalImageSwitch(-1);
+    event.stopPropagation();
 }
 
 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;
     }
 }
 
 function setupImageForLightbox(e) {
-	if (e.dataset.modded)
-		return;
+    if (e.dataset.modded) {
+        return;
+    }
 
-	e.dataset.modded = true;
-	e.style.cursor='pointer'
-	e.style.userSelect='none'
+    e.dataset.modded = true;
+    e.style.cursor = 'pointer';
+    e.style.userSelect = 'none';
 
-	var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
+    var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 
-	// For Firefox, listening on click first switched to next image then shows the lightbox.
-	// If you know how to fix this without switching to mousedown event, please.
-	// For other browsers the event is click to make it possiblr to drag picture.
-	var event = isFirefox ? 'mousedown' : 'click'
+    // For Firefox, listening on click first switched to next image then shows the lightbox.
+    // If you know how to fix this without switching to mousedown event, please.
+    // For other browsers the event is click to make it possiblr to drag picture.
+    var event = isFirefox ? 'mousedown' : 'click';
 
-	e.addEventListener(event, function (evt) {
-		if(!opts.js_modal_lightbox || evt.button != 0) return;
+    e.addEventListener(event, 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);
+        modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed);
+        evt.preventDefault();
+        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'))
-    event.stopPropagation()
+    modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'));
+    event.stopPropagation();
 }
 
 function modalTileImageToggle(event) {
@@ -159,99 +161,93 @@ function modalTileImageToggle(event) {
     const isTiling = modalImage.style.display === 'none';
     if (isTiling) {
         modalImage.style.display = 'block';
-        modal.style.setProperty('background-image', 'none')
+        modal.style.setProperty('background-image', 'none');
     } else {
         modalImage.style.display = 'none';
-        modal.style.setProperty('background-image', `url(${modalImage.src})`)
+        modal.style.setProperty('background-image', `url(${modalImage.src})`);
     }
 
-    event.stopPropagation()
-}
-
-function galleryImageHandler(e) {
-    //if (e && e.parentElement.tagName == 'BUTTON') {
-        e.onclick = showGalleryImage;
-    //}
+    event.stopPropagation();
 }
 
 onUiUpdate(function() {
-    var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img')
+    var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img');
     if (fullImg_preview != null) {
         fullImg_preview.forEach(setupImageForLightbox);
     }
     updateOnBackgroundChange();
-})
+});
 
 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.tabIndex = 0;
+    modal.addEventListener('keydown', modalKeyHandler, true);
 
-    const modalControls = document.createElement('div')
+    const modalControls = document.createElement('div');
     modalControls.className = 'modalControls gradio-container';
     modal.append(modalControls);
 
-    const modalZoom = document.createElement('span')
+    const modalZoom = document.createElement('span');
     modalZoom.className = 'modalZoom cursor';
-    modalZoom.innerHTML = '&#10529;'
-    modalZoom.addEventListener('click', modalZoomToggle, true)
+    modalZoom.innerHTML = '&#10529;';
+    modalZoom.addEventListener('click', modalZoomToggle, true);
     modalZoom.title = "Toggle zoomed view";
-    modalControls.appendChild(modalZoom)
+    modalControls.appendChild(modalZoom);
 
-    const modalTileImage = document.createElement('span')
+    const modalTileImage = document.createElement('span');
     modalTileImage.className = 'modalTileImage cursor';
-    modalTileImage.innerHTML = '&#8862;'
-    modalTileImage.addEventListener('click', modalTileImageToggle, true)
+    modalTileImage.innerHTML = '&#8862;';
+    modalTileImage.addEventListener('click', modalTileImageToggle, true);
     modalTileImage.title = "Preview tiling";
-    modalControls.appendChild(modalTileImage)
+    modalControls.appendChild(modalTileImage);
 
-    const modalSave = document.createElement("span")
-    modalSave.className = "modalSave cursor"
-    modalSave.id = "modal_save"
-    modalSave.innerHTML = "&#x1F5AB;"
-    modalSave.addEventListener("click", modalSaveImage, true)
-    modalSave.title = "Save Image(s)"
-    modalControls.appendChild(modalSave)
+    const modalSave = document.createElement("span");
+    modalSave.className = "modalSave cursor";
+    modalSave.id = "modal_save";
+    modalSave.innerHTML = "&#x1F5AB;";
+    modalSave.addEventListener("click", modalSaveImage, true);
+    modalSave.title = "Save Image(s)";
+    modalControls.appendChild(modalSave);
 
-    const modalClose = document.createElement('span')
+    const modalClose = document.createElement('span');
     modalClose.className = 'modalClose cursor';
-    modalClose.innerHTML = '&times;'
+    modalClose.innerHTML = '&times;';
     modalClose.onclick = closeModal;
     modalClose.title = "Close image viewer";
-    modalControls.appendChild(modalClose)
+    modalControls.appendChild(modalClose);
 
-    const modalImage = document.createElement('img')
+    const modalImage = document.createElement('img');
     modalImage.id = 'modalImage';
     modalImage.onclick = closeModal;
-    modalImage.tabIndex = 0
-    modalImage.addEventListener('keydown', modalKeyHandler, true)
-    modal.appendChild(modalImage)
+    modalImage.tabIndex = 0;
+    modalImage.addEventListener('keydown', modalKeyHandler, true);
+    modal.appendChild(modalImage);
 
-    const modalPrev = document.createElement('a')
+    const modalPrev = document.createElement('a');
     modalPrev.className = 'modalPrev';
-    modalPrev.innerHTML = '&#10094;'
-    modalPrev.tabIndex = 0
+    modalPrev.innerHTML = '&#10094;';
+    modalPrev.tabIndex = 0;
     modalPrev.addEventListener('click', modalPrevImage, true);
-    modalPrev.addEventListener('keydown', modalKeyHandler, true)
-    modal.appendChild(modalPrev)
+    modalPrev.addEventListener('keydown', modalKeyHandler, true);
+    modal.appendChild(modalPrev);
 
-    const modalNext = document.createElement('a')
+    const modalNext = document.createElement('a');
     modalNext.className = 'modalNext';
-    modalNext.innerHTML = '&#10095;'
-    modalNext.tabIndex = 0
+    modalNext.innerHTML = '&#10095;';
+    modalNext.tabIndex = 0;
     modalNext.addEventListener('click', modalNextImage, true);
-    modalNext.addEventListener('keydown', modalKeyHandler, true)
+    modalNext.addEventListener('keydown', modalKeyHandler, true);
 
-    modal.appendChild(modalNext)
+    modal.appendChild(modalNext);
 
     try {
-		gradioApp().appendChild(modal);
-	} catch (e) {
-		gradioApp().body.appendChild(modal);
-	}
+        gradioApp().appendChild(modal);
+    } catch (e) {
+        gradioApp().body.appendChild(modal);
+    }
 
     document.body.appendChild(modal);
 
diff --git a/javascript/imageviewerGamepad.js b/javascript/imageviewerGamepad.js
index 6297a12b..31d226de 100644
--- a/javascript/imageviewerGamepad.js
+++ b/javascript/imageviewerGamepad.js
@@ -1,7 +1,7 @@
 window.addEventListener('gamepadconnected', (e) => {
     const index = e.gamepad.index;
     let isWaiting = false;
-    setInterval(async () => {
+    setInterval(async() => {
         if (!opts.js_modal_lightbox_gamepad || isWaiting) return;
         const gamepad = navigator.getGamepads()[index];
         const xValue = gamepad.axes[0];
@@ -14,7 +14,7 @@ window.addEventListener('gamepadconnected', (e) => {
         }
         if (isWaiting) {
             await sleepUntil(() => {
-                const xValue = navigator.getGamepads()[index].axes[0]
+                const xValue = navigator.getGamepads()[index].axes[0];
                 if (xValue < 0.3 && xValue > -0.3) {
                     return true;
                 }
diff --git a/javascript/localization.js b/javascript/localization.js
index 86e5ca67..eb22b8a7 100644
--- a/javascript/localization.js
+++ b/javascript/localization.js
@@ -1,177 +1,176 @@
-

-// localization = {} -- the dict with translations is created by the backend

-

-ignore_ids_for_localization={

-    setting_sd_hypernetwork: 'OPTION',

-    setting_sd_model_checkpoint: 'OPTION',

-    setting_realesrgan_enabled_models: 'OPTION',

-    modelmerger_primary_model_name: 'OPTION',

-    modelmerger_secondary_model_name: 'OPTION',

-    modelmerger_tertiary_model_name: 'OPTION',

-    train_embedding: 'OPTION',

-    train_hypernetwork: 'OPTION',

-    txt2img_styles: 'OPTION',

-    img2img_styles: 'OPTION',

-    setting_random_artist_categories: 'SPAN',

-    setting_face_restoration_model: 'SPAN',

-    setting_realesrgan_enabled_models: 'SPAN',

-    extras_upscaler_1: 'SPAN',

-    extras_upscaler_2: 'SPAN',

-}

-

-re_num = /^[\.\d]+$/

-re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u

-

-original_lines = {}

-translated_lines = {}

-

-function hasLocalization() {

-    return window.localization && Object.keys(window.localization).length > 0;

-}

-

-function textNodesUnder(el){

-    var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);

-    while(n=walk.nextNode()) a.push(n);

-    return a;

-}

-

-function canBeTranslated(node, text){

-    if(! text) return false;

-    if(! node.parentElement) return false;

-

-    var parentType = node.parentElement.nodeName

-    if(parentType=='SCRIPT' || parentType=='STYLE' || parentType=='TEXTAREA') return false;

-

-    if (parentType=='OPTION' || parentType=='SPAN'){

-        var pnode = node

-        for(var level=0; level<4; level++){

-            pnode = pnode.parentElement

-            if(! pnode) break;

-

-            if(ignore_ids_for_localization[pnode.id] == parentType) return false;

-        }

-    }

-

-    if(re_num.test(text)) return false;

-    if(re_emoji.test(text)) return false;

-    return true

-}

-

-function getTranslation(text){

-    if(! text) return undefined

-

-    if(translated_lines[text] === undefined){

-        original_lines[text] = 1

-    }

-

-    tl = localization[text]

-    if(tl !== undefined){

-        translated_lines[tl] = 1

-    }

-

-    return tl

-}

-

-function processTextNode(node){

-    var text = node.textContent.trim()

-

-    if(! canBeTranslated(node, text)) return

-

-    tl = getTranslation(text)

-    if(tl !== undefined){

-        node.textContent = tl

-    }

-}

-

-function processNode(node){

-    if(node.nodeType == 3){

-        processTextNode(node)

-        return

-    }

-

-    if(node.title){

-        tl = getTranslation(node.title)

-        if(tl !== undefined){

-            node.title = tl

-        }

-    }

-

-    if(node.placeholder){

-        tl = getTranslation(node.placeholder)

-        if(tl !== undefined){

-            node.placeholder = tl

-        }

-    }

-

-    textNodesUnder(node).forEach(function(node){

-        processTextNode(node)

-    })

-}

-

-function dumpTranslations(){

-    if(!hasLocalization()) {

-        // If we don't have any localization,

-        // we will not have traversed the app to find

-        // original_lines, so do that now.

-        processNode(gradioApp());

-    }

-    var dumped = {}

-    if (localization.rtl) {

-        dumped.rtl = true;

-    }

-

-    for (const text in original_lines) {

-        if(dumped[text] !== undefined) continue;

-        dumped[text] = localization[text] || text;

-    }

-

-    return dumped;

-}

-

-function download_localization() {

-    var text = JSON.stringify(dumpTranslations(), null, 4)

-

-    var element = document.createElement('a');

-    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));

-    element.setAttribute('download', "localization.json");

-    element.style.display = 'none';

-    document.body.appendChild(element);

-

-    element.click();

-

-    document.body.removeChild(element);

-}

-

-document.addEventListener("DOMContentLoaded", function () {

-    if (!hasLocalization()) {

-        return;

-    }

-

-    onUiUpdate(function (m) {

-        m.forEach(function (mutation) {

-            mutation.addedNodes.forEach(function (node) {

-                processNode(node)

-            })

-        });

-    })

-

-    processNode(gradioApp())

-

-    if (localization.rtl) {  // if the language is from right to left,

-        (new MutationObserver((mutations, observer) => { // wait for the style to load

-            mutations.forEach(mutation => {

-                mutation.addedNodes.forEach(node => {

-                    if (node.tagName === 'STYLE') {

-                        observer.disconnect();

-

-                        for (const x of node.sheet.rules) {  // find all rtl media rules

-                            if (Array.from(x.media || []).includes('rtl')) {

-                                x.media.appendMedium('all');  // enable them

-                            }

-                        }

-                    }

-                })

-            });

-        })).observe(gradioApp(), { childList: true });

-    }

-})

+
+// localization = {} -- the dict with translations is created by the backend
+
+var ignore_ids_for_localization = {
+    setting_sd_hypernetwork: 'OPTION',
+    setting_sd_model_checkpoint: 'OPTION',
+    modelmerger_primary_model_name: 'OPTION',
+    modelmerger_secondary_model_name: 'OPTION',
+    modelmerger_tertiary_model_name: 'OPTION',
+    train_embedding: 'OPTION',
+    train_hypernetwork: 'OPTION',
+    txt2img_styles: 'OPTION',
+    img2img_styles: 'OPTION',
+    setting_random_artist_categories: 'SPAN',
+    setting_face_restoration_model: 'SPAN',
+    setting_realesrgan_enabled_models: 'SPAN',
+    extras_upscaler_1: 'SPAN',
+    extras_upscaler_2: 'SPAN',
+};
+
+var re_num = /^[.\d]+$/;
+var re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u;
+
+var original_lines = {};
+var translated_lines = {};
+
+function hasLocalization() {
+    return window.localization && Object.keys(window.localization).length > 0;
+}
+
+function textNodesUnder(el) {
+    var n, a = [], walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
+    while ((n = walk.nextNode())) a.push(n);
+    return a;
+}
+
+function canBeTranslated(node, text) {
+    if (!text) return false;
+    if (!node.parentElement) return false;
+
+    var parentType = node.parentElement.nodeName;
+    if (parentType == 'SCRIPT' || parentType == 'STYLE' || parentType == 'TEXTAREA') return false;
+
+    if (parentType == 'OPTION' || parentType == 'SPAN') {
+        var pnode = node;
+        for (var level = 0; level < 4; level++) {
+            pnode = pnode.parentElement;
+            if (!pnode) break;
+
+            if (ignore_ids_for_localization[pnode.id] == parentType) return false;
+        }
+    }
+
+    if (re_num.test(text)) return false;
+    if (re_emoji.test(text)) return false;
+    return true;
+}
+
+function getTranslation(text) {
+    if (!text) return undefined;
+
+    if (translated_lines[text] === undefined) {
+        original_lines[text] = 1;
+    }
+
+    var tl = localization[text];
+    if (tl !== undefined) {
+        translated_lines[tl] = 1;
+    }
+
+    return tl;
+}
+
+function processTextNode(node) {
+    var text = node.textContent.trim();
+
+    if (!canBeTranslated(node, text)) return;
+
+    var tl = getTranslation(text);
+    if (tl !== undefined) {
+        node.textContent = tl;
+    }
+}
+
+function processNode(node) {
+    if (node.nodeType == 3) {
+        processTextNode(node);
+        return;
+    }
+
+    if (node.title) {
+        let tl = getTranslation(node.title);
+        if (tl !== undefined) {
+            node.title = tl;
+        }
+    }
+
+    if (node.placeholder) {
+        let tl = getTranslation(node.placeholder);
+        if (tl !== undefined) {
+            node.placeholder = tl;
+        }
+    }
+
+    textNodesUnder(node).forEach(function(node) {
+        processTextNode(node);
+    });
+}
+
+function dumpTranslations() {
+    if (!hasLocalization()) {
+        // If we don't have any localization,
+        // we will not have traversed the app to find
+        // original_lines, so do that now.
+        processNode(gradioApp());
+    }
+    var dumped = {};
+    if (localization.rtl) {
+        dumped.rtl = true;
+    }
+
+    for (const text in original_lines) {
+        if (dumped[text] !== undefined) continue;
+        dumped[text] = localization[text] || text;
+    }
+
+    return dumped;
+}
+
+function download_localization() {
+    var text = JSON.stringify(dumpTranslations(), null, 4);
+
+    var element = document.createElement('a');
+    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+    element.setAttribute('download', "localization.json");
+    element.style.display = 'none';
+    document.body.appendChild(element);
+
+    element.click();
+
+    document.body.removeChild(element);
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+    if (!hasLocalization()) {
+        return;
+    }
+
+    onUiUpdate(function(m) {
+        m.forEach(function(mutation) {
+            mutation.addedNodes.forEach(function(node) {
+                processNode(node);
+            });
+        });
+    });
+
+    processNode(gradioApp());
+
+    if (localization.rtl) { // if the language is from right to left,
+        (new MutationObserver((mutations, observer) => { // wait for the style to load
+            mutations.forEach(mutation => {
+                mutation.addedNodes.forEach(node => {
+                    if (node.tagName === 'STYLE') {
+                        observer.disconnect();
+
+                        for (const x of node.sheet.rules) { // find all rtl media rules
+                            if (Array.from(x.media || []).includes('rtl')) {
+                                x.media.appendMedium('all'); // enable them
+                            }
+                        }
+                    }
+                });
+            });
+        })).observe(gradioApp(), {childList: true});
+    }
+});
diff --git a/javascript/notification.js b/javascript/notification.js
index 83fce1f8..a68a76f2 100644
--- a/javascript/notification.js
+++ b/javascript/notification.js
@@ -4,14 +4,14 @@ let lastHeadImg = null;
 
 let notificationButton = null;
 
-onUiUpdate(function(){
-    if(notificationButton == null){
-        notificationButton = gradioApp().getElementById('request_notifications')
+onUiUpdate(function() {
+    if (notificationButton == null) {
+        notificationButton = gradioApp().getElementById('request_notifications');
 
-        if(notificationButton != null){
+        if (notificationButton != null) {
             notificationButton.addEventListener('click', () => {
                 void Notification.requestPermission();
-            },true);
+            }, true);
         }
     }
 
@@ -42,7 +42,7 @@ onUiUpdate(function(){
         }
     );
 
-    notification.onclick = function(_){
+    notification.onclick = function(_) {
         parent.focus();
         this.close();
     };
diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index 8d2c3492..29299787 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -1,29 +1,29 @@
 // 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){
+function request(url, data, handler, errorHandler) {
     var 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);
-                    handler(js)
+                    handler(js);
                 } catch (error) {
                     console.error(error);
-                    errorHandler()
+                    errorHandler();
                 }
-            } else{
-                errorHandler()
+            } else {
+                errorHandler();
             }
         }
     };
@@ -31,147 +31,147 @@ function request(url, data, handler, errorHandler){
     xhr.send(js);
 }
 
-function pad2(x){
-    return x<10 ? '0'+x : x
+function pad2(x) {
+    return x < 10 ? '0' + x : x;
 }
 
-function formatTime(secs){
-    if(secs > 3600){
-        return pad2(Math.floor(secs/60/60)) + ":" + pad2(Math.floor(secs/60)%60) + ":" + pad2(Math.floor(secs)%60)
-    } else if(secs > 60){
-        return pad2(Math.floor(secs/60)) + ":" + pad2(Math.floor(secs)%60)
-    } else{
-        return Math.floor(secs) + "s"
+function formatTime(secs) {
+    if (secs > 3600) {
+        return pad2(Math.floor(secs / 60 / 60)) + ":" + pad2(Math.floor(secs / 60) % 60) + ":" + pad2(Math.floor(secs) % 60);
+    } else if (secs > 60) {
+        return pad2(Math.floor(secs / 60)) + ":" + pad2(Math.floor(secs) % 60);
+    } else {
+        return Math.floor(secs) + "s";
     }
 }
 
-function setTitle(progress){
-    var title = 'Stable Diffusion'
+function setTitle(progress) {
+    var title = 'Stable Diffusion';
 
-    if(opts.show_progress_in_title && progress){
+    if (opts.show_progress_in_title && progress) {
         title = '[' + progress.trim() + '] ' + title;
     }
 
-    if(document.title != title){
-        document.title =  title;
+    if (document.title != title) {
+        document.title = title;
     }
 }
 
 
-function randomId(){
-    return "task(" + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7)+")"
+function randomId() {
+    return "task(" + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + ")";
 }
 
 // starts sending progress requests to "/internal/progress" uri, creating progressbar above progressbarContainer element and
 // preview inside gallery element. Cleans up all created stuff when the task is over and calls atEnd.
 // calls onProgress every time there is a progress update
-function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgress, inactivityTimeout=40){
-    var dateStart = new Date()
-    var wasEverActive = false
-    var parentProgressbar = progressbarContainer.parentNode
-    var parentGallery = gallery ? gallery.parentNode : null
-
-    var divProgress = document.createElement('div')
-    divProgress.className='progressDiv'
-    divProgress.style.display = opts.show_progressbar ? "block" : "none"
-    var divInner = document.createElement('div')
-    divInner.className='progress'
-
-    divProgress.appendChild(divInner)
-    parentProgressbar.insertBefore(divProgress, progressbarContainer)
-
-    if(parentGallery){
-        var livePreview = document.createElement('div')
-        livePreview.className='livePreview'
-        parentGallery.insertBefore(livePreview, gallery)
+function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgress, inactivityTimeout = 40) {
+    var dateStart = new Date();
+    var wasEverActive = false;
+    var parentProgressbar = progressbarContainer.parentNode;
+    var parentGallery = gallery ? gallery.parentNode : null;
+
+    var divProgress = document.createElement('div');
+    divProgress.className = 'progressDiv';
+    divProgress.style.display = opts.show_progressbar ? "block" : "none";
+    var divInner = document.createElement('div');
+    divInner.className = 'progress';
+
+    divProgress.appendChild(divInner);
+    parentProgressbar.insertBefore(divProgress, progressbarContainer);
+
+    if (parentGallery) {
+        var livePreview = document.createElement('div');
+        livePreview.className = 'livePreview';
+        parentGallery.insertBefore(livePreview, gallery);
     }
 
-    var removeProgressBar = function(){
-        setTitle("")
-        parentProgressbar.removeChild(divProgress)
-        if(parentGallery) parentGallery.removeChild(livePreview)
-        atEnd()
-    }
+    var removeProgressBar = function() {
+        setTitle("");
+        parentProgressbar.removeChild(divProgress);
+        if (parentGallery) parentGallery.removeChild(livePreview);
+        atEnd();
+    };
 
-    var fun = function(id_task, id_live_preview){
-        request("./internal/progress", {"id_task": id_task, "id_live_preview": id_live_preview}, function(res){
-            if(res.completed){
-                removeProgressBar()
-                return
+    var fun = function(id_task, id_live_preview) {
+        request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) {
+            if (res.completed) {
+                removeProgressBar();
+                return;
             }
 
-            var rect = progressbarContainer.getBoundingClientRect()
+            var rect = progressbarContainer.getBoundingClientRect();
 
-            if(rect.width){
+            if (rect.width) {
                 divProgress.style.width = rect.width + "px";
             }
 
-            let progressText = ""
+            let progressText = "";
 
-            divInner.style.width = ((res.progress || 0) * 100.0) + '%'
-            divInner.style.background = res.progress ? "" : "transparent"
+            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.progress > 0) {
+                progressText = ((res.progress || 0) * 100.0).toFixed(0) + '%';
             }
 
-            if(res.eta){
-                progressText += " ETA: " + formatTime(res.eta)
+            if (res.eta) {
+                progressText += " ETA: " + formatTime(res.eta);
             }
 
 
-            setTitle(progressText)
+            setTitle(progressText);
 
-            if(res.textinfo && res.textinfo.indexOf("\n") == -1){
-                progressText = res.textinfo + " " + progressText
+            if (res.textinfo && res.textinfo.indexOf("\n") == -1) {
+                progressText = res.textinfo + " " + progressText;
             }
 
-            divInner.textContent = progressText
+            divInner.textContent = progressText;
 
-            var elapsedFromStart = (new Date() - dateStart) / 1000
+            var elapsedFromStart = (new Date() - dateStart) / 1000;
 
-            if(res.active) wasEverActive = true;
+            if (res.active) wasEverActive = true;
 
-            if(! res.active && wasEverActive){
-                removeProgressBar()
-                return
+            if (!res.active && wasEverActive) {
+                removeProgressBar();
+                return;
             }
 
-            if(elapsedFromStart > inactivityTimeout && !res.queued && !res.active){
-                removeProgressBar()
-                return
+            if (elapsedFromStart > inactivityTimeout && !res.queued && !res.active) {
+                removeProgressBar();
+                return;
             }
 
 
-            if(res.live_preview && gallery){
-                var rect = gallery.getBoundingClientRect()
-                if(rect.width){
-                    livePreview.style.width = rect.width + "px"
-                    livePreview.style.height = rect.height + "px"
+            if (res.live_preview && gallery) {
+                rect = gallery.getBoundingClientRect();
+                if (rect.width) {
+                    livePreview.style.width = rect.width + "px";
+                    livePreview.style.height = rect.height + "px";
                 }
 
                 var img = new Image();
                 img.onload = function() {
-                    livePreview.appendChild(img)
-                    if(livePreview.childElementCount > 2){
-                        livePreview.removeChild(livePreview.firstElementChild)
+                    livePreview.appendChild(img);
+                    if (livePreview.childElementCount > 2) {
+                        livePreview.removeChild(livePreview.firstElementChild);
                     }
-                }
+                };
                 img.src = res.live_preview;
             }
 
 
-            if(onProgress){
-                onProgress(res)
+            if (onProgress) {
+                onProgress(res);
             }
 
             setTimeout(() => {
                 fun(id_task, res.id_live_preview);
-            }, opts.live_preview_refresh_period || 500)
-        }, function(){
-            removeProgressBar()
-        })
-    }
+            }, opts.live_preview_refresh_period || 500);
+        }, function() {
+            removeProgressBar();
+        });
+    };
 
-    fun(id_task, 0)
+    fun(id_task, 0);
 }
diff --git a/javascript/textualInversion.js b/javascript/textualInversion.js
index 0354b860..37e3d075 100644
--- a/javascript/textualInversion.js
+++ b/javascript/textualInversion.js
@@ -1,17 +1,17 @@
-

-

-

-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 = args_to_array(arguments)

-

-    res[0] = id

-

-    return res

-}

+
+
+
+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 = args_to_array(arguments);
+
+    res[0] = id;
+
+    return res;
+}
diff --git a/javascript/ui.js b/javascript/ui.js
index 6d4119d7..dbb8132f 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -1,9 +1,9 @@
 // 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
+function set_theme(theme) {
+    var gradioURL = window.location.href;
     if (!gradioURL.includes('?__theme=')) {
-      window.location.replace(gradioURL + '?__theme=' + theme);
+        window.location.replace(gradioURL + '?__theme=' + theme);
     }
 }
 
@@ -14,7 +14,7 @@ function all_gallery_buttons() {
         if (elem.parentElement.offsetParent) {
             visibleGalleryButtons.push(elem);
         }
-    })
+    });
     return visibleGalleryButtons;
 }
 
@@ -25,31 +25,35 @@ function selected_gallery_button() {
         if (elem.parentElement.offsetParent) {
             visibleCurrentButton = elem;
         }
-    })
+    });
     return visibleCurrentButton;
 }
 
-function selected_gallery_index(){
+function selected_gallery_index() {
     var buttons = all_gallery_buttons();
     var button = selected_gallery_button();
 
-    var result = -1
-    buttons.forEach(function(v, i){ if(v==button) { result = i } })
+    var result = -1;
+    buttons.forEach(function(v, i) {
+        if (v == button) {
+            result = i;
+        }
+    });
 
-    return result
+    return result;
 }
 
-function extract_image_from_gallery(gallery){
-    if (gallery.length == 0){
+function extract_image_from_gallery(gallery) {
+    if (gallery.length == 0) {
         return [null];
     }
-    if (gallery.length == 1){
+    if (gallery.length == 1) {
         return [gallery[0]];
     }
 
-    var index = selected_gallery_index()
+    var index = selected_gallery_index();
 
-    if (index < 0 || index >= gallery.length){
+    if (index < 0 || index >= gallery.length) {
         // Use the first image in the gallery as the default
         index = 0;
     }
@@ -57,249 +61,242 @@ function extract_image_from_gallery(gallery){
     return [gallery[index]];
 }
 
-function args_to_array(args){
-    var res = []
-    for(var i=0;i<args.length;i++){
-        res.push(args[i])
+function args_to_array(args) {
+    var res = [];
+    for (var i = 0; i < args.length; i++) {
+        res.push(args[i]);
     }
-    return res
+    return res;
 }
 
-function switch_to_txt2img(){
+function switch_to_txt2img() {
     gradioApp().querySelector('#tabs').querySelectorAll('button')[0].click();
 
     return args_to_array(arguments);
 }
 
-function switch_to_img2img_tab(no){
+function switch_to_img2img_tab(no) {
     gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
     gradioApp().getElementById('mode_img2img').querySelectorAll('button')[no].click();
 }
-function switch_to_img2img(){
+function switch_to_img2img() {
     switch_to_img2img_tab(0);
     return args_to_array(arguments);
 }
 
-function switch_to_sketch(){
+function switch_to_sketch() {
     switch_to_img2img_tab(1);
     return args_to_array(arguments);
 }
 
-function switch_to_inpaint(){
+function switch_to_inpaint() {
     switch_to_img2img_tab(2);
     return args_to_array(arguments);
 }
 
-function switch_to_inpaint_sketch(){
+function switch_to_inpaint_sketch() {
     switch_to_img2img_tab(3);
     return args_to_array(arguments);
 }
 
-function switch_to_inpaint(){
-    gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
-    gradioApp().getElementById('mode_img2img').querySelectorAll('button')[2].click();
-
-    return args_to_array(arguments);
-}
-
-function switch_to_extras(){
+function switch_to_extras() {
     gradioApp().querySelector('#tabs').querySelectorAll('button')[2].click();
 
     return args_to_array(arguments);
 }
 
-function get_tab_index(tabId){
-    var res = 0
+function get_tab_index(tabId) {
+    var res = 0;
 
-    gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button').forEach(function(button, i){
-        if(button.className.indexOf('selected') != -1)
-            res = i
-    })
+    gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button').forEach(function(button, i) {
+        if (button.className.indexOf('selected') != -1) {
+            res = i;
+        }
+    });
 
-    return res
+    return res;
 }
 
-function create_tab_index_args(tabId, args){
-    var res = []
-    for(var i=0; i<args.length; i++){
-        res.push(args[i])
+function create_tab_index_args(tabId, args) {
+    var res = [];
+    for (var i = 0; i < args.length; i++) {
+        res.push(args[i]);
     }
 
-    res[0] = get_tab_index(tabId)
+    res[0] = get_tab_index(tabId);
 
-    return res
+    return res;
 }
 
 function get_img2img_tab_index() {
-    let res = args_to_array(arguments)
-    res.splice(-2)
-    res[0] = get_tab_index('mode_img2img')
-    return res
+    let res = args_to_array(arguments);
+    res.splice(-2);
+    res[0] = get_tab_index('mode_img2img');
+    return res;
 }
 
-function create_submit_args(args){
-    var res = []
-    for(var i=0;i<args.length;i++){
-        res.push(args[i])
+function create_submit_args(args) {
+    var res = [];
+    for (var i = 0; i < args.length; i++) {
+        res.push(args[i]);
     }
 
     // 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.
     // I don't know why gradio is sending outputs along with inputs, but we can prevent sending the image gallery here, which seems to be an issue for some.
     // If gradio at some point stops sending outputs, this may break something
-    if(Array.isArray(res[res.length - 3])){
-        res[res.length - 3] = null
+    if (Array.isArray(res[res.length - 3])) {
+        res[res.length - 3] = null;
     }
 
-    return res
+    return res;
 }
 
-function showSubmitButtons(tabname, show){
-    gradioApp().getElementById(tabname+'_interrupt').style.display = show ? "none" : "block"
-    gradioApp().getElementById(tabname+'_skip').style.display = show ? "none" : "block"
+function showSubmitButtons(tabname, show) {
+    gradioApp().getElementById(tabname + '_interrupt').style.display = show ? "none" : "block";
+    gradioApp().getElementById(tabname + '_skip').style.display = show ? "none" : "block";
 }
 
-function showRestoreProgressButton(tabname, show){
-    var button = gradioApp().getElementById(tabname + "_restore_progress")
-    if(! button) return
+function showRestoreProgressButton(tabname, show) {
+    var button = gradioApp().getElementById(tabname + "_restore_progress");
+    if (!button) return;
 
-    button.style.display = show ? "flex" : "none"
+    button.style.display = show ? "flex" : "none";
 }
 
-function submit(){
-    rememberGallerySelection('txt2img_gallery')
-    showSubmitButtons('txt2img', false)
+function submit() {
+    showSubmitButtons('txt2img', false);
 
-    var id = randomId()
+    var id = randomId();
     localStorage.setItem("txt2img_task_id", id);
 
-    requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function(){
-        showSubmitButtons('txt2img', true)
-        localStorage.removeItem("txt2img_task_id")
-        showRestoreProgressButton('txt2img', false)
-    })
+    requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
+        showSubmitButtons('txt2img', true);
+        localStorage.removeItem("txt2img_task_id");
+        showRestoreProgressButton('txt2img', false);
+    });
 
-    var res = create_submit_args(arguments)
+    var res = create_submit_args(arguments);
 
-    res[0] = id
+    res[0] = id;
 
-    return res
+    return res;
 }
 
-function submit_img2img(){
-    rememberGallerySelection('img2img_gallery')
-    showSubmitButtons('img2img', false)
+function submit_img2img() {
+    showSubmitButtons('img2img', false);
 
-    var id = randomId()
+    var id = randomId();
     localStorage.setItem("img2img_task_id", id);
 
-    requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function(){
-        showSubmitButtons('img2img', true)
-        localStorage.removeItem("img2img_task_id")
-        showRestoreProgressButton('img2img', false)
-    })
+    requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
+        showSubmitButtons('img2img', true);
+        localStorage.removeItem("img2img_task_id");
+        showRestoreProgressButton('img2img', false);
+    });
 
-    var res = create_submit_args(arguments)
+    var res = create_submit_args(arguments);
 
-    res[0] = id
-    res[1] = get_tab_index('mode_img2img')
+    res[0] = id;
+    res[1] = get_tab_index('mode_img2img');
 
-    return res
+    return res;
 }
 
-function restoreProgressTxt2img(){
-    showRestoreProgressButton("txt2img", false)
-    var id = localStorage.getItem("txt2img_task_id")
+function restoreProgressTxt2img() {
+    showRestoreProgressButton("txt2img", false);
+    var id = localStorage.getItem("txt2img_task_id");
 
-    id = localStorage.getItem("txt2img_task_id")
+    id = localStorage.getItem("txt2img_task_id");
 
-    if(id) {
-        requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function(){
-            showSubmitButtons('txt2img', true)
-        }, null, 0)
+    if (id) {
+        requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
+            showSubmitButtons('txt2img', true);
+        }, null, 0);
     }
 
-    return id
+    return id;
 }
 
-function restoreProgressImg2img(){
-    showRestoreProgressButton("img2img", false)
-    
-    var id = localStorage.getItem("img2img_task_id")
+function restoreProgressImg2img() {
+    showRestoreProgressButton("img2img", false);
 
-    if(id) {
-        requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function(){
-            showSubmitButtons('img2img', true)
-        }, null, 0)
+    var id = localStorage.getItem("img2img_task_id");
+
+    if (id) {
+        requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
+            showSubmitButtons('img2img', true);
+        }, null, 0);
     }
 
-    return id
+    return id;
 }
 
 
-onUiLoaded(function () {
-    showRestoreProgressButton('txt2img', localStorage.getItem("txt2img_task_id"))
-    showRestoreProgressButton('img2img', localStorage.getItem("img2img_task_id"))
+onUiLoaded(function() {
+    showRestoreProgressButton('txt2img', localStorage.getItem("txt2img_task_id"));
+    showRestoreProgressButton('img2img', localStorage.getItem("img2img_task_id"));
 });
 
 
-function modelmerger(){
-    var id = randomId()
-    requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null, function(){})
+function modelmerger() {
+    var id = randomId();
+    requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null, function() {});
 
-    var res = create_submit_args(arguments)
-    res[0] = id
-    return res
+    var 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:')
-    return [name_, prompt_text, negative_prompt_text]
+    var name_ = prompt('Style name:');
+    return [name_, prompt_text, negative_prompt_text];
 }
 
 function confirm_clear_prompt(prompt, negative_prompt) {
-    if(confirm("Delete prompt?")) {
-        prompt = ""
-        negative_prompt = ""
+    if (confirm("Delete prompt?")) {
+        prompt = "";
+        negative_prompt = "";
     }
 
-    return [prompt, negative_prompt]
+    return [prompt, negative_prompt];
 }
 
 
-promptTokecountUpdateFuncs = {}
+var promptTokecountUpdateFuncs = {};
 
-function recalculatePromptTokens(name){
-    if(promptTokecountUpdateFuncs[name]){
-        promptTokecountUpdateFuncs[name]()
+function recalculatePromptTokens(name) {
+    if (promptTokecountUpdateFuncs[name]) {
+        promptTokecountUpdateFuncs[name]();
     }
 }
 
-function recalculate_prompts_txt2img(){
-    recalculatePromptTokens('txt2img_prompt')
-    recalculatePromptTokens('txt2img_neg_prompt')
+function recalculate_prompts_txt2img() {
+    recalculatePromptTokens('txt2img_prompt');
+    recalculatePromptTokens('txt2img_neg_prompt');
     return args_to_array(arguments);
 }
 
-function recalculate_prompts_img2img(){
-    recalculatePromptTokens('img2img_prompt')
-    recalculatePromptTokens('img2img_neg_prompt')
+function recalculate_prompts_img2img() {
+    recalculatePromptTokens('img2img_prompt');
+    recalculatePromptTokens('img2img_neg_prompt');
     return args_to_array(arguments);
 }
 
 
-var opts = {}
-onUiUpdate(function(){
-	if(Object.keys(opts).length != 0) return;
+var opts = {};
+onUiUpdate(function() {
+    if (Object.keys(opts).length != 0) return;
+
+    var json_elem = gradioApp().getElementById('settings_json');
+    if (json_elem == null) return;
 
-	var json_elem = gradioApp().getElementById('settings_json')
-	if(json_elem == null) return;
+    var textarea = json_elem.querySelector('textarea');
+    var jsdata = textarea.value;
+    opts = JSON.parse(jsdata);
 
-    var textarea = json_elem.querySelector('textarea')
-    var jsdata = textarea.value
-    opts = JSON.parse(jsdata)
-    executeCallbacks(optionsChangedCallbacks);
+    executeCallbacks(optionsChangedCallbacks); /*global optionsChangedCallbacks*/
 
     Object.defineProperty(textarea, 'value', {
         set: function(newValue) {
@@ -308,7 +305,7 @@ onUiUpdate(function(){
             valueProp.set.call(textarea, newValue);
 
             if (oldValue != newValue) {
-                opts = JSON.parse(textarea.value)
+                opts = JSON.parse(textarea.value);
             }
 
             executeCallbacks(optionsChangedCallbacks);
@@ -319,122 +316,130 @@ onUiUpdate(function(){
         }
     });
 
-    json_elem.parentElement.style.display="none"
+    json_elem.parentElement.style.display = "none";
 
-    function registerTextarea(id, id_counter, id_button){
-        var prompt = gradioApp().getElementById(id)
-        var counter = gradioApp().getElementById(id_counter)
+    function registerTextarea(id, id_counter, id_button) {
+        var prompt = gradioApp().getElementById(id);
+        var counter = gradioApp().getElementById(id_counter);
         var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
 
-        if(counter.parentElement == prompt.parentElement){
-            return
+        if (counter.parentElement == prompt.parentElement) {
+            return;
         }
 
-        prompt.parentElement.insertBefore(counter, prompt)
-        prompt.parentElement.style.position = "relative"
+        prompt.parentElement.insertBefore(counter, prompt);
+        prompt.parentElement.style.position = "relative";
 
-		promptTokecountUpdateFuncs[id] = function(){ update_token_counter(id_button); }
-		textarea.addEventListener("input", promptTokecountUpdateFuncs[id]);
+        promptTokecountUpdateFuncs[id] = function() {
+            update_token_counter(id_button);
+        };
+        textarea.addEventListener("input", promptTokecountUpdateFuncs[id]);
     }
 
-    registerTextarea('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button')
-    registerTextarea('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button')
-    registerTextarea('img2img_prompt', 'img2img_token_counter', 'img2img_token_button')
-    registerTextarea('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button')
-
-    var show_all_pages = gradioApp().getElementById('settings_show_all_pages')
-    var settings_tabs = gradioApp().querySelector('#settings div')
-    if(show_all_pages && settings_tabs){
-        settings_tabs.appendChild(show_all_pages)
-        show_all_pages.onclick = function(){
-            gradioApp().querySelectorAll('#settings > div').forEach(function(elem){
-                if(elem.id == "settings_tab_licenses")
+    registerTextarea('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button');
+    registerTextarea('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button');
+    registerTextarea('img2img_prompt', 'img2img_token_counter', 'img2img_token_button');
+    registerTextarea('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button');
+
+    var show_all_pages = gradioApp().getElementById('settings_show_all_pages');
+    var settings_tabs = gradioApp().querySelector('#settings div');
+    if (show_all_pages && settings_tabs) {
+        settings_tabs.appendChild(show_all_pages);
+        show_all_pages.onclick = function() {
+            gradioApp().querySelectorAll('#settings > div').forEach(function(elem) {
+                if (elem.id == "settings_tab_licenses") {
                     return;
+                }
 
                 elem.style.display = "block";
-            })
-        }
+            });
+        };
     }
-})
+});
 
-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() {
+    var elem = gradioApp().getElementById('sd_checkpoint_hash');
+    var sd_checkpoint_hash = opts.sd_checkpoint_hash || "";
+    var shorthash = sd_checkpoint_hash.substring(0, 10);
 
-	if(elem && elem.textContent != shorthash){
-	    elem.textContent = shorthash
-	    elem.title = sd_checkpoint_hash
-	    elem.href = "https://google.com/search?q=" + sd_checkpoint_hash
-	}
-})
+    if (elem && elem.textContent != shorthash) {
+        elem.textContent = shorthash;
+        elem.title = sd_checkpoint_hash;
+        elem.href = "https://google.com/search?q=" + sd_checkpoint_hash;
+    }
+});
 
 let txt2img_textarea, img2img_textarea = undefined;
-let wait_time = 800
+let wait_time = 800;
 let token_timeouts = {};
 
 function update_txt2img_tokens(...args) {
-	update_token_counter("txt2img_token_button")
-	if (args.length == 2)
-		return args[0]
-	return args;
+    update_token_counter("txt2img_token_button");
+    if (args.length == 2) {
+        return args[0];
+    }
+    return args;
 }
 
 function update_img2img_tokens(...args) {
-	update_token_counter("img2img_token_button")
-	if (args.length == 2)
-		return args[0]
-	return args;
+    update_token_counter(
+        "img2img_token_button"
+    );
+    if (args.length == 2) {
+        return args[0];
+    }
+    return args;
 }
 
 function update_token_counter(button_id) {
-	if (token_timeouts[button_id])
-		clearTimeout(token_timeouts[button_id]);
-	token_timeouts[button_id] = setTimeout(() => gradioApp().getElementById(button_id)?.click(), wait_time);
+    if (token_timeouts[button_id]) {
+        clearTimeout(token_timeouts[button_id]);
+    }
+    token_timeouts[button_id] = setTimeout(() => gradioApp().getElementById(button_id)?.click(), wait_time);
 }
 
-function restart_reload(){
-    document.body.innerHTML='<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
+function restart_reload() {
+    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){
+    var requestPing = function() {
+        requestGet("./internal/ping", {}, function(data) {
             location.reload();
-        }, function(){
+        }, function() {
             setTimeout(requestPing, 500);
-        })
-    }
+        });
+    };
 
     setTimeout(requestPing, 2000);
 
-    return []
+    return [];
 }
 
 // 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})
-	target.dispatchEvent(e);
+function updateInput(target) {
+    let e = new Event("input", {bubbles: true});
+    Object.defineProperty(e, "target", {value: target});
+    target.dispatchEvent(e);
 }
 
 
 var desiredCheckpointName = null;
-function selectCheckpoint(name){
+function selectCheckpoint(name) {
     desiredCheckpointName = name;
-    gradioApp().getElementById('change_checkpoint').click()
+    gradioApp().getElementById('change_checkpoint').click();
 }
 
-function currentImg2imgSourceResolution(_, _, scaleBy){
-    var img = gradioApp().querySelector('#mode_img2img > div[style="display: block;"] img')
-    return img ? [img.naturalWidth, img.naturalHeight, scaleBy] : [0, 0, scaleBy]
+function currentImg2imgSourceResolution(w, h, scaleBy) {
+    var img = gradioApp().querySelector('#mode_img2img > div[style="display: block;"] img');
+    return img ? [img.naturalWidth, img.naturalHeight, scaleBy] : [0, 0, scaleBy];
 }
 
-function updateImg2imgResizeToTextAfterChangingImage(){
+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()
+        gradioApp().getElementById('img2img_update_resize_to').click();
     }, 500);
 
     return []
diff --git a/javascript/ui_settings_hints.js b/javascript/ui_settings_hints.js
index 6d1933dc..e216852b 100644
--- a/javascript/ui_settings_hints.js
+++ b/javascript/ui_settings_hints.js
@@ -1,62 +1,62 @@
-// various hints and extra info for the settings tab

-

-settingsHintsSetup = false

-

-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]

-

-        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 span = div.querySelector('label span').firstChild

-

-        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){

-            var 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 = 'settings-value-table'

-

-		data.forEach(function(obj){

-			var tr = document.createElement('tr')

-			var td = document.createElement('td')

-			td.textContent = obj.name

-			tr.appendChild(td)

-

-			var td = document.createElement('td')

-			td.textContent = obj.label

-			tr.appendChild(td)

-

-			table.appendChild(tr)

-		})

-

-		popup(table);

-	})

-}

+// various hints and extra info for the settings tab
+
+var settingsHintsSetup = false;
+
+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];
+
+        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 span = div.querySelector('label span').firstChild;
+
+        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);
+        }
+    });
+});
+
+function settingsHintsShowQuicksettings() {
+    requestGet("./internal/quicksettings-hint", {}, function(data) {
+        var table = document.createElement('table');
+        table.className = 'settings-value-table';
+
+        data.forEach(function(obj) {
+            var tr = document.createElement('tr');
+            var td = document.createElement('td');
+            td.textContent = obj.name;
+            tr.appendChild(td);
+
+            td = document.createElement('td');
+            td.textContent = obj.label;
+            tr.appendChild(td);
+
+            table.appendChild(tr);
+        });
+
+        popup(table);
+    });
+}