Merge branch 'eslint' into dev

1 files changed, 213 insertions, 208 deletions

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