Merge branch 'AUTOMATIC1111:master' into master

javascript/contextMenus.js

@@ -0,0 +1,172 @@
+
+contextMenuInit = function(){
+  let eventListenerApplied=false;
+  let menuSpecs = new Map();
+
+  const uid = function(){
+    return Date.now().toString(36) + Math.random().toString(36).substr(2);
+  }
+
+  function showContextMenu(event,element,menuEntries){
+    let posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+    let posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
+
+    let oldMenu = gradioApp().querySelector('#context-menu')
+    if(oldMenu){
+      oldMenu.remove()
+    }
+
+    let tabButton = gradioApp().querySelector('button')
+    let baseStyle = window.getComputedStyle(tabButton)
+
+    const contextMenu = document.createElement('nav')
+    contextMenu.id = "context-menu"
+    contextMenu.style.background = baseStyle.background
+    contextMenu.style.color = baseStyle.color
+    contextMenu.style.fontFamily = baseStyle.fontFamily
+    contextMenu.style.top = posy+'px'
+    contextMenu.style.left = posx+'px'
+
+
+
+    const contextMenuList = document.createElement('ul')
+    contextMenuList.className = 'context-menu-items';
+    contextMenu.append(contextMenuList);
+
+    menuEntries.forEach(function(entry){
+      let contextMenuEntry = document.createElement('a')
+      contextMenuEntry.innerHTML = entry['name']
+      contextMenuEntry.addEventListener("click", function(e) {
+        entry['func']();
+      })
+      contextMenuList.append(contextMenuEntry);
+
+    })
+
+    gradioApp().getRootNode().appendChild(contextMenu)
+
+    let menuWidth = contextMenu.offsetWidth + 4;
+    let menuHeight = contextMenu.offsetHeight + 4;
+
+    let windowWidth = window.innerWidth;
+    let windowHeight = window.innerHeight;
+
+    if ( (windowWidth - posx) < menuWidth ) {
+      contextMenu.style.left = windowWidth - menuWidth + "px";
+    }
+
+    if ( (windowHeight - posy) < menuHeight ) {
+      contextMenu.style.top = windowHeight - menuHeight + "px";
+    }
+
+  }
+
+  function appendContextMenuOption(targetEmementSelector,entryName,entryFunction){
+    
+    currentItems = menuSpecs.get(targetEmementSelector)
+    
+    if(!currentItems){
+      currentItems = []
+      menuSpecs.set(targetEmementSelector,currentItems);
+    }
+    let newItem = {'id':targetEmementSelector+'_'+uid(), 
+                   'name':entryName,
+                   'func':entryFunction,
+                   'isNew':true}
+
+    currentItems.push(newItem)
+    return newItem['id']
+  }
+
+  function removeContextMenuOption(uid){
+    menuSpecs.forEach(function(v,k) {
+      let index = -1
+      v.forEach(function(e,ei){if(e['id']==uid){index=ei}})
+      if(index>=0){
+        v.splice(index, 1);
+      }
+    })
+  }
+
+  function addContextMenuEventListener(){
+    if(eventListenerApplied){
+      return;
+    }
+    gradioApp().addEventListener("click", function(e) {
+      let source = e.composedPath()[0]
+      if(source.id && source.indexOf('check_progress')>-1){
+        return
+      }
+      
+      let oldMenu = gradioApp().querySelector('#context-menu')
+      if(oldMenu){
+        oldMenu.remove()
+      }
+    });
+    gradioApp().addEventListener("contextmenu", function(e) {
+      let oldMenu = gradioApp().querySelector('#context-menu')
+      if(oldMenu){
+        oldMenu.remove()
+      }
+      menuSpecs.forEach(function(v,k) {
+        if(e.composedPath()[0].matches(k)){
+          showContextMenu(e,e.composedPath()[0],v)
+          e.preventDefault()
+          return
+        }
+      })
+    });
+    eventListenerApplied=true
+  
+  }
+
+  return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener]
+}
+
+initResponse = contextMenuInit()
+appendContextMenuOption     = initResponse[0]
+removeContextMenuOption     = initResponse[1]
+addContextMenuEventListener = initResponse[2]
+
+
+//Start example Context Menu Items
+generateOnRepeatId = appendContextMenuOption('#txt2img_generate','Generate forever',function(){
+  let genbutton = gradioApp().querySelector('#txt2img_generate');
+  let interruptbutton = gradioApp().querySelector('#txt2img_interrupt');
+  if(!interruptbutton.offsetParent){
+    genbutton.click();
+  }
+  clearInterval(window.generateOnRepeatInterval)
+  window.generateOnRepeatInterval = setInterval(function(){
+    if(!interruptbutton.offsetParent){
+      genbutton.click();
+    }
+  },
+  500)}
+)
+
+cancelGenerateForever = function(){ 
+  clearInterval(window.generateOnRepeatInterval) 
+  let interruptbutton = gradioApp().querySelector('#txt2img_interrupt');
+  if(interruptbutton.offsetParent){
+      interruptbutton.click();
+  }
+}
+
+appendContextMenuOption('#txt2img_interrupt','Cancel generate forever',cancelGenerateForever)
+appendContextMenuOption('#txt2img_generate', 'Cancel generate forever',cancelGenerateForever)
+
+
+appendContextMenuOption('#roll','Roll three',
+  function(){ 
+    let rollbutton = gradioApp().querySelector('#roll');
+    setTimeout(function(){rollbutton.click()},100)
+    setTimeout(function(){rollbutton.click()},200)
+    setTimeout(function(){rollbutton.click()},300)
+  }
+)
+//End example Context Menu Items
+
+onUiUpdate(function(){
+  addContextMenuEventListener()
+});

