From 3bd40bb77ff274f2a09efa07b759eebf6dc40b58 Mon Sep 17 00:00:00 2001 From: ruocaled Date: Fri, 14 Oct 2022 11:05:14 -0700 Subject: auto re-open selected image after re-generation attach an observer of gallery when generation in progress, if there was a image selected in gallery and gallery has only 1 image, auto re-select/open that image. This matches behavior of prior to Gradio 3.4.1 version bump, is a quality of life feature many people enjoyed. --- javascript/progressbar.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) (limited to 'javascript/progressbar.js') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 4395a215..4994b476 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -1,5 +1,7 @@ // code related to showing and updating progressbar shown as the image is being made global_progressbars = {} +galleries = {} +galleryObservers = {} function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip, id_interrupt, id_preview, id_gallery){ var progressbar = gradioApp().getElementById(id_progressbar) @@ -31,6 +33,9 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip preview.style.width = gallery.clientWidth + "px" preview.style.height = gallery.clientHeight + "px" + //only watch gallery if there is a generation process going on + check_gallery(id_gallery); + var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0; if(!progressDiv){ if (skip) { @@ -38,6 +43,12 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip } interrupt.style.display = "none" } + + //disconnect observer once generation finished, so user can close selected image if they want + if (galleryObservers[id_gallery]) { + galleryObservers[id_gallery].disconnect(); + galleries[id_gallery] = null; + } } window.setTimeout(function() { requestMoreProgress(id_part, id_progressbar_span, id_skip, id_interrupt) }, 500) @@ -46,6 +57,27 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip } } +function check_gallery(id_gallery){ + let gallery = gradioApp().getElementById(id_gallery) + // if gallery has no change, no need to setting up observer again. + if (gallery && galleries[id_gallery] !== gallery){ + galleries[id_gallery] = gallery; + if(galleryObservers[id_gallery]){ + galleryObservers[id_gallery].disconnect(); + } + galleryObservers[id_gallery] = new MutationObserver(function (){ + let galleryButtons = gradioApp().querySelectorAll('#'+id_gallery+' .gallery-item') + let galleryBtnSelected = gradioApp().querySelector('#'+id_gallery+' .gallery-item.\\!ring-2') + if (galleryButtons.length === 1 && !galleryBtnSelected) { + //automatically open when there is only 1 gallery btn, and was previously selected + galleryButtons[0].click(); + console.log('clicked'); + } + }) + galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false }) + } +} + onUiUpdate(function(){ check_progressbar('txt2img', 'txt2img_progressbar', 'txt2img_progress_span', 'txt2img_skip', 'txt2img_interrupt', 'txt2img_preview', 'txt2img_gallery') check_progressbar('img2img', 'img2img_progressbar', 'img2img_progress_span', 'img2img_skip', 'img2img_interrupt', 'img2img_preview', 'img2img_gallery') -- cgit v1.2.3 From 6b5c54c187796900bf677c8c14b62a166eb53b24 Mon Sep 17 00:00:00 2001 From: ruocaled Date: Fri, 14 Oct 2022 11:06:38 -0700 Subject: remove console.log --- javascript/progressbar.js | 1 - 1 file changed, 1 deletion(-) (limited to 'javascript/progressbar.js') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 4994b476..b4925e99 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -71,7 +71,6 @@ function check_gallery(id_gallery){ if (galleryButtons.length === 1 && !galleryBtnSelected) { //automatically open when there is only 1 gallery btn, and was previously selected galleryButtons[0].click(); - console.log('clicked'); } }) galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false }) -- cgit v1.2.3 From c84eef8195b2bae4f4b4d1785159ae9efd937abe Mon Sep 17 00:00:00 2001 From: ruocaled Date: Fri, 14 Oct 2022 11:10:26 -0700 Subject: fix observer disconnect logic --- javascript/progressbar.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'javascript/progressbar.js') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index b4925e99..196fe507 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -42,13 +42,15 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip skip.style.display = "none" } interrupt.style.display = "none" + + //disconnect observer once generation finished, so user can close selected image if they want + if (galleryObservers[id_gallery]) { + galleryObservers[id_gallery].disconnect(); + galleries[id_gallery] = null; + } } - //disconnect observer once generation finished, so user can close selected image if they want - if (galleryObservers[id_gallery]) { - galleryObservers[id_gallery].disconnect(); - galleries[id_gallery] = null; - } + } window.setTimeout(function() { requestMoreProgress(id_part, id_progressbar_span, id_skip, id_interrupt) }, 500) -- cgit v1.2.3 From b26efff8c496309329cd1982aee55e81bf81a655 Mon Sep 17 00:00:00 2001 From: ruocaled Date: Fri, 14 Oct 2022 17:14:59 -0700 Subject: allow re-open for multiple images gallery --- javascript/progressbar.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'javascript/progressbar.js') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 196fe507..574fd549 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -67,12 +67,13 @@ function check_gallery(id_gallery){ if(galleryObservers[id_gallery]){ galleryObservers[id_gallery].disconnect(); } + let prevSelectedIndex = selected_gallery_index(); galleryObservers[id_gallery] = new MutationObserver(function (){ let galleryButtons = gradioApp().querySelectorAll('#'+id_gallery+' .gallery-item') let galleryBtnSelected = gradioApp().querySelector('#'+id_gallery+' .gallery-item.\\!ring-2') - if (galleryButtons.length === 1 && !galleryBtnSelected) { - //automatically open when there is only 1 gallery btn, and was previously selected - galleryButtons[0].click(); + if (prevSelectedIndex !== -1 && galleryButtons.length>prevSelectedIndex && !galleryBtnSelected) { + //automatically re-open previously selected index (if exists) + galleryButtons[prevSelectedIndex].click(); } }) galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false }) -- cgit v1.2.3 From c7cd2fda5a6c9c97d5c238e0f2e1146d346e0e93 Mon Sep 17 00:00:00 2001 From: ruocaled Date: Fri, 14 Oct 2022 19:05:41 -0700 Subject: re-attach full screen zoom listeners --- javascript/progressbar.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'javascript/progressbar.js') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 574fd549..35f20b15 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -74,6 +74,9 @@ function check_gallery(id_gallery){ if (prevSelectedIndex !== -1 && galleryButtons.length>prevSelectedIndex && !galleryBtnSelected) { //automatically re-open previously selected index (if exists) galleryButtons[prevSelectedIndex].click(); + setTimeout(function (){ + showGalleryImage() + },100) } }) galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false }) -- cgit v1.2.3 From 661a61985c7bee34a67390a05761e25830a6b918 Mon Sep 17 00:00:00 2001 From: ruocaled Date: Fri, 14 Oct 2022 19:25:30 -0700 Subject: remove extra 100ms timeout --- javascript/progressbar.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'javascript/progressbar.js') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 35f20b15..076f0a97 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -74,9 +74,7 @@ function check_gallery(id_gallery){ if (prevSelectedIndex !== -1 && galleryButtons.length>prevSelectedIndex && !galleryBtnSelected) { //automatically re-open previously selected index (if exists) galleryButtons[prevSelectedIndex].click(); - setTimeout(function (){ - showGalleryImage() - },100) + showGalleryImage(); } }) galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false }) -- cgit v1.2.3