From ca6d67952e07a184659fe465a45409fe766d8a6e Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Fri, 10 Mar 2023 14:06:38 +0200 Subject: [PATCH] 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 --- javascript/ui.js | 146 +++++++++++++++++++++++++++++++++------------- modules/shared.py | 3 +- style.css | 51 ++++++++++++++-- 3 files changed, 154 insertions(+), 46 deletions(-) diff --git a/javascript/ui.js b/javascript/ui.js index 2001a6c2..80af55ad 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -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; diff --git a/modules/shared.py b/modules/shared.py index a07e08e7..9b788d90 100644 --- a/modules/shared.py +++ b/modules/shared.py @@ -471,8 +471,9 @@ options_templates.update(options_section(('ui', "User interface"), { "ui_header_tabs": OptionInfo("", "Header Tabs"), "ui_views_order": OptionInfo("row-reverse", "Interface order input/parameters | output/preview", gr.Radio, {"choices": ["row", "row-reverse"]}), "ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order"), - "ui_performant_gradio_input_components": OptionInfo("", "Performant gradio input components. Use css selectors"), + "ui_performant_gradio_input_components": OptionInfo("", "Performant gradio components is enabled for all main tabs and scripts. Use css selectors only for extensions that have their own tab"), "ui_output_image_fit": OptionInfo("Scale-down", "Generated image fit method", gr.Radio, {"choices": ["Scale-down", "Contain"]}), + "ui_show_range_ticks": OptionInfo(True, "Show ticks for range sliders"), "localization": OptionInfo("None", "Localization (requires restart)", gr.Dropdown, lambda: {"choices": ["None"] + list(localization.localizations.keys())}, refresh=lambda: localization.list_localizations(cmd_opts.localizations_dir)), })) diff --git a/style.css b/style.css index c90de04e..1e883957 100644 --- a/style.css +++ b/style.css @@ -30,6 +30,8 @@ License: GNU General Public License --processing-border : 2px; --processing-border-double: var(--processing-border) * 2; + + --slider-bg-overlay : transparent; @@ -1201,7 +1203,16 @@ input /***********************/ /* Accordion */ /***********************/ - +/* +.dark .dark\:hover\:border-gray-600>div.cursor-pointer { + background-color: var(--panel-bg-color); + border-radius: var(--panel-border-radius); +} +.dark .dark\:hover\:border-gray-600:hover>div.cursor-pointer { + background-color: var(--primary-color)!important; + border-radius: var(--panel-border-radius); +} +*/ .dark .dark\:hover\:border-gray-600:hover { border: 1px solid var(--primary-color)!important; @@ -1214,6 +1225,7 @@ input padding-top: var(--max-padding) !important; padding-bottom: var(--max-padding) !important; width: auto !important; + } .dark .dark\:hover\:border-gray-600>div.cursor-pointer+div { @@ -2938,6 +2950,9 @@ ul.list-none { text-align: center; color:var(--primary-color); } +#settings_sd #row_setting_sd_model_checkpoint{ + display:none; +} /******************/ @@ -3613,7 +3628,17 @@ li.coffee-circle { -webkit-appearance: none; background-color: var(--input-bg-color); border: 1px solid var(--input-border-color); + position:relative; } + input[type=range]::after { + content: ''; + position: absolute; + height: 13px; + background-image: var(--slider-bg-overlay); + opacity: 0.15; + width: 100%; + } + input[type=range]::-webkit-slider-runnable-track { height: 14px; @@ -3623,12 +3648,12 @@ li.coffee-circle { } input[type=range]::-webkit-slider-thumb { - width: 14px; + width: 0px; -webkit-appearance: none; height: 14px; cursor: ew-resize; background-color: var(--primary-color); - box-shadow: -1024px 0 0 1024px var(--primary-color); + box-shadow: -1024px 0 0 1024px var(--primary-color); } [id$="_sub-group"] input[type=range] @@ -3653,6 +3678,15 @@ input[type=range]::-moz-range-track { background-color: var(--input-bg-color); } +input[type=range]::after:: { + content: ''; + position: absolute; + height: 13px; + background-image: var(--slider-bg-overlay); + opacity: 0.15; + width: 100%; +} + [id$="2img_results"], [id$="2img_settings_scroll"] { @@ -3670,13 +3704,20 @@ input[type=range]::-moz-range-track { background-color: var(--input-bg-color); border: none; border-radius: 0px; + + position: relative; + height: 100%; + background-image: var(--slider-bg-overlay); + opacity: 0.15; + width: 100%; } input[type=range]::-moz-range-thumb { - border: 1px solid var(--primary-color); - width: 14px; + border: 0px solid var(--primary-color); + width: 0px; border-radius: 0%; background-color: var(--primary-color); + } /*hide the outline behind the border*/