javascript/edit-attention.js

@@ -1,5 +1,5 @@
 addEventListener('keydown', (event) => {
-	let target = event.originalTarget;
+	let target = event.originalTarget || event.composedPath()[0];
 	if (!target.hasAttribute("placeholder")) return;
 	if (!target.placeholder.toLowerCase().includes("prompt")) return;
 

javascript/hints.js

@@ -35,6 +35,7 @@ titles = {
     "Denoising strength": "Determines how little respect the algorithm should have for image's content. At 0, nothing will change, and at 1 you'll get an unrelated image. With values below 1.0, processing will take less steps than the Sampling Steps slider specifies.",
     "Denoising strength change factor": "In loopback mode, on each loop the denoising strength is multiplied by this value. <1 means decreasing variety so your sequence will converge on a fixed picture. >1 means increasing variety so your sequence will become more and more chaotic.",
 
+    "Skip": "Stop processing current image and continue processing.",
     "Interrupt": "Stop processing images and return any results accumulated so far.",
     "Save": "Write image to a directory (default - log/images) and generation parameters into csv file.",
 

javascript/imageviewer.js

@@ -1,72 +1,97 @@
 // A full size 'lightbox' preview modal shown when left clicking on gallery previews
-
 function closeModal() {
-  gradioApp().getElementById("lightboxModal").style.display = "none";
+    gradioApp().getElementById("lightboxModal").style.display = "none";
 }
 
 function showModal(event) {
-  const source = event.target || event.srcElement;
-  const modalImage = gradioApp().getElementById("modalImage")
-  const lb = gradioApp().getElementById("lightboxModal")
-  modalImage.src = source.src
-  if (modalImage.style.display === 'none') {
-    lb.style.setProperty('background-image', 'url(' + source.src + ')');
-  }
-  lb.style.display = "block";
-  lb.focus()
-  event.stopPropagation()
+    const source = event.target || event.srcElement;
+    const modalImage = gradioApp().getElementById("modalImage")
+    const lb = gradioApp().getElementById("lightboxModal")
+    modalImage.src = source.src
+    if (modalImage.style.display === 'none') {
+        lb.style.setProperty('background-image', 'url(' + source.src + ')');
+    }
+    lb.style.display = "block";
+    lb.focus()
+    event.stopPropagation()
 }
 
 function negmod(n, m) {
-  return ((n % m) + m) % m;
+    return ((n % m) + m) % m;
 }
 
-function modalImageSwitch(offset){
-  var allgalleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all")
-  var galleryButtons = []
-  allgalleryButtons.forEach(function(elem){
-    if(elem.parentElement.offsetParent){
-        galleryButtons.push(elem);
+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})`)
+            }
+        }
     }
-  })
+}
 
-  if(galleryButtons.length>1){
-      var allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")
-      var currentButton = null
-      allcurrentButtons.forEach(function(elem){
-        if(elem.parentElement.offsetParent){
-            currentButton = elem;
+function modalImageSwitch(offset) {
+    var allgalleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all")
+    var galleryButtons = []
+    allgalleryButtons.forEach(function(elem) {
+        if (elem.parentElement.offsetParent) {
+            galleryButtons.push(elem);
         }
-      })
+    })
 
-      var result = -1
-      galleryButtons.forEach(function(v, i){ if(v==currentButton) { result = i } })
+    if (galleryButtons.length > 1) {
+        var allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")
+        var currentButton = null
+        allcurrentButtons.forEach(function(elem) {
+            if (elem.parentElement.offsetParent) {
+                currentButton = elem;
+            }
+        })
 
-      if(result != -1){
-        nextButton = galleryButtons[negmod((result+offset),galleryButtons.length)]
-        nextButton.click()
-        const modalImage = gradioApp().getElementById("modalImage");
-        const modal = gradioApp().getElementById("lightboxModal");
-        modalImage.src = nextButton.children[0].src;
-        if (modalImage.style.display === 'none') {
-            modal.style.setProperty('background-image', `url(${modalImage.src})`)
+        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()
+            const modalImage = gradioApp().getElementById("modalImage");
+            const modal = gradioApp().getElementById("lightboxModal");
+            modalImage.src = nextButton.children[0].src;
+            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){
-  modalImageSwitch(1)
-  event.stopPropagation()
+function modalNextImage(event) {
+    modalImageSwitch(1)
+    event.stopPropagation()
 }
 
-function modalPrevImage(event){
-  modalImageSwitch(-1)  
-  event.stopPropagation()
+function modalPrevImage(event) {
+    modalImageSwitch(-1)
+    event.stopPropagation()
 }
 
-function modalKeyHandler(event){
+function modalKeyHandler(event) {
     switch (event.key) {
         case "ArrowLeft":
             modalPrevImage(event)
@@ -80,21 +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_initialy_zoomed)
+                        modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed)
                         showModal(evt)
-                    },true);
+                    }, true);
                 }
             });
         }
@@ -102,21 +128,21 @@ function showGalleryImage(){
     }, 100);
 }
 
-function modalZoomSet(modalImage, enable){
-    if( enable ){
+function modalZoomSet(modalImage, 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';
@@ -131,17 +157,18 @@ function modalTileImageToggle(event){
     event.stopPropagation()
 }
 
-function galleryImageHandler(e){
-    if(e && e.parentElement.tagName == 'BUTTON'){
+function galleryImageHandler(e) {
+    if (e && e.parentElement.tagName == 'BUTTON') {
         e.onclick = showGalleryImage;
     }
 }
 
-onUiUpdate(function(){
+onUiUpdate(function() {
     fullImg_preview = gradioApp().querySelectorAll('img.w-full')
-        if(fullImg_preview != null){
-	    fullImg_preview.forEach(galleryImageHandler);
+    if (fullImg_preview != null) {
+        fullImg_preview.forEach(galleryImageHandler);
     }
+    updateOnBackgroundChange();
 })
 
 document.addEventListener("DOMContentLoaded", function() {
@@ -149,13 +176,13 @@ 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')
     modalControls.className = 'modalControls gradio-container';
     modal.append(modalControls);
-    
+
     const modalZoom = document.createElement('span')
     modalZoom.className = 'modalZoom cursor';
     modalZoom.innerHTML = '⤡'
@@ -180,30 +207,30 @@ 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.addEventListener('click',modalPrevImage,true);
+    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.tabIndex = 0
+    modalNext.addEventListener('click', modalNextImage, true);
     modalNext.addEventListener('keydown', modalKeyHandler, true)
 
     modal.appendChild(modalNext)
 
 
     gradioApp().getRootNode().appendChild(modal)
-    
+
     document.body.appendChild(modalFragment);
-	
+
 });

javascript/progressbar.js

@@ -1,8 +1,9 @@
 // code related to showing and updating progressbar shown as the image is being made
 global_progressbars = {}
 
-function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_interrupt, id_preview, id_gallery){
+function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip, id_interrupt, id_preview, id_gallery){
     var progressbar = gradioApp().getElementById(id_progressbar)
+    var skip = id_skip ? gradioApp().getElementById(id_skip) : null
     var interrupt = gradioApp().getElementById(id_interrupt)
     
     if(opts.show_progress_in_title && progressbar && progressbar.offsetParent){
@@ -32,30 +33,37 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_inte
 
                 var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0;
                 if(!progressDiv){
+                    if (skip) {
+                        skip.style.display = "none"
+                    }
                     interrupt.style.display = "none"
                 }
             }
 
-            window.setTimeout(function(){ requestMoreProgress(id_part, id_progressbar_span, id_interrupt) }, 500)
+            window.setTimeout(function() { requestMoreProgress(id_part, id_progressbar_span, id_skip, id_interrupt) }, 500)
         });
         mutationObserver.observe( progressbar, { childList:true, subtree:true })
 	}
 }
 
 onUiUpdate(function(){
-    check_progressbar('txt2img', 'txt2img_progressbar', 'txt2img_progress_span', 'txt2img_interrupt', 'txt2img_preview', 'txt2img_gallery')
-    check_progressbar('img2img', 'img2img_progressbar', 'img2img_progress_span', 'img2img_interrupt', 'img2img_preview', 'img2img_gallery')
-    check_progressbar('ti', 'ti_progressbar', 'ti_progress_span', 'ti_interrupt', 'ti_preview', 'ti_gallery')
+    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')
+    check_progressbar('ti', 'ti_progressbar', 'ti_progress_span', '', 'ti_interrupt', 'ti_preview', 'ti_gallery')
 })
 
-function requestMoreProgress(id_part, id_progressbar_span, id_interrupt){
+function requestMoreProgress(id_part, id_progressbar_span, id_skip, id_interrupt){
     btn = gradioApp().getElementById(id_part+"_check_progress");
     if(btn==null) return;
 
     btn.click();
     var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0;
+    var skip = id_skip ? gradioApp().getElementById(id_skip) : null
     var interrupt = gradioApp().getElementById(id_interrupt)
     if(progressDiv && interrupt){
+        if (skip) {
+            skip.style.display = "block"
+        }
         interrupt.style.display = "block"
     }
 }