From 5ef7590324891ec7263c767d178a51827a6f9b33 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sun, 16 Jul 2023 11:38:59 +0300 Subject: always show extra networks tabs in the UI --- javascript/extraNetworks.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'javascript') diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index e453094a..1835717b 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -2,16 +2,14 @@ function setupExtraNetworksForTab(tabname) { gradioApp().querySelector('#' + tabname + '_extra_tabs').classList.add('extra-networks'); var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div'); - var search = gradioApp().querySelector('#' + tabname + '_extra_search textarea'); + var searchDiv = gradioApp().getElementById(tabname + '_extra_search'); + var search = searchDiv.querySelector('textarea'); var sort = gradioApp().getElementById(tabname + '_extra_sort'); var sortOrder = gradioApp().getElementById(tabname + '_extra_sortorder'); var refresh = gradioApp().getElementById(tabname + '_extra_refresh'); - search.classList.add('search'); - sort.classList.add('sort'); - sortOrder.classList.add('sortorder'); sort.dataset.sortkey = 'sortDefault'; - tabs.appendChild(search); + tabs.appendChild(searchDiv); tabs.appendChild(sort); tabs.appendChild(sortOrder); tabs.appendChild(refresh); -- cgit v1.2.3 From 543ea5730b8c2eea271739cab74bd962b45a4fea Mon Sep 17 00:00:00 2001 From: w-e-w <40751091+w-e-w@users.noreply.github.com> Date: Mon, 17 Jul 2023 16:15:52 +0900 Subject: fix extra search button --- javascript/extraNetworks.js | 2 +- modules/ui_extra_networks.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'javascript') diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index 1835717b..2361144a 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -177,7 +177,7 @@ function saveCardPreview(event, tabname, filename) { } function extraNetworksSearchButton(tabs_id, event) { - var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea'); + var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > label > textarea'); var button = event.target; var text = button.classList.contains("search-all") ? "" : button.textContent.trim(); diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index c11f1d5b..b913cb3e 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -163,7 +163,7 @@ class ExtraNetworksPage: subdirs = {"": 1, **subdirs} subdirs_html = "".join([f""" - """ for subdir in subdirs]) -- cgit v1.2.3 From 246d1f1f706262b6e6f2cdc62de853f90e86a240 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Wed, 26 Jul 2023 09:19:46 +0300 Subject: delete scale checker script due to user demand --- javascript/badScaleChecker.js | 108 ------------------------------------------ 1 file changed, 108 deletions(-) delete mode 100644 javascript/badScaleChecker.js (limited to 'javascript') diff --git a/javascript/badScaleChecker.js b/javascript/badScaleChecker.js deleted file mode 100644 index 625ad309..00000000 --- a/javascript/badScaleChecker.js +++ /dev/null @@ -1,108 +0,0 @@ -(function() { - var ignore = localStorage.getItem("bad-scale-ignore-it") == "ignore-it"; - - function getScale() { - var ratio = 0, - screen = window.screen, - ua = navigator.userAgent.toLowerCase(); - - if (window.devicePixelRatio !== undefined) { - ratio = window.devicePixelRatio; - } else if (~ua.indexOf('msie')) { - if (screen.deviceXDPI && screen.logicalXDPI) { - ratio = screen.deviceXDPI / screen.logicalXDPI; - } - } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) { - ratio = window.outerWidth / window.innerWidth; - } - - return ratio == 0 ? 0 : Math.round(ratio * 100); - } - - var showing = false; - - var div = document.createElement("div"); - div.style.position = "fixed"; - div.style.top = "0px"; - div.style.left = "0px"; - div.style.width = "100vw"; - div.style.backgroundColor = "firebrick"; - div.style.textAlign = "center"; - div.style.zIndex = 99; - - var b = document.createElement("b"); - b.innerHTML = 'Bad Scale: ??% '; - - div.appendChild(b); - - var note1 = document.createElement("p"); - note1.innerHTML = "Change your browser or your computer settings!"; - note1.title = 'Just make sure "computer-scale" * "browser-scale" = 100% ,\n' + - "you can keep your computer-scale and only change this page's scale,\n" + - "for example: your computer-scale is 125%, just use [\"CTRL\"+\"-\"] to make your browser-scale of this page to 80%."; - div.appendChild(note1); - - var note2 = document.createElement("p"); - note2.innerHTML = " Otherwise, it will cause this page to not function properly!"; - note2.title = "When you click \"Copy image to: [inpaint sketch]\" in some img2img's tab,\n" + - "if scale<100% the canvas will be invisible,\n" + - "else if scale>100% this page will take large amount of memory and CPU performance."; - div.appendChild(note2); - - var btn = document.createElement("button"); - btn.innerHTML = "Click here to ignore"; - - div.appendChild(btn); - - function tryShowTopBar(scale) { - if (showing) return; - - b.innerHTML = 'Bad Scale: ' + scale + '% '; - - var updateScaleTimer = setInterval(function() { - var newScale = getScale(); - b.innerHTML = 'Bad Scale: ' + newScale + '% '; - if (newScale == 100) { - var p = div.parentNode; - if (p != null) p.removeChild(div); - showing = false; - clearInterval(updateScaleTimer); - check(); - } - }, 999); - - btn.onclick = function() { - clearInterval(updateScaleTimer); - var p = div.parentNode; - if (p != null) p.removeChild(div); - ignore = true; - showing = false; - localStorage.setItem("bad-scale-ignore-it", "ignore-it"); - }; - - document.body.appendChild(div); - } - - function check() { - if (!ignore) { - var timer = setInterval(function() { - var scale = getScale(); - if (scale != 100 && !ignore) { - tryShowTopBar(scale); - clearInterval(timer); - } - if (ignore) { - clearInterval(timer); - } - }, 999); - } - } - - if (document.readyState != "complete") { - document.onreadystatechange = function() { - if (document.readyState != "complete") check(); - }; - } else { - check(); - } -})(); -- cgit v1.2.3 From fb87a05fe8364c8871538355a8e24587c733a492 Mon Sep 17 00:00:00 2001 From: Aarni Koskela Date: Mon, 31 Jul 2023 11:23:26 +0200 Subject: Don't crash if out of local storage quota Fixes #12206 (works around it) --- javascript/ui.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) (limited to 'javascript') diff --git a/javascript/ui.js b/javascript/ui.js index d70a681b..abf23a78 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -152,7 +152,11 @@ function submit() { showSubmitButtons('txt2img', false); var id = randomId(); - localStorage.setItem("txt2img_task_id", id); + try { + localStorage.setItem("txt2img_task_id", id); + } catch (e) { + console.warn(`Failed to save txt2img task id to localStorage: ${e}`); + } requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() { showSubmitButtons('txt2img', true); @@ -171,7 +175,11 @@ function submit_img2img() { showSubmitButtons('img2img', false); var id = randomId(); - localStorage.setItem("img2img_task_id", id); + try { + localStorage.setItem("img2img_task_id", id); + } catch (e) { + console.warn(`Failed to save img2img task id to localStorage: ${e}`); + } requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() { showSubmitButtons('img2img', true); @@ -191,8 +199,6 @@ 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); -- cgit v1.2.3 From 6a0d498c8ec5287a75e2a3bc8a4fa79e82e64c18 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Tue, 1 Aug 2023 12:50:23 +0300 Subject: support tooltip kwarg for gradio elements --- javascript/hints.js | 11 +++++++++++ modules/scripts.py | 14 ++++++++++++++ 2 files changed, 25 insertions(+) (limited to 'javascript') diff --git a/javascript/hints.js b/javascript/hints.js index 4167cb28..6de9372e 100644 --- a/javascript/hints.js +++ b/javascript/hints.js @@ -190,3 +190,14 @@ onUiUpdate(function(mutationRecords) { tooltipCheckTimer = setTimeout(processTooltipCheckNodes, 1000); } }); + +onUiLoaded(function() { + for (var comp of window.gradio_config.components) { + if (comp.props.webui_tooltip && comp.props.elem_id) { + var elem = gradioApp().getElementById(comp.props.elem_id); + if (elem) { + elem.title = comp.props.webui_tooltip; + } + } + } +}); diff --git a/modules/scripts.py b/modules/scripts.py index 5b4edcac..edf7347e 100644 --- a/modules/scripts.py +++ b/modules/scripts.py @@ -646,6 +646,8 @@ def add_classes_to_gradio_component(comp): def IOComponent_init(self, *args, **kwargs): + self.webui_tooltip = kwargs.pop('tooltip', None) + if scripts_current is not None: scripts_current.before_component(self, **kwargs) @@ -663,8 +665,20 @@ def IOComponent_init(self, *args, **kwargs): return res +def Block_get_config(self): + config = original_Block_get_config(self) + + webui_tooltip = getattr(self, 'webui_tooltip', None) + if webui_tooltip: + config["webui_tooltip"] = webui_tooltip + + return config + + original_IOComponent_init = gr.components.IOComponent.__init__ +original_Block_get_config = gr.components.Block.get_config gr.components.IOComponent.__init__ = IOComponent_init +gr.components.Block.get_config = Block_get_config def BlockContext_init(self, *args, **kwargs): -- cgit v1.2.3 From 82b415c9c141d8616e1e9ccb55e47a1884d652ba Mon Sep 17 00:00:00 2001 From: daxijiu <127850313+daxijiu@users.noreply.github.com> Date: Fri, 4 Aug 2023 16:03:49 +0800 Subject: fix some content are ignore by localization in setting "Face restoration model" and "Select which Real-ESRGAN models" and in extras "upscaler 1 & 2" are ignore by localization --- javascript/localization.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'javascript') diff --git a/javascript/localization.js b/javascript/localization.js index eb22b8a7..0c9032f9 100644 --- a/javascript/localization.js +++ b/javascript/localization.js @@ -11,11 +11,11 @@ var ignore_ids_for_localization = { train_hypernetwork: 'OPTION', txt2img_styles: 'OPTION', img2img_styles: 'OPTION', - setting_random_artist_categories: 'SPAN', - setting_face_restoration_model: 'SPAN', - setting_realesrgan_enabled_models: 'SPAN', - extras_upscaler_1: 'SPAN', - extras_upscaler_2: 'SPAN', + setting_random_artist_categories: 'OPTION', + setting_face_restoration_model: 'OPTION', + setting_realesrgan_enabled_models: 'OPTION', + extras_upscaler_1: 'OPTION', + extras_upscaler_2: 'OPTION', }; var re_num = /^[.\d]+$/; -- cgit v1.2.3 From e053e21af6563e9b42347b484f307fdcabb85f3c Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sat, 5 Aug 2023 08:48:03 +0300 Subject: put localStorage stuff into its own file --- .eslintrc.js | 4 ++++ javascript/localStorage.js | 26 ++++++++++++++++++++++++++ javascript/ui.js | 24 ++++++++---------------- 3 files changed, 38 insertions(+), 16 deletions(-) create mode 100644 javascript/localStorage.js (limited to 'javascript') diff --git a/.eslintrc.js b/.eslintrc.js index f33aca09..e3b4fb76 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -87,5 +87,9 @@ module.exports = { modalNextImage: "readonly", // token-counters.js setupTokenCounters: "readonly", + // localStorage.js + localSet: "readonly", + localGet: "readonly", + localRemove: "readonly" } }; diff --git a/javascript/localStorage.js b/javascript/localStorage.js new file mode 100644 index 00000000..dc1a36c3 --- /dev/null +++ b/javascript/localStorage.js @@ -0,0 +1,26 @@ + +function localSet(k, v) { + try { + localStorage.setItem(k, v); + } catch (e) { + console.warn(`Failed to save ${k} to localStorage: ${e}`); + } +} + +function localGet(k, def) { + try { + return localStorage.getItem(k); + } catch (e) { + console.warn(`Failed to load ${k} from localStorage: ${e}`); + } + + return def; +} + +function localRemove(k) { + try { + return localStorage.removeItem(k); + } catch (e) { + console.warn(`Failed to remove ${k} from localStorage: ${e}`); + } +} diff --git a/javascript/ui.js b/javascript/ui.js index abf23a78..bade3089 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -152,15 +152,11 @@ function submit() { showSubmitButtons('txt2img', false); var id = randomId(); - try { - localStorage.setItem("txt2img_task_id", id); - } catch (e) { - console.warn(`Failed to save txt2img task id to localStorage: ${e}`); - } + localSet("txt2img_task_id", id); requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() { showSubmitButtons('txt2img', true); - localStorage.removeItem("txt2img_task_id"); + localRemove("txt2img_task_id"); showRestoreProgressButton('txt2img', false); }); @@ -175,15 +171,11 @@ function submit_img2img() { showSubmitButtons('img2img', false); var id = randomId(); - try { - localStorage.setItem("img2img_task_id", id); - } catch (e) { - console.warn(`Failed to save img2img task id to localStorage: ${e}`); - } + localSet("img2img_task_id", id); requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() { showSubmitButtons('img2img', true); - localStorage.removeItem("img2img_task_id"); + localRemove("img2img_task_id"); showRestoreProgressButton('img2img', false); }); @@ -197,7 +189,7 @@ function submit_img2img() { function restoreProgressTxt2img() { showRestoreProgressButton("txt2img", false); - var id = localStorage.getItem("txt2img_task_id"); + var id = localGet("txt2img_task_id"); if (id) { requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() { @@ -211,7 +203,7 @@ function restoreProgressTxt2img() { function restoreProgressImg2img() { showRestoreProgressButton("img2img", false); - var id = localStorage.getItem("img2img_task_id"); + var id = localGet("img2img_task_id"); if (id) { requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() { @@ -224,8 +216,8 @@ function restoreProgressImg2img() { onUiLoaded(function() { - showRestoreProgressButton('txt2img', localStorage.getItem("txt2img_task_id")); - showRestoreProgressButton('img2img', localStorage.getItem("img2img_task_id")); + showRestoreProgressButton('txt2img', localGet("txt2img_task_id")); + showRestoreProgressButton('img2img', localGet("img2img_task_id")); }); -- cgit v1.2.3 From c74c708ed8c422bf7ca1f388a3ee772c7d1e4ddd Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sat, 5 Aug 2023 09:15:18 +0300 Subject: add checkbox to show/hide dirs for extra networks --- javascript/extraNetworks.js | 29 +++++++++++++++++++++++++++++ modules/ui_extra_networks.py | 5 +++-- style.css | 5 ++++- 3 files changed, 36 insertions(+), 3 deletions(-) (limited to 'javascript') diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index 44d02349..897ebeba 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -1,3 +1,20 @@ +function toggleCss(key, css, enable) { + var style = document.getElementById(key); + if (enable && !style) { + style = document.createElement('style'); + style.id = key; + style.type = 'text/css'; + document.head.appendChild(style); + } + if (style && !enable) { + document.head.removeChild(style); + } + if (style) { + style.innerHTML == ''; + style.appendChild(document.createTextNode(css)); + } +} + function setupExtraNetworksForTab(tabname) { gradioApp().querySelector('#' + tabname + '_extra_tabs').classList.add('extra-networks'); @@ -7,12 +24,15 @@ function setupExtraNetworksForTab(tabname) { var sort = gradioApp().getElementById(tabname + '_extra_sort'); var sortOrder = gradioApp().getElementById(tabname + '_extra_sortorder'); var refresh = gradioApp().getElementById(tabname + '_extra_refresh'); + var showDirsDiv = gradioApp().getElementById(tabname + '_extra_show_dirs'); + var showDirs = gradioApp().querySelector('#' + tabname + '_extra_show_dirs input'); sort.dataset.sortkey = 'sortDefault'; tabs.appendChild(searchDiv); tabs.appendChild(sort); tabs.appendChild(sortOrder); tabs.appendChild(refresh); + tabs.appendChild(showDirsDiv); var applyFilter = function() { var searchTerm = search.value.toLowerCase(); @@ -78,6 +98,15 @@ function setupExtraNetworksForTab(tabname) { }); extraNetworksApplyFilter[tabname] = applyFilter; + + var showDirsUpdate = function() { + var css = '#' + tabname + '_extra_tabs .extra-network-subdirs { display: none; }'; + toggleCss(tabname + '_extra_show_dirs_style', css, !showDirs.checked); + localSet('extra-networks-show-dirs', showDirs.checked ? 1 : 0); + }; + showDirs.checked = localGet('extra-networks-show-dirs', 1) == 1; + showDirs.addEventListener("change", showDirsUpdate); + showDirsUpdate(); } function applyExtraNetworkFilter(tabname) { diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index 3a73c89e..e0b932b9 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -375,15 +375,16 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname): dropdown_sort = gr.Dropdown(choices=['Default Sort', 'Date Created', 'Date Modified', 'Name'], value='Default Sort', elem_id=tabname+"_extra_sort", elem_classes="sort", multiselect=False, visible=False, show_label=False, interactive=True, label=tabname+"_extra_sort_order") button_sortorder = ToolButton(up_down_symbol, elem_id=tabname+"_extra_sortorder", elem_classes="sortorder", visible=False) button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh", visible=False) + checkbox_show_dirs = gr.Checkbox(True, label='Show dirs', elem_id=tabname+"_extra_show_dirs", elem_classes="show-dirs", visible=False) ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False) ui.preview_target_filename = gr.Textbox('Preview save filename', elem_id=tabname+"_preview_filename", visible=False) for tab in unrelated_tabs: - tab.select(fn=lambda: [gr.update(visible=False) for _ in range(5)], inputs=[], outputs=[edit_search, edit_search, dropdown_sort, button_sortorder, button_refresh], show_progress=False) + tab.select(fn=lambda: [gr.update(visible=False) for _ in range(5)], inputs=[], outputs=[edit_search, dropdown_sort, button_sortorder, button_refresh, checkbox_show_dirs], show_progress=False) for tab in related_tabs: - tab.select(fn=lambda: [gr.update(visible=True) for _ in range(5)], inputs=[], outputs=[edit_search, edit_search, dropdown_sort, button_sortorder, button_refresh], show_progress=False) + tab.select(fn=lambda: [gr.update(visible=True) for _ in range(5)], inputs=[], outputs=[edit_search, dropdown_sort, button_sortorder, button_refresh, checkbox_show_dirs], show_progress=False) def pages_html(): if not ui.pages_contents: diff --git a/style.css b/style.css index 52919f71..dc4d37b9 100644 --- a/style.css +++ b/style.css @@ -801,9 +801,12 @@ footer { margin: 0 0.15em; } .extra-networks .tab-nav .search, -.extra-networks .tab-nav .sort{ +.extra-networks .tab-nav .sort, +.extra-networks .tab-nav .show-dirs +{ margin: 0.3em; align-self: center; + width: auto; } .extra-networks .tab-nav .search { -- cgit v1.2.3 From aea0fa9fd52daa1a4b3de7c7124257cf7f3e5291 Mon Sep 17 00:00:00 2001 From: Diego Casorran Date: Mon, 7 Aug 2023 14:53:42 +0200 Subject: Allow to open images in new browser tab by MMB. Signed-off-by: Diego Casorran --- javascript/imageviewer.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'javascript') diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index 677e95c1..c21d396e 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -136,6 +136,11 @@ function setupImageForLightbox(e) { var event = isFirefox ? 'mousedown' : 'click'; e.addEventListener(event, function(evt) { + if (evt.button == 1) { + open(evt.target.src); + evt.preventDefault(); + return; + } if (!opts.js_modal_lightbox || evt.button != 0) return; modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed); -- cgit v1.2.3 From 9199b6b7ebe96cdf09571ba874a103e8ed8c90ef Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Thu, 10 Aug 2023 11:20:46 +0300 Subject: add a custom UI element that combines accordion and checkbox rework hires fix UI to use accordion prevent bogus progress output in console when calculating hires fix dimensions --- javascript/inputAccordion.js | 37 +++++++++++++++++++++ modules/processing.py | 77 +++++++++++++++++++++++--------------------- modules/ui.py | 23 ++++--------- modules/ui_components.py | 31 ++++++++++++++++++ style.css | 15 +++++---- 5 files changed, 124 insertions(+), 59 deletions(-) create mode 100644 javascript/inputAccordion.js (limited to 'javascript') diff --git a/javascript/inputAccordion.js b/javascript/inputAccordion.js new file mode 100644 index 00000000..a5eef229 --- /dev/null +++ b/javascript/inputAccordion.js @@ -0,0 +1,37 @@ +var observerAccordionOpen = new MutationObserver(function(mutations) { + mutations.forEach(function(mutationRecord) { + var elem = mutationRecord.target; + var open = elem.classList.contains('open'); + + var accordion = elem.parentNode; + accordion.classList.toggle('input-accordion-open', open); + + var checkbox = gradioApp().querySelector('#' + accordion.id + "-checkbox input"); + checkbox.checked = open; + updateInput(checkbox); + + extra = gradioApp().querySelector('#' + accordion.id + "-extra"); + if(extra){ + extra.style.display = open ? "" : "none"; + } + }); +}); + +function inputAccordionChecked(id, checked){ + var label = gradioApp().querySelector('#' + id + " .label-wrap"); + if(label.classList.contains('open') != checked){ + label.click(); + } +} + +onUiLoaded(function() { + for (var accordion of gradioApp().querySelectorAll('.input-accordion')) { + var labelWrap = accordion.querySelector('.label-wrap'); + observerAccordionOpen.observe(labelWrap, {attributes: true, attributeFilter: ['class']}); + + var extra = gradioApp().querySelector('#' + accordion.id + "-extra"); + if(extra){ + labelWrap.insertBefore(extra, labelWrap.lastElementChild) + } + } +}); diff --git a/modules/processing.py b/modules/processing.py index 6961b7b1..7819644c 100644 --- a/modules/processing.py +++ b/modules/processing.py @@ -924,6 +924,45 @@ class StableDiffusionProcessingTxt2Img(StableDiffusionProcessing): self.hr_c = None self.hr_uc = None + def calculate_target_resolution(self): + if opts.use_old_hires_fix_width_height and self.applied_old_hires_behavior_to != (self.width, self.height): + self.hr_resize_x = self.width + self.hr_resize_y = self.height + self.hr_upscale_to_x = self.width + self.hr_upscale_to_y = self.height + + self.width, self.height = old_hires_fix_first_pass_dimensions(self.width, self.height) + self.applied_old_hires_behavior_to = (self.width, self.height) + + if self.hr_resize_x == 0 and self.hr_resize_y == 0: + self.extra_generation_params["Hires upscale"] = self.hr_scale + self.hr_upscale_to_x = int(self.width * self.hr_scale) + self.hr_upscale_to_y = int(self.height * self.hr_scale) + else: + self.extra_generation_params["Hires resize"] = f"{self.hr_resize_x}x{self.hr_resize_y}" + + if self.hr_resize_y == 0: + self.hr_upscale_to_x = self.hr_resize_x + self.hr_upscale_to_y = self.hr_resize_x * self.height // self.width + elif self.hr_resize_x == 0: + self.hr_upscale_to_x = self.hr_resize_y * self.width // self.height + self.hr_upscale_to_y = self.hr_resize_y + else: + target_w = self.hr_resize_x + target_h = self.hr_resize_y + src_ratio = self.width / self.height + dst_ratio = self.hr_resize_x / self.hr_resize_y + + if src_ratio < dst_ratio: + self.hr_upscale_to_x = self.hr_resize_x + self.hr_upscale_to_y = self.hr_resize_x * self.height // self.width + else: + self.hr_upscale_to_x = self.hr_resize_y * self.width // self.height + self.hr_upscale_to_y = self.hr_resize_y + + self.truncate_x = (self.hr_upscale_to_x - target_w) // opt_f + self.truncate_y = (self.hr_upscale_to_y - target_h) // opt_f + def init(self, all_prompts, all_seeds, all_subseeds): if self.enable_hr: if self.hr_checkpoint_name: @@ -948,43 +987,7 @@ class StableDiffusionProcessingTxt2Img(StableDiffusionProcessing): if not any(x.name == self.hr_upscaler for x in shared.sd_upscalers): raise Exception(f"could not find upscaler named {self.hr_upscaler}") - if opts.use_old_hires_fix_width_height and self.applied_old_hires_behavior_to != (self.width, self.height): - self.hr_resize_x = self.width - self.hr_resize_y = self.height - self.hr_upscale_to_x = self.width - self.hr_upscale_to_y = self.height - - self.width, self.height = old_hires_fix_first_pass_dimensions(self.width, self.height) - self.applied_old_hires_behavior_to = (self.width, self.height) - - if self.hr_resize_x == 0 and self.hr_resize_y == 0: - self.extra_generation_params["Hires upscale"] = self.hr_scale - self.hr_upscale_to_x = int(self.width * self.hr_scale) - self.hr_upscale_to_y = int(self.height * self.hr_scale) - else: - self.extra_generation_params["Hires resize"] = f"{self.hr_resize_x}x{self.hr_resize_y}" - - if self.hr_resize_y == 0: - self.hr_upscale_to_x = self.hr_resize_x - self.hr_upscale_to_y = self.hr_resize_x * self.height // self.width - elif self.hr_resize_x == 0: - self.hr_upscale_to_x = self.hr_resize_y * self.width // self.height - self.hr_upscale_to_y = self.hr_resize_y - else: - target_w = self.hr_resize_x - target_h = self.hr_resize_y - src_ratio = self.width / self.height - dst_ratio = self.hr_resize_x / self.hr_resize_y - - if src_ratio < dst_ratio: - self.hr_upscale_to_x = self.hr_resize_x - self.hr_upscale_to_y = self.hr_resize_x * self.height // self.width - else: - self.hr_upscale_to_x = self.hr_resize_y * self.width // self.height - self.hr_upscale_to_y = self.hr_resize_y - - self.truncate_x = (self.hr_upscale_to_x - target_w) // opt_f - self.truncate_y = (self.hr_upscale_to_y - target_h) // opt_f + self.calculate_target_resolution() if not state.processing_has_refined_job_count: if state.job_count == -1: diff --git a/modules/ui.py b/modules/ui.py index 4e1daa8d..cbad3afe 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -14,7 +14,7 @@ from modules.call_queue import wrap_gradio_gpu_call, wrap_queued_call, wrap_grad from modules import gradio_extensons # noqa: F401 from modules import sd_hijack, sd_models, script_callbacks, ui_extensions, deepbooru, extra_networks, ui_common, ui_postprocessing, progress, ui_loadsave, errors, shared_items, ui_settings, timer, sysinfo, ui_checkpoint_merger, ui_prompt_styles, scripts, sd_samplers, processing, devices, ui_extra_networks -from modules.ui_components import FormRow, FormGroup, ToolButton, FormHTML +from modules.ui_components import FormRow, FormGroup, ToolButton, FormHTML, InputAccordion from modules.paths import script_path from modules.ui_common import create_refresh_button from modules.ui_gradio_extensions import reload_javascript @@ -94,11 +94,9 @@ def calc_resolution_hires(enable, width, height, hr_scale, hr_resize_x, hr_resiz return "" p = processing.StableDiffusionProcessingTxt2Img(width=width, height=height, enable_hr=True, hr_scale=hr_scale, hr_resize_x=hr_resize_x, hr_resize_y=hr_resize_y) + p.calculate_target_resolution() - with devices.autocast(): - p.init([""], [0], [0]) - - return f"resize: from {p.width}x{p.height} to {p.hr_resize_x or p.hr_upscale_to_x}x{p.hr_resize_y or p.hr_upscale_to_y}" + return f"from {p.width}x{p.height} to {p.hr_resize_x or p.hr_upscale_to_x}x{p.hr_resize_y or p.hr_upscale_to_y}" def resize_from_to_html(width, height, scale_by): @@ -436,11 +434,12 @@ def create_ui(): with FormRow(elem_classes="checkboxes-row", variant="compact"): restore_faces = gr.Checkbox(label='Restore faces', value=False, visible=len(shared.face_restorers) > 1, elem_id="txt2img_restore_faces") tiling = gr.Checkbox(label='Tiling', value=False, elem_id="txt2img_tiling") - enable_hr = gr.Checkbox(label='Hires. fix', value=False, elem_id="txt2img_enable_hr") - hr_final_resolution = FormHTML(value="", elem_id="txtimg_hr_finalres", label="Upscaled resolution", interactive=False) elif category == "hires_fix": - with FormGroup(visible=False, elem_id="txt2img_hires_fix") as hr_options: + with InputAccordion(False, label="Hires. fix") as enable_hr: + with enable_hr.extra(): + hr_final_resolution = FormHTML(value="", elem_id="txtimg_hr_finalres", label="Upscaled resolution", interactive=False, min_width=0) + with FormRow(elem_id="txt2img_hires_fix_row1", variant="compact"): hr_upscaler = gr.Dropdown(label="Upscaler", elem_id="txt2img_hr_upscaler", choices=[*shared.latent_upscale_modes, *[x.name for x in shared.sd_upscalers]], value=shared.latent_upscale_default_mode) hr_second_pass_steps = gr.Slider(minimum=0, maximum=150, step=1, label='Hires steps', value=0, elem_id="txt2img_hires_steps") @@ -568,13 +567,6 @@ def create_ui(): show_progress=False, ) - enable_hr.change( - fn=lambda x: gr_show(x), - inputs=[enable_hr], - outputs=[hr_options], - show_progress = False, - ) - txt2img_paste_fields = [ (toprow.prompt, "Prompt"), (toprow.negative_prompt, "Negative prompt"), @@ -594,7 +586,6 @@ def create_ui(): (toprow.ui_styles.dropdown, lambda d: d["Styles array"] if isinstance(d.get("Styles array"), list) else gr.update()), (denoising_strength, "Denoising strength"), (enable_hr, lambda d: "Denoising strength" in d and ("Hires upscale" in d or "Hires upscaler" in d or "Hires resize-1" in d)), - (hr_options, lambda d: gr.Row.update(visible="Denoising strength" in d and ("Hires upscale" in d or "Hires upscaler" in d or "Hires resize-1" in d))), (hr_scale, "Hires upscale"), (hr_upscaler, "Hires upscaler"), (hr_second_pass_steps, "Hires steps"), diff --git a/modules/ui_components.py b/modules/ui_components.py index 8f8a7088..598ce738 100644 --- a/modules/ui_components.py +++ b/modules/ui_components.py @@ -72,3 +72,34 @@ class DropdownEditable(FormComponent, gr.Dropdown): def get_block_name(self): return "dropdown" + +class InputAccordion(gr.Checkbox): + global_index = 0 + + def __init__(self, value, **kwargs): + self.accordion_id = kwargs.get('elem_id') + if self.accordion_id is None: + self.accordion_id = f"input-accordion-{self.global_index}" + self.global_index += 1 + + kwargs['elem_id'] = self.accordion_id + "-checkbox" + kwargs['visible'] = False + super().__init__(value, **kwargs) + + self.change(fn=None, _js='function(checked){ inputAccordionChecked("' + self.accordion_id + '", checked); }', inputs=[self]) + + self.accordion = gr.Accordion(kwargs.get('label', 'Accordion'), open=value, elem_id=self.accordion_id, elem_classes=['input-accordion']) + + def extra(self): + return gr.Column(elem_id=self.accordion_id + '-extra', elem_classes='input-accordion-extra', min_width=0) + + def __enter__(self): + self.accordion.__enter__() + return self + + def __exit__(self, exc_type, exc_val, exc_tb): + self.accordion.__exit__(exc_type, exc_val, exc_tb) + + def get_block_name(self): + return "checkbox" + diff --git a/style.css b/style.css index dfd5ca36..5163e53c 100644 --- a/style.css +++ b/style.css @@ -329,12 +329,6 @@ div.gradio-accordion { border-radius: 0 0.5rem 0.5rem 0; } -#txtimg_hr_finalres{ - min-height: 0 !important; - padding: .625rem .75rem; - margin-left: -0.75em -} - #img2img_scale_resolution_preview.block{ display: flex; align-items: end; @@ -1016,3 +1010,12 @@ div.block.gradio-box.popup-dialog, .popup-dialog { div.block.gradio-box.popup-dialog > div:last-child, .popup-dialog > div:last-child{ margin-top: 1em; } + +div.block.input-accordion{ + margin-bottom: 0.4em; +} + +.input-accordion-extra{ + flex: 0 0 auto !important; + margin: 0 0.5em 0 auto; +} -- cgit v1.2.3 From faca86620d53b122eac00fd0a4ab54b3a2e3108e Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Thu, 10 Aug 2023 12:58:00 +0300 Subject: linter fixes --- javascript/inputAccordion.js | 12 ++++++------ modules/ui.py | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'javascript') diff --git a/javascript/inputAccordion.js b/javascript/inputAccordion.js index a5eef229..f2839852 100644 --- a/javascript/inputAccordion.js +++ b/javascript/inputAccordion.js @@ -10,16 +10,16 @@ var observerAccordionOpen = new MutationObserver(function(mutations) { checkbox.checked = open; updateInput(checkbox); - extra = gradioApp().querySelector('#' + accordion.id + "-extra"); - if(extra){ + var extra = gradioApp().querySelector('#' + accordion.id + "-extra"); + if (extra) { extra.style.display = open ? "" : "none"; } }); }); -function inputAccordionChecked(id, checked){ +function inputAccordionChecked(id, checked) { var label = gradioApp().querySelector('#' + id + " .label-wrap"); - if(label.classList.contains('open') != checked){ + if (label.classList.contains('open') != checked) { label.click(); } } @@ -30,8 +30,8 @@ onUiLoaded(function() { observerAccordionOpen.observe(labelWrap, {attributes: true, attributeFilter: ['class']}); var extra = gradioApp().querySelector('#' + accordion.id + "-extra"); - if(extra){ - labelWrap.insertBefore(extra, labelWrap.lastElementChild) + if (extra) { + labelWrap.insertBefore(extra, labelWrap.lastElementChild); } } }); diff --git a/modules/ui.py b/modules/ui.py index 09a826fd..b87e95a6 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -13,7 +13,7 @@ from PIL import Image, PngImagePlugin # noqa: F401 from modules.call_queue import wrap_gradio_gpu_call, wrap_queued_call, wrap_gradio_call from modules import gradio_extensons # noqa: F401 -from modules import sd_hijack, sd_models, script_callbacks, ui_extensions, deepbooru, extra_networks, ui_common, ui_postprocessing, progress, ui_loadsave, errors, shared_items, ui_settings, timer, sysinfo, ui_checkpoint_merger, ui_prompt_styles, scripts, sd_samplers, processing, devices, ui_extra_networks +from modules import sd_hijack, sd_models, script_callbacks, ui_extensions, deepbooru, extra_networks, ui_common, ui_postprocessing, progress, ui_loadsave, errors, shared_items, ui_settings, timer, sysinfo, ui_checkpoint_merger, ui_prompt_styles, scripts, sd_samplers, processing, ui_extra_networks from modules.ui_components import FormRow, FormGroup, ToolButton, FormHTML, InputAccordion from modules.paths import script_path from modules.ui_common import create_refresh_button -- cgit v1.2.3 From 5daf7983d141d3c79c03cc65238194383e6334c8 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Mon, 14 Aug 2023 19:27:04 +0300 Subject: when refreshing cards in extra networks UI, do not discard user's custom resolution --- javascript/extraNetworks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'javascript') diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index 897ebeba..3bc723d3 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -332,7 +332,7 @@ function extraNetworksRefreshSingleCard(page, tabname, name) { newDiv.innerHTML = data.html; var newCard = newDiv.firstElementChild; - newCard.style = ''; + newCard.style.display = ''; card.parentElement.insertBefore(newCard, card); card.parentElement.removeChild(card); } -- cgit v1.2.3 From 1631e96a98e519a1f2a0d24553622304c6d63523 Mon Sep 17 00:00:00 2001 From: bluelovers Date: Sat, 19 Aug 2023 10:38:43 +0800 Subject: refactor: Update ui.js --- javascript/ui.js | 21 ++------------------- 1 file changed, 2 insertions(+), 19 deletions(-) (limited to 'javascript') diff --git a/javascript/ui.js b/javascript/ui.js index d70a681b..cbd6b44e 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -19,28 +19,11 @@ function all_gallery_buttons() { } 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; + return all_gallery_buttons().find(elem => elem.classList.contains('selected')) ?? null; } 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; + return all_gallery_buttons().findIndex(elem => elem.classList.contains('selected')); } function extract_image_from_gallery(gallery) { -- cgit v1.2.3 From a0d721e109d7c7b75aefaf3853f7bf58da43847b Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sun, 20 Aug 2023 13:00:59 +0300 Subject: make live preview display work independently from progress bar --- javascript/progressbar.js | 28 ++++++++++++++++++---------- modules/progress.py | 3 ++- 2 files changed, 20 insertions(+), 11 deletions(-) (limited to 'javascript') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 29299787..8a339982 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -93,8 +93,8 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre atEnd(); }; - var fun = function(id_task, id_live_preview) { - request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) { + var funProgress = function(id_task) { + request("./internal/progress", {id_task: id_task, live_preview: false}, function(res) { if (res.completed) { removeProgressBar(); return; @@ -119,7 +119,6 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre progressText += " ETA: " + formatTime(res.eta); } - setTitle(progressText); if (res.textinfo && res.textinfo.indexOf("\n") == -1) { @@ -142,7 +141,20 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre return; } + if (onProgress) { + onProgress(res); + } + + setTimeout(() => { + funProgress(id_task, res.id_live_preview); + }, opts.live_preview_refresh_period || 500); + }, function() { + removeProgressBar(); + }); + } + var funLivePreview = function(id_task, id_live_preview) { + request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) { if (res.live_preview && gallery) { rect = gallery.getBoundingClientRect(); if (rect.width) { @@ -160,18 +172,14 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre img.src = res.live_preview; } - - if (onProgress) { - onProgress(res); - } - setTimeout(() => { - fun(id_task, res.id_live_preview); + funLivePreview(id_task, res.id_live_preview); }, opts.live_preview_refresh_period || 500); }, function() { removeProgressBar(); }); }; - fun(id_task, 0); + funProgress(id_task, 0); + funLivePreview(id_task, 0); } diff --git a/modules/progress.py b/modules/progress.py index f405f07f..e32b59dd 100644 --- a/modules/progress.py +++ b/modules/progress.py @@ -48,6 +48,7 @@ def add_task_to_queue(id_job): class ProgressRequest(BaseModel): id_task: str = Field(default=None, title="Task ID", description="id of the task to get progress for") id_live_preview: int = Field(default=-1, title="Live preview image ID", description="id of last received last preview image") + live_preview: bool = Field(default=True, title="Include live preview", description="boolean flag indicating whether to include the live preview image") class ProgressResponse(BaseModel): @@ -91,7 +92,7 @@ def progressapi(req: ProgressRequest): id_live_preview = req.id_live_preview shared.state.set_current_image() - if opts.live_previews_enable and shared.state.id_live_preview != req.id_live_preview: + if opts.live_previews_enable and req.live_preview and shared.state.id_live_preview != req.id_live_preview: image = shared.state.current_image if image is not None: buffered = io.BytesIO() -- cgit v1.2.3 From db5c304e2968b5c16810900b9a63cfcf7e205e20 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sun, 20 Aug 2023 13:38:35 +0300 Subject: make live previews play nice with window/slider resizes --- extensions-builtin/mobile/javascript/mobile.js | 2 ++ javascript/progressbar.js | 21 ++++----------------- style.css | 17 +++++++++-------- 3 files changed, 15 insertions(+), 25 deletions(-) (limited to 'javascript') diff --git a/extensions-builtin/mobile/javascript/mobile.js b/extensions-builtin/mobile/javascript/mobile.js index 12cae4b7..1b835a51 100644 --- a/extensions-builtin/mobile/javascript/mobile.js +++ b/extensions-builtin/mobile/javascript/mobile.js @@ -20,6 +20,8 @@ function reportWindowSize() { var button = gradioApp().getElementById(tab + '_generate_box'); var target = gradioApp().getElementById(currentlyMobile ? tab + '_results' : tab + '_actions_column'); target.insertBefore(button, target.firstElementChild); + + gradioApp().getElementById(tab + '_results').classList.toggle('mobile', currentlyMobile); } } diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 8a339982..a7c69937 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -69,7 +69,6 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre var dateStart = new Date(); var wasEverActive = false; var parentProgressbar = progressbarContainer.parentNode; - var parentGallery = gallery ? gallery.parentNode : null; var divProgress = document.createElement('div'); divProgress.className = 'progressDiv'; @@ -80,16 +79,16 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre divProgress.appendChild(divInner); parentProgressbar.insertBefore(divProgress, progressbarContainer); - if (parentGallery) { + if (gallery) { var livePreview = document.createElement('div'); livePreview.className = 'livePreview'; - parentGallery.insertBefore(livePreview, gallery); + gallery.insertBefore(livePreview, gallery.firstElementChild); } var removeProgressBar = function() { setTitle(""); parentProgressbar.removeChild(divProgress); - if (parentGallery) parentGallery.removeChild(livePreview); + if (gallery) gallery.removeChild(livePreview); atEnd(); }; @@ -100,12 +99,6 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre return; } - var rect = progressbarContainer.getBoundingClientRect(); - - if (rect.width) { - divProgress.style.width = rect.width + "px"; - } - let progressText = ""; divInner.style.width = ((res.progress || 0) * 100.0) + '%'; @@ -151,17 +144,11 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre }, function() { removeProgressBar(); }); - } + }; var funLivePreview = function(id_task, id_live_preview) { request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) { if (res.live_preview && gallery) { - rect = gallery.getBoundingClientRect(); - if (rect.width) { - livePreview.style.width = rect.width + "px"; - livePreview.style.height = rect.height + "px"; - } - var img = new Image(); img.onload = function() { livePreview.appendChild(img); diff --git a/style.css b/style.css index 38a01e72..5cd9f9c2 100644 --- a/style.css +++ b/style.css @@ -499,11 +499,15 @@ table.popup-table .link{ /* live preview */ .progressDiv{ - position: relative; + position: absolute; height: 20px; background: #b4c0cc; border-radius: 3px !important; - margin-bottom: -3px; + top: -20px; +} + +[id$=_results].mobile{ + margin-top: 28px; } .dark .progressDiv{ @@ -528,12 +532,9 @@ table.popup-table .link{ .livePreview{ position: absolute; z-index: 300; - background-color: white; - margin: -4px; -} - -.dark .livePreview{ - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); + background: var(--background-fill-primary); + width: 100%; + height: 100%; } .livePreview img{ -- cgit v1.2.3 From df595ae3135ef12c135f43ef2a0f792708aab4b3 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Mon, 21 Aug 2023 08:48:22 +0300 Subject: make resize handle available to extensions --- .eslintrc.js | 4 +- .../resize-handle/javascript/resize-handle.js | 106 -------------------- extensions-builtin/resize-handle/style.css | 10 -- javascript/resizeHandle.js | 109 +++++++++++++++++++++ modules/ui.py | 6 +- modules/ui_components.py | 12 +++ style.css | 12 +++ 7 files changed, 139 insertions(+), 120 deletions(-) delete mode 100644 extensions-builtin/resize-handle/javascript/resize-handle.js delete mode 100644 extensions-builtin/resize-handle/style.css create mode 100644 javascript/resizeHandle.js (limited to 'javascript') diff --git a/.eslintrc.js b/.eslintrc.js index e3b4fb76..4777c276 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -90,6 +90,8 @@ module.exports = { // localStorage.js localSet: "readonly", localGet: "readonly", - localRemove: "readonly" + localRemove: "readonly", + // resizeHandle.js + setupResizeHandle: "writable" } }; diff --git a/extensions-builtin/resize-handle/javascript/resize-handle.js b/extensions-builtin/resize-handle/javascript/resize-handle.js deleted file mode 100644 index a07a01d2..00000000 --- a/extensions-builtin/resize-handle/javascript/resize-handle.js +++ /dev/null @@ -1,106 +0,0 @@ -onUiLoaded(async() => { - const GRADIO_MIN_WIDTH = 320; - const GRID_TEMPLATE_COLUMNS = '1fr 16px 1fr'; - const PAD = 16; - const DEBOUNCE_TIME = 100; - - const R = { - tracking: false, - parent: null, - parentWidth: null, - leftCol: null, - leftColStartWidth: null, - screenX: null, - }; - - let resizeTimer; - - const leftCols = [ - gradioApp().querySelector('#txt2img_settings'), - gradioApp().querySelector('#img2img_settings'), - ]; - - function setLeftColGridTemplate(el, width) { - el.style.gridTemplateColumns = `${width}px 16px 1fr`; - } - - function displayResizeHandle(parent) { - if (window.innerWidth < GRADIO_MIN_WIDTH * 2 + PAD * 4) { - parent.style.display = 'flex'; - if (R.handle != null) { - R.handle.style.opacity = '0'; - } - return false; - } else { - parent.style.display = 'grid'; - if (R.handle != null) { - R.handle.style.opacity = '100'; - } - return true; - } - } - - function setup() { - for (const leftCol of leftCols) { - const parent = leftCol.parentElement; - const rightCol = parent.lastElementChild; - - if (!displayResizeHandle(parent)) { - return; - } - - parent.style.display = 'grid'; - parent.style.gap = '0'; - parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS; - - const resizeHandle = document.createElement('div'); - resizeHandle.classList.add('resize-handle'); - parent.insertBefore(resizeHandle, rightCol); - - resizeHandle.addEventListener('mousedown', (evt) => { - R.tracking = true; - R.parent = parent; - R.parentWidth = parent.offsetWidth; - R.handle = resizeHandle; - R.leftCol = leftCol; - R.leftColStartWidth = leftCol.offsetWidth; - R.screenX = evt.screenX; - }); - } - } - - window.addEventListener('mousemove', (evt) => { - if (R.tracking) { - const delta = R.screenX - evt.screenX; - const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH); - setLeftColGridTemplate(R.parent, leftColWidth); - } - }); - - window.addEventListener('mouseup', () => R.tracking = false); - - window.addEventListener('resize', () => { - clearTimeout(resizeTimer); - - resizeTimer = setTimeout(() => { - for (const leftCol of leftCols) { - const parent = leftCol.parentElement; - - if (displayResizeHandle(parent) && parent.style.gridTemplateColumns != GRID_TEMPLATE_COLUMNS) { - const oldParentWidth = R.parentWidth; - const newParentWidth = parent.offsetWidth; - const widthL = parseInt(parent.style.gridTemplateColumns.split(' ')[0]); - - const ratio = newParentWidth / oldParentWidth; - - const newWidthL = Math.max(Math.floor(ratio * widthL), GRADIO_MIN_WIDTH); - setLeftColGridTemplate(parent, newWidthL); - - R.parentWidth = newParentWidth; - } - } - }, DEBOUNCE_TIME); - }); - - setup(); -}); diff --git a/extensions-builtin/resize-handle/style.css b/extensions-builtin/resize-handle/style.css deleted file mode 100644 index 0e18267a..00000000 --- a/extensions-builtin/resize-handle/style.css +++ /dev/null @@ -1,10 +0,0 @@ -.resize-handle{ - cursor: col-resize; - grid-column: 2 / 3; - min-width: 8px !important; - max-width: 8px !important; - height: 100%; - border-left: 1px dashed var(--border-color-primary); - user-select: none; - margin-left: 8px; -} \ No newline at end of file diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js new file mode 100644 index 00000000..71023f9f --- /dev/null +++ b/javascript/resizeHandle.js @@ -0,0 +1,109 @@ +(function() { + const GRADIO_MIN_WIDTH = 320; + const GRID_TEMPLATE_COLUMNS = '1fr 16px 1fr'; + const PAD = 16; + const DEBOUNCE_TIME = 100; + + const R = { + tracking: false, + parent: null, + parentWidth: null, + leftCol: null, + leftColStartWidth: null, + screenX: null, + }; + + let resizeTimer; + let parents = []; + + function setLeftColGridTemplate(el, width) { + el.style.gridTemplateColumns = `${width}px 16px 1fr`; + } + + function displayResizeHandle(parent) { + if (window.innerWidth < GRADIO_MIN_WIDTH * 2 + PAD * 4) { + parent.style.display = 'flex'; + if (R.handle != null) { + R.handle.style.opacity = '0'; + } + return false; + } else { + parent.style.display = 'grid'; + if (R.handle != null) { + R.handle.style.opacity = '100'; + } + return true; + } + } + + function afterResize(parent) { + if (displayResizeHandle(parent) && parent.style.gridTemplateColumns != GRID_TEMPLATE_COLUMNS) { + const oldParentWidth = R.parentWidth; + const newParentWidth = parent.offsetWidth; + const widthL = parseInt(parent.style.gridTemplateColumns.split(' ')[0]); + + const ratio = newParentWidth / oldParentWidth; + + const newWidthL = Math.max(Math.floor(ratio * widthL), GRADIO_MIN_WIDTH); + setLeftColGridTemplate(parent, newWidthL); + + R.parentWidth = newParentWidth; + } + } + + function setup(parent) { + const leftCol = parent.firstElementChild; + const rightCol = parent.lastElementChild; + + parents.push(parent); + + parent.style.display = 'grid'; + parent.style.gap = '0'; + parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS; + + const resizeHandle = document.createElement('div'); + resizeHandle.classList.add('resize-handle'); + parent.insertBefore(resizeHandle, rightCol); + + resizeHandle.addEventListener('mousedown', (evt) => { + R.tracking = true; + R.parent = parent; + R.parentWidth = parent.offsetWidth; + R.handle = resizeHandle; + R.leftCol = leftCol; + R.leftColStartWidth = leftCol.offsetWidth; + R.screenX = evt.screenX; + }); + + afterResize(parent); + } + + window.addEventListener('mousemove', (evt) => { + if (R.tracking) { + const delta = R.screenX - evt.screenX; + const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH); + setLeftColGridTemplate(R.parent, leftColWidth); + } + }); + + window.addEventListener('mouseup', () => R.tracking = false); + + + window.addEventListener('resize', () => { + clearTimeout(resizeTimer); + + resizeTimer = setTimeout(function() { + for (const parent of parents) { + afterResize(parent); + } + }, DEBOUNCE_TIME); + }); + + setupResizeHandle = setup; +})(); + +onUiLoaded(function() { + for (var elem of gradioApp().querySelectorAll('.resize-handle-row')) { + setupResizeHandle(elem); + } +}); diff --git a/modules/ui.py b/modules/ui.py index 01f77849..2b6a13cb 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -13,7 +13,7 @@ from modules.call_queue import wrap_gradio_gpu_call, wrap_queued_call, wrap_grad from modules import gradio_extensons # noqa: F401 from modules import sd_hijack, sd_models, script_callbacks, ui_extensions, deepbooru, extra_networks, ui_common, ui_postprocessing, progress, ui_loadsave, shared_items, ui_settings, timer, sysinfo, ui_checkpoint_merger, ui_prompt_styles, scripts, sd_samplers, processing, ui_extra_networks -from modules.ui_components import FormRow, FormGroup, ToolButton, FormHTML, InputAccordion +from modules.ui_components import FormRow, FormGroup, ToolButton, FormHTML, InputAccordion, ResizeHandleRow from modules.paths import script_path from modules.ui_common import create_refresh_button from modules.ui_gradio_extensions import reload_javascript @@ -333,7 +333,7 @@ def create_ui(): extra_tabs = gr.Tabs(elem_id="txt2img_extra_tabs") extra_tabs.__enter__() - with gr.Tab("Generation", id="txt2img_generation") as txt2img_generation_tab, gr.Row(equal_height=False): + with gr.Tab("Generation", id="txt2img_generation") as txt2img_generation_tab, ResizeHandleRow(equal_height=False): with gr.Column(variant='compact', elem_id="txt2img_settings"): scripts.scripts_txt2img.prepare_ui() @@ -549,7 +549,7 @@ def create_ui(): extra_tabs = gr.Tabs(elem_id="img2img_extra_tabs") extra_tabs.__enter__() - with gr.Tab("Generation", id="img2img_generation") as img2img_generation_tab, FormRow(equal_height=False): + with gr.Tab("Generation", id="img2img_generation") as img2img_generation_tab, ResizeHandleRow(equal_height=False): with gr.Column(variant='compact', elem_id="img2img_settings"): copy_image_buttons = [] copy_image_destinations = {} diff --git a/modules/ui_components.py b/modules/ui_components.py index d08b2b99..55979f62 100644 --- a/modules/ui_components.py +++ b/modules/ui_components.py @@ -20,6 +20,18 @@ class ToolButton(FormComponent, gr.Button): return "button" +class ResizeHandleRow(gr.Row): + """Same as gr.Row but fits inside gradio forms""" + + def __init__(self, **kwargs): + super().__init__(**kwargs) + + self.elem_classes.append("resize-handle-row") + + def get_block_name(self): + return "row" + + class FormRow(FormComponent, gr.Row): """Same as gr.Row but fits inside gradio forms""" diff --git a/style.css b/style.css index 46125864..4166a3df 100644 --- a/style.css +++ b/style.css @@ -1055,3 +1055,15 @@ div.accordions > div.input-accordion.input-accordion-open{ position: sticky; top: 0.5em; } + + +.resize-handle{ + cursor: col-resize; + grid-column: 2 / 3; + min-width: 8px !important; + max-width: 8px !important; + height: 100%; + border-left: 1px dashed var(--border-color-primary); + user-select: none; + margin-left: 8px; +} -- cgit v1.2.3 From aed52d163245649edb36feb1b2699b9d25e8672d Mon Sep 17 00:00:00 2001 From: catboxanon <122327233+catboxanon@users.noreply.github.com> Date: Mon, 21 Aug 2023 12:40:27 -0400 Subject: Reset columns on resize handle dblclick --- javascript/resizeHandle.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'javascript') diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 71023f9f..5edecfcc 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -75,6 +75,8 @@ R.screenX = evt.screenX; }); + resizeHandle.addEventListener('dblclick', () => parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS); + afterResize(parent); } -- cgit v1.2.3 From 0998256fc5e040fa1c1d5826bd858ab3838a3f26 Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Tue, 22 Aug 2023 16:45:34 +0900 Subject: Prevent text selection and cursor changes --- javascript/resizeHandle.js | 26 ++++++++++++++++++++++++-- style.css | 7 +++++++ 2 files changed, 31 insertions(+), 2 deletions(-) (limited to 'javascript') diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 5edecfcc..c0c8cbff 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -66,6 +66,11 @@ parent.insertBefore(resizeHandle, rightCol); resizeHandle.addEventListener('mousedown', (evt) => { + evt.preventDefault(); + evt.stopPropagation(); + + document.body.classList.add('resizing'); + R.tracking = true; R.parent = parent; R.parentWidth = parent.offsetWidth; @@ -75,20 +80,37 @@ R.screenX = evt.screenX; }); - resizeHandle.addEventListener('dblclick', () => parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS); + resizeHandle.addEventListener('dblclick', (evt) => { + evt.preventDefault(); + evt.stopPropagation(); + + parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS; + }); afterResize(parent); } window.addEventListener('mousemove', (evt) => { if (R.tracking) { + evt.preventDefault(); + evt.stopPropagation(); + const delta = R.screenX - evt.screenX; const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH); setLeftColGridTemplate(R.parent, leftColWidth); } }); - window.addEventListener('mouseup', () => R.tracking = false); + window.addEventListener('mouseup', (evt) => { + if (R.tracking) { + evt.preventDefault(); + evt.stopPropagation(); + + R.tracking = false; + + document.body.classList.remove('resizing'); + } + }); window.addEventListener('resize', () => { diff --git a/style.css b/style.css index 4e9cdc8f..537bc2d2 100644 --- a/style.css +++ b/style.css @@ -1061,6 +1061,13 @@ div.accordions > div.input-accordion.input-accordion-open{ top: 0.5em; } +body.resizing { + cursor: col-resize !important; +} + +body.resizing :not(.resize-handle) { + pointer-events: none !important; +} .resize-handle { position: relative; -- cgit v1.2.3 From f6c52f4f41f4afe306b5adc90ba81feeca238e1a Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Tue, 22 Aug 2023 11:02:14 +0300 Subject: for live previews, only hide gallery after at least one live previews pic has been received fix blinking for live previews fix a clientside live previews exception that happens when you kill serverside during sampling match the size of live preview image to gallery image --- javascript/progressbar.js | 24 ++++++++++++++++++------ style.css | 2 +- 2 files changed, 19 insertions(+), 7 deletions(-) (limited to 'javascript') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index a7c69937..4a95077e 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -79,17 +79,17 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre divProgress.appendChild(divInner); parentProgressbar.insertBefore(divProgress, progressbarContainer); - if (gallery) { - var livePreview = document.createElement('div'); - livePreview.className = 'livePreview'; - gallery.insertBefore(livePreview, gallery.firstElementChild); - } + var livePreview = null; var removeProgressBar = function() { + if(! divProgress) return; + setTitle(""); parentProgressbar.removeChild(divProgress); if (gallery) gallery.removeChild(livePreview); atEnd(); + + divProgress = null; }; var funProgress = function(id_task) { @@ -149,8 +149,16 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre var funLivePreview = function(id_task, id_live_preview) { request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) { if (res.live_preview && gallery) { + + var img = new Image(); img.onload = function() { + if(!livePreview){ + livePreview = document.createElement('div'); + livePreview.className = 'livePreview'; + gallery.insertBefore(livePreview, gallery.firstElementChild); + } + livePreview.appendChild(img); if (livePreview.childElementCount > 2) { livePreview.removeChild(livePreview.firstElementChild); @@ -168,5 +176,9 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre }; funProgress(id_task, 0); - funLivePreview(id_task, 0); + + if(gallery){ + funLivePreview(id_task, 0); + } + } diff --git a/style.css b/style.css index 4166a3df..cb12e036 100644 --- a/style.css +++ b/style.css @@ -541,7 +541,7 @@ table.popup-table .link{ position: absolute; object-fit: contain; width: 100%; - height: 100%; + height: calc(100% - 60px); /* to match gradio's height */ } /* fullscreen popup (ie in Lora's (i) button) */ -- cgit v1.2.3 From 96edfb560b32af2abcf4398d277e92a2d2b1032c Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Tue, 22 Aug 2023 17:19:26 +0900 Subject: Limit mouse detection to primary button only --- javascript/resizeHandle.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'javascript') diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index c0c8cbff..2fd3c4d2 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -66,6 +66,8 @@ parent.insertBefore(resizeHandle, rightCol); resizeHandle.addEventListener('mousedown', (evt) => { + if (evt.button !== 0) return; + evt.preventDefault(); evt.stopPropagation(); @@ -91,6 +93,8 @@ } window.addEventListener('mousemove', (evt) => { + if (evt.button !== 0) return; + if (R.tracking) { evt.preventDefault(); evt.stopPropagation(); @@ -102,6 +106,8 @@ }); window.addEventListener('mouseup', (evt) => { + if (evt.button !== 0) return; + if (R.tracking) { evt.preventDefault(); evt.stopPropagation(); -- cgit v1.2.3 From 9e4019c5ffb3c105156c6c8a9af83fde52d7f0c4 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Tue, 22 Aug 2023 12:00:29 +0300 Subject: make it possible to localize tooltips and placeholders --- javascript/localization.js | 38 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) (limited to 'javascript') diff --git a/javascript/localization.js b/javascript/localization.js index 0c9032f9..26f21bcf 100644 --- a/javascript/localization.js +++ b/javascript/localization.js @@ -107,12 +107,46 @@ function processNode(node) { }); } +function localizeWholePage(){ + processNode(gradioApp()); + + function elem(comp) { + if(comp.props.elem_id) { + elem_id = comp.props.elem_id; + } else{ + elem_id = "component-" + comp.id; + } + + return gradioApp().getElementById(elem_id); + } + + for(comp of window.gradio_config.components) { + if(comp.props.webui_tooltip) { + var e = elem(comp); + + var tl = e ? getTranslation(e.title) : undefined; + if (tl !== undefined) { + e.title = tl; + } + } + if(comp.props.placeholder) { + var e = elem(comp); + var textbox = e ? e.querySelector('[placeholder]') : null; + + var tl = textbox ? getTranslation(textbox.placeholder) : undefined; + if (tl !== undefined) { + textbox.placeholder = tl; + } + } + } +} + function dumpTranslations() { if (!hasLocalization()) { // If we don't have any localization, // we will not have traversed the app to find // original_lines, so do that now. - processNode(gradioApp()); + localizeWholePage(); } var dumped = {}; if (localization.rtl) { @@ -154,7 +188,7 @@ document.addEventListener("DOMContentLoaded", function() { }); }); - processNode(gradioApp()); + localizeWholePage(); if (localization.rtl) { // if the language is from right to left, (new MutationObserver((mutations, observer) => { // wait for the style to load -- cgit v1.2.3 From 9158d0fd1215bb93358e6c58395c08d4ffe011f2 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Tue, 22 Aug 2023 13:54:45 +0300 Subject: fix broken generate button if not using live previews --- javascript/progressbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'javascript') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 4a95077e..160813fc 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -86,7 +86,7 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre setTitle(""); parentProgressbar.removeChild(divProgress); - if (gallery) gallery.removeChild(livePreview); + if (gallery && livePreview) gallery.removeChild(livePreview); atEnd(); divProgress = null; -- cgit v1.2.3 From 0d90064e9e00612b1e065eba4e7b394e7892af34 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Tue, 22 Aug 2023 13:57:05 +0300 Subject: eslint --- javascript/localization.js | 25 ++++++++++--------------- javascript/progressbar.js | 6 +++--- 2 files changed, 13 insertions(+), 18 deletions(-) (limited to 'javascript') diff --git a/javascript/localization.js b/javascript/localization.js index 26f21bcf..8f00c186 100644 --- a/javascript/localization.js +++ b/javascript/localization.js @@ -107,33 +107,28 @@ function processNode(node) { }); } -function localizeWholePage(){ +function localizeWholePage() { processNode(gradioApp()); function elem(comp) { - if(comp.props.elem_id) { - elem_id = comp.props.elem_id; - } else{ - elem_id = "component-" + comp.id; - } - + var elem_id = comp.props.elem_id ? comp.props.elem_id : "component-" + comp.id; return gradioApp().getElementById(elem_id); } - for(comp of window.gradio_config.components) { - if(comp.props.webui_tooltip) { - var e = elem(comp); + for (var comp of window.gradio_config.components) { + if (comp.props.webui_tooltip) { + let e = elem(comp); - var tl = e ? getTranslation(e.title) : undefined; + let tl = e ? getTranslation(e.title) : undefined; if (tl !== undefined) { e.title = tl; } } - if(comp.props.placeholder) { - var e = elem(comp); - var textbox = e ? e.querySelector('[placeholder]') : null; + if (comp.props.placeholder) { + let e = elem(comp); + let textbox = e ? e.querySelector('[placeholder]') : null; - var tl = textbox ? getTranslation(textbox.placeholder) : undefined; + let tl = textbox ? getTranslation(textbox.placeholder) : undefined; if (tl !== undefined) { textbox.placeholder = tl; } diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 160813fc..531ac831 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -82,7 +82,7 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre var livePreview = null; var removeProgressBar = function() { - if(! divProgress) return; + if (!divProgress) return; setTitle(""); parentProgressbar.removeChild(divProgress); @@ -153,7 +153,7 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre var img = new Image(); img.onload = function() { - if(!livePreview){ + if (!livePreview) { livePreview = document.createElement('div'); livePreview.className = 'livePreview'; gallery.insertBefore(livePreview, gallery.firstElementChild); @@ -177,7 +177,7 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre funProgress(id_task, 0); - if(gallery){ + if (gallery) { funLivePreview(id_task, 0); } -- cgit v1.2.3 From 04cfcf91d9a53332b97ba512e86259a59ab4182f Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Tue, 22 Aug 2023 21:05:25 +0300 Subject: fix endless progress requests --- javascript/progressbar.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'javascript') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 531ac831..77761495 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -148,9 +148,11 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre var funLivePreview = function(id_task, id_live_preview) { request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) { - if (res.live_preview && gallery) { - + if (!divProgress) { + return; + } + if (res.live_preview && gallery) { var img = new Image(); img.onload = function() { if (!livePreview) { -- cgit v1.2.3 From 9d8d279d0d4d103e1b7d0bad21a3eb835dbab9aa Mon Sep 17 00:00:00 2001 From: catboxanon <122327233+catboxanon@users.noreply.github.com> Date: Sat, 26 Aug 2023 15:56:17 -0400 Subject: Prevent duplicate resize handler --- javascript/resizeHandle.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'javascript') diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 2fd3c4d2..8c5c5169 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -134,6 +134,8 @@ onUiLoaded(function() { for (var elem of gradioApp().querySelectorAll('.resize-handle-row')) { - setupResizeHandle(elem); + if (!elem.querySelector('.resize-handle')) { + setupResizeHandle(elem); + } } }); -- cgit v1.2.3 From 23c6b5f1242f89c37a094d7a9237491c1ca1da34 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sun, 27 Aug 2023 09:39:37 +0300 Subject: fix style editing dialog breaking if it's opened in both img2img and txt2img tabs --- javascript/extraNetworks.js | 9 +++++++++ modules/ui_common.py | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) (limited to 'javascript') diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index 3bc723d3..ad1a4e00 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -249,6 +249,15 @@ function popup(contents) { globalPopup.style.display = "flex"; } +var storedPopupIds = {}; +function popupId(id) { + if(! storedPopupIds[id]){ + storedPopupIds[id] = gradioApp().getElementById(id); + } + + popup(storedPopupIds[id]); +} + function extraNetworksShowMetadata(text) { var elem = document.createElement('pre'); elem.classList.add('popup-metadata'); diff --git a/modules/ui_common.py b/modules/ui_common.py index eddc4bc8..84a7d7f2 100644 --- a/modules/ui_common.py +++ b/modules/ui_common.py @@ -261,7 +261,7 @@ def setup_dialog(button_show, dialog, *, button_close=None): fn=lambda: gr.update(visible=True), inputs=[], outputs=[dialog], - ).then(fn=None, _js="function(){ popup(gradioApp().getElementById('" + dialog.elem_id + "')); }") + ).then(fn=None, _js="function(){ popupId('" + dialog.elem_id + "'); }") if button_close: button_close.click(fn=None, _js="closePopup") -- cgit v1.2.3 From 63d3150dc4f5c4452a4a385329eb8954f53d6451 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sun, 27 Aug 2023 10:11:14 +0300 Subject: lint --- javascript/extraNetworks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'javascript') diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index ad1a4e00..493f31af 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -251,7 +251,7 @@ function popup(contents) { var storedPopupIds = {}; function popupId(id) { - if(! storedPopupIds[id]){ + if (!storedPopupIds[id]) { storedPopupIds[id] = gradioApp().getElementById(id); } -- cgit v1.2.3