Run `eslint --fix` (and normalize tabs to spaces)

extensions-builtin/prompt-bracket-checker/javascript/prompt-bracket-checker.js

@@ -27,14 +27,14 @@ function checkBrackets(textArea, counterElt) {
 
 function setupBracketChecking(id_prompt, id_counter) {
     var textarea = gradioApp().querySelector("#" + id_prompt + " > label > textarea");
-  var counter = gradioApp().getElementById(id_counter)
+    var counter = gradioApp().getElementById(id_counter);
 
     if (textarea && counter) {
         textarea.addEventListener("input", () => checkBrackets(textarea, counter));
     }
 }
 
-onUiLoaded(function () {
+onUiLoaded(function() {
     setupBracketChecking('txt2img_prompt', 'txt2img_token_counter');
     setupBracketChecking('txt2img_neg_prompt', 'txt2img_negative_token_counter');
     setupBracketChecking('img2img_prompt', 'img2img_token_counter');

javascript/aspectRatioOverlay.js

 
 let currentWidth = null;
 let currentHeight = null;
-let arFrameTimeout = setTimeout(function(){},0);
+let arFrameTimeout = setTimeout(function() {}, 0);
 
-function dimensionChange(e, is_width, is_height){
+function dimensionChange(e, is_width, is_height) {
 
-	if(is_width){
-		currentWidth = e.target.value*1.0
+    if (is_width) {
+        currentWidth = e.target.value * 1.0;
     }
-	if(is_height){
-		currentHeight = 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){
+    if (!inImg2img) {
         return;
     }
 
     var targetElement = null;
 
-    var tabIndex = get_tab_index('mode_img2img')
-	if(tabIndex == 0){ // img2img
+    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
+    } else if (tabIndex == 1) { //Sketch
         targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img');
-	} else if(tabIndex == 2){ // Inpaint
+    } else if (tabIndex == 2) { // Inpaint
         targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');
-	} else if(tabIndex == 3){ // Inpaint sketch
+    } else if (tabIndex == 3) { // Inpaint sketch
         targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');
     }
 
 
-	if(targetElement){
+    if (targetElement) {
 
         var arPreviewRect = gradioApp().querySelector('#imageARPreview');
-		if(!arPreviewRect){
-		    arPreviewRect = document.createElement('div')
+        if (!arPreviewRect) {
+            arPreviewRect = document.createElement('div');
             arPreviewRect.id = "imageARPreview";
-		    gradioApp().appendChild(arPreviewRect)
+            gradioApp().appendChild(arPreviewRect);
         }
 
 
 
         var viewportOffset = targetElement.getBoundingClientRect();
 
-		var viewportscale = Math.min(  targetElement.clientWidth/targetElement.naturalWidth, targetElement.clientHeight/targetElement.naturalHeight )
+        var viewportscale = Math.min(targetElement.clientWidth / targetElement.naturalWidth, targetElement.clientHeight / targetElement.naturalHeight);
 
-		var scaledx = targetElement.naturalWidth*viewportscale
-		var scaledy = targetElement.naturalHeight*viewportscale
+        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 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 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
+        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';
+        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(){
+        arFrameTimeout = setTimeout(function() {
             arPreviewRect.style.display = 'none';
-	    },2000);
+        }, 2000);
 
         arPreviewRect.style.display = 'block';
 
@@ -81,31 +81,33 @@ function dimensionChange(e, is_width, is_height){
 }
 
 
-onUiUpdate(function(){
+onUiUpdate(function() {
     var arPreviewRect = gradioApp().querySelector('#imageARPreview');
-	if(arPreviewRect){
+    if (arPreviewRect) {
         arPreviewRect.style.display = 'none';
     }
     var tabImg2img = gradioApp().querySelector("#tab_img2img");
     if (tabImg2img) {
         var inImg2img = tabImg2img.style.display == "block";
-        if(inImg2img){
+        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')
+            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_width) {
+                    currentWidth = e.value * 1.0;
                 }
-                if(is_height){
-                    currentHeight = e.value*1.0
+                if (is_height) {
+                    currentHeight = e.value * 1.0;
                 }
-            })
+            });
         }
     }
 });

javascript/contextMenus.js

 
-contextMenuInit = function(){
-  let eventListenerApplied=false;
+contextMenuInit = function() {
+    let eventListenerApplied = false;
     let menuSpecs = new Map();
 
-  const uid = function(){
+    const uid = function() {
         return Date.now().toString(36) + Math.random().toString(36).substring(2);
-  }
+    };
 
-  function showContextMenu(event,element,menuEntries){
+    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 oldMenu = gradioApp().querySelector('#context-menu');
+        if (oldMenu) {
+            oldMenu.remove();
         }
 
-    let baseStyle = window.getComputedStyle(uiCurrentTab)
+        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 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')
+        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']
+        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)
+        gradioApp().appendChild(contextMenu);
 
         let menuWidth = contextMenu.offsetWidth + 4;
         let menuHeight = contextMenu.offsetHeight + 4;
@@ -50,117 +50,123 @@ contextMenuInit = function(){
         let windowWidth = window.innerWidth;
         let windowHeight = window.innerHeight;
 
-    if ( (windowWidth - posx) < menuWidth ) {
+        if ((windowWidth - posx) < menuWidth) {
             contextMenu.style.left = windowWidth - menuWidth + "px";
         }
 
-    if ( (windowHeight - posy) < menuHeight ) {
+        if ((windowHeight - posy) < menuHeight) {
             contextMenu.style.top = windowHeight - menuHeight + "px";
         }
 
     }
 
-  function appendContextMenuOption(targetElementSelector,entryName,entryFunction){
+    function appendContextMenuOption(targetElementSelector, entryName, entryFunction) {
 
-    var currentItems = menuSpecs.get(targetElementSelector)
+        var currentItems = menuSpecs.get(targetElementSelector);
 
-    if(!currentItems){
-      currentItems = []
-      menuSpecs.set(targetElementSelector,currentItems);
+        if (!currentItems) {
+            currentItems = [];
+            menuSpecs.set(targetElementSelector, currentItems);
         }
-    let newItem = {'id':targetElementSelector+'_'+uid(),
-                   'name':entryName,
-                   'func':entryFunction,
-                   'isNew':true}
+        let newItem = {
+            id: targetElementSelector + '_' + uid(),
+            name: entryName,
+            func: entryFunction,
+            isNew: true
+        };
 
-    currentItems.push(newItem)
-    return newItem['id']
+        currentItems.push(newItem);
+        return newItem['id'];
     }
 
-  function removeContextMenuOption(uid){
+    function removeContextMenuOption(uid) {
         menuSpecs.forEach(function(v) {
-      let index = -1
-      v.forEach(function(e,ei){if(e['id']==uid){index=ei}})
-      if(index>=0){
+            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){
+    function addContextMenuEventListener() {
+        if (eventListenerApplied) {
             return;
         }
         gradioApp().addEventListener("click", function(e) {
-      if(! e.isTrusted){
-        return
+            if (!e.isTrusted) {
+                return;
             }
 
-      let oldMenu = gradioApp().querySelector('#context-menu')
-      if(oldMenu){
-        oldMenu.remove()
+            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()
+            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()
+            menuSpecs.forEach(function(v, k) {
+                if (e.composedPath()[0].matches(k)) {
+                    showContextMenu(e, e.composedPath()[0], v);
+                    e.preventDefault();
                 }
-      })
             });
-    eventListenerApplied=true
+        });
+        eventListenerApplied = true;
 
     }
 
-  return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener]
-}
+    return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener];
+};
 
 initResponse = contextMenuInit();
 appendContextMenuOption     = initResponse[0];
 removeContextMenuOption     = initResponse[1];
 addContextMenuEventListener = initResponse[2];
 
-(function(){
+(function() {
     //Start example Context Menu Items
-  let generateOnRepeat = function(genbuttonid,interruptbuttonid){
+    let generateOnRepeat = function(genbuttonid, interruptbuttonid) {
         let genbutton = gradioApp().querySelector(genbuttonid);
         let interruptbutton = gradioApp().querySelector(interruptbuttonid);
-    if(!interruptbutton.offsetParent){
+        if (!interruptbutton.offsetParent) {
             genbutton.click();
         }
-    clearInterval(window.generateOnRepeatInterval)
-    window.generateOnRepeatInterval = setInterval(function(){
-      if(!interruptbutton.offsetParent){
+        clearInterval(window.generateOnRepeatInterval);
+        window.generateOnRepeatInterval = setInterval(function() {
+            if (!interruptbutton.offsetParent) {
                 genbutton.click();
             }
         },
-    500)
-  }
+        500);
+    };
 
-  appendContextMenuOption('#txt2img_generate','Generate forever',function(){
-    generateOnRepeat('#txt2img_generate','#txt2img_interrupt');
-  })
-  appendContextMenuOption('#img2img_generate','Generate forever',function(){
-    generateOnRepeat('#img2img_generate','#img2img_interrupt');
-  })
+    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)
-  }
+    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)
+    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()
+onUiUpdate(function() {
+    addContextMenuEventListener();
 });

javascript/dragdrop.js

 // 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,8 +14,8 @@ 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;
@@ -26,32 +26,32 @@ function dropReplaceImage( imgWrap, files ) {
         }
     };
 
-    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,24 +65,24 @@ 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;
     }
 
@@ -93,5 +93,6 @@ window.addEventListener('paste', e => {
         firstFreeImageField ?
             firstFreeImageField :
             visibleImageFields[visibleImageFields.length - 1]
-    , files );
+        , files
+    );
 });

javascript/edit-attention.js

-function 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;
+    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"
+    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){
+    function selectCurrentParenthesisBlock(OPEN, CLOSE) {
         if (selectionStart !== selectionEnd) return false;
 
         // Find opening parenthesis around current cursor
@@ -44,7 +44,7 @@ function keyupEditAttention(event){
         return true;
     }
 
-    function selectCurrentWord(){
+    function selectCurrentWord() {
         if (selectionStart !== selectionEnd) return false;
         const delimiters = opts.keyedit_delimiters + " \r\n\t";
 
@@ -69,20 +69,20 @@ function keyupEditAttention(event){
 
     event.preventDefault();
 
-    var closeCharacter = ')'
-    var delta = opts.keyedit_precision_attention
+    var closeCharacter = ')';
+    var delta = opts.keyedit_precision_attention;
 
-    if (selectionStart > 0 && text[selectionStart - 1] == '<'){
-        closeCharacter = '>'
-        delta = opts.keyedit_precision_extra
+    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] == ' '){
+        while (selectionEnd > selectionStart && text[selectionEnd - 1] == ' ') {
             selectionEnd -= 1;
         }
-        if(selectionStart == selectionEnd){
-            return
+        if (selectionStart == selectionEnd) {
+            return;
         }
 
         text = text.slice(0, selectionStart) + "(" + text.slice(selectionStart, selectionEnd) + ":1.0)" + text.slice(selectionEnd);
@@ -97,7 +97,7 @@ function keyupEditAttention(event){
 
     weight += isPlus ? delta : -delta;
     weight = parseFloat(weight.toPrecision(12));
-	if(String(weight).length == 1) weight += ".0"
+    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);
@@ -112,7 +112,7 @@ function keyupEditAttention(event){
     target.selectionStart = selectionStart;
     target.selectionEnd = selectionEnd;
 
-	updateInput(target)
+    updateInput(target);
 }
 
 addEventListener('keydown', (event) => {

javascript/extensions.js

 
-function extensions_apply(_disabled_list, _update_list, disable_all){
-    var disable = []
-    var update = []
+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))
+    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))
-    })
+        if (x.name.startsWith("update_") && x.checked) {
+            update.push(x.name.substring(7));
+        }
+    });
 
-    restart_reload()
+    restart_reload();
 
-    return [JSON.stringify(disable), JSON.stringify(update), disable_all]
+    return [JSON.stringify(disable), JSON.stringify(update), disable_all];
 }
 
-function extensions_check(){
-    var disable = []
+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 input[type="checkbox"]').forEach(function(x) {
+        if (x.name.startsWith("enable_") && !x.checked) {
+            disable.push(x.name.substring(7));
+        }
+    });
 
-    gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){
-        x.innerHTML = "Loading..."
-    })
+    gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x) {
+        x.innerHTML = "Loading...";
+    });
 
 
-    var id = randomId()
-    requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function(){
+    var id = randomId();
+    requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function() {
 
-    })
+    });
 
-    return [id, JSON.stringify(disable)]
+    return [id, JSON.stringify(disable)];
 }
 
-function install_extension_from_index(button, url){
-    button.disabled = "disabled"
-    button.value = "Installing..."
+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)
+    var textarea = gradioApp().querySelector('#extension_to_install textarea');
+    textarea.value = url;
+    updateInput(textarea);
 
-    gradioApp().querySelector('#install_extension_button').click()
+    gradioApp().querySelector('#install_extension_button').click();
 }
 
 function config_state_confirm_restore(_, config_state_name, config_restore_type) {
@@ -63,9 +66,9 @@ function config_state_confirm_restore(_, config_state_name, config_restore_type)
     let confirmed = confirm("Are you sure you want to restore from this state?\nThis will reset " + restored + ".");
     if (confirmed) {
         restart_reload();
-        gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){
-            x.innerHTML = "Loading..."
-        })
+        gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x) {
+            x.innerHTML = "Loading...";
+        });
     }
     return [confirmed, config_state_name, config_restore_type];
 }

javascript/generationParams.js

 // 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(){
+onUiUpdate(function() {
     if (!txt2img_gallery) {
-		txt2img_gallery = attachGalleryListeners("txt2img")
+        txt2img_gallery = attachGalleryListeners("txt2img");
     }
     if (!img2img_gallery) {
-		img2img_gallery = attachGalleryListeners("img2img")
+        img2img_gallery = attachGalleryListeners("img2img");
     }
     if (!modal) {
-		modal = gradioApp().getElementById('lightboxModal')
-		modalObserver.observe(modal,  { attributes : true, attributeFilter : ['style'] });
+        modal = gradioApp().getElementById('lightboxModal');
+        modalObserver.observe(modal,  { attributes: true, attributeFilter: ['style'] });
     }
 });
 
 let modalObserver = new MutationObserver(function(mutations) {
     mutations.forEach(function(mutationRecord) {
-		let selectedTab = gradioApp().querySelector('#tabs div button.selected')?.innerText
-		if (mutationRecord.target.style.display === 'none' && (selectedTab === 'txt2img' || selectedTab === 'img2img'))
-			gradioApp().getElementById(selectedTab+"_generation_info_button")?.click()
+        let 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());
+    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()
+        if (e.keyCode == 37 || e.keyCode == 39) { // left or right arrow
+            gradioApp().getElementById(tab_name + "_generation_info_button").click();
+        }
     });
     return gallery;
 }

javascript/hints.js

@@ -113,20 +113,20 @@ 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."
-}
+};
 
 
-onUiUpdate(function(){
-	gradioApp().querySelectorAll('span, button, select, p').forEach(function(span){
+onUiUpdate(function() {
+    gradioApp().querySelectorAll('span, button, select, p').forEach(function(span) {
         if (span.title) return;  // already has a title
 
         let tooltip = localization[titles[span.textContent]] || titles[span.textContent];
 
-    if(!tooltip){
+        if (!tooltip) {
             tooltip = localization[titles[span.value]] || titles[span.value];
         }
 
-		if(!tooltip){
+        if (!tooltip) {
             for (const c of span.classList) {
                 if (c in titles) {
                     tooltip = localization[titles[c]] || titles[c];
@@ -135,16 +135,16 @@ onUiUpdate(function(){
             }
         }
 
-		if(tooltip){
+        if (tooltip) {
             span.title = tooltip;
         }
-	})
+    });
 
-	gradioApp().querySelectorAll('select').forEach(function(select){
+    gradioApp().querySelectorAll('select').forEach(function(select) {
         if (select.onchange != null) return;
 
-	    select.onchange = function(){
+        select.onchange = function() {
             select.title = localization[titles[select.value]] || titles[select.value] || "";
-	    }
-	})
-})
+        };
+    });
+});

javascript/hires_fix.js

 
-function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y){
-    function setInactive(elem, inactive){
-        elem.classList.toggle('inactive', !!inactive)
+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')
+    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" : ""
+    gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : "";
 
-    setInactive(hrUpscaleBy, opts.use_old_hires_fix_width_height || hr_resize_x > 0 || hr_resize_y > 0)
-    setInactive(hrResizeX, opts.use_old_hires_fix_width_height || hr_resize_x == 0)
-    setInactive(hrResizeY, opts.use_old_hires_fix_width_height || hr_resize_y == 0)
+    setInactive(hrUpscaleBy, opts.use_old_hires_fix_width_height || hr_resize_x > 0 || hr_resize_y > 0);
+    setInactive(hrResizeX, opts.use_old_hires_fix_width_height || hr_resize_x == 0);
+    setInactive(hrResizeY, opts.use_old_hires_fix_width_height || hr_resize_y == 0);
 
-    return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y]
+    return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y];
 }

javascript/imageMaskFix.js

@@ -4,17 +4,17 @@
  */
 function imageMaskResize() {
     const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas');
-    if ( ! canvases.length ) {
+    if (!canvases.length) {
         canvases_fixed = false; // TODO: this is unused..?
-    window.removeEventListener( 'resize', imageMaskResize );
+        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 +24,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 +41,4 @@ function imageMaskResize() {
 }
 
 onUiUpdate(imageMaskResize);
-window.addEventListener( 'resize', imageMaskResize);
+window.addEventListener('resize', imageMaskResize);

javascript/imageParams.js

-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'));
         }

javascript/imageviewerGamepad.js

 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;
                 }

javascript/localization.js

 
 // localization = {} -- the dict with translations is created by the backend
 
-ignore_ids_for_localization={
+ignore_ids_for_localization = {
     setting_sd_hypernetwork: 'OPTION',
     setting_sd_model_checkpoint: 'OPTION',
     setting_realesrgan_enabled_models: 'OPTION',
@@ -17,111 +17,111 @@ ignore_ids_for_localization={
     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
+re_num = /^[\.\d]+$/;
+re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u;
 
-original_lines = {}
-translated_lines = {}
+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);
+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;
+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;
+    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 (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 (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
+    if (re_num.test(text)) return false;
+    if (re_emoji.test(text)) return false;
+    return true;
 }
 
-function getTranslation(text){
-    if(! text) return undefined
+function getTranslation(text) {
+    if (!text) return undefined;
 
-    if(translated_lines[text] === undefined){
-        original_lines[text] = 1
+    if (translated_lines[text] === undefined) {
+        original_lines[text] = 1;
     }
 
-    tl = localization[text]
-    if(tl !== undefined){
-        translated_lines[tl] = 1
+    tl = localization[text];
+    if (tl !== undefined) {
+        translated_lines[tl] = 1;
     }
 
-    return tl
+    return tl;
 }
 
-function processTextNode(node){
-    var text = node.textContent.trim()
+function processTextNode(node) {
+    var text = node.textContent.trim();
 
-    if(! canBeTranslated(node, text)) return
+    if (!canBeTranslated(node, text)) return;
 
-    tl = getTranslation(text)
-    if(tl !== undefined){
-        node.textContent = tl
+    tl = getTranslation(text);
+    if (tl !== undefined) {
+        node.textContent = tl;
     }
 }
 
-function processNode(node){
-    if(node.nodeType == 3){
-        processTextNode(node)
-        return
+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.title) {
+        tl = getTranslation(node.title);
+        if (tl !== undefined) {
+            node.title = tl;
         }
     }
 
-    if(node.placeholder){
-        tl = getTranslation(node.placeholder)
-        if(tl !== undefined){
-            node.placeholder = tl
+    if (node.placeholder) {
+        tl = getTranslation(node.placeholder);
+        if (tl !== undefined) {
+            node.placeholder = tl;
         }
     }
 
-    textNodesUnder(node).forEach(function(node){
-        processTextNode(node)
-    })
+    textNodesUnder(node).forEach(function(node) {
+        processTextNode(node);
+    });
 }
 
-function dumpTranslations(){
-    if(!hasLocalization()) {
+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 = {}
+    var dumped = {};
     if (localization.rtl) {
         dumped.rtl = true;
     }
 
     for (const text in original_lines) {
-        if(dumped[text] !== undefined) continue;
+        if (dumped[text] !== undefined) continue;
         dumped[text] = localization[text] || text;
     }
 
@@ -129,7 +129,7 @@ function dumpTranslations(){
 }
 
 function download_localization() {
-    var text = JSON.stringify(dumpTranslations(), null, 4)
+    var text = JSON.stringify(dumpTranslations(), null, 4);
 
     var element = document.createElement('a');
     element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
@@ -142,20 +142,20 @@ function download_localization() {
     document.body.removeChild(element);
 }
 
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener("DOMContentLoaded", function() {
     if (!hasLocalization()) {
         return;
     }
 
-    onUiUpdate(function (m) {
-        m.forEach(function (mutation) {
-            mutation.addedNodes.forEach(function (node) {
-                processNode(node)
-            })
+    onUiUpdate(function(m) {
+        m.forEach(function(mutation) {
+            mutation.addedNodes.forEach(function(node) {
+                processNode(node);
+            });
+        });
     });
-    })
 
-    processNode(gradioApp())
+    processNode(gradioApp());
 
     if (localization.rtl) {  // if the language is from right to left,
         (new MutationObserver((mutations, observer) => { // wait for the style to load
@@ -170,8 +170,8 @@ document.addEventListener("DOMContentLoaded", function () {
                             }
                         }
                     }
-                })
+                });
             });
         })).observe(gradioApp(), { childList: true });
     }
-})
+});

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();
     };

javascript/progressbar.js

 // 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){
+    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)
-    }
-
-    var removeProgressBar = function(){
-        setTitle("")
-        parentProgressbar.removeChild(divProgress)
-        if(parentGallery) parentGallery.removeChild(livePreview)
-        atEnd()
-    }
+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 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) {
+                var 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);
 }

javascript/textualInversion.js

 
 
 
-function start_training_textual_inversion(){
-    gradioApp().querySelector('#ti_error').innerHTML=''
+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 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)
+    var res = args_to_array(arguments);
 
-    res[0] = id
+    res[0] = id;
 
-    return res
+    return res;
 }

javascript/ui_settings_hints.js

 // 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)
+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)
+        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'
+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)
+        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)
+            var td = document.createElement('td');
+            td.textContent = obj.label;
+            tr.appendChild(td);
 
-			table.appendChild(tr)
-		})
+            table.appendChild(tr);
+        });
 
         popup(table);
