ygohel18's picture
init
f555b43
function set_theme(theme) {
/*
var gradioURL = window.location.href;
if (!gradioURL.includes('?__theme=')) {
window.location.replace(gradioURL + '?__theme=' + theme);
}
*/
}
var selectedTabItemId = "tab_txt2img";
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]];
}
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();
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();
}
function switch_to_img2img() {
switch_to_img2img_tab(0);
return Array.from(arguments);
}
function switch_to_sketch() {
switch_to_img2img_tab(1);
return Array.from(arguments);
}
function switch_to_inpaint() {
switch_to_img2img_tab(2);
return Array.from(arguments);
}
function switch_to_inpaint_sketch() {
switch_to_img2img_tab(3);
return Array.from(arguments);
}
function switch_to_extras() {
gradioApp().querySelector('#tabs').querySelectorAll('button')[2].click();
return Array.from(arguments);
}
function get_tab_index(tabId) {
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 = Array.from(args);
res[0] = get_tab_index(tabId);
return res;
}
function get_img2img_tab_index() {
let res = Array.from(arguments);
res.splice(-2);
res[0] = get_tab_index('mode_img2img');
return res;
}
function create_submit_args(args) {
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;
}
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";
}
function showRestoreProgressButton(tabname, show) {
var button = gradioApp().getElementById(tabname + "_restore_progress");
if (!button) return;
button.style.display = show ? "flex" : "none";
}
function submit() {
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() {
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;
}
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() {});
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];
}
var promptTokecountUpdateFuncs = {};
function recalculatePromptTokens(name) {
if (promptTokecountUpdateFuncs[name]) {
promptTokecountUpdateFuncs[name]();
}
}
function recalculate_prompts_txt2img() {
recalculatePromptTokens('txt2img_prompt');
recalculatePromptTokens('txt2img_neg_prompt');
return Array.from(arguments);
}
function recalculate_prompts_img2img() {
recalculatePromptTokens('img2img_prompt');
recalculatePromptTokens('img2img_neg_prompt');
return Array.from(arguments);
}
var opts = {};
onUiUpdate(function() {
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);
},
});
//console.log(opts);
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 clickedOutside(e) {
//console.log(e.target.getAttribute('data-testid'));
if (
e.target.getAttribute("data-testid") != "textbox" &&
e.target.getAttribute("data-testid")
) {
if (net_menu_open && e.target.closest('[id$="2img_settings_scroll"]'))
net_menu.click();
}
}
function toggleNetMenu(e) {
closeAsideViews(net_menu);
net_menu_open = !net_menu_open;
e.preventDefault();
e.stopPropagation();
toggleMenu(net_menu_open, net_menu, net_container, clickedOutside);
}
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 generateOnRepeat(elem, isforever) {
if (elem.generateOnRepeatInterval != null)
clearInterval(elem.generateOnRepeatInterval);
if (isforever) {
const generate_button = elem.previousElementSibling;
elem.generateOnRepeatInterval = setInterval(function () {
if (window.getComputedStyle(generate_button).display !== "none") {
generate_button.click();
}
}, 500);
}
}
function toggleGenerateForever(e) {
e.target.classList.toggle("active");
if (e.target.className.indexOf("active") != -1) {
generateOnRepeat(e.target, true);
} else {
generateOnRepeat(e.target, false);
}
e.preventDefault();
e.stopPropagation();
}
gradioApp()
.querySelectorAll('button[id*="2img_generate_forever"]')
.forEach((elem) => {
elem.addEventListener("click", toggleGenerateForever);
});
/* let generateOnRepeat = function (genbuttonid, interruptbuttonid) {
let genbutton = gradioApp().querySelector(genbuttonid);
let interruptbutton = gradioApp().querySelector(interruptbuttonid);
if (!interruptbutton.offsetParent) {
genbutton.click();
}
clearInterval(window.generateOnRepeatInterval);
window.generateOnRepeatInterval = setInterval(function () {
if (!interruptbutton.offsetParent) {
genbutton.click();
}
}, 500);
};
appendContextMenuOption("#txt2img_generate", "Generate forever", function () {
generateOnRepeat("#txt2img_generate", "#txt2img_interrupt");
});
appendContextMenuOption("#img2img_generate", "Generate forever", function () {
generateOnRepeat("#img2img_generate", "#img2img_interrupt");
});
let cancelGenerateForever = function () {
clearInterval(window.generateOnRepeatInterval);
}; */
//
/*
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);
}
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);
};
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 [];
}