-
If you like this project and you want to support it consider a small donation. Enjoy!
+
Your donation can help fund the continued development of Stable Diffusion web UI/UX project. Enjoy!
diff --git a/javascript/ui.js b/javascript/ui.js
index 7acf1a88..04ed1c4a 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -1,35 +1,30 @@
-// various functions for interaction with ui.py not large enough to warrant putting them in separate files
function set_theme(theme) {
- /*
- gradioURL = window.location.href
- if (!gradioURL.includes('?__theme=')) {
+ /*
+ var gradioURL = window.location.href;
+ if (!gradioURL.includes('?__theme=')) {
window.location.replace(gradioURL + '?__theme=' + theme);
- }
- */
+ }
+ */
}
function all_gallery_buttons() {
- var allGalleryButtons = gradioApp().querySelectorAll(
- '[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small'
- );
+ var allGalleryButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small');
var visibleGalleryButtons = [];
- allGalleryButtons.forEach(function (elem) {
- if (elem.parentElement.offsetParent) {
- visibleGalleryButtons.push(elem);
- }
+ allGalleryButtons.forEach(function(elem) {
+ if (elem.parentElement.offsetParent) {
+ visibleGalleryButtons.push(elem);
+ }
});
return visibleGalleryButtons;
}
function selected_gallery_button() {
- var allCurrentButtons = gradioApp().querySelectorAll(
- '[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnail-item.thumbnail-small.selected'
- );
+ var allCurrentButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnail-item.thumbnail-small.selected');
var visibleCurrentButton = null;
- allCurrentButtons.forEach(function (elem) {
- if (elem.parentElement.offsetParent) {
- visibleCurrentButton = elem;
- }
+ allCurrentButtons.forEach(function(elem) {
+ if (elem.parentElement.offsetParent) {
+ visibleCurrentButton = elem;
+ }
});
return visibleCurrentButton;
}
@@ -39,10 +34,10 @@ function selected_gallery_index() {
var button = selected_gallery_button();
var result = -1;
- buttons.forEach(function (v, i) {
- if (v == button) {
- result = i;
- }
+ buttons.forEach(function(v, i) {
+ if (v == button) {
+ result = i;
+ }
});
return result;
@@ -50,137 +45,101 @@ function selected_gallery_index() {
function extract_image_from_gallery(gallery) {
if (gallery.length == 0) {
- return [null];
+ return [null];
}
if (gallery.length == 1) {
- return [gallery[0]];
+ return [gallery[0]];
}
var index = selected_gallery_index();
if (index < 0 || index >= gallery.length) {
- // Use the first image in the gallery as the default
- index = 0;
+ // Use the first image in the gallery as the default
+ index = 0;
}
return [gallery[index]];
}
-function args_to_array(args) {
- var res = [];
- for (var i = 0; i < args.length; i++) {
- res.push(args[i]);
- }
- return res;
-}
+window.args_to_array = Array.from; // Compatibility with e.g. extensions that may expect this to be around
function switch_to_txt2img() {
- gradioApp().querySelector("#tabs").querySelectorAll("button")[0].click();
+ gradioApp().querySelector('#tabs').querySelectorAll('button')[0].click();
- return args_to_array(arguments);
+ return Array.from(arguments);
}
function switch_to_img2img_tab(no) {
- gradioApp().querySelector("#tabs").querySelectorAll("button")[1].click();
- gradioApp()
- .getElementById("mode_img2img")
- .querySelectorAll("button")
- [no].click();
+ gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
+ gradioApp().getElementById('mode_img2img').querySelectorAll('button')[no].click();
}
function switch_to_img2img() {
switch_to_img2img_tab(0);
- return args_to_array(arguments);
+ return Array.from(arguments);
}
function switch_to_sketch() {
switch_to_img2img_tab(1);
- return args_to_array(arguments);
+ return Array.from(arguments);
}
function switch_to_inpaint() {
switch_to_img2img_tab(2);
- return args_to_array(arguments);
+ return Array.from(arguments);
}
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);
+ return Array.from(arguments);
}
function switch_to_extras() {
- gradioApp().querySelector("#tabs").querySelectorAll("button")[2].click();
+ gradioApp().querySelector('#tabs').querySelectorAll('button')[2].click();
- return args_to_array(arguments);
+ return Array.from(arguments);
}
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;
- });
-
- return res;
+ let buttons = gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button');
+ for (let i = 0; i < buttons.length; i++) {
+ if (buttons[i].classList.contains('selected')) {
+ return i;
+ }
+ }
+ return 0;
}
function create_tab_index_args(tabId, args) {
- var res = [];
- for (var i = 0; i < args.length; i++) {
- res.push(args[i]);
- }
-
+ var res = Array.from(args);
res[0] = get_tab_index(tabId);
-
return res;
}
function get_img2img_tab_index() {
- let res = args_to_array(arguments);
+ let res = Array.from(arguments);
res.splice(-2);
- res[0] = get_tab_index("mode_img2img");
+ res[0] = get_tab_index('mode_img2img');
return res;
}
function create_submit_args(args) {
- var res = [];
- for (var i = 0; i < args.length; i++) {
- res.push(args[i]);
- }
+ var res = Array.from(args);
// As it is currently, txt2img and img2img send back the previous output args (txt2img_gallery, generation_info, html_info) whenever you generate a new image.
// This can lead to uploading a huge gallery of previously generated images, which leads to an unnecessary delay between submitting and beginning to generate.
// 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;
+ res[res.length - 3] = null;
}
return res;
}
function showSubmitButtons(tabname, show) {
- gradioApp().getElementById(tabname + "_interrupt").style.display = show
- ? "none"
- : "flex";
- gradioApp().getElementById(tabname + "_skip").style.display = show
- ? "none"
- : "flex";
- gradioApp().getElementById(tabname + "_generate").style.display = !show
- ? "none"
- : "flex";
+ gradioApp().getElementById(tabname + "_interrupt").style.display = show ? "none" : "flex";
+ gradioApp().getElementById(tabname + "_skip").style.display = show ? "none" : "flex";
+ gradioApp().getElementById(tabname + "_generate").style.display = !show ? "none" : "flex";
}
function showRestoreProgressButton(tabname, show) {
@@ -191,22 +150,16 @@ function showRestoreProgressButton(tabname, show) {
}
function submit() {
- rememberGallerySelection("txt2img_gallery");
- showSubmitButtons("txt2img", false);
+ showSubmitButtons('txt2img', false);
var id = randomId();
localStorage.setItem("txt2img_task_id", id);
- requestProgress(
- id,
- gradioApp().getElementById("txt2img_gallery_container"),
- gradioApp().getElementById("txt2img_gallery"),
- function () {
- showSubmitButtons("txt2img", true);
+ requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
+ showSubmitButtons('txt2img', true);
localStorage.removeItem("txt2img_task_id");
- showRestoreProgressButton("txt2img", false);
- }
- );
+ showRestoreProgressButton('txt2img', false);
+ });
var res = create_submit_args(arguments);
@@ -216,27 +169,21 @@ function submit() {
}
function submit_img2img() {
- rememberGallerySelection("img2img_gallery");
- showSubmitButtons("img2img", false);
+ showSubmitButtons('img2img', false);
var id = randomId();
localStorage.setItem("img2img_task_id", id);
- requestProgress(
- id,
- gradioApp().getElementById("img2img_gallery_container"),
- gradioApp().getElementById("img2img_gallery"),
- function () {
- showSubmitButtons("img2img", true);
+ requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
+ showSubmitButtons('img2img', true);
localStorage.removeItem("img2img_task_id");
- showRestoreProgressButton("img2img", false);
- }
- );
+ showRestoreProgressButton('img2img', false);
+ });
var res = create_submit_args(arguments);
res[0] = id;
- res[1] = get_tab_index("mode_img2img");
+ res[1] = get_tab_index('mode_img2img');
return res;
}
@@ -248,16 +195,9 @@ function restoreProgressTxt2img() {
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
- );
+ requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
+ showSubmitButtons('txt2img', true);
+ }, null, 0);
}
return id;
@@ -269,69 +209,169 @@ function restoreProgressImg2img() {
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
- );
+ requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
+ showSubmitButtons('img2img', true);
+ }, null, 0);
}
return 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 () {}
- );
+ requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null, function() {});
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:");
+ 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 = "";
+ prompt = "";
+ negative_prompt = "";
}
return [prompt, negative_prompt];
}
-promptTokecountUpdateFuncs = {};
+
+var promptTokecountUpdateFuncs = {};
function recalculatePromptTokens(name) {
if (promptTokecountUpdateFuncs[name]) {
- promptTokecountUpdateFuncs[name]();
+ promptTokecountUpdateFuncs[name]();
}
}
function recalculate_prompts_txt2img() {
- recalculatePromptTokens("txt2img_prompt");
- recalculatePromptTokens("txt2img_neg_prompt");
- return args_to_array(arguments);
+ recalculatePromptTokens('txt2img_prompt');
+ recalculatePromptTokens('txt2img_neg_prompt');
+ return Array.from(arguments);
}
function recalculate_prompts_img2img() {
- recalculatePromptTokens("img2img_prompt");
- recalculatePromptTokens("img2img_neg_prompt");
- return args_to_array(arguments);
+ recalculatePromptTokens('img2img_prompt');
+ recalculatePromptTokens('img2img_neg_prompt');
+ return Array.from(arguments);
}
+
+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;
+ }
+});
+
+let txt2img_textarea, img2img_textarea = undefined;
+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;
+}
+
+function update_img2img_tokens(...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);
+}
+
+var desiredCheckpointName = null;
+function selectCheckpoint(name) {
+ desiredCheckpointName = name;
+ gradioApp().getElementById('change_checkpoint').click();
+}
+
+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() {
+ // 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();
+ }, 500);
+
+ return [];
+
+}
+
+function setRandomSeed(elem_id) {
+ var input = gradioApp().querySelector("#" + elem_id + " input");
+ if (!input) return [];
+
+ input.value = "-1";
+ updateInput(input);
+ return [];
+}
+
+function switchWidthHeight(tabname) {
+ var width = gradioApp().querySelector("#" + tabname + "_width input[type=number]");
+ var height = gradioApp().querySelector("#" + tabname + "_height input[type=number]");
+ if (!width || !height) return [];
+
+ var tmp = width.value;
+ width.value = height.value;
+ height.value = tmp;
+
+ updateInput(width);
+ updateInput(height);
+ return [];
+}
+
+onUiUpdate(function() {
+ const theme_menu = gradioApp().querySelector("#theme_menu");
+ function disabled_extensions(value) {
+ if (value) {
+ theme_menu.classList.remove("hidden");
+ } else {
+ theme_menu.classList.add("hidden");
+ }
+ }
+ const theme_ext = gradioApp().querySelector('#extensions input[name="enable_sd_theme_editor"]');
+ if(theme_ext){
+ disabled_extensions(theme_ext.checked);
+ }
+})
+
let selectedTabItemId = "tab_txt2img";
let opts = {};
@@ -792,19 +832,6 @@ onUiLoaded(function () {
}
if (theme_tab) theme_aside(true);
- function disabled_extensions(value) {
- //console.log(value);
- if (value) {
- theme_menu.classList.remove("hidden");
- } else {
- theme_menu.classList.add("hidden");
- }
- }
- const theme_ext = gradioApp().querySelector(
- '#extensions input[name="enable_sd_theme_editor"]'
- );
- disabled_extensions(theme_ext.checked);
-
function generateOnRepeat(elem, isforever) {
if (elem.generateOnRepeatInterval != null)
clearInterval(elem.generateOnRepeatInterval);
@@ -1948,30 +1975,7 @@ onOptionsChanged(function () {
}
});
-let txt2img_textarea,
- img2img_textarea = undefined;
-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;
-}
-
-function update_img2img_tokens(...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
- );
-}
function restart_reload() {
let bg_color = window
@@ -2040,29 +2044,6 @@ function updateInput(target) {
target.dispatchEvent(eb);
}
-var desiredCheckpointName = null;
-function selectCheckpoint(name) {
- desiredCheckpointName = name;
- 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 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();
- }, 500);
-
- return [];
-}
-
document.addEventListener("readystatechange", function (e) {
document.body.style.display = "none";
if (localStorage.hasOwnProperty("bg_color")) {
diff --git a/modules/shared.py b/modules/shared.py
index c1cd53df..6d4245c0 100644
--- a/modules/shared.py
+++ b/modules/shared.py
@@ -497,9 +497,6 @@ options_templates.update(options_section(('ui', "User interface"), {
"hires_fix_show_sampler": OptionInfo(False, "Hires fix: show hires sampler selection").needs_restart(),
"hires_fix_show_prompts": OptionInfo(False, "Hires fix: show hires prompt and negative prompt").needs_restart(),
"quicksettings": OptionInfo("sd_model_checkpoint", "Quicksettings"),
- "ui_hidden_tabs": OptionInfo("", "Hidden Tabs"),
- "ui_header_tabs": OptionInfo("", "Header Tabs"),
- "ui_views_order": OptionInfo("row-reverse", "Interface order input/parameters | output/preview", gr.Radio, {"choices": ["row", "row-reverse"]}),
"ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order"),
"ui_hidden_tabs": OptionInfo("", "Hidden Tabs"),
"ui_header_tabs": OptionInfo("", "Header Tabs"),
diff --git a/modules/ui.py b/modules/ui.py
index dae2d2d1..bb1f5839 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -79,9 +79,10 @@ switch_values_symbol = '\u2B80' # ⮀
restore_progress_symbol = '\U0001F300' # 🌀
detect_image_size_symbol = '\U0001F4D0' # 📐
-
interogate_bubble_symbol = '\U0001F5E8' # 🗨
interogate_2bubble_symbol = '\U0001F5EA' # 🗪
+generate_forever_symbol = '\u267E' # ♾
+
def plaintext_to_html(text):
return ui_common.plaintext_to_html(text)
@@ -816,8 +817,8 @@ def create_ui():
for i, tab in enumerate(img2img_tabs):
tab.select(fn=lambda tabnum=i: tabnum, inputs=[], outputs=[img2img_selected_tab])
- #for category in ordered_ui_categories():
- # if category == "inpaint":
+ for category in ordered_ui_categories():
+ if category == "inpaint":
with gr.Column(elem_id="dim_controls", visible=True):
with gr.Row():
@@ -1812,23 +1813,19 @@ def create_ui():
gr.Row(elem_id="quick_menu")
parameters_copypaste.connect_paste_params_buttons()
-
+ # with gr.Tabs(elem_id="tabs") as tabs:
+ # for interface, label, ifid in interfaces:
+ # with gr.TabItem(label, id=ifid, elem_id=f"tab_{ifid}"):
+ # interface.render()
+
with gr.Tabs(elem_id="tabs") as tabs:
-
tab_order = {k: i for i, k in enumerate(opts.ui_tab_order)}
sorted_interfaces = sorted(interfaces, key=lambda x: tab_order.get(x[1], 9999))
for interface, label, ifid in sorted_interfaces:
- if label in shared.opts.hidden_tabs:
- continue
-
with gr.TabItem(label, id=ifid, elem_id=f"tab_{ifid}"):
interface.render()
- for interface, _label, ifid in interfaces:
- if ifid in ["extensions", "settings"]:
- continue
-
loadsave.add_block(interface, ifid)
loadsave.add_component(f"webui/Tabs@{tabs.elem_id}", tabs)
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 51d11790..7d7e062b 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -166,8 +166,8 @@ class ExtraNetworksPage:
if onclick is None:
onclick = '"' + html.escape(f"""return cardClicked({json.dumps(tabname)}, {item["prompt"]}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
- height = f"height: {shared.opts.extra_networks_card_height}px;" if shared.opts.extra_networks_card_height else ''
- width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
+ #height = f"height: {shared.opts.extra_networks_card_height}px;" if shared.opts.extra_networks_card_height else ''
+ #width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
background_image = f'