-	})
+    });
 }

script.js

 function gradioApp() {
-    const elems = document.getElementsByTagName('gradio-app')
-    const elem = elems.length == 0 ? document : elems[0]
+    const elems = document.getElementsByTagName('gradio-app');
+    const elem = elems.length == 0 ? document : elems[0];
 
-    if (elem !== document) elem.getElementById = function(id){ return document.getElementById(id) }
-    return elem.shadowRoot ? elem.shadowRoot : elem
+    if (elem !== document) {
+        elem.getElementById = function(id) {
+            return document.getElementById(id);
+        };
+    }
+    return elem.shadowRoot ? elem.shadowRoot : elem;
 }
 
 function get_uiCurrentTab() {
-    return gradioApp().querySelector('#tabs button.selected')
+    return gradioApp().querySelector('#tabs button.selected');
 }
 
 function get_uiCurrentTabContent() {
-    return gradioApp().querySelector('.tabitem[id^=tab_]:not([style*="display: none"])')
+    return gradioApp().querySelector('.tabitem[id^=tab_]:not([style*="display: none"])');
 }
 
-uiUpdateCallbacks = []
-uiLoadedCallbacks = []
-uiTabChangeCallbacks = []
-optionsChangedCallbacks = []
-let uiCurrentTab = null
+uiUpdateCallbacks = [];
+uiLoadedCallbacks = [];
+uiTabChangeCallbacks = [];
+optionsChangedCallbacks = [];
+let uiCurrentTab = null;
 
