From 0f4f8c60153179eb76fccaea2b689e77ab04530c Mon Sep 17 00:00:00 2001 From: Vladimir Mandic Date: Fri, 7 Jul 2023 20:20:45 -0400 Subject: [PATCH] extra networks fixes --- installer.py | 1 + javascript/extraNetworks.js | 56 +++++++++++++++++------------------- javascript/imageViewer.js | 12 ++++---- javascript/style.css | 5 ++-- modules/shared.py | 4 ++- modules/ui.py | 22 +++++++++----- modules/ui_extra_networks.py | 3 +- 7 files changed, 56 insertions(+), 47 deletions(-) diff --git a/installer.py b/installer.py index d54e95eb8..01f30a523 100644 --- a/installer.py +++ b/installer.py @@ -105,6 +105,7 @@ def setup_logging(): logging.getLogger("httpx").setLevel(logging.ERROR) logging.getLogger("ControlNet").handlers = log.handlers logging.getLogger("lycoris").handlers = log.handlers + # logging.getLogger("DeepSpeed").handlers = log.handlers def print_profile(profile: cProfile.Profile, msg: str): diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index d4dfc243e..5f02ed586 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -26,37 +26,33 @@ function setupExtraNetworksForTab(tabname) { }); intersectionObserver = new IntersectionObserver((entries) => { + if (!en) return + for (el of Array.from(gradioApp().querySelectorAll('.extra-network-cards'))) el.style.height = window.opts.extra_networks_height + 'vh'; if (entries[0].intersectionRatio > 0) { - for (el of Array.from(gradioApp().querySelectorAll('.extra-network-cards'))) { - const rect = el.getBoundingClientRect(); - if (rect.top > 0) { - if (!en) return - if (window.opts.extra_networks_card_cover == 'cover') { - en.style.transition = ''; - en.style.zIndex = 9999; - en.style.position = 'absolute'; - en.style.right = 'unset'; - en.style.width = 'unset'; - el.style.height = document.body.offsetHeight - el.getBoundingClientRect().top + 'px'; - gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset' - } if (window.opts.extra_networks_card_cover == 'sidebar') { - en.style.transition = 'width 0.2s ease'; - en.style.zIndex = 0; - en.style.position = 'absolute'; - en.style.right = '0'; - en.style.width = window.opts.extra_networks_sidebar_width + 'vw'; - el.style.height = gradioApp().getElementById(`${tabname}_settings`).offsetHeight - 90 + 'px'; - gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 100 - 2 - window.opts.extra_networks_sidebar_width + 'vw'; - } else { - en.style.transition = ''; - en.style.zIndex = 0; - en.style.position = 'relative'; - en.style.right = 'unset'; - en.style.width = 'unset'; - el.style.height = window.innerHeight - el.getBoundingClientRect().top + 'px'; - gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset' - } - } + if (window.opts.extra_networks_card_cover === 'cover') { + en.style.transition = ''; + en.style.zIndex = 9999; + en.style.position = 'absolute'; + en.style.right = 'unset'; + en.style.width = 'unset'; + en.style.height = 'unset'; + gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset' + } else if (window.opts.extra_networks_card_cover === 'sidebar') { + en.style.transition = 'width 0.2s ease'; + en.style.zIndex = 0; + en.style.position = 'absolute'; + en.style.right = '0'; + en.style.width = window.opts.extra_networks_sidebar_width + 'vw'; + en.style.height = '-webkit-fill-available' + gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 100 - 2 - window.opts.extra_networks_sidebar_width + 'vw'; + } else { + en.style.transition = ''; + en.style.zIndex = 0; + en.style.position = 'relative'; + en.style.right = 'unset'; + en.style.width = 'unset'; + en.style.height = 'unset'; + gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset' } } else { en.style.width = 0; diff --git a/javascript/imageViewer.js b/javascript/imageViewer.js index 4a5302fcc..b046b0503 100644 --- a/javascript/imageViewer.js +++ b/javascript/imageViewer.js @@ -150,7 +150,6 @@ onAfterUiUpdate(() => { document.addEventListener('DOMContentLoaded', () => { const modal = document.createElement('div'); - // modal.onclick = closeModal; modal.id = 'lightboxModal'; modal.tabIndex = 0; modal.addEventListener('keydown', modalKeyHandler, true); @@ -187,12 +186,13 @@ document.addEventListener('DOMContentLoaded', () => { modalImage.addEventListener('keydown', modalKeyHandler, true); modal.appendChild(modalImage); modalImage.onload = () => panzoom(modalImage, { zoomSpeed: 0.025, minZoom: 0.25, maxZoom: 4.0 }); - let drag = false; - modalImage.addEventListener('mousedown', () => drag = false); - modalImage.addEventListener('mousemove', () => drag = true); - modalImage.addEventListener('mouseup', () => { if (!drag) closeModal(); }); - // modalImage.onclick = closeModal; + let drag = false; + modal.addEventListener('mousedown', () => drag = false); + modal.addEventListener('mousemove', () => drag = true); + modal.addEventListener('scroll', () => drag = true); + modal.addEventListener('mouseup', () => { if (!drag) closeModal(); }); + const modalPrev = document.createElement('a'); modalPrev.className = 'modalPrev'; modalPrev.innerHTML = '❮'; diff --git a/javascript/style.css b/javascript/style.css index 1a09def29..3487c461a 100644 --- a/javascript/style.css +++ b/javascript/style.css @@ -432,6 +432,7 @@ div#extras_scale_to_tab div.form{ height: 100%; width: 100%; min-height: 0; + background: transparent; } table.settings-value-table{ @@ -533,11 +534,11 @@ table.settings-value-table td{ .extra-networks .description { margin-top: 8px; } .extra-networks .tab-nav > button { margin-right: 0; height: auto; padding: 2px 4px 2px 4px; } .extra-networks-tab { padding: 0 !important; } -.extra-network-subdirs { background: var(--input-background-fill); overflow-x: hidden; overflow-y: auto; max-height: 50vh; min-width: 80px; max-width: 120px; } +.extra-network-subdirs { background: var(--input-background-fill); overflow-x: hidden; overflow-y: auto; min-width: 80px; max-width: 120px; } .extra-networks-page { display: flex } .extra-networks .custom-button { min-width: 80px; max-width: 120px; width: 100%; background: none; justify-content: left; text-align: left; padding: 2px 8px 2px 8px; box-shadow: none; line-break: auto; } .extra-networks .custom-button:hover { background: var(--button-primary-background-fill) } -.extra-network-cards { display: flex; flex-wrap: wrap; height: 50vh; max-height: 50vh; overflow-y: scroll; overflow-x: hidden; width: -webkit-fill-available; } +.extra-network-cards { display: flex; flex-wrap: wrap; overflow-y: scroll; overflow-x: hidden; width: -webkit-fill-available; } .extra-network-cards .card { height: fit-content; margin: 0.5em; position: relative; scroll-snap-align: start; scroll-margin-top: 0; } .extra-network-cards .card .overlay { position: absolute; bottom: 0; padding: 0.2em; z-index: 10; width: 100%; background: none; } .extra-network-cards .card:hover .overlay { background: rgba(0, 0, 0, 0.40); } diff --git a/modules/shared.py b/modules/shared.py index f654c69bc..959ab7851 100644 --- a/modules/shared.py +++ b/modules/shared.py @@ -589,9 +589,11 @@ options_templates.update(options_section(('upscaling', "Upscaling"), { options_templates.update(options_section(('extra_networks', "Extra Networks"), { "ui_extra_networks_tab_reorder": OptionInfo("Checkpoints, Lora, LyCORIS, Textual Inversion, Hypernetworks", "Extra networks tab order"), "extra_networks_card_cover": OptionInfo("inline", "UI position", gr.Radio, lambda: {"choices": ["cover", "inline", "sidebar"]}), + "extra_networks_height": OptionInfo(47, "UI height (%)", gr.Slider, {"minimum": 10, "maximum": 100, "step": 1}), "extra_networks_sidebar_width": OptionInfo(35, "UI sidebar width (%)", gr.Slider, {"minimum": 10, "maximum": 80, "step": 1}), + "extra_networks_card_lazy": OptionInfo(True, "UI card preview lazy loading"), "extra_networks_card_size": OptionInfo(200, "UI card size (px)", gr.Slider, {"minimum": 20, "maximum": 2000, "step": 1}), - "extra_networks_card_square": OptionInfo(False, "UI disable variable aspect ratio"), + "extra_networks_card_square": OptionInfo(True, "UI disable variable aspect ratio"), "extra_networks_card_fit": OptionInfo("cover", "UI image contain method", gr.Radio, lambda: {"choices": ["contain", "cover", "fill"]}), "extra_network_skip_indexing": OptionInfo(False, "Do not automatically build extra network pages", gr.Checkbox), "lyco_patch_lora": OptionInfo(False, "Use LyCoris handler for all Lora types", gr.Checkbox), diff --git a/modules/ui.py b/modules/ui.py index 37b6c0363..3de32c239 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 sd_hijack, sd_models, script_callbacks, ui_extensions, deepbooru, extra_networks, ui_common, ui_postprocessing, ui_loadsave, ui_train, ui_models from modules.ui_components import FormRow, FormColumn, FormGroup, ToolButton, FormHTML # pylint: disable=unused-import from modules.paths import script_path, data_path -from modules.shared import opts, cmd_opts, backend, Backend +from modules.shared import opts, cmd_opts from modules import prompt_parser import modules.codeformer_model import modules.generation_parameters_copypaste as parameters_copypaste @@ -198,13 +198,21 @@ def update_token_counter(text, steps): prompt_schedules = [[[steps, text]]] flat_prompts = reduce(lambda list1, list2: list1+list2, prompt_schedules) prompts = [prompt_text for step, prompt_text in flat_prompts] - if backend == Backend.ORIGINAL: + if modules.shared.backend == modules.shared.Backend.ORIGINAL: token_count, max_length = max([sd_hijack.model_hijack.get_prompt_lengths(prompt) for prompt in prompts], key=lambda args: args[0]) - else: - tokenizer = modules.shared.sd_model.tokenizer - has_bos_token, has_eos_token = tokenizer.bos_token_id is not None, tokenizer.eos_token_id is not None - token_count = max([len(modules.shared.sd_model.tokenizer(prompt)) for prompt in prompts]) - int(has_bos_token) - int(has_eos_token) - max_length = tokenizer.model_max_length - int(has_bos_token) - int(has_eos_token) + elif modules.shared.backend == modules.shared.Backend.DIFFUSERS: + if modules.shared.sd_model is not None: + tokenizer = modules.shared.sd_model.tokenizer + has_bos_token = tokenizer.bos_token_id is not None + has_eos_token = tokenizer.eos_token_id is not None + ids = [modules.shared.sd_model.tokenizer(prompt) for prompt in prompts] + if len(ids) > 0 and hasattr(ids[0], 'input_ids'): + ids = [x.input_ids for x in ids] + token_count = max([len(x) for x in ids]) - int(has_bos_token) - int(has_eos_token) + max_length = tokenizer.model_max_length - int(has_bos_token) - int(has_eos_token) + else: + token_count = 0 + max_length = 75 return f"{token_count}/{max_length}" diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index c893b6de0..e2756917c 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -83,7 +83,7 @@ class ExtraNetworksPage: ℹ️ - + ''' # noqa: RUF001 @@ -214,6 +214,7 @@ class ExtraNetworksPage: "name": item["name"], "description": (item.get("description") or ""), "search_term": item.get("search_term", ""), + "loading": "lazy" if shared.opts.extra_networks_card_lazy else "eager", "card_click": item.get("onclick", '"' + html.escape(f"""return cardClicked({json.dumps(tabname)}, {item.get("prompt", None)}, {"true" if self.allow_negative_prompt else "false"})""") + '"'), "card_save_desc": '"' + html.escape(f"""return saveCardDescription(event, {json.dumps(tabname)}, {json.dumps(item["local_preview"])})""") + '"', "card_save_preview": '"' + html.escape(f"""return saveCardPreview(event, {json.dumps(tabname)}, {json.dumps(item["local_preview"])})""") + '"',