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. --- script.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'script.js') 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(){ -- cgit v1.2.1 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.1 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.1 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.1 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.1 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.1