1 files changed, 145 insertions, 2 deletions

diff --git a/script.js b/script.js
index 0852e421..113d4335 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(){
@@ -74,6 +76,90 @@ function gradioApp(){
 
 global_progressbar = null
 
+function closeModal() {
+  gradioApp().getElementById("lightboxModal").style.display = "none";
+}
+
+function showModal(event) {
+  var source = event.target || event.srcElement;
+  gradioApp().getElementById("modalImage").src = source.src
+  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")
+
+  if(galleryButtons.length>1){
+      var currentButton  = gradioApp().querySelector(".gallery-item.transition-all.\\!ring-2")
+
+      var result = -1
+      galleryButtons.forEach(function(v, i){ if(v==currentButton) { result = i } })
+
+      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)
+      }
+  }
+
+}
+
+function modalNextImage(event){
+  modalImageSwitch(1)
+  event.stopPropagation()
+}
+
+function modalPrevImage(event){
+  modalImageSwitch(-1)  
+  event.stopPropagation()
+}
+
+function modalKeyHandler(event){
+    switch (event.key) {
+        case "ArrowLeft":
+            modalPrevImage(event)
+            break;
+        case "ArrowRight":
+            modalNextImage(event)
+            break;
+    }
+}
+
+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];
@@ -115,13 +201,18 @@ function addTitles(root){
                 img2img_preview.style.width = img2img_gallery.clientWidth + "px"
                 img2img_preview.style.height = img2img_gallery.clientHeight + "px"
             }
-
-
+		
             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() {
@@ -129,6 +220,49 @@ 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.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);
+	
 });
 
 function selected_gallery_index(){
@@ -180,6 +314,15 @@ function submit(){
     for(var i=0;i<arguments.length;i++){
         res.push(arguments[i])
     }
+
+    // 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.
+    // I don't know why gradio is seding outputs along with inputs, but we can prevent sending the image gallery here, which seems to be an issue for some.
+    // If gradio at some point stops sending outputs, this may break something
+    if(Array.isArray(res[res.length - 3])){
+        res[res.length - 3] = null
+    }
+
     return res
 }