mirror of
https://github.com/anapnoe/stable-diffusion-webui-ux.git
synced 2026-08-30 17:10:52 +02:00
anapnoe
1040 lines
33 KiB
JavaScript
1040 lines
33 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 selected_gallery_index(){
|
|
var buttons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery] .gallery-item')
|
|
var button = gradioApp().querySelector('[style="display: block;"].tabitem div[id$=_gallery] .gallery-item.\\!ring-2')
|
|
|
|
var result = -1
|
|
buttons.forEach(function(v, i){ if(v==button) { result = i } })
|
|
|
|
return result
|
|
}
|
|
|
|
function extract_image_from_gallery(gallery){
|
|
if(gallery.length == 1){
|
|
return [gallery[0]]
|
|
}
|
|
|
|
index = selected_gallery_index()
|
|
|
|
if (index < 0 || index >= gallery.length){
|
|
return [null]
|
|
}
|
|
|
|
return [gallery[index]];
|
|
}
|
|
|
|
function args_to_array(args){
|
|
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('bg-white') != -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){
|
|
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 submit(){
|
|
rememberGallerySelection('txt2img_gallery')
|
|
showSubmitButtons('txt2img', false)
|
|
|
|
var id = randomId()
|
|
requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function(){
|
|
showSubmitButtons('txt2img', true)
|
|
|
|
})
|
|
|
|
var res = create_submit_args(arguments)
|
|
|
|
res[0] = id
|
|
|
|
return res
|
|
}
|
|
|
|
function submit_img2img(){
|
|
rememberGallerySelection('img2img_gallery')
|
|
showSubmitButtons('img2img', false)
|
|
|
|
var id = randomId()
|
|
requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function(){
|
|
showSubmitButtons('img2img', true)
|
|
})
|
|
|
|
var res = create_submit_args(arguments)
|
|
|
|
res[0] = id
|
|
res[1] = get_tab_index('mode_img2img')
|
|
|
|
return res
|
|
}
|
|
|
|
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) {
|
|
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);
|
|
}
|
|
|
|
|
|
|
|
|
|
opts = {}
|
|
onUiUpdate(function(){
|
|
if(Object.keys(opts).length != 0) return;
|
|
|
|
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')
|
|
|
|
show_all_pages = gradioApp().getElementById('settings_show_all_pages')
|
|
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
|
|
*/
|
|
|
|
/* auto grow textarea */
|
|
gradioApp().querySelectorAll('[id $= "_prompt"] textarea, [id^="setting_"] 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 + 'px';
|
|
});
|
|
|
|
elem.addEventListener('focus', function (e) {
|
|
e.target.style.minHeight = 'auto';
|
|
e.target.style.minHeight = e.target.scrollHeight + offset + 'px';
|
|
});
|
|
});
|
|
|
|
|
|
/* anapnoe ui start */
|
|
/* 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';
|
|
}
|
|
})
|
|
|
|
})
|
|
|
|
|
|
let selectedTabItemId = "tab_txt2img";
|
|
let net_container = gradioApp().querySelector('#txt2img_extra_networks_row');
|
|
let net_menu_open = false;
|
|
const net_menu = gradioApp().querySelector('#extra_networks_menu');
|
|
|
|
/* 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.bg-white, #nav_menu_header_tabs > button.bg-white').forEach(function (tab){
|
|
tab.classList.remove("bg-white");
|
|
})
|
|
|
|
gradioApp().querySelectorAll('#tabs > div > button:nth-child('+(idx+1)+'), #nav_menu_header_tabs > button:nth-child('+(idx+1)+')').forEach(function (tab){
|
|
tab.classList.add("bg-white");
|
|
})
|
|
//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);
|
|
})
|
|
|
|
netMenuVisibility();
|
|
}
|
|
|
|
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")){
|
|
toggleMenu(net_menu_open, net_menu, net_container, null);
|
|
net_menu.style.display = "block";
|
|
}else{
|
|
net_menu.style.display = "none";
|
|
}
|
|
}else{
|
|
net_menu.style.display = "none";
|
|
}
|
|
}
|
|
|
|
// 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();
|
|
}
|
|
}
|
|
|
|
// 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) {
|
|
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);
|
|
|
|
function toggleNetMenu(e) {
|
|
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);
|
|
})
|
|
|
|
|
|
// 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);
|
|
}
|
|
|
|
// livePreview contain - scale
|
|
function imagePreviewFitMethod(value) {
|
|
styleobj.ui_fit = ".livePreview img {object-fit:" + value + ";}";
|
|
}
|
|
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 = ":host{--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 = ":host{--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){
|
|
const iEvent = new Event("input");
|
|
Object.defineProperty(iEvent, "target", {value: setting})
|
|
setting.dispatchEvent(iEvent);
|
|
}
|
|
|
|
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";
|
|
//tabitem.classList.add("wtf");
|
|
}else{
|
|
tabitem.style.display = "none";
|
|
//tabitem.classList.remove("wtf");
|
|
}
|
|
})
|
|
}
|
|
|
|
function navTabClicked(e){
|
|
const idx = parseInt(e.currentTarget.getAttribute("tab-id"));
|
|
console.log(idx);
|
|
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="gr-input-label flex items-center text-gray-700 text-sm space-x-2 border py-1.5 px-3 rounded-lg cursor-pointer bg-white shadow-sm checked:shadow-inner"><input type="checkbox" name="uiha" class="gr-check-radio gr-radio" '+checked_hidden+' value="'+elem.innerText+'"><span class="ml-2" title="">'+elem.innerText+'</span></label>';
|
|
radio_header_html += '<label class="gr-input-label flex items-center text-gray-700 text-sm space-x-2 border py-1.5 px-3 rounded-lg cursor-pointer bg-white shadow-sm checked:shadow-inner"><input type="checkbox" name="uihb" class="gr-check-radio gr-radio" '+checked_header+' value="'+elem.innerText+'"><span class="ml-2" title="">'+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");
|
|
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");
|
|
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();
|
|
|
|
// add - remove quicksettings
|
|
const settings_submit = gradioApp().querySelector('#settings_submit');
|
|
const quick_parent = gradioApp().querySelector("#quicksettings_overflow_container");
|
|
|
|
function add2quickSettings(id, section, checked){
|
|
const setting_quicksettings = gradioApp().querySelector('#setting_quicksettings textarea');
|
|
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);
|
|
}else{
|
|
field_settings = field_settings.replaceAll(id, ",");
|
|
const setting_parent = gradioApp().querySelector("#"+section+"_settings_2img_settings");
|
|
let quick_row = gradioApp().querySelector('#row_setting_'+id);
|
|
//console.log(quick_row);
|
|
setting_parent.append(quick_row);
|
|
|
|
}
|
|
field_settings = field_settings.replace(/,{2,}/g, ',');
|
|
setting_quicksettings.value = field_settings;
|
|
|
|
const iEvent = new Event("input");
|
|
Object.defineProperty(iEvent, "target", {value: setting_quicksettings})
|
|
setting_quicksettings.dispatchEvent(iEvent);
|
|
|
|
const cEvent = new Event("click");//submit
|
|
Object.defineProperty(cEvent, "target", {value: settings_submit})
|
|
settings_submit.dispatchEvent(cEvent);
|
|
//settings_submit.click();
|
|
//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');
|
|
elem_input.addEventListener('click', function (e) {
|
|
add2quickSettings(tid, sid, e.target.checked);
|
|
})
|
|
})
|
|
|
|
|
|
// 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;
|
|
}
|
|
|
|
// 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;
|
|
const iEvent = new Event("input");
|
|
Object.defineProperty(iEvent, "target", {value: setting_quicksettings})
|
|
setting_quicksettings.dispatchEvent(iEvent);
|
|
|
|
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(){
|
|
elem = gradioApp().getElementById('sd_checkpoint_hash')
|
|
sd_checkpoint_hash = opts.sd_checkpoint_hash || ""
|
|
shorthash = sd_checkpoint_hash.substr(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(){
|
|
|
|
|
|
|
|
//document.html.innerHTML +='<style id="cool">body{background-color:#550000!important;}</style> ';
|
|
document.body.style.backgroundColor = "#1a1a1a";
|
|
document.body.innerHTML='<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
|
|
setTimeout(function(){location.reload()},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){
|
|
let e = new Event("input", { bubbles: true })
|
|
Object.defineProperty(e, "target", {value: target})
|
|
target.dispatchEvent(e);
|
|
}
|
|
|
|
|
|
var desiredCheckpointName = null;
|
|
function selectCheckpoint(name){
|
|
desiredCheckpointName = name;
|
|
gradioApp().getElementById('change_checkpoint').click()
|
|
}
|
|
|
|
|