fix conflicts

5 files changed, 191 insertions, 7 deletions

diff --git a/javascript/contextMenus.js b/javascript/contextMenus.js
new file mode 100644
index 00000000..2d82269f
--- /dev/null
+++ b/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()

+});

diff --git a/javascript/edit-attention.js b/javascript/edit-attention.js
index c67ed579..0280c603 100644
--- a/javascript/edit-attention.js
+++ b/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;

 

diff --git a/javascript/hints.js b/javascript/hints.js
index 8adcd983..8e352e94 100644
--- a/javascript/hints.js
+++ b/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.",
 
diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index 3a0baac8..4c0e8f4b 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -86,6 +86,9 @@ function showGalleryImage(){
         
         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'
diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index f9e9290e..4395a215 100644
--- a/javascript/progressbar.js
+++ b/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"
     }
 }