mirror of
https://github.com/anapnoe/stable-diffusion-webui-ux.git
synced 2026-09-17 16:25:03 +02:00
cool ticks for performant range input
performant components input number and range are now applied to all main tabs and scripts by default, extensions that have their own tab can utilize this feature by providing the parent tab id of the extension in the ui settings options
This commit is contained in:
anapnoe
+106
-40
@@ -201,12 +201,14 @@ function recalculatePromptTokens(name){
|
||||
}
|
||||
|
||||
function recalculate_prompts_txt2img(){
|
||||
//console.log("txt2img_prompt");
|
||||
recalculatePromptTokens('txt2img_prompt')
|
||||
recalculatePromptTokens('txt2img_neg_prompt')
|
||||
return args_to_array(arguments);
|
||||
}
|
||||
|
||||
function recalculate_prompts_img2img(){
|
||||
//console.log("img2img_prompt");
|
||||
recalculatePromptTokens('img2img_prompt')
|
||||
recalculatePromptTokens('img2img_neg_prompt')
|
||||
return args_to_array(arguments);
|
||||
@@ -386,10 +388,6 @@ onUiUpdate(function(){
|
||||
|
||||
|
||||
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));
|
||||
@@ -420,26 +418,26 @@ onUiUpdate(function(){
|
||||
if(tab.innerHTML.indexOf("Theme") != -1) tab.style.display = "none";
|
||||
|
||||
})
|
||||
// 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();
|
||||
}
|
||||
|
||||
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;
|
||||
@@ -459,7 +457,7 @@ onUiUpdate(function(){
|
||||
let rect=el.getBoundingClientRect();
|
||||
return {x:rect.left,y:rect.top};
|
||||
}
|
||||
|
||||
|
||||
function toggleMenu(isopen, icon, panel, func) {
|
||||
if(isopen){
|
||||
panel.classList.add("open");
|
||||
@@ -473,7 +471,35 @@ onUiUpdate(function(){
|
||||
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")){
|
||||
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";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// mobile nav menu
|
||||
const tabs_menu = gradioApp().querySelector('#tabs > div:first-child');
|
||||
const nav_menu = gradioApp().querySelector('#nav_menu');
|
||||
@@ -489,13 +515,12 @@ onUiUpdate(function(){
|
||||
}
|
||||
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) {
|
||||
closeNavMenus(quick_menu);
|
||||
closeAsideViews(quick_menu);
|
||||
quick_menu_open = !quick_menu_open;
|
||||
const withinBoundaries = e.composedPath().includes(quicksettings_overflow);
|
||||
if(!quick_menu_open && withinBoundaries){
|
||||
@@ -511,7 +536,7 @@ onUiUpdate(function(){
|
||||
|
||||
// extra networks nav menu
|
||||
function toggleNetMenu(e) {
|
||||
closeNavMenus(net_menu);
|
||||
closeAsideViews(net_menu);
|
||||
net_menu_open = !net_menu_open;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@@ -522,14 +547,12 @@ onUiUpdate(function(){
|
||||
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) {
|
||||
closeNavMenus(theme_menu);
|
||||
closeAsideViews(theme_menu);
|
||||
theme_menu_open = !theme_menu_open;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@@ -538,13 +561,6 @@ onUiUpdate(function(){
|
||||
}
|
||||
theme_menu.addEventListener('click', toggleThemeMenu);
|
||||
|
||||
// close open aside views
|
||||
function closeNavMenus(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();
|
||||
}
|
||||
|
||||
const theme_tab = gradioApp().querySelector('#tab_ui_theme');
|
||||
function theme_aside(value){
|
||||
if(value){
|
||||
@@ -556,7 +572,7 @@ onUiUpdate(function(){
|
||||
if(theme_tab) theme_aside(true);
|
||||
|
||||
function disabled_extensions(value){
|
||||
console.log(value);
|
||||
//console.log(value);
|
||||
if(value){
|
||||
theme_menu.classList.remove("hidden");
|
||||
}else{
|
||||
@@ -585,6 +601,7 @@ onUiUpdate(function(){
|
||||
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 + ";}";
|
||||
@@ -879,7 +896,7 @@ onUiUpdate(function(){
|
||||
// performant dispatch for gradio's range slider and input number fields
|
||||
function ui_performant_gradio_input_components(sel){
|
||||
let selectors = sel.split(",");
|
||||
selectors.push("#quicksettings_overflow_container");
|
||||
selectors.push("#quicksettings_overflow_container", "#tab_txt2img", "#tab_img2img", "#tab_extras", "#tab_modelmerger", "#tab_ti");
|
||||
selectors = selectors.filter(e => e);
|
||||
for (let i = 0; i < selectors.length; i++) {
|
||||
selectors[i] = selectors[i]+" input[type='number']";
|
||||
@@ -890,8 +907,11 @@ onUiUpdate(function(){
|
||||
let parent = elem.parentElement;
|
||||
let label = parent.querySelector("label");
|
||||
|
||||
//console.log(elem.value);
|
||||
|
||||
let clone_num = elem.cloneNode(true);
|
||||
clone_num.id = "num_clone_"+index;
|
||||
clone_num.id = "num_clone_"+index;
|
||||
clone_num.value = elem.value;
|
||||
parent.append(clone_num);
|
||||
elem.style.display = "none";
|
||||
|
||||
@@ -903,7 +923,8 @@ onUiUpdate(function(){
|
||||
if(label){
|
||||
let comp_range = parent.parentElement.parentElement.querySelector("input[type='range']");
|
||||
let clone_range = comp_range.cloneNode(true);
|
||||
clone_range.id = comp_range.id+"_clone";
|
||||
clone_range.id = comp_range.id+"_clone";
|
||||
clone_range.value = comp_range.value;
|
||||
comp_range.parentElement.append(clone_range);
|
||||
comp_range.style.display = "none";
|
||||
|
||||
@@ -923,6 +944,29 @@ onUiUpdate(function(){
|
||||
}
|
||||
ui_performant_gradio_input_components(opts.ui_performant_gradio_input_components);
|
||||
|
||||
// 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+'% - 2px))';
|
||||
let fsp = 'max(4px, calc('+spacing+'% + 0px))';
|
||||
var style = elem.style;
|
||||
style.setProperty('--slider-bg-overlay', 'repeating-linear-gradient( 90deg, transparent, transparent '+tsp+', var(--input-border-color) '+tsp+', var(--input-border-color) '+fsp+' )');
|
||||
})
|
||||
}else if(interactive){
|
||||
gradioApp().querySelectorAll("input[type='range']").forEach(function (elem){
|
||||
var style = elem.style;
|
||||
style.setProperty('--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);
|
||||
|
||||
// draggable reordable quicksettings
|
||||
const container = gradioApp().querySelector("#quicksettings_overflow_container");
|
||||
@@ -937,6 +981,23 @@ onUiUpdate(function(){
|
||||
return false;
|
||||
}
|
||||
|
||||
function update_performant_inputs(tab){
|
||||
let input_selectors = "#tab_"+ tab + " [id^='num_clone']:is(input[type='number'])";
|
||||
//console.log(input_selectors);
|
||||
gradioApp().querySelectorAll(input_selectors).forEach(function (elem){
|
||||
let elem_source = elem.previousElementSibling;
|
||||
elem.value = elem_source.value;
|
||||
updateInput(elem);
|
||||
})
|
||||
}
|
||||
|
||||
gradioApp().querySelectorAll("#tab_pnginfo #png_2img_results button").forEach(function (elem){
|
||||
elem.addEventListener('click', function (e) {
|
||||
const button_id = e.target.id.split("_")[0];
|
||||
setTimeout(function() { update_performant_inputs(button_id); }, 500);
|
||||
})
|
||||
})
|
||||
|
||||
const pnginfo = gradioApp().querySelector("#tab_pnginfo");
|
||||
function forwardFromPngInfo(){
|
||||
if(selectedTabItemId == "tab_txt2img"){
|
||||
@@ -953,8 +1014,9 @@ onUiUpdate(function(){
|
||||
gallery_parent.prepend(div);
|
||||
}
|
||||
}else if(selectedTabItemId == "tab_img2img"){
|
||||
pnginfo.querySelector('#img2img_tab').click();
|
||||
pnginfo.querySelector('#img2img_tab').click();
|
||||
}
|
||||
//setTimeout(function() { update_performant_inputs(button_id.split("_")[0]); }, 100);
|
||||
}
|
||||
|
||||
function fetchPngInfoData(files){
|
||||
@@ -1171,6 +1233,8 @@ let token_timeouts = {};
|
||||
|
||||
function update_txt2img_tokens(...args) {
|
||||
update_token_counter("txt2img_token_button")
|
||||
//setTimeout(function() { update_performant_inputs("txt2img"); }, 500);
|
||||
console.log("update_txt2img_tokens");
|
||||
if (args.length == 2)
|
||||
return args[0]
|
||||
return args;
|
||||
@@ -1178,6 +1242,8 @@ function update_txt2img_tokens(...args) {
|
||||
|
||||
function update_img2img_tokens(...args) {
|
||||
update_token_counter("img2img_token_button")
|
||||
console.log("update_img2img_tokens");
|
||||
//setTimeout(function() { update_performant_inputs("img2img"); }, 500);
|
||||
if (args.length == 2)
|
||||
return args[0]
|
||||
return args;
|
||||
|
||||
Reference in New Issue
Block a user