From 6168d09218073c369fd08b7208f93805f624ec05 Mon Sep 17 00:00:00 2001 From: uservar <63248296+uservar@users.noreply.github.com> Date: Fri, 16 Sep 2022 19:07:14 +0000 Subject: Prevent uploading previous output from javascript As it is currently, txt2img and img2img send back the previous output args (txt2img_gallery, generation_info, html_info) whenever you generate a new image. This can lead to uploading a huge gallery of previously generated images, which leads to an unnecessary delay between submitting and beginning to generate. --- script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'script.js') diff --git a/script.js b/script.js index 0852e421..8b10b53d 100644 --- a/script.js +++ b/script.js @@ -177,7 +177,7 @@ function submit(){ window.setTimeout(requestProgress, 500) res = [] - for(var i=0;i Date: Sat, 17 Sep 2022 08:03:47 +0300 Subject: add a comment and some checks for the functionality of the last PR --- script.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'script.js') diff --git a/script.js b/script.js index 8b10b53d..4a70e51d 100644 --- a/script.js +++ b/script.js @@ -177,9 +177,18 @@ function submit(){ window.setTimeout(requestProgress, 500) res = [] - for(var i=0;i Date: Sat, 17 Sep 2022 13:49:36 +0300 Subject: X/Y plot support for switching checkpoints. --- modules/sd_models.py | 4 ++-- script.js | 2 ++ scripts/xy_grid.py | 15 +++++++++++++++ 3 files changed, 19 insertions(+), 2 deletions(-) (limited to 'script.js') diff --git a/modules/sd_models.py b/modules/sd_models.py index 036af0e4..4bd70fc5 100644 --- a/modules/sd_models.py +++ b/modules/sd_models.py @@ -127,9 +127,9 @@ def load_model(): return sd_model -def reload_model_weights(sd_model): +def reload_model_weights(sd_model, info=None): from modules import lowvram, devices - checkpoint_info = select_checkpoint() + checkpoint_info = info or select_checkpoint() if sd_model.sd_model_checkpint == checkpoint_info.filename: return diff --git a/script.js b/script.js index 4a70e51d..e63e0695 100644 --- a/script.js +++ b/script.js @@ -66,6 +66,8 @@ titles = { "Style 2": "Style to apply; styles have components for both positive and negative prompts and apply to both", "Apply style": "Insert selected styles into prompt fields", "Create style": "Save current prompts as a style. If you add the token {prompt} to the text, the style use that as placeholder for your prompt when you use the style in the future.", + + "Checkpoint name": "Loads weights from checkpoint before making images. You can either use hash or a part of filename (as seen in settings) for checkpoint name. Recommended to use with Y axis for less switching.", } function gradioApp(){ diff --git a/scripts/xy_grid.py b/scripts/xy_grid.py index eccfda87..680dd702 100644 --- a/scripts/xy_grid.py +++ b/scripts/xy_grid.py @@ -10,7 +10,9 @@ import gradio as gr from modules import images from modules.processing import process_images, Processed from modules.shared import opts, cmd_opts, state +import modules.shared as shared import modules.sd_samplers +import modules.sd_models import re @@ -41,6 +43,15 @@ def apply_sampler(p, x, xs): p.sampler_index = sampler_index +def apply_checkpoint(p, x, xs): + applicable = [info for info in modules.sd_models.checkpoints_list.values() if x in info.title] + assert len(applicable) > 0, f'Checkpoint {x} for found' + + info = applicable[0] + + modules.sd_models.reload_model_weights(shared.sd_model, info) + + def format_value_add_label(p, opt, x): if type(x) == float: x = round(x, 8) @@ -74,6 +85,7 @@ axis_options = [ AxisOption("CFG Scale", float, apply_field("cfg_scale"), format_value_add_label), AxisOption("Prompt S/R", str, apply_prompt, format_value), AxisOption("Sampler", str, apply_sampler, format_value), + AxisOption("Checkpoint name", str, apply_checkpoint, format_value), AxisOptionImg2Img("Denoising", float, apply_field("denoising_strength"), format_value_add_label), # as it is now all AxisOptionImg2Img items must go after AxisOption ones ] @@ -215,4 +227,7 @@ class Script(scripts.Script): if opts.grid_save: images.save_image(processed.images[0], p.outpath_grids, "xy_grid", prompt=p.prompt, seed=processed.seed, grid=True, p=p) + # restore checkpoint in case it was changed by axes + modules.sd_models.reload_model_weights(shared.sd_model) + return processed -- cgit v1.2.3 From 1a513370774ccb4cd9562f1b40048adc2ab7c896 Mon Sep 17 00:00:00 2001 From: DepFA <35278260+dfaker@users.noreply.github.com> Date: Sat, 17 Sep 2022 01:03:03 +0100 Subject: Add modal creation and functions --- script.js | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) (limited to 'script.js') diff --git a/script.js b/script.js index e63e0695..7c27da74 100644 --- a/script.js +++ b/script.js @@ -76,6 +76,35 @@ function gradioApp(){ global_progressbar = null +function closeModal() { + gradioApp().getElementById("lightboxModal").style.display = "none"; +} + +function showModal(elem) { + gradioApp().getElementById("modalImage").src = elem.src + gradioApp().getElementById("lightboxModal").style.display = "block"; +} + +function showGalleryImage(){ + setTimeout(function() { + fullImg_preview = gradioApp().querySelectorAll('img.w-full.object-contain') + + if(fullImg_preview != null){ + fullImg_preview.forEach(function function_name(e) { + if(e && e.parentElement.tagName == 'DIV'){ + e.style.cursor='pointer' + + elemfunc = function(elem){ + elem.onclick = function(){showModal(elem)}; + } + elemfunc(e) + } + }); + } + + }, 100); +} + function addTitles(root){ root.querySelectorAll('span, button, select').forEach(function(span){ tooltip = titles[span.textContent]; @@ -117,8 +146,18 @@ function addTitles(root){ img2img_preview.style.width = img2img_gallery.clientWidth + "px" img2img_preview.style.height = img2img_gallery.clientHeight + "px" } + + fullImg_preview = gradioApp().querySelectorAll('img.w-full') + if(fullImg_preview != null){ + fullImg_preview.forEach(function function_name(e) { + if(e && e.parentElement.tagName == 'BUTTON'){ + e.onclick = showGalleryImage; + } + }); + } + window.setTimeout(requestProgress, 500) }); mutationObserver.observe( progressbar, { childList:true, subtree:true }) @@ -131,6 +170,27 @@ document.addEventListener("DOMContentLoaded", function() { addTitles(gradioApp()); }); mutationObserver.observe( gradioApp(), { childList:true, subtree:true }) + + const modalFragment = document.createDocumentFragment(); + const modal = document.createElement('div') + modal.onclick = closeModal; + + const modalClose = document.createElement('span') + modalClose.className = 'modalClose cursor'; + modalClose.innerHTML = '×' + modalClose.onclick = closeModal; + modal.id = "lightboxModal"; + modal.appendChild(modalClose) + + const modalImage = document.createElement('img') + modalImage.id = 'modalImage'; + modalImage.onclick = closeModal; + modal.appendChild(modalImage) + + gradioApp().getRootNode().appendChild(modal) + + document.body.appendChild(modalFragment); + }); function selected_gallery_index(){ -- cgit v1.2.3 From 1ef79f926e6314b3ef9308b12ff7ad482afd790a Mon Sep 17 00:00:00 2001 From: DepFA <35278260+dfaker@users.noreply.github.com> Date: Sat, 17 Sep 2022 03:26:47 +0100 Subject: generalise to work on all non-masked images on all tabs --- script.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) (limited to 'script.js') diff --git a/script.js b/script.js index 7c27da74..a016eb4e 100644 --- a/script.js +++ b/script.js @@ -105,6 +105,12 @@ function showGalleryImage(){ }, 100); } +function galleryImageHandler(e){ + if(e && e.parentElement.tagName == 'BUTTON'){ + e.onclick = showGalleryImage; + } +} + function addTitles(root){ root.querySelectorAll('span, button, select').forEach(function(span){ tooltip = titles[span.textContent]; @@ -147,22 +153,17 @@ function addTitles(root){ img2img_preview.style.height = img2img_gallery.clientHeight + "px" } - fullImg_preview = gradioApp().querySelectorAll('img.w-full') - - if(fullImg_preview != null){ - - fullImg_preview.forEach(function function_name(e) { - if(e && e.parentElement.tagName == 'BUTTON'){ - e.onclick = showGalleryImage; - } - }); - } - window.setTimeout(requestProgress, 500) }); mutationObserver.observe( progressbar, { childList:true, subtree:true }) } + + fullImg_preview = gradioApp().querySelectorAll('img.w-full') + if(fullImg_preview != null){ + fullImg_preview.forEach(galleryImageHandler); + } + } document.addEventListener("DOMContentLoaded", function() { -- cgit v1.2.3 From f96d8a601c782885d33ce021ad2c3f20b801dd24 Mon Sep 17 00:00:00 2001 From: DepFA <35278260+dfaker@users.noreply.github.com> Date: Sat, 17 Sep 2022 15:29:06 +0100 Subject: Block event propagation when lightbox is triggered --- script.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) (limited to 'script.js') diff --git a/script.js b/script.js index a016eb4e..9e3d42b5 100644 --- a/script.js +++ b/script.js @@ -80,11 +80,14 @@ function closeModal() { gradioApp().getElementById("lightboxModal").style.display = "none"; } -function showModal(elem) { - gradioApp().getElementById("modalImage").src = elem.src +function showModal(event) { + var source = event.target || event.srcElement; + gradioApp().getElementById("modalImage").src = source.src gradioApp().getElementById("lightboxModal").style.display = "block"; + event.stopPropagation() } + function showGalleryImage(){ setTimeout(function() { fullImg_preview = gradioApp().querySelectorAll('img.w-full.object-contain') @@ -92,12 +95,13 @@ function showGalleryImage(){ if(fullImg_preview != null){ fullImg_preview.forEach(function function_name(e) { if(e && e.parentElement.tagName == 'DIV'){ + e.style.cursor='pointer' - elemfunc = function(elem){ - elem.onclick = function(){showModal(elem)}; - } - elemfunc(e) + e.addEventListener('click', function (evt) { + showModal(evt) + + },true); } }); } -- cgit v1.2.3 From 0e5527b4df6199d52aa6a424dcf95954cfd87d1f Mon Sep 17 00:00:00 2001 From: DepFA <35278260+dfaker@users.noreply.github.com> Date: Sat, 17 Sep 2022 17:58:33 +0100 Subject: Add previous and next to modal with key shortcuts --- script.js | 78 +++++++++++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 59 insertions(+), 19 deletions(-) (limited to 'script.js') diff --git a/script.js b/script.js index 9e3d42b5..276158e9 100644 --- a/script.js +++ b/script.js @@ -83,35 +83,53 @@ function closeModal() { function showModal(event) { var source = event.target || event.srcElement; gradioApp().getElementById("modalImage").src = source.src - gradioApp().getElementById("lightboxModal").style.display = "block"; + var lb = gradioApp().getElementById("lightboxModal") + lb.style.display = "block"; + lb.focus() event.stopPropagation() } +function negmod(n, m) { + return ((n % m) + m) % m; +} + +function modalImageSwitch(offset){ + var galleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all") -function showGalleryImage(){ - setTimeout(function() { - fullImg_preview = gradioApp().querySelectorAll('img.w-full.object-contain') - - if(fullImg_preview != null){ - fullImg_preview.forEach(function function_name(e) { - if(e && e.parentElement.tagName == 'DIV'){ + if(galleryButtons.length>1){ + var currentButton = gradioApp().querySelector(".gallery-item.transition-all.\\!ring-2") - e.style.cursor='pointer' + var result = -1 + galleryButtons.forEach(function(v, i){ if(v==currentButton) { result = i } }) - e.addEventListener('click', function (evt) { - showModal(evt) + if(result != -1){ + nextButton = galleryButtons[negmod((result+offset),galleryButtons.length)] + nextButton.click() + gradioApp().getElementById("modalImage").src = nextButton.children[0].src + setTimeout( function(){gradioApp().getElementById("lightboxModal").focus()},10) + } + } - },true); - } - }); - } +} - }, 100); +function modalNextImage(event){ + modalImageSwitch(1) + event.stopPropagation() } -function galleryImageHandler(e){ - if(e && e.parentElement.tagName == 'BUTTON'){ - e.onclick = showGalleryImage; +function modalPrevImage(event){ + modalImageSwitch(-1) + event.stopPropagation() +} + +function modalKeyHandler(event){ + switch (event.key) { + case "ArrowLeft": + modalPrevImage(event) + break; + case "ArrowRight": + modalNextImage(event) + break; } } @@ -185,13 +203,35 @@ document.addEventListener("DOMContentLoaded", function() { modalClose.innerHTML = '×' modalClose.onclick = closeModal; modal.id = "lightboxModal"; + modal.tabIndex=0 + modal.addEventListener('keydown', modalKeyHandler, true) modal.appendChild(modalClose) const modalImage = document.createElement('img') modalImage.id = 'modalImage'; modalImage.onclick = closeModal; + modalImage.tabIndex=0 + modalImage.addEventListener('keydown', modalKeyHandler, true) modal.appendChild(modalImage) + const modalPrev = document.createElement('a') + modalPrev.className = 'modalPrev'; + modalPrev.innerHTML = '❮' + modalPrev.tabIndex=0 + modalPrev.addEventListener('click',modalPrevImage,true); + modalPrev.addEventListener('keydown', modalKeyHandler, true) + modal.appendChild(modalPrev) + + const modalNext = document.createElement('a') + modalNext.className = 'modalNext'; + modalNext.innerHTML = '❯' + modalNext.tabIndex=0 + modalNext.addEventListener('click',modalNextImage,true); + modalNext.addEventListener('keydown', modalKeyHandler, true) + + modal.appendChild(modalNext) + + gradioApp().getRootNode().appendChild(modal) document.body.appendChild(modalFragment); -- cgit v1.2.3 From f9cae046cb0a676efeda2577761474e58c27abed Mon Sep 17 00:00:00 2001 From: DepFA <35278260+dfaker@users.noreply.github.com> Date: Sat, 17 Sep 2022 18:03:52 +0100 Subject: typo --- script.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) (limited to 'script.js') diff --git a/script.js b/script.js index 276158e9..113d4335 100644 --- a/script.js +++ b/script.js @@ -133,6 +133,33 @@ function modalKeyHandler(event){ } } +function showGalleryImage(){ + setTimeout(function() { + fullImg_preview = gradioApp().querySelectorAll('img.w-full.object-contain') + + if(fullImg_preview != null){ + fullImg_preview.forEach(function function_name(e) { + if(e && e.parentElement.tagName == 'DIV'){ + + e.style.cursor='pointer' + + e.addEventListener('click', function (evt) { + showModal(evt) + + },true); + } + }); + } + + }, 100); +} + +function galleryImageHandler(e){ + if(e && e.parentElement.tagName == 'BUTTON'){ + e.onclick = showGalleryImage; + } +} + function addTitles(root){ root.querySelectorAll('span, button, select').forEach(function(span){ tooltip = titles[span.textContent]; -- cgit v1.2.3