toggle generate forever remove context menu #85

html/svg/infinity-fill.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/>
+<g>
+	<path d="M21.8,7.2c0-0.2,0-0.5,0-0.7c-0.2-1.7-1.8-3.1-3.5-3c-0.4,0-0.7,0.2-0.9,0.4c-0.2,0.2-0.3,0.6-0.2,0.9
+		c0.1,0.5,0.5,0.8,1.1,0.9c0.9,0.1,1.4,0.6,1.4,1.5c0,3.2,0,6.4,0,9.6c0,1-0.6,1.5-1.5,1.5c-2,0-3.9,0-5.9,0l0,0
+		c0.2-0.2,0.4-0.4,0.6-0.6c0.4-0.5,0.4-1.1,0-1.6c-0.4-0.4-1.1-0.4-1.5,0c-0.8,0.8-1.7,1.7-2.5,2.5c-0.4,0.4-0.4,1.1,0,1.5
+		c0.8,0.8,1.7,1.7,2.5,2.5c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.5-0.1,0.7-0.3c0.4-0.4,0.5-1.1,0-1.6c-0.2-0.2-0.4-0.4-0.6-0.6l5.8,0
+		c0.3,0,0.5,0,0.8,0c1.8-0.3,3-1.8,3-3.7C21.8,13.6,21.8,10.4,21.8,7.2z"/>
+	<path d="M5.8,18.3c-0.9-0.1-1.4-0.6-1.4-1.5c0-3.2,0-6.5,0-9.7c0-0.9,0.6-1.5,1.5-1.5c1.8,0,3.6,0,5.5,0h0.4l-0.5,0.5
+		c-0.3,0.3-0.4,0.6-0.4,0.9c0,0.3,0.1,0.5,0.3,0.8c0.5,0.5,1.1,0.4,1.6-0.1c0.8-0.8,1.5-1.5,2.3-2.3c0.5-0.5,0.5-1.2,0-1.7l-1.9-1.9
+		c-0.2-0.2-0.3-0.3-0.5-0.5c-0.5-0.4-1.1-0.4-1.5,0c-0.4,0.4-0.5,1.1,0,1.5c0.1,0.1,0.1,0.1,0.3,0.3l0.4,0.4l-1.3,0
+		c-1.6,0-3.2,0-4.8,0C3.8,3.5,2.3,5,2.3,6.9c0,0.5,0,0.9,0,1.4l0,0.5l0,2.4c0,2,0,4,0,6c0,1.8,1.6,3.4,3.5,3.4c0,0,0,0,0,0
+		c0.6,0,1.1-0.4,1.2-1C6.9,18.9,6.5,18.4,5.8,18.3z"/>
+</g>
+</svg>

javascript/contextMenus.js

