diff options
Diffstat (limited to 'javascript/ui.js')
| -rw-r--r-- | javascript/ui.js | 421 |
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 [] |