Update lightbox to change displayed image as soon as generation is complete (#1933)

* add updateOnBackgroundChange
* typo fixes.
* reindent to 4 spaces

javascript/imageviewer.js

@@ -1,5 +1,4 @@
 // A full size 'lightbox' preview modal shown when left clicking on gallery previews
-
 function closeModal() {
     gradioApp().getElementById("lightboxModal").style.display = "none";
 }
@@ -21,29 +20,53 @@ function negmod(n, m) {
     return ((n % m) + m) % m;
 }
 
-function modalImageSwitch(offset){
+function updateOnBackgroundChange() {
+    const modalImage = gradioApp().getElementById("modalImage")
+    if (modalImage && modalImage.offsetParent) {
+        let allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")
+        let currentButton = null
+        allcurrentButtons.forEach(function(elem) {
+            if (elem.parentElement.offsetParent) {
+                currentButton = elem;
+            }
+        })
+
+        if (modalImage.src != currentButton.children[0].src) {
+            modalImage.src = currentButton.children[0].src;
+            if (modalImage.style.display === 'none') {
+                modal.style.setProperty('background-image', `url(${modalImage.src})`)
+            }
+        }
+    }
+}
+
+function modalImageSwitch(offset) {
     var allgalleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all")
     var galleryButtons = []
-  allgalleryButtons.forEach(function(elem){
+    allgalleryButtons.forEach(function(elem) {
-    if(elem.parentElement.offsetParent){
+        if (elem.parentElement.offsetParent) {
             galleryButtons.push(elem);
         }
     })
 
-  if(galleryButtons.length>1){
+    if (galleryButtons.length > 1) {
         var allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")
         var currentButton = null
-      allcurrentButtons.forEach(function(elem){
+        allcurrentButtons.forEach(function(elem) {
-        if(elem.parentElement.offsetParent){
+            if (elem.parentElement.offsetParent) {
                 currentButton = elem;
             }
         })
 
         var result = -1
-      galleryButtons.forEach(function(v, i){ if(v==currentButton) { result = i } })
+        galleryButtons.forEach(function(v, i) {
+            if (v == currentButton) {
+                result = i
+            }
+        })
 
-      if(result != -1){
+        if (result != -1) {
-        nextButton = galleryButtons[negmod((result+offset),galleryButtons.length)]
+            nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)]
             nextButton.click()
             const modalImage = gradioApp().getElementById("modalImage");
             const modal = gradioApp().getElementById("lightboxModal");
@@ -51,22 +74,24 @@ function modalImageSwitch(offset){
             if (modalImage.style.display === 'none') {
                 modal.style.setProperty('background-image', `url(${modalImage.src})`)
             }
-        setTimeout( function(){modal.focus()},10)
+            setTimeout(function() {
+                modal.focus()
+            }, 10)
         }
     }
 }
 
-function modalNextImage(event){
+function modalNextImage(event) {
     modalImageSwitch(1)
     event.stopPropagation()
 }
 
-function modalPrevImage(event){
+function modalPrevImage(event) {
     modalImageSwitch(-1)
     event.stopPropagation()
 }
 
-function modalKeyHandler(event){
+function modalKeyHandler(event) {
     switch (event.key) {
         case "ArrowLeft":
             modalPrevImage(event)
@@ -80,24 +105,22 @@ function modalKeyHandler(event){
     }
 }
 
-function showGalleryImage(){
+function showGalleryImage() {
     setTimeout(function() {
         fullImg_preview = gradioApp().querySelectorAll('img.w-full.object-contain')
 
-        if(fullImg_preview != null){
+        if (fullImg_preview != null) {
             fullImg_preview.forEach(function function_name(e) {
                 if (e.dataset.modded)
                     return;
                 e.dataset.modded = true;
                 if(e && e.parentElement.tagName == 'DIV'){
-
                     e.style.cursor='pointer'
-
                     e.addEventListener('click', function (evt) {
                         if(!opts.js_modal_lightbox) return;
                         modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed)
                         showModal(evt)
-                    },true);
+                    }, true);
                 }
             });
         }
@@ -105,21 +128,21 @@ function showGalleryImage(){
     }, 100);
 }
 
-function modalZoomSet(modalImage, enable){
+function modalZoomSet(modalImage, enable) {
-    if( enable ){
+    if (enable) {
         modalImage.classList.add('modalImageFullscreen');
-    } else{
+    } else {
         modalImage.classList.remove('modalImageFullscreen');
     }
 }
 
-function modalZoomToggle(event){
+function modalZoomToggle(event) {
     modalImage = gradioApp().getElementById("modalImage");
     modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'))
     event.stopPropagation()
 }
 
-function modalTileImageToggle(event){
+function modalTileImageToggle(event) {
     const modalImage = gradioApp().getElementById("modalImage");
     const modal = gradioApp().getElementById("lightboxModal");
     const isTiling = modalImage.style.display === 'none';
@@ -134,17 +157,18 @@ function modalTileImageToggle(event){
     event.stopPropagation()
 }
 
-function galleryImageHandler(e){
+function galleryImageHandler(e) {
-    if(e && e.parentElement.tagName == 'BUTTON'){
+    if (e && e.parentElement.tagName == 'BUTTON') {
         e.onclick = showGalleryImage;
     }
 }
 
-onUiUpdate(function(){
+onUiUpdate(function() {
     fullImg_preview = gradioApp().querySelectorAll('img.w-full')
-        if(fullImg_preview != null){
+    if (fullImg_preview != null) {
         fullImg_preview.forEach(galleryImageHandler);
     }
+    updateOnBackgroundChange();
 })
 
 document.addEventListener("DOMContentLoaded", function() {
@@ -152,7 +176,7 @@ document.addEventListener("DOMContentLoaded", function() {
     const modal = document.createElement('div')
     modal.onclick = closeModal;
     modal.id = "lightboxModal";
-    modal.tabIndex=0
+    modal.tabIndex = 0
     modal.addEventListener('keydown', modalKeyHandler, true)
 
     const modalControls = document.createElement('div')
@@ -183,23 +207,23 @@ document.addEventListener("DOMContentLoaded", function() {
     const modalImage = document.createElement('img')
     modalImage.id = 'modalImage';
     modalImage.onclick = closeModal;
-    modalImage.tabIndex=0
+    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.tabIndex = 0
-    modalPrev.addEventListener('click',modalPrevImage,true);
+    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.tabIndex = 0
-    modalNext.addEventListener('click',modalNextImage,true);
+    modalNext.addEventListener('click', modalNextImage, true);
     modalNext.addEventListener('keydown', modalKeyHandler, true)
 
     modal.appendChild(modalNext)