@@ -1,4 +1,4 @@
-contextMenuInit = function () {
+/* contextMenuInit = function () {
   let eventListenerApplied = false;
   let menuSpecs = new Map();
 
@@ -189,3 +189,4 @@ addContextMenuEventListener = initResponse[2];
 onUiUpdate(function () {
   addContextMenuEventListener();
 });
+ */

javascript/hints.js

@@ -26,6 +26,7 @@ titles = {
 	"\u{1f5e8}": "Interogate Clip",
 	"\u{1f5ea}": "Interogate Deepbooru",							
 	"\u{1F300}": "Restore progress",
+    "\u{267E}": "Toggle generate forever",
 
 
     "Inpaint a part of image": "Draw a mask over an image, and the script will regenerate the masked area with content according to prompt",

javascript/ui.js

@@ -174,10 +174,13 @@ function create_submit_args(args) {
 function showSubmitButtons(tabname, show) {
   gradioApp().getElementById(tabname + "_interrupt").style.display = show
     ? "none"
-    : "block";
+    : "flex";
   gradioApp().getElementById(tabname + "_skip").style.display = show
     ? "none"
-    : "block";
+    : "flex";
+  gradioApp().getElementById(tabname + "_generate").style.display = !show
+    ? "none"
+    : "flex";
 }
 
 function showRestoreProgressButton(tabname, show) {
@@ -672,8 +675,6 @@ onUiLoaded(function () {
     }
   }
 
-
-
   // close aside views
   function closeAsideViews(menu) {
     if (quick_menu != menu && quick_menu_open) quick_menu.click();
@@ -746,8 +747,12 @@ onUiLoaded(function () {
   // extra networks nav menu
   function clickedOutside(e) {
     //console.log(e.target.getAttribute('data-testid'));
-    if(e.target.getAttribute('data-testid') != "textbox" && e.target.getAttribute('data-testid')){
-      if (net_menu_open && e.target.closest('[id$="2img_settings_scroll"]')) net_menu.click();
+    if (
+      e.target.getAttribute("data-testid") != "textbox" &&
+      e.target.getAttribute("data-testid")
+    ) {
+      if (net_menu_open && e.target.closest('[id$="2img_settings_scroll"]'))
+        net_menu.click();
     }
   }
   function toggleNetMenu(e) {
@@ -800,6 +805,62 @@ onUiLoaded(function () {
   );
   disabled_extensions(theme_ext.checked);
 
+  function generateOnRepeat(elem, isforever) {
+    if (elem.generateOnRepeatInterval != null)
+      clearInterval(elem.generateOnRepeatInterval);
+    if (isforever) {
+      const generate_button = elem.previousElementSibling;
+      elem.generateOnRepeatInterval = setInterval(function () {
+        if (window.getComputedStyle(generate_button).display !== "none") {
+          generate_button.click();
+          console.log(elem.id);
+        }
+      }, 500);
+    }
+  }
+
+  function toggleGenerateForever(e) {
+    e.target.classList.toggle("active");
+    if (e.target.className.indexOf("active") != -1) {
+      generateOnRepeat(e.target, true);
+    } else {
+      generateOnRepeat(e.target, false);
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  gradioApp()
+    .querySelectorAll('button[id*="2img_generate_forever"]')
+    .forEach((elem) => {
+      elem.addEventListener("click", toggleGenerateForever);
+    });
+
+  /*   let generateOnRepeat = function (genbuttonid, interruptbuttonid) {
+    let genbutton = gradioApp().querySelector(genbuttonid);
+    let interruptbutton = gradioApp().querySelector(interruptbuttonid);
+    if (!interruptbutton.offsetParent) {
+      genbutton.click();
+    }
+    clearInterval(window.generateOnRepeatInterval);
+    window.generateOnRepeatInterval = setInterval(function () {
+      if (!interruptbutton.offsetParent) {
+        genbutton.click();
+      }
+    }, 500);
+  };
+
+  appendContextMenuOption("#txt2img_generate", "Generate forever", function () {
+    generateOnRepeat("#txt2img_generate", "#txt2img_interrupt");
+  });
+  appendContextMenuOption("#img2img_generate", "Generate forever", function () {
+    generateOnRepeat("#img2img_generate", "#img2img_interrupt");
+  });
+
+  let cancelGenerateForever = function () {
+    clearInterval(window.generateOnRepeatInterval);
+  }; */
+
   //
   /*
   function attachAccordionListeners(elem) {
@@ -1238,7 +1299,7 @@ onUiLoaded(function () {
     setting_quicksettings.value = field_settings;
     //addModelCheckpoint();
     saveQuickSettings();
-    console.log(section + " - "+ id + " - " + checked);
+    console.log(section + " - " + id + " - " + checked);
   }
   gradioApp()
     .querySelectorAll('[id*="add2quick_"]')

modules/ui.py

@@ -84,6 +84,7 @@ extra_networks_symbol = '\U0001F3B4'  # 🎴
 #switch_values_symbol = '\U000021C5' # ⇅
 switch_values_symbol = '\u2B80' # ⮀                                     
 restore_progress_symbol = '\U0001F300'  # 🌀
+generate_forever_symbol = '\u267E' # ♾
 
 
 interogate_bubble_symbol = '\U0001F5E8' # 🗨
@@ -306,7 +307,8 @@ def create_generate(is_img2img):
         with gr.Row(elem_id=f"{id_part}_generate_box", elem_classes="generate-box"):                                                       
             interrupt = gr.Button('Interrupt', elem_id=f"{id_part}_interrupt", elem_classes="generate-box-interrupt")
             skip = gr.Button('Skip', elem_id=f"{id_part}_skip", elem_classes="generate-box-skip")            
-            submit = gr.Button('Generate', elem_id=f"{id_part}_generate", variant='primary')
+            submit = gr.Button('Generate', elem_id=f"{id_part}_generate", variant='primary')            
+            gr.Button(value=generate_forever_symbol, elem_id=f"{id_part}_generate_forever", variant='primary')
 
             skip.click(
                 fn=lambda: shared.state.skip(),

style.css

@@ -150,7 +150,7 @@ body {
 /*********/
 /* Icons */
 /*********/
-
+[id*="2img_generate_forever"],
 [id^="refresh_"],
 [id$="_refresh"],
 [id$="_clear_prompt"],
@@ -173,7 +173,7 @@ body {
   position: relative;
   font-size: 0 !important;
 }
-
+[id*="2img_generate_forever"]::before,
 [id$="_refresh"]::before,
 [id^="refresh_"]::before,
 [id$="_clear_prompt"]::before,
@@ -207,7 +207,7 @@ body {
   background-color: var(--ae-icon-color);
   border-radius: var(--ae-panel-border-radius);
 }
-
+[id*="2img_generate_forever"]:hover::before,
 [id$="_refresh"]:hover::before,
 [id^="refresh_"]:hover::before,
 [id$="_clear_prompt"]:hover::before,
@@ -244,7 +244,12 @@ body {
   -webkit-mask: url(./file=html/svg/refresh-line.svg) no-repeat 50% 50%;
   mask: url(./file=html/svg/refresh-line.svg) no-repeat 50% 50%;
 }
-
+[id$="2img_generate_forever"]::before {
+  -webkit-mask: url(./file=html/svg/infinity-fill.svg) no-repeat 50% 50%;
+  mask: url(./file=html/svg/infinity-fill.svg) no-repeat 50% 50%;
+  width: 90%;
+  height: 90%;
+}
 [id$="_clear_prompt"]::before {
   -webkit-mask: url(./file=html/svg/delete-bin-5-line.svg) no-repeat 50% 50%;
   mask: url(./file=html/svg/delete-bin-5-line.svg) no-repeat 50% 50%;
@@ -1884,12 +1889,29 @@ button.primary:hover {
   min-height: var(--ae-generate-button-height);
 }
 
+button[id$="_generate_forever"] {
+  flex-grow: 0;
+  min-width: unset;
+}
+
+button[id$="_generate_forever"].active {
+  background: var(--ae-primary-color) !important;
+  color: var(--ae-input-bg-color) !important;
+}
+
+button[id$="_generate_forever"].active:before {
+  background: var(--ae-icon-hover-color) !important;
+}
+
 [id$="_interrupt"].secondary,
 [id$="_skip"].secondary {
+  min-height: var(--ae-generate-button-height);
   background-color: var(--ae-input-bg-color);
+  /*
   position: absolute;
   width: 50%;
   height: 100%;
+  */
   display: none;
 }