mirror of
https://github.com/anapnoe/stable-diffusion-webui-ux.git
synced 2026-08-27 15:40:52 +02:00
anapnoe
2016 lines
63 KiB
JavaScript
2016 lines
63 KiB
JavaScript
// 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=')) {
|
|
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 visibleGalleryButtons = [];
|
|
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 visibleCurrentButton = null;
|
|
allCurrentButtons.forEach(function (elem) {
|
|
if (elem.parentElement.offsetParent) {
|
|
visibleCurrentButton = elem;
|
|
}
|
|
});
|
|
return visibleCurrentButton;
|
|
}
|
|
|
|
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;
|
|
}
|
|
});
|
|
|
|
return result;
|
|
}
|
|
|
|
function extract_image_from_gallery(gallery) {
|
|
if (gallery.length == 0) {
|
|
return [null];
|
|
}
|
|
if (gallery.length == 1) {
|
|
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;
|
|
}
|
|
|
|
return [gallery[index]];
|
|
}
|
|
|
|
function args_to_array(args) {
|
|
var res = [];
|
|
for (var i = 0; i < args.length; i++) {
|
|
res.push(args[i]);
|
|
}
|
|
return res;
|
|
}
|
|
|
|
function switch_to_txt2img() {
|
|
gradioApp().querySelector("#tabs").querySelectorAll("button")[0].click();
|
|
|
|
return args_to_array(arguments);
|
|
}
|
|
|
|
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() {
|
|
switch_to_img2img_tab(0);
|
|
return args_to_array(arguments);
|
|
}
|
|
|
|
function switch_to_sketch() {
|
|
switch_to_img2img_tab(1);
|
|
return args_to_array(arguments);
|
|
}
|
|
|
|
function switch_to_inpaint() {
|
|
switch_to_img2img_tab(2);
|
|
return args_to_array(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);
|
|
}
|
|
|
|
function switch_to_extras() {
|
|
gradioApp().querySelector("#tabs").querySelectorAll("button")[2].click();
|
|
|
|
return args_to_array(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;
|
|
}
|
|
|
|
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);
|
|
|
|
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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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 showRestoreProgressButton(tabname, show) {
|
|
var button = gradioApp().getElementById(tabname + "_restore_progress");
|
|
if (!button) return;
|
|
|
|
button.style.display = show ? "flex" : "none";
|
|
}
|
|
|
|
function submit() {
|
|
rememberGallerySelection("txt2img_gallery");
|
|
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);
|
|
localStorage.removeItem("txt2img_task_id");
|
|
showRestoreProgressButton("txt2img", false);
|
|
}
|
|
);
|
|
|
|
var res = create_submit_args(arguments);
|
|
|
|
res[0] = id;
|
|
|
|
return res;
|
|
}
|
|
|
|
function submit_img2img() {
|
|
rememberGallerySelection("img2img_gallery");
|
|
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);
|
|
localStorage.removeItem("img2img_task_id");
|
|
showRestoreProgressButton("img2img", false);
|
|
}
|
|
);
|
|
|
|
var res = create_submit_args(arguments);
|
|
|
|
res[0] = id;
|
|
res[1] = get_tab_index("mode_img2img");
|
|
|
|
return res;
|
|
}
|
|
|
|
function restoreProgressTxt2img() {
|
|
showRestoreProgressButton("txt2img", false);
|
|
var 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
|
|
);
|
|
}
|
|
|
|
return id;
|
|
}
|
|
|
|
function restoreProgressImg2img() {
|
|
showRestoreProgressButton("img2img", false);
|
|
|
|
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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
function ask_for_style_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 = "";
|
|
}
|
|
|
|
return [prompt, negative_prompt];
|
|
}
|
|
|
|
promptTokecountUpdateFuncs = {};
|
|
|
|
function recalculatePromptTokens(name) {
|
|
if (promptTokecountUpdateFuncs[name]) {
|
|
promptTokecountUpdateFuncs[name]();
|
|
}
|
|
}
|
|
|
|
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");
|
|
return args_to_array(arguments);
|
|
}
|
|
|
|
let selectedTabItemId = "tab_txt2img";
|
|
let opts = {};
|
|
|
|
onUiLoaded(function () {
|
|
showRestoreProgressButton("txt2img", localStorage.getItem("txt2img_task_id"));
|
|
showRestoreProgressButton("img2img", localStorage.getItem("img2img_task_id"));
|
|
|
|
if (Object.keys(opts).length != 0) 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);
|
|
executeCallbacks(optionsChangedCallbacks);
|
|
|
|
Object.defineProperty(textarea, "value", {
|
|
set: function (newValue) {
|
|
var valueProp = Object.getOwnPropertyDescriptor(
|
|
HTMLTextAreaElement.prototype,
|
|
"value"
|
|
);
|
|
var oldValue = valueProp.get.call(textarea);
|
|
valueProp.set.call(textarea, newValue);
|
|
|
|
if (oldValue != newValue) {
|
|
opts = JSON.parse(textarea.value);
|
|
}
|
|
|
|
executeCallbacks(optionsChangedCallbacks);
|
|
},
|
|
get: function () {
|
|
var valueProp = Object.getOwnPropertyDescriptor(
|
|
HTMLTextAreaElement.prototype,
|
|
"value"
|
|
);
|
|
return valueProp.get.call(textarea);
|
|
},
|
|
});
|
|
|
|
json_elem.parentElement.style.display = "none";
|
|
|
|
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;
|
|
}
|
|
|
|
prompt.parentElement.insertBefore(counter, prompt);
|
|
counter.classList.add("token-counter");
|
|
prompt.parentElement.style.position = "relative";
|
|
|
|
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) {
|
|
elem.style.display = "block";
|
|
});
|
|
gradioApp()
|
|
.querySelectorAll("#settings > div > div > div")
|
|
.forEach(function (elem) {
|
|
elem.style.maxHeight = "none";
|
|
});
|
|
};
|
|
}
|
|
/*
|
|
^ matches the start
|
|
* matches any position
|
|
$ matches the end
|
|
*/
|
|
/* anapnoe ui start */
|
|
|
|
/* auto grow textarea */
|
|
function autoGrowPromptTextarea() {
|
|
gradioApp()
|
|
.querySelectorAll('[id$="_prompt"] textarea')
|
|
.forEach(function (elem) {
|
|
elem.parentElement.click();
|
|
});
|
|
}
|
|
|
|
gradioApp()
|
|
.querySelectorAll(
|
|
'[id$="_prompt"] textarea, [id^="setting_"] textarea, textarea'
|
|
)
|
|
.forEach(function (elem) {
|
|
elem.style.boxSizing = "border-box";
|
|
var offset = elem.offsetHeight - elem.clientHeight;
|
|
elem.addEventListener("input", function (e) {
|
|
e.target.style.minHeight = "auto";
|
|
e.target.style.minHeight = e.target.scrollHeight + offset + 2 + "px";
|
|
});
|
|
|
|
elem.parentElement.addEventListener("click", function (e) {
|
|
let textarea = e.currentTarget.querySelector("textarea");
|
|
textarea.style.minHeight = "auto";
|
|
textarea.style.minHeight = textarea.scrollHeight + offset + 2 + "px";
|
|
});
|
|
});
|
|
|
|
/* resizable split view */
|
|
const resizeEvent = window.document.createEvent("UIEvents");
|
|
resizeEvent.initUIEvent("resize", true, false, window, 0);
|
|
|
|
gradioApp()
|
|
.querySelectorAll('[id $="2img_splitter"]')
|
|
.forEach((elem) => {
|
|
elem.addEventListener("mousedown", function (e) {
|
|
e.preventDefault();
|
|
|
|
let resizer = e.currentTarget;
|
|
let container = resizer.parentElement;
|
|
|
|
let flexDir = window
|
|
.getComputedStyle(container)
|
|
.getPropertyValue("flex-direction");
|
|
|
|
let leftSide = resizer.previousElementSibling;
|
|
let rightSide = resizer.nextElementSibling;
|
|
|
|
let dir = flexDir == "row-reverse" ? -1.0 : 1.0;
|
|
|
|
let x = e.clientX;
|
|
let y = e.clientY;
|
|
let leftWidth = leftSide.getBoundingClientRect().width;
|
|
|
|
function mouseMoveHandler(e) {
|
|
resizer.style.cursor = "col-resize";
|
|
container.style.cursor = "col-resize";
|
|
|
|
const dx = (e.clientX - x) * dir;
|
|
const dy = (e.clientY - y) * dir;
|
|
|
|
const newLeftWidth =
|
|
((leftWidth + dx) * 100) / container.getBoundingClientRect().width;
|
|
leftSide.style.flexBasis = `${newLeftWidth}%`;
|
|
leftSide.style.userSelect = "none";
|
|
leftSide.style.pointerEvents = "none";
|
|
rightSide.style.userSelect = "none";
|
|
rightSide.style.pointerEvents = "none";
|
|
//window.dispatchEvent(resizeEvent);
|
|
}
|
|
|
|
function mouseUpHandler() {
|
|
resizer.style.removeProperty("cursor");
|
|
container.style.removeProperty("cursor");
|
|
leftSide.style.removeProperty("user-select");
|
|
leftSide.style.removeProperty("pointer-events");
|
|
rightSide.style.removeProperty("user-select");
|
|
rightSide.style.removeProperty("pointer-events");
|
|
container.removeEventListener("mousemove", mouseMoveHandler);
|
|
container.removeEventListener("mouseup", mouseUpHandler);
|
|
//window.dispatchEvent(resizeEvent);
|
|
}
|
|
|
|
container.addEventListener("mousemove", mouseMoveHandler);
|
|
container.addEventListener("mouseup", mouseUpHandler);
|
|
});
|
|
|
|
let flex_reverse = false;
|
|
elem.addEventListener("dblclick", function (e) {
|
|
flex_reverse = !flex_reverse;
|
|
e.preventDefault();
|
|
|
|
let resizer = e.currentTarget;
|
|
let container = resizer.parentElement;
|
|
//let flexDir = window.getComputedStyle(container).getPropertyValue('flex-direction');
|
|
|
|
if (flex_reverse) {
|
|
container.style.flexDirection = "row-reverse";
|
|
} else {
|
|
container.style.flexDirection = "row";
|
|
}
|
|
});
|
|
});
|
|
|
|
// set this globally
|
|
//let selectedTabItemId = "tab_txt2img";
|
|
/* switch tab item from instance button, this is the only method that works i havent found a workaround yet */
|
|
const Observe = (sel, opt, cb) => {
|
|
const Obs = new MutationObserver((m) => [...m].forEach(cb));
|
|
gradioApp()
|
|
.querySelectorAll(sel)
|
|
.forEach((el) => Obs.observe(el, opt));
|
|
};
|
|
Observe(
|
|
"#tabs > div.tabitem",
|
|
{
|
|
attributesList: ["style"],
|
|
attributeOldValue: true,
|
|
},
|
|
(m) => {
|
|
if (m.target.style.display === "block") {
|
|
let idx = parseInt(m.target.getAttribute("tab-item"));
|
|
selectedTabItemId = m.target.id;
|
|
tabItemChanged(idx);
|
|
}
|
|
}
|
|
);
|
|
|
|
function tabItemChanged(idx) {
|
|
gradioApp()
|
|
.querySelectorAll(
|
|
"#tabs > div > button.selected, #nav_menu_header_tabs > button.selected"
|
|
)
|
|
.forEach(function (tab) {
|
|
tab.classList.remove("selected");
|
|
});
|
|
|
|
gradioApp()
|
|
.querySelectorAll(
|
|
"#tabs > div > button:nth-child(" +
|
|
(idx + 1) +
|
|
"), #nav_menu_header_tabs > button:nth-child(" +
|
|
(idx + 1) +
|
|
")"
|
|
)
|
|
.forEach(function (tab) {
|
|
tab.classList.add("selected");
|
|
});
|
|
//gardio removes listeners and attributes from tab buttons we add them again here
|
|
gradioApp()
|
|
.querySelectorAll("#tabs > div > button")
|
|
.forEach(function (tab, index) {
|
|
tab.setAttribute("tab-id", index);
|
|
tab.removeEventListener("mouseup", navTabClicked);
|
|
tab.addEventListener("mouseup", navTabClicked);
|
|
if (tab.innerHTML.indexOf("Theme") != -1) tab.style.display = "none";
|
|
});
|
|
|
|
/* gradioApp().querySelectorAll('[id^="image_buttons_"] button').forEach(function (elem){
|
|
|
|
if(elem.id == "txt2img_tab"){
|
|
elem.setAttribute("tab-id", 0);
|
|
elem.removeEventListener('click', navTabClicked);
|
|
elem.addEventListener('click', navTabClicked);
|
|
}else if(elem.id == "img2img_tab" || elem.id == "inpaint_tab"){
|
|
elem.setAttribute("tab-id", 1);
|
|
elem.removeEventListener('click', navTabClicked);
|
|
elem.addEventListener('click', navTabClicked);
|
|
}if(elem.id == "extras_tab"){
|
|
elem.setAttribute("tab-id", 2);
|
|
elem.removeEventListener('click', navTabClicked);
|
|
elem.addEventListener('click', navTabClicked);
|
|
}
|
|
}) */
|
|
|
|
/* const pdiv = gradioApp().querySelector("#"+selectedTabItemId+" .progressDiv");
|
|
if(!pdiv && selectedTabItemId == "tab_txt2img"){
|
|
showSubmitButtons('txt2img', true);
|
|
}else if(!pdiv && selectedTabItemId == "tab_img2img"){
|
|
showSubmitButtons('img2img', true);
|
|
} */
|
|
|
|
//window.onUiHeaderTabUpdate();
|
|
// also here the same issue
|
|
/*
|
|
gradioApp().querySelectorAll('[id^="image_buttons"] [id$="_tab"]').forEach(function (button, index){
|
|
if(button.id == ("img2img_tab" || "inpaint_tab") ){
|
|
button.setAttribute("tab-id", 1 );
|
|
}else if(button.id == "extras_tab"){
|
|
button.setAttribute("tab-id", 2 );
|
|
}
|
|
|
|
button.removeEventListener('mouseup', navTabClicked);
|
|
button.addEventListener('mouseup', navTabClicked);
|
|
|
|
|
|
})
|
|
*/
|
|
|
|
netMenuVisibility();
|
|
}
|
|
|
|
// menu
|
|
function disableScroll() {
|
|
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
|
|
window.scrollTo(scrollLeft, scrollTop);
|
|
|
|
window.onscroll = function () {
|
|
window.scrollTo(scrollLeft, scrollTop);
|
|
};
|
|
}
|
|
|
|
function enableScroll() {
|
|
window.onscroll = function () {};
|
|
}
|
|
|
|
function getPos(el) {
|
|
let rect = el.getBoundingClientRect();
|
|
return { x: rect.left, y: rect.top };
|
|
}
|
|
|
|
function toggleMenu(isopen, icon, panel, func) {
|
|
if (isopen) {
|
|
panel.classList.add("open");
|
|
icon.classList.add("fixed");
|
|
gradioApp().addEventListener("click", func);
|
|
disableScroll();
|
|
} else {
|
|
panel.classList.remove("open");
|
|
icon.classList.remove("fixed");
|
|
gradioApp().removeEventListener("click", func);
|
|
enableScroll();
|
|
}
|
|
}
|
|
|
|
// close aside views
|
|
function closeAsideViews(menu) {
|
|
if (quick_menu != menu && quick_menu_open) quick_menu.click();
|
|
if (net_menu != menu && net_menu_open) net_menu.click();
|
|
if (theme_menu != menu && theme_menu_open) theme_menu.click();
|
|
}
|
|
|
|
// if we change to other view other than 2img and if aside mode is selected close extra networks aside and hide the net menu icon
|
|
let net_container = gradioApp().querySelector("#txt2img_extra_networks_row");
|
|
let net_menu_open = false;
|
|
const net_menu = gradioApp().querySelector("#extra_networks_menu");
|
|
function netMenuVisibility() {
|
|
if (selectedTabItemId.indexOf("2img") != -1) {
|
|
net_menu.style.display = "block";
|
|
let nid = selectedTabItemId.split("_")[1];
|
|
net_container = gradioApp().querySelector(
|
|
"#" + nid + "_extra_networks_row"
|
|
);
|
|
if (net_container.classList.contains("aside")) {
|
|
net_menu.style.display = "block";
|
|
toggleMenu(net_menu_open, net_menu, net_container, null);
|
|
} else {
|
|
net_menu.style.display = "none";
|
|
}
|
|
} else {
|
|
net_menu.style.display = "none";
|
|
}
|
|
}
|
|
|
|
// mobile nav menu
|
|
const tabs_menu = gradioApp().querySelector("#tabs > div:first-child");
|
|
const nav_menu = gradioApp().querySelector("#nav_menu");
|
|
const header = gradioApp().querySelector("#header-top");
|
|
let menu_open = false;
|
|
const z_menu = nav_menu.cloneNode(true);
|
|
z_menu.id = "clone_nav_menu";
|
|
header.parentElement.append(z_menu);
|
|
function toggleNavMenu(e) {
|
|
e.stopPropagation();
|
|
menu_open = !menu_open;
|
|
toggleMenu(menu_open, nav_menu, tabs_menu, toggleNavMenu);
|
|
}
|
|
z_menu.addEventListener("click", toggleNavMenu);
|
|
|
|
// quicksettings nav menu
|
|
let quick_menu_open = false;
|
|
const quicksettings_overflow = gradioApp().querySelector(
|
|
"#quicksettings_overflow"
|
|
);
|
|
const quick_menu = gradioApp().querySelector("#quick_menu");
|
|
function toggleQuickMenu(e) {
|
|
closeAsideViews(quick_menu);
|
|
quick_menu_open = !quick_menu_open;
|
|
const withinBoundaries = e.composedPath().includes(quicksettings_overflow);
|
|
if (!quick_menu_open && withinBoundaries) {
|
|
quick_menu_open = true;
|
|
} else {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
toggleMenu(
|
|
quick_menu_open,
|
|
quick_menu,
|
|
quicksettings_overflow,
|
|
toggleQuickMenu
|
|
);
|
|
}
|
|
}
|
|
quick_menu.addEventListener("click", toggleQuickMenu);
|
|
|
|
// extra networks nav menu
|
|
function toggleNetMenu(e) {
|
|
closeAsideViews(net_menu);
|
|
net_menu_open = !net_menu_open;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
toggleMenu(net_menu_open, net_menu, net_container, null);
|
|
}
|
|
net_menu.addEventListener("click", toggleNetMenu);
|
|
gradioApp()
|
|
.querySelectorAll('button[id*="2img_extra_networks"]')
|
|
.forEach((elem) => {
|
|
elem.addEventListener("click", toggleNetMenu);
|
|
});
|
|
|
|
// theme nav menu
|
|
let theme_container = gradioApp().querySelector("#tab_ui_theme");
|
|
let theme_menu_open = false;
|
|
const theme_menu = gradioApp().querySelector("#theme_menu");
|
|
function toggleThemeMenu(e) {
|
|
closeAsideViews(theme_menu);
|
|
theme_menu_open = !theme_menu_open;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
toggleMenu(theme_menu_open, theme_menu, theme_container, null);
|
|
}
|
|
theme_menu.addEventListener("click", toggleThemeMenu);
|
|
|
|
const theme_tab = gradioApp().querySelector("#tab_ui_theme");
|
|
function theme_aside(value) {
|
|
if (value) {
|
|
theme_tab.classList.add("aside");
|
|
} else {
|
|
theme_tab.classList.remove("aside");
|
|
}
|
|
}
|
|
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 attachAccordionListeners(elem) {
|
|
elem.querySelectorAll(".gradio-accordion > div.wrap").forEach((elem) => {
|
|
elem.addEventListener("click", toggleAccordion);
|
|
});
|
|
}
|
|
/* function toggleAccordion(e) {
|
|
//e.preventDefault();
|
|
//e.stopPropagation();
|
|
//e.stopImmediatePropagation();
|
|
let accordion_content =
|
|
e.currentTarget.parentElement.querySelector(".gap.svelte-vt1mxs");
|
|
|
|
if (accordion_content) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
let accordion_icon = e.currentTarget.parentElement.querySelector(
|
|
".label-wrap > .icon"
|
|
);
|
|
if (accordion_content.className.indexOf("hidden") != -1) {
|
|
accordion_content.classList.remove("hidden");
|
|
accordion_icon.style.setProperty("transform", "rotate(0deg)");
|
|
e.currentTarget.classList.add("hide");
|
|
} else {
|
|
accordion_content.classList.add("hidden");
|
|
accordion_icon.style.setProperty("transform", "rotate(90deg)");
|
|
e.currentTarget.classList.remove("hide");
|
|
}
|
|
} else {
|
|
let accordion_btn =
|
|
e.currentTarget.parentElement.querySelector(".label-wrap");
|
|
e.currentTarget.classList.add("hide");
|
|
accordion_btn.click();
|
|
//maybe here we need to setInterval until the content is available
|
|
setTimeout(function () {
|
|
accordion_content = accordion_btn.parentElement;
|
|
//console.log(accordion_content);
|
|
attachAccordionListeners(accordion_content);
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
attachAccordionListeners(gradioApp());
|
|
*/
|
|
// additional ui styles
|
|
let styleobj = {};
|
|
const r = gradioApp();
|
|
const style = document.createElement("style");
|
|
style.id = "ui-styles";
|
|
r.appendChild(style);
|
|
|
|
function updateOpStyles() {
|
|
let ops_styles = "";
|
|
for (const key in styleobj) {
|
|
ops_styles += styleobj[key];
|
|
}
|
|
const ui_styles = gradioApp().getElementById("ui-styles");
|
|
ui_styles.innerHTML = ops_styles;
|
|
//console.log(ui_styles);
|
|
}
|
|
|
|
// generated image fit contain - scale
|
|
function imageGeneratedFitMethod(value) {
|
|
styleobj.ui_view_fit =
|
|
"[id$='2img_gallery'] div>img {object-fit:" + value + "!important;}";
|
|
}
|
|
gradioApp()
|
|
.querySelector("#setting_ui_output_image_fit")
|
|
.addEventListener("click", function (e) {
|
|
if (e.target && e.target.matches("input[type='radio']")) {
|
|
imageGeneratedFitMethod(e.target.value.toLowerCase());
|
|
updateOpStyles();
|
|
}
|
|
});
|
|
imageGeneratedFitMethod(opts.ui_output_image_fit.toLowerCase());
|
|
|
|
// livePreview fit contain - scale
|
|
function imagePreviewFitMethod(value) {
|
|
styleobj.ui_fit = ".livePreview img {object-fit:" + value + "!important;}";
|
|
}
|
|
gradioApp()
|
|
.querySelector("#setting_live_preview_image_fit")
|
|
.addEventListener("click", function (e) {
|
|
if (e.target && e.target.matches("input[type='radio']")) {
|
|
imagePreviewFitMethod(e.target.value.toLowerCase());
|
|
updateOpStyles();
|
|
}
|
|
});
|
|
imagePreviewFitMethod(opts.live_preview_image_fit.toLowerCase());
|
|
|
|
// viewports order left - right
|
|
function viewportOrder(value) {
|
|
styleobj.ui_views_order =
|
|
"[id$=_prompt_image] + div {flex-direction:" + value + ";}";
|
|
}
|
|
gradioApp()
|
|
.querySelector("#setting_ui_views_order")
|
|
.addEventListener("click", function (e) {
|
|
if (e.target && e.target.matches("input[type='radio']")) {
|
|
viewportOrder(e.target.value.toLowerCase());
|
|
updateOpStyles();
|
|
}
|
|
});
|
|
viewportOrder(opts.ui_views_order.toLowerCase());
|
|
|
|
// sd max resolution output
|
|
function sdMaxOutputResolution(value) {
|
|
gradioApp()
|
|
.querySelectorAll('[id$="2img_width"] input,[id$="2img_height"] input')
|
|
.forEach((elem) => {
|
|
elem.max = value;
|
|
});
|
|
}
|
|
gradioApp()
|
|
.querySelector("#setting_sd_max_resolution")
|
|
.addEventListener("input", function (e) {
|
|
let intvalue = parseInt(e.target.value);
|
|
intvalue = Math.min(Math.max(intvalue, 512), 16384);
|
|
sdMaxOutputResolution(intvalue);
|
|
});
|
|
sdMaxOutputResolution(opts.sd_max_resolution);
|
|
|
|
function extra_networks_visibility(value) {
|
|
gradioApp()
|
|
.querySelectorAll('[id$="2img_extra_networks_row"]')
|
|
.forEach((elem) => {
|
|
if (value) {
|
|
elem.classList.remove("!hidden");
|
|
} else {
|
|
elem.classList.add("!hidden");
|
|
}
|
|
});
|
|
}
|
|
gradioApp()
|
|
.querySelector("#setting_extra_networks_default_visibility input")
|
|
.addEventListener("click", function (e) {
|
|
extra_networks_visibility(e.target.checked);
|
|
});
|
|
extra_networks_visibility(opts.extra_networks_default_visibility);
|
|
|
|
function extra_networks_card_size(value) {
|
|
styleobj.extra_networks_card_size =
|
|
":root{--ae-extra-networks-card-size:" + value + ";}";
|
|
}
|
|
gradioApp()
|
|
.querySelectorAll("#setting_extra_networks_cards_size input")
|
|
.forEach(function (elem) {
|
|
elem.addEventListener("input", function (e) {
|
|
extra_networks_card_size(e.target.value);
|
|
updateOpStyles();
|
|
});
|
|
});
|
|
extra_networks_card_size(opts.extra_networks_cards_size);
|
|
|
|
function extra_networks_cards_visible_rows(value) {
|
|
styleobj.extra_networks_cards_visible_rows =
|
|
":root{--ae-extra-networks-visible-rows:" + value + ";}";
|
|
}
|
|
gradioApp()
|
|
.querySelectorAll("#setting_extra_networks_cards_visible_rows input")
|
|
.forEach(function (elem) {
|
|
elem.addEventListener("input", function (e) {
|
|
extra_networks_cards_visible_rows(e.target.value);
|
|
updateOpStyles();
|
|
});
|
|
});
|
|
extra_networks_cards_visible_rows(opts.extra_networks_cards_visible_rows);
|
|
|
|
function extra_networks_aside(value) {
|
|
gradioApp()
|
|
.querySelectorAll('[id$="2img_extra_networks_row"]')
|
|
.forEach((elem) => {
|
|
if (value) {
|
|
elem.classList.add("aside");
|
|
} else {
|
|
elem.classList.remove("aside");
|
|
}
|
|
netMenuVisibility();
|
|
});
|
|
}
|
|
gradioApp()
|
|
.querySelector("#setting_extra_networks_aside input")
|
|
.addEventListener("click", function (e) {
|
|
extra_networks_aside(e.target.checked);
|
|
});
|
|
extra_networks_aside(opts.extra_networks_aside);
|
|
|
|
// hidden - header ui tabs
|
|
let radio_hidden_html = "";
|
|
let radio_header_html = "";
|
|
let hiddentabs = {};
|
|
let headertabs = {};
|
|
const setting_ui_hidden_tabs = gradioApp().querySelector(
|
|
"#setting_ui_hidden_tabs textarea"
|
|
);
|
|
const setting_ui_header_tabs = gradioApp().querySelector(
|
|
"#setting_ui_header_tabs textarea"
|
|
);
|
|
const parent_header_tabs = gradioApp().querySelector("#nav_menu_header_tabs");
|
|
setting_ui_hidden_tabs.style.display = "none";
|
|
setting_ui_header_tabs.style.display = "none";
|
|
|
|
const maintabs = gradioApp().querySelectorAll(
|
|
"#tabs > div:first-child > button"
|
|
);
|
|
const tabitems = gradioApp().querySelectorAll("#tabs > div.tabitem");
|
|
|
|
function tabOpsSave(setting) {
|
|
updateInput(setting);
|
|
}
|
|
|
|
function tabsHiddenChange() {
|
|
const keys = Object.keys(hiddentabs);
|
|
setting_ui_hidden_tabs.value = "";
|
|
keys.forEach((key, index) => {
|
|
//console.log(`${key}: ${hiddentabs[key]} ${index}`);
|
|
if (hiddentabs[key] == true) {
|
|
styleobj[key] =
|
|
"#tabs > div:first-child > button:nth-child(" +
|
|
(index + 1) +
|
|
"){display:none;}";
|
|
setting_ui_hidden_tabs.value += key + ",";
|
|
} else {
|
|
styleobj[key] =
|
|
"#tabs > div:first-child > button:nth-child(" +
|
|
(index + 1) +
|
|
"){display:block;}";
|
|
}
|
|
});
|
|
|
|
tabOpsSave(setting_ui_hidden_tabs);
|
|
tabsHeaderChange();
|
|
}
|
|
function tabsHeaderChange() {
|
|
const keys = Object.keys(headertabs);
|
|
setting_ui_header_tabs.value = "";
|
|
keys.forEach((key, index) => {
|
|
//console.log(`${key}: ${hiddentabs[key]} ${index}`);
|
|
let nkey = key + "_hr";
|
|
if (headertabs[key] == true && hiddentabs[key] == false) {
|
|
styleobj[nkey] =
|
|
"#nav_menu_header_tabs > button:nth-child(" +
|
|
(index + 1) +
|
|
"){display:block;}";
|
|
setting_ui_header_tabs.value += key + ",";
|
|
} else {
|
|
styleobj[nkey] =
|
|
"#nav_menu_header_tabs > button:nth-child(" +
|
|
(index + 1) +
|
|
"){display:none;}";
|
|
}
|
|
});
|
|
|
|
tabOpsSave(setting_ui_header_tabs);
|
|
}
|
|
|
|
function navigate2TabItem(idx) {
|
|
gradioApp()
|
|
.querySelectorAll("#tabs > div.tabitem")
|
|
.forEach(function (tabitem, index) {
|
|
if (idx == index) {
|
|
tabitem.style.display = "block";
|
|
} else {
|
|
tabitem.style.display = "none";
|
|
}
|
|
});
|
|
}
|
|
|
|
function navTabClicked(e) {
|
|
const idx = parseInt(e.currentTarget.getAttribute("tab-id"));
|
|
navigate2TabItem(idx);
|
|
}
|
|
|
|
maintabs.forEach(function (elem, index) {
|
|
let tabvalue = elem.innerText.replaceAll(" ", "");
|
|
hiddentabs[tabvalue] = false;
|
|
headertabs[tabvalue] = false;
|
|
let checked_hidden = "";
|
|
let checked_header = "";
|
|
if (setting_ui_hidden_tabs.value.indexOf(tabvalue) != -1) {
|
|
hiddentabs[tabvalue] = true;
|
|
checked_hidden = "checked";
|
|
}
|
|
if (setting_ui_header_tabs.value.indexOf(tabvalue) != -1) {
|
|
headertabs[tabvalue] = true;
|
|
checked_header = "checked";
|
|
}
|
|
radio_hidden_html +=
|
|
'<label class="' +
|
|
tabvalue.toLowerCase() +
|
|
' svelte-1qxcj04"><input type="checkbox" name="uiha" class="svelte-1qxcj04" ' +
|
|
checked_hidden +
|
|
' value="' +
|
|
elem.innerText +
|
|
'"><span class="ml-2 svelte-1qxcj04">' +
|
|
elem.innerText +
|
|
"</span></label>";
|
|
|
|
radio_header_html +=
|
|
'<label class="' +
|
|
tabvalue.toLowerCase() +
|
|
' svelte-1qxcj04"><input type="checkbox" name="uiha" class="svelte-1qxcj04" ' +
|
|
checked_header +
|
|
' value="' +
|
|
elem.innerText +
|
|
'"><span class="ml-2 svelte-1qxcj04">' +
|
|
elem.innerText +
|
|
"</span></label>";
|
|
|
|
tabitems[index].setAttribute("tab-item", index);
|
|
elem.setAttribute("tab-id", index);
|
|
|
|
let clonetab = elem.cloneNode(true);
|
|
clonetab.id = tabvalue + "_clone";
|
|
parent_header_tabs.append(clonetab);
|
|
clonetab.addEventListener("click", navTabClicked);
|
|
});
|
|
|
|
let div = document.createElement("div");
|
|
div.id = "hidden_radio_tabs_container";
|
|
div.classList.add("flex", "flex-wrap", "gap-2", "wrap", "svelte-1qxcj04");
|
|
div.innerHTML = radio_hidden_html;
|
|
setting_ui_hidden_tabs.parentElement.appendChild(div);
|
|
|
|
div = document.createElement("div");
|
|
div.id = "header_radio_tabs_container";
|
|
div.classList.add("flex", "flex-wrap", "gap-2", "wrap", "svelte-1qxcj04");
|
|
div.innerHTML = radio_header_html;
|
|
setting_ui_header_tabs.parentElement.appendChild(div);
|
|
|
|
// hidden tabs
|
|
gradioApp()
|
|
.querySelector("#hidden_radio_tabs_container")
|
|
.addEventListener("click", function (e) {
|
|
if (e.target && e.target.matches("input[type='checkbox']")) {
|
|
let tabvalue = e.target.value.replaceAll(" ", "");
|
|
hiddentabs[tabvalue] = e.target.checked;
|
|
tabsHiddenChange();
|
|
updateOpStyles();
|
|
}
|
|
});
|
|
// header tabs
|
|
gradioApp()
|
|
.querySelector("#header_radio_tabs_container")
|
|
.addEventListener("click", function (e) {
|
|
if (e.target && e.target.matches("input[type='checkbox']")) {
|
|
let tabvalue = e.target.value.replaceAll(" ", "");
|
|
headertabs[tabvalue] = e.target.checked;
|
|
tabsHeaderChange();
|
|
updateOpStyles();
|
|
}
|
|
});
|
|
|
|
tabsHiddenChange();
|
|
|
|
gradioApp()
|
|
.querySelectorAll('[id^="image_buttons_"] button, #png_2img_results button')
|
|
.forEach(function (elem) {
|
|
//console.log(opts.send_seed);
|
|
if (elem.id == "txt2img_tab") {
|
|
elem.setAttribute("tab-id", 0);
|
|
elem.addEventListener("click", navTabClicked);
|
|
} else if (elem.id == "img2img_tab" || elem.id == "inpaint_tab") {
|
|
elem.setAttribute("tab-id", 1);
|
|
elem.addEventListener("click", navTabClicked);
|
|
}
|
|
if (elem.id == "extras_tab") {
|
|
elem.setAttribute("tab-id", 2);
|
|
elem.addEventListener("click", navTabClicked);
|
|
}
|
|
});
|
|
|
|
gradioApp()
|
|
.querySelectorAll('[id$="2img_extra_tabs"] .search')
|
|
.forEach(function (elem) {
|
|
elem.addEventListener("keyup", function (e) {
|
|
if (e.defaultPrevented) {
|
|
return; // Do nothing if event already handled
|
|
}
|
|
switch (e.code) {
|
|
case "Escape":
|
|
if (e.target.value == "") {
|
|
net_menu.click();
|
|
} else {
|
|
e.target.value = "";
|
|
updateInput(e.target);
|
|
}
|
|
break;
|
|
}
|
|
});
|
|
});
|
|
|
|
// add - remove quicksettings
|
|
const settings_submit = gradioApp().querySelector("#settings_submit");
|
|
const quick_parent = gradioApp().querySelector(
|
|
"#quicksettings_overflow_container"
|
|
);
|
|
const setting_quicksettings = gradioApp().querySelector(
|
|
"#setting_quicksettings textarea"
|
|
);
|
|
function saveQuickSettings() {
|
|
updateInput(setting_quicksettings);
|
|
const cEvent = new Event("click"); //submit
|
|
Object.defineProperty(cEvent, "target", { value: settings_submit });
|
|
settings_submit.dispatchEvent(cEvent);
|
|
//console.log(setting_quicksettings.value);
|
|
}
|
|
|
|
/*
|
|
function addModelCheckpoint(){
|
|
if(setting_quicksettings.value.indexOf("sd_model_checkpoint") === -1){
|
|
setting_quicksettings.value += ",sd_model_checkpoint";
|
|
}
|
|
saveQuickSettings();
|
|
}
|
|
*/
|
|
|
|
function add2quickSettings(id, section, checked) {
|
|
let field_settings = setting_quicksettings.value.replace(" ", "");
|
|
if (checked) {
|
|
field_settings += "," + id;
|
|
let setting_row = gradioApp().querySelector("#row_setting_" + id);
|
|
quick_parent.append(setting_row);
|
|
setting_row.classList.add("warning");
|
|
} else {
|
|
field_settings = field_settings.replaceAll(id, ",");
|
|
const setting_parent = gradioApp().querySelector(
|
|
"#" + section + "_settings_2img_settings"
|
|
);
|
|
let quick_row = gradioApp().querySelector("#row_setting_" + id);
|
|
setting_parent.append(quick_row);
|
|
quick_row.classList.remove("warning");
|
|
}
|
|
field_settings = field_settings.replace(/,{2,}/g, ",");
|
|
setting_quicksettings.value = field_settings;
|
|
//addModelCheckpoint();
|
|
saveQuickSettings();
|
|
console.log(section + " - "+ id + " - " + checked);
|
|
}
|
|
gradioApp()
|
|
.querySelectorAll('[id*="add2quick_"]')
|
|
.forEach(function (elem) {
|
|
let trg = elem.id.split("_add2quick_setting_");
|
|
let sid = trg[0];
|
|
let tid = trg[1];
|
|
let elem_input = gradioApp().querySelector("#" + elem.id + " input");
|
|
if (elem_input) {
|
|
elem_input.addEventListener("click", function (e) {
|
|
add2quickSettings(tid, sid, e.target.checked);
|
|
});
|
|
}
|
|
});
|
|
//addModelCheckpoint();
|
|
|
|
// input release component dispatcher
|
|
let cached_clone_range;
|
|
let cached_clone_num;
|
|
let active_clone_input = [];
|
|
let focus_input;
|
|
|
|
function ui_input_release_component(elem) {
|
|
//console.log("ok");
|
|
if (active_clone_input.length > 0) return;
|
|
|
|
//img2img_width
|
|
let parent = elem.parentElement;
|
|
let comp_parent = parent.parentElement.parentElement;
|
|
|
|
if (
|
|
comp_parent.id == "img2img_width" ||
|
|
comp_parent.id == "img2img_height" ||
|
|
comp_parent.id == "img2img_scale" ||
|
|
comp_parent.id.indexOf("--ae-") != -1 ||
|
|
comp_parent.id.indexOf("theme") != -1 ||
|
|
comp_parent.className.indexOf("posex") != -1
|
|
)
|
|
return;
|
|
|
|
let clone_num = elem.cloneNode();
|
|
active_clone_input.push(clone_num);
|
|
|
|
let label = parent.querySelector("label");
|
|
|
|
clone_num.id = "num_clone";
|
|
clone_num.value = elem.value;
|
|
parent.append(clone_num);
|
|
elem.classList.add("hidden");
|
|
|
|
clone_num.addEventListener("change", function (e) {
|
|
elem.value = clone_num.value;
|
|
updateInput(elem);
|
|
});
|
|
|
|
clone_num.addEventListener("focus", function (e) {
|
|
focus_input = clone_num;
|
|
});
|
|
|
|
cached_clone_num = clone_num;
|
|
cached_clone_range = false;
|
|
|
|
if (label) {
|
|
let comp_range = comp_parent.querySelector("input[type='range']");
|
|
let clone_range = comp_range.cloneNode();
|
|
active_clone_input.push(clone_range);
|
|
|
|
clone_range.id = comp_range.id + "_clone";
|
|
clone_range.value = comp_range.value;
|
|
comp_range.parentElement.append(clone_range);
|
|
comp_range.classList.add("hidden");
|
|
|
|
clone_range.addEventListener("input", function (e) {
|
|
clone_num.value = e.target.value;
|
|
});
|
|
clone_range.addEventListener("change", function (e) {
|
|
elem.value = clone_range.value;
|
|
updateInput(elem);
|
|
});
|
|
clone_num.addEventListener("input", function (e) {
|
|
clone_range.value = e.target.value;
|
|
});
|
|
|
|
cached_clone_range = clone_range;
|
|
}
|
|
}
|
|
/* function ui_input_focus_handler(e) {
|
|
if (e.target != focus_input) {
|
|
focus_input = false;
|
|
ui_input_release_handler(e);
|
|
}
|
|
} */
|
|
|
|
function ui_input_release_handler(e) {
|
|
const len = active_clone_input.length;
|
|
if (focus_input) {
|
|
return;
|
|
}
|
|
if (len > 0) {
|
|
if (e.target.id.indexOf("_clone") == -1) {
|
|
for (var i = len - 1; i >= 0; i--) {
|
|
let relem = active_clone_input[i];
|
|
relem.previousElementSibling.classList.remove("hidden");
|
|
relem.remove();
|
|
active_clone_input.pop();
|
|
}
|
|
}
|
|
}
|
|
|
|
let elem_type = e.target.tagName;
|
|
if (elem_type == "INPUT") {
|
|
let elem = e.target;
|
|
if (elem.type == "number") {
|
|
ui_input_release_component(elem);
|
|
} else if (elem.type == "range") {
|
|
elem = e.target.parentElement.querySelector("input[type='number']");
|
|
if (elem) {
|
|
ui_input_release_component(elem);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
let timeoutId;
|
|
|
|
function ui_input_touchmove_handler(e) {
|
|
if (cached_clone_range && cached_clone_num) {
|
|
if (e.touches) {
|
|
const rect = cached_clone_range.getBoundingClientRect();
|
|
const xoffset_min = rect.left + window.scrollX;
|
|
//const xoffset_max = (rect.right + window.scrollX);
|
|
//const yoffset_min = (rect.top + window.scrollY);
|
|
//const yoffset_max = (rect.bottom + window.scrollY);
|
|
//if( e.touches[0].pageY > yoffset_min && e.touches[0].pageY < yoffset_max && e.touches[0].pageX > xoffset_min && e.touches[0].pageX < xoffset_max){
|
|
e.preventDefault();
|
|
const percent =
|
|
parseInt(((e.touches[0].pageX - xoffset_min) / rect.width) * 10000) /
|
|
10000;
|
|
cached_clone_range.value =
|
|
percent * (cached_clone_range.max - cached_clone_range.min) +
|
|
parseFloat(cached_clone_range.min);
|
|
cached_clone_num.value = cached_clone_range.value;
|
|
//}
|
|
}
|
|
}
|
|
}
|
|
function ui_input_touchend_handler(e) {
|
|
if (cached_clone_range && cached_clone_num) {
|
|
const elem = cached_clone_range.previousElementSibling;
|
|
elem.value = cached_clone_range.value;
|
|
updateInput(elem);
|
|
}
|
|
}
|
|
|
|
function slider_contextmenu(e) {
|
|
e.preventDefault();
|
|
}
|
|
function slider_touchend(e) {
|
|
if (timeoutId) clearTimeout(timeoutId);
|
|
}
|
|
function slider_touchmove(e) {
|
|
if (timeoutId) clearTimeout(timeoutId);
|
|
}
|
|
function slider_touchstart(e) {
|
|
const gcontainer = e.target;
|
|
//gcontainer.removeEventListener('contextmenu', slider_contextmenu);
|
|
gcontainer.removeEventListener("touchend", slider_touchend);
|
|
gcontainer.removeEventListener("touchmove", slider_touchmove);
|
|
gcontainer.removeEventListener("touchend", ui_input_touchend_handler);
|
|
gcontainer.removeEventListener("touchmove", ui_input_touchmove_handler);
|
|
|
|
timeoutId = setTimeout(function () {
|
|
timeoutId = null;
|
|
focus_input = false;
|
|
e.stopPropagation();
|
|
ui_input_release_handler(e);
|
|
ui_input_touchmove_handler(e);
|
|
gcontainer.addEventListener("touchmove", ui_input_touchmove_handler, {
|
|
passive: false,
|
|
});
|
|
gcontainer.addEventListener("touchend", ui_input_touchend_handler);
|
|
}, 500);
|
|
|
|
//gcontainer.addEventListener('contextmenu', slider_contextmenu);
|
|
gcontainer.addEventListener("touchend", slider_touchend);
|
|
gcontainer.addEventListener("touchmove", slider_touchmove, {
|
|
passive: false,
|
|
});
|
|
}
|
|
|
|
function ui_dispatch_input_release(value) {
|
|
const gcontainer = gradioApp().querySelector(".gradio-container");
|
|
if (value) {
|
|
gcontainer.addEventListener("mouseover", ui_input_release_handler);
|
|
gcontainer.addEventListener("touchstart", slider_touchstart, {
|
|
passive: false,
|
|
});
|
|
} else {
|
|
gcontainer.removeEventListener("mouseover", ui_input_release_handler);
|
|
gcontainer.removeEventListener("touchstart", slider_touchstart);
|
|
//gcontainer.removeEventListener('contextmenu', slider_contextmenu);
|
|
gcontainer.removeEventListener("touchend", slider_touchend);
|
|
gcontainer.removeEventListener("touchmove", slider_touchmove);
|
|
gcontainer.removeEventListener("touchend", ui_input_touchend_handler);
|
|
gcontainer.removeEventListener("touchmove", ui_input_touchmove_handler);
|
|
}
|
|
}
|
|
gradioApp()
|
|
.querySelector("#setting_ui_dispatch_input_release input")
|
|
.addEventListener("click", function (e) {
|
|
ui_dispatch_input_release(e.target.checked);
|
|
});
|
|
ui_dispatch_input_release(opts.ui_dispatch_input_release);
|
|
|
|
// step ticks for performant input range
|
|
function ui_show_range_ticks(value, interactive) {
|
|
if (value) {
|
|
const range_selectors = "input[type='range']";
|
|
//const range_selectors = "[id$='_clone']:is(input[type='range'])";
|
|
gradioApp()
|
|
.querySelectorAll(range_selectors)
|
|
.forEach(function (elem) {
|
|
let spacing = (elem.step / (elem.max - elem.min)) * 100.0;
|
|
let tsp = "max(3px, calc(" + spacing + "% - 1px))";
|
|
let fsp = "max(4px, calc(" + spacing + "% + 0px))";
|
|
var style = elem.style;
|
|
style.setProperty(
|
|
"--ae-slider-bg-overlay",
|
|
"repeating-linear-gradient( 90deg, transparent, transparent " +
|
|
tsp +
|
|
", var(--ae-input-border-color) " +
|
|
tsp +
|
|
", var(--ae-input-border-color) " +
|
|
fsp +
|
|
" )"
|
|
);
|
|
});
|
|
} else if (interactive) {
|
|
gradioApp()
|
|
.querySelectorAll("input[type='range']")
|
|
.forEach(function (elem) {
|
|
var style = elem.style;
|
|
style.setProperty("--ae-slider-bg-overlay", "transparent");
|
|
});
|
|
}
|
|
}
|
|
gradioApp()
|
|
.querySelector("#setting_ui_show_range_ticks input")
|
|
.addEventListener("click", function (e) {
|
|
ui_show_range_ticks(e.target.checked, true);
|
|
});
|
|
ui_show_range_ticks(opts.ui_show_range_ticks);
|
|
|
|
const gradio_main = gradioApp().querySelector(".gradio-container > div.main");
|
|
function ui_no_slider_layout(value) {
|
|
if (value) {
|
|
gradio_main.classList.add("no-slider-layout");
|
|
} else {
|
|
gradio_main.classList.remove("no-slider-layout");
|
|
}
|
|
}
|
|
gradioApp()
|
|
.querySelector("#setting_ui_no_slider_layout input")
|
|
.addEventListener("click", function (e) {
|
|
ui_no_slider_layout(e.target.checked, true);
|
|
});
|
|
ui_no_slider_layout(opts.ui_no_slider_layout);
|
|
|
|
// draggable reordable quicksettings
|
|
const container = gradioApp().querySelector(
|
|
"#quicksettings_overflow_container"
|
|
);
|
|
let draggables;
|
|
let lastElemAfter;
|
|
let islastChild;
|
|
let timeout;
|
|
|
|
function preventBehavior(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
let sdCheckpointModels = [];
|
|
function getSdCheckpointModels() {
|
|
gradioApp()
|
|
.querySelectorAll("#txt2img_checkpoints_cards .card")
|
|
.forEach(function (elem, i) {
|
|
sdCheckpointModels[i] = elem.getAttribute("onclick").split('"')[1];
|
|
});
|
|
}
|
|
getSdCheckpointModels();
|
|
|
|
function remove_overrides() {
|
|
let checked_overrides = [];
|
|
gradioApp()
|
|
.querySelectorAll("#setting_ignore_overrides input")
|
|
.forEach(function (elem, i) {
|
|
if (elem.checked) {
|
|
checked_overrides[i] = elem.nextElementSibling.innerHTML;
|
|
}
|
|
});
|
|
//console.log(checked_overrides);
|
|
gradioApp()
|
|
.querySelectorAll("[id$='2img_override_settings'] .token")
|
|
.forEach(function (token) {
|
|
let token_arr = token.querySelector("span").innerHTML.split(":");
|
|
let token_name = token_arr[0];
|
|
let token_value = token_arr[1];
|
|
token_value = token_value.replaceAll(" ", "");
|
|
|
|
if (token_name.indexOf("Model hash") != -1) {
|
|
const info_label = gradioApp().querySelector(
|
|
"[id$='2img_override_settings'] label span"
|
|
);
|
|
info_label.innerHTML = "Override settings MDL: unknown";
|
|
for (let m = 0; m < sdCheckpointModels.length; m++) {
|
|
let m_str = sdCheckpointModels[m];
|
|
if (m_str.indexOf(token_value) != -1) {
|
|
info_label.innerHTML =
|
|
"Override settings <i>MDL: " + m_str.split("[")[0] + "</i>";
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (checked_overrides.indexOf(token_name) != -1) {
|
|
token.querySelector(".token-remove").click();
|
|
gradioApp()
|
|
.querySelector(
|
|
"#" + selectedTabItemId + " [id$='2img_override_settings']"
|
|
)
|
|
.parentElement.classList.add("show");
|
|
} else {
|
|
// maybe we add them again, for now we can select and add the removed tokens manually from the drop down
|
|
}
|
|
});
|
|
}
|
|
gradioApp()
|
|
.querySelector("#setting_ignore_overrides")
|
|
.addEventListener("click", function (e) {
|
|
setTimeout(function () {
|
|
remove_overrides();
|
|
}, 100);
|
|
});
|
|
|
|
function update_input_fields(tab) {
|
|
/*
|
|
let input_selectors = "#tab_"+ tab + " [id^='num_clone']:is(input[type='number'])";
|
|
gradioApp().querySelectorAll(input_selectors).forEach(function (elem){
|
|
let elem_source = elem.previousElementSibling;
|
|
elem.value = elem_source.value;
|
|
updateInput(elem);
|
|
})
|
|
*/
|
|
remove_overrides();
|
|
autoGrowPromptTextarea();
|
|
}
|
|
|
|
gradioApp()
|
|
.querySelectorAll(
|
|
"#tab_pnginfo #png_2img_results button, [id$='2img_actions_column'] #paste"
|
|
)
|
|
.forEach(function (elem) {
|
|
elem.addEventListener("click", function (e) {
|
|
let button_id;
|
|
if (e.target.id == "paste") {
|
|
button_id = e.target.nextElementSibling.id.split("_")[0];
|
|
} else {
|
|
button_id = e.target.id.split("_")[0];
|
|
}
|
|
setTimeout(function () {
|
|
update_input_fields(button_id);
|
|
}, 500);
|
|
});
|
|
});
|
|
|
|
const pnginfo = gradioApp().querySelector("#tab_pnginfo");
|
|
function forwardFromPngInfo() {
|
|
if (selectedTabItemId == "tab_txt2img") {
|
|
pnginfo.querySelector("#txt2img_tab").click();
|
|
//close generation info
|
|
gradioApp()
|
|
.querySelector(
|
|
"#txt2img_results > div:last-child > div.gradio-accordion > div.hide"
|
|
)
|
|
?.click();
|
|
|
|
const img_src = pnginfo.querySelector("img");
|
|
const gallery_parent = gradioApp().querySelector(
|
|
"#txt2img_gallery_container"
|
|
);
|
|
const live_preview = gallery_parent.querySelector(".livePreview");
|
|
if (live_preview) {
|
|
live_preview.innerHTML =
|
|
'<img width="' +
|
|
img_src.width +
|
|
'" height="' +
|
|
img_src.height +
|
|
'" src="' +
|
|
img_src.src +
|
|
'">';
|
|
} else {
|
|
const div = document.createElement("div");
|
|
div.classList.add("livePreview", "dropPreview");
|
|
div.innerHTML =
|
|
'<img width="' +
|
|
img_src.width +
|
|
'" height="' +
|
|
img_src.height +
|
|
'" src="' +
|
|
img_src.src +
|
|
'">';
|
|
gallery_parent.prepend(div);
|
|
}
|
|
} else if (selectedTabItemId == "tab_img2img") {
|
|
pnginfo.querySelector("#img2img_tab").click();
|
|
//close generation info
|
|
gradioApp()
|
|
.querySelector(
|
|
"#img2img_results > div:last-child > div.gradio-accordion > div.hide"
|
|
)
|
|
?.click();
|
|
}
|
|
}
|
|
|
|
function fetchPngInfoData(files) {
|
|
/* const oldFetch = window.fetch;
|
|
|
|
window.fetch = async (input, options) => {
|
|
const response = await oldFetch(input, options);
|
|
if( 'run/predict/' === input ) {
|
|
if(response.ok){
|
|
window.fetch = oldFetch;
|
|
}
|
|
}
|
|
return response;
|
|
}; */
|
|
|
|
const fileInput = gradioApp().querySelector(
|
|
'#pnginfo_image input[type="file"]'
|
|
);
|
|
if (fileInput.files != files) {
|
|
fileInput.files = files;
|
|
fileInput.dispatchEvent(new Event("change"));
|
|
}
|
|
|
|
setTimeout(function () {
|
|
forwardFromPngInfo();
|
|
}, 500);
|
|
}
|
|
|
|
function drop2View(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
const files = e.dataTransfer.files;
|
|
|
|
if (!isValidImageList(files)) {
|
|
return;
|
|
}
|
|
const data_image = gradioApp().querySelector(
|
|
'#pnginfo_image [data-testid="image"]'
|
|
);
|
|
data_image.querySelector('[aria-label="Clear"]')?.click();
|
|
setTimeout(function () {
|
|
fetchPngInfoData(files);
|
|
}, 1000);
|
|
}
|
|
|
|
gradioApp()
|
|
.querySelectorAll('[id$="2img_results"]')
|
|
.forEach((elem) => {
|
|
elem.addEventListener("drop", drop2View);
|
|
});
|
|
|
|
// function that gets the element next of cursor/touch
|
|
function getElementAfter(container, y) {
|
|
return draggables.reduce(
|
|
(closest, child) => {
|
|
const box = child.getBoundingClientRect();
|
|
const offset = y - box.top - box.height / 2;
|
|
if (offset < 0 && offset > closest.offset) {
|
|
return { offset: offset, element: child };
|
|
} else {
|
|
return closest;
|
|
}
|
|
},
|
|
{ offset: Number.NEGATIVE_INFINITY }
|
|
).element;
|
|
}
|
|
|
|
function dragOrderChange(elementAfter, isComplete, delem) {
|
|
if (lastElemAfter !== elementAfter || islastChild) {
|
|
if (lastElemAfter != null) {
|
|
lastElemAfter.classList.remove("marker-top", "marker-bottom");
|
|
}
|
|
|
|
if (elementAfter == null) {
|
|
islastChild = true;
|
|
lastElemAfter.classList.add("marker-bottom");
|
|
} else {
|
|
islastChild = false;
|
|
elementAfter.classList.add("marker-top");
|
|
lastElemAfter = elementAfter;
|
|
}
|
|
}
|
|
|
|
if (isComplete) {
|
|
if (elementAfter == null) {
|
|
container.append(delem);
|
|
} else {
|
|
container.insertBefore(delem, elementAfter);
|
|
}
|
|
|
|
let order_settings = "";
|
|
|
|
gradioApp()
|
|
.querySelectorAll("#quicksettings_overflow_container > div")
|
|
.forEach(function (el) {
|
|
el.classList.remove("marker-top", "marker-bottom", "dragging");
|
|
order_settings += el.id.split("row_setting_")[1] + ",";
|
|
});
|
|
//console.log(order_settings);
|
|
const setting_quicksettings = gradioApp().querySelector(
|
|
"#setting_quicksettings textarea"
|
|
);
|
|
setting_quicksettings.value = order_settings;
|
|
updateInput(setting_quicksettings);
|
|
|
|
const cEvent = new Event("click"); //submit
|
|
Object.defineProperty(cEvent, "target", { value: settings_submit });
|
|
settings_submit.dispatchEvent(cEvent);
|
|
|
|
container.classList.remove("no-scroll");
|
|
}
|
|
}
|
|
|
|
function touchmove(e) {
|
|
let y = e.touches[0].clientY;
|
|
let elementAfter = getElementAfter(container, y);
|
|
dragOrderChange(elementAfter);
|
|
}
|
|
function touchstart(e) {
|
|
e.currentTarget.draggable = "false";
|
|
let target = e.currentTarget;
|
|
// touch should be hold for 1 second
|
|
timeout = setTimeout(function () {
|
|
target.classList.add("dragging");
|
|
container.classList.add("no-scroll");
|
|
target.addEventListener("touchmove", touchmove);
|
|
container.addEventListener("touchmove", preventBehavior, {
|
|
passive: false,
|
|
});
|
|
}, 1000);
|
|
|
|
target.addEventListener("touchend", touchend);
|
|
target.addEventListener("touchcancel", touchcancel);
|
|
}
|
|
function touchend(e) {
|
|
e.currentTarget.draggable = "true";
|
|
clearTimeout(timeout);
|
|
e.currentTarget.removeEventListener("touchmove", touchmove);
|
|
container.removeEventListener("touchmove", preventBehavior);
|
|
let y = e.changedTouches[0].clientY;
|
|
let elementAfter = getElementAfter(container, y);
|
|
dragOrderChange(elementAfter, true, e.currentTarget);
|
|
}
|
|
function touchcancel(e) {
|
|
e.currentTarget.draggable = "true";
|
|
clearTimeout(timeout);
|
|
e.currentTarget.classList.remove("dragging");
|
|
e.currentTarget.removeEventListener("touchmove", touchmove);
|
|
container.removeEventListener("touchmove", preventBehavior);
|
|
}
|
|
|
|
function dragstart(e) {
|
|
e.currentTarget.draggable = "false";
|
|
e.currentTarget.classList.add("dragging");
|
|
}
|
|
function dragend(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
e.currentTarget.draggable = "true";
|
|
let y = e.clientY;
|
|
let elementAfter = getElementAfter(container, y);
|
|
dragOrderChange(elementAfter, true, e.currentTarget);
|
|
}
|
|
function dragOver(e) {
|
|
e.preventDefault();
|
|
let y = e.clientY;
|
|
let elementAfter = getElementAfter(container, y);
|
|
dragOrderChange(elementAfter);
|
|
}
|
|
|
|
function actionQuickSettingsDraggable(checked) {
|
|
if (checked) {
|
|
draggables = Array.from(
|
|
gradioApp().querySelectorAll(
|
|
"#quicksettings_overflow_container > div:not(.dragging)"
|
|
)
|
|
);
|
|
gradioApp().addEventListener("drop", preventBehavior);
|
|
} else {
|
|
gradioApp().removeEventListener("drop", preventBehavior);
|
|
}
|
|
|
|
gradioApp()
|
|
.querySelectorAll("#quicksettings_overflow_container > div")
|
|
.forEach(function (elem) {
|
|
elem.draggable = checked;
|
|
if (checked) {
|
|
elem.addEventListener("touchstart", touchstart);
|
|
elem.addEventListener("dragstart", dragstart);
|
|
elem.addEventListener("dragend", dragend);
|
|
elem.addEventListener("dragover", dragOver);
|
|
} else {
|
|
elem.removeEventListener("touchstart", touchstart, false);
|
|
elem.removeEventListener("touchend", touchend, false);
|
|
elem.removeEventListener("touchcancel", touchcancel, false);
|
|
elem.removeEventListener("touchmove", touchmove, false);
|
|
elem.removeEventListener("dragstart", dragstart, false);
|
|
elem.removeEventListener("dragend", dragend, false);
|
|
elem.removeEventListener("dragover", dragOver, false);
|
|
}
|
|
});
|
|
}
|
|
|
|
gradioApp()
|
|
.querySelector("#quicksettings_draggable")
|
|
.addEventListener("click", function (e) {
|
|
if (e.target && e.target.matches("input[type='checkbox']")) {
|
|
actionQuickSettingsDraggable(e.target.checked);
|
|
}
|
|
});
|
|
|
|
updateOpStyles();
|
|
|
|
/* anapnoe ui end */
|
|
});
|
|
|
|
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
|
|
);
|
|
}
|
|
|
|
function restart_reload() {
|
|
let bg_color = window
|
|
.getComputedStyle(gradioApp().querySelector("#header-top"))
|
|
.getPropertyValue("--ae-main-bg-color");
|
|
let primary_color = window
|
|
.getComputedStyle(gradioApp().querySelector(".icon-info"))
|
|
.getPropertyValue("--ae-primary-color");
|
|
let panel_color = window
|
|
.getComputedStyle(gradioApp().querySelector(".gradio-box"))
|
|
.getPropertyValue("--ae-panel-bg-color");
|
|
|
|
localStorage.setItem("bg_color", bg_color);
|
|
localStorage.setItem("primary_color", primary_color);
|
|
localStorage.setItem("panel_color", panel_color);
|
|
|
|
if (localStorage.hasOwnProperty("bg_color")) {
|
|
bg_color = localStorage.getItem("bg_color");
|
|
primary_color = localStorage.getItem("primary_color");
|
|
panel_color = localStorage.getItem("panel_color");
|
|
}
|
|
|
|
document.body.style.backgroundColor = bg_color;
|
|
|
|
let style = document.createElement("style");
|
|
style.type = "text/css";
|
|
style.innerHTML =
|
|
".loader{position:absolute;top:50vh;left:50vw;height:60px;width:160px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} .circles{position:absolute;left:-5px;top:0;height:60px;width:180px} .circles span{position:absolute;top:25px;height:12px;width:12px;border-radius:12px;background-color:" +
|
|
panel_color +
|
|
"} .circles span.one{right:80px} .circles span.two{right:40px} .circles span.three{right:0px} .circles{-webkit-animation:animcircles 0.5s infinite linear;animation:animcircles 0.5s infinite linear} @-webkit-keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}} @keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}} .pacman{position:absolute;left:0;top:0;height:60px;width:60px} .pacman .eye{position:absolute;top:10px;left:30px;height:7px;width:7px;border-radius:7px;background-color:" +
|
|
bg_color +
|
|
'} .pacman span{position:absolute;top:0;left:0;height:60px;width:60px} .pacman span::before{content:"";position:absolute;left:0;height:30px;width:60px;background-color:' +
|
|
primary_color +
|
|
"} .pacman .top::before{top:0;border-radius:60px 60px 0px 0px} .pacman .bottom::before{bottom:0;border-radius:0px 0px 60px 60px} .pacman .left::before{bottom:0;height:60px;width:30px;border-radius:60px 0px 0px 60px} .pacman .top{-webkit-animation:animtop 0.5s infinite;animation:animtop 0.5s infinite} @-webkit-keyframes animtop{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}} @keyframes animtop{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}} .pacman .bottom{-webkit-animation:animbottom 0.5s infinite;animation:animbottom 0.5s infinite} @-webkit-keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}} @keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}";
|
|
|
|
document.getElementsByTagName("head")[0].appendChild(style);
|
|
document.body.innerHTML =
|
|
'<div class="loader"><div class="circles"><span class="one"></span><span class="two"></span><span class="three"></span></div><div class="pacman"><span class="top"></span><span class="bottom"></span><span class="left"></span><div class="eye"></div></div></div>';
|
|
|
|
var requestPing = function () {
|
|
requestGet(
|
|
"./internal/ping",
|
|
{},
|
|
function (data) {
|
|
location.reload();
|
|
},
|
|
function () {
|
|
setTimeout(requestPing, 500);
|
|
}
|
|
);
|
|
};
|
|
|
|
setTimeout(requestPing, 2000);
|
|
|
|
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) {
|
|
const e = new Event("input", { bubbles: true });
|
|
Object.defineProperty(e, "target", { value: target });
|
|
target.dispatchEvent(e);
|
|
const eb = new Event("blur");
|
|
Object.defineProperty(eb, "target", { value: 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")) {
|
|
document.getElementsByTagName("html")[0].style.backgroundColor =
|
|
localStorage.getItem("bg_color");
|
|
document.body.style.backgroundColor = localStorage.getItem("bg_color");
|
|
}
|
|
});
|
|
|
|
window.onload = function () {
|
|
document.getElementsByTagName("html")[0].style.backgroundColor =
|
|
localStorage.getItem("bg_color");
|
|
document.body.style.backgroundColor = localStorage.getItem("bg_color");
|
|
document.body.style.display = "none";
|
|
document.body.classList.add("dark");
|
|
setTimeout(function () {
|
|
document.body.style.display = "block";
|
|
}, 1000);
|
|
};
|