-function onUiUpdate(callback){
-    uiUpdateCallbacks.push(callback)
+function onUiUpdate(callback) {
+    uiUpdateCallbacks.push(callback);
 }
-function onUiLoaded(callback){
-    uiLoadedCallbacks.push(callback)
+function onUiLoaded(callback) {
+    uiLoadedCallbacks.push(callback);
 }
-function onUiTabChange(callback){
-    uiTabChangeCallbacks.push(callback)
+function onUiTabChange(callback) {
+    uiTabChangeCallbacks.push(callback);
 }
-function onOptionsChanged(callback){
-    optionsChangedCallbacks.push(callback)
+function onOptionsChanged(callback) {
+    optionsChangedCallbacks.push(callback);
 }
 
-function runCallback(x, m){
+function runCallback(x, m) {
     try {
-        x(m)
+        x(m);
     } catch (e) {
         (console.error || console.log).call(console, e.message, e);
     }
 }
 function executeCallbacks(queue, m) {
-    queue.forEach(function(x){runCallback(x, m)})
+    queue.forEach(function(x) {
+        runCallback(x, m);
+    });
 }
 
 var executedOnLoaded = false;
 
 document.addEventListener("DOMContentLoaded", function() {
-    var mutationObserver = new MutationObserver(function(m){
-        if(!executedOnLoaded && gradioApp().querySelector('#txt2img_prompt')){
+    var mutationObserver = new MutationObserver(function(m) {
+        if (!executedOnLoaded && gradioApp().querySelector('#txt2img_prompt')) {
             executedOnLoaded = true;
             executeCallbacks(uiLoadedCallbacks);
         }
 
         executeCallbacks(uiUpdateCallbacks, m);
         const newTab = get_uiCurrentTab();
-        if ( newTab && ( newTab !== uiCurrentTab ) ) {
+        if (newTab && (newTab !== uiCurrentTab)) {
             uiCurrentTab = newTab;
             executeCallbacks(uiTabChangeCallbacks);
         }
     });
-    mutationObserver.observe( gradioApp(), { childList:true, subtree:true })
+    mutationObserver.observe(gradioApp(), { childList: true, subtree: true });
 });
 
 /**
@@ -69,9 +75,9 @@ document.addEventListener("DOMContentLoaded", function() {
 document.addEventListener('keydown', function(e) {
     var handled = false;
     if (e.key !== undefined) {
-        if((e.key == "Enter" && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
+        if ((e.key == "Enter" && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
     } else if (e.keyCode !== undefined) {
-        if((e.keyCode == 13 && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
+        if ((e.keyCode == 13 && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
     }
     if (handled) {
         button = get_uiCurrentTabContent().querySelector('button[id$=_generate]');
@@ -80,22 +86,22 @@ document.addEventListener('keydown', function(e) {
         }
         e.preventDefault();
     }
-})
+});
 
 /**
  * checks that a UI element is not in another hidden element or tab content
  */
 function uiElementIsVisible(el) {
     let isVisible = !el.closest('.\\!hidden');
-    if ( ! isVisible ) {
+    if (!isVisible) {
         return false;
     }
 
-    while( isVisible = el.closest('.tabitem')?.style.display !== 'none' ) {
-        if ( ! isVisible ) {
+    while (isVisible = el.closest('.tabitem')?.style.display !== 'none') {
+        if (!isVisible) {
             return false;
-        } else if ( el.parentElement ) {
-            el = el.parentElement
+        } else if (el.parentElement) {
+            el = el.parentElement;
         } else {
             break;
         }