Add "Interrupting..." placeholder.

3 files changed, 19 insertions, 16 deletions

diff --git a/javascript/ui.js b/javascript/ui.js
index 3430b3fe..d5d85bb6 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -119,9 +119,18 @@ function create_submit_args(args) {
     return res;
 }
 
+function setSubmitButtonsVisibility(tabname, showInterrupt, showSkip, showInterrupting) {
+    gradioApp().getElementById(tabname + '_interrupt').style.display = showInterrupt ? "block" : "none";
+    gradioApp().getElementById(tabname + '_skip').style.display = showSkip ? "block" : "none";
+    gradioApp().getElementById(tabname + '_interrupting').style.display = showInterrupting ? "block" : "none";
+}
+
 function showSubmitButtons(tabname, show) {
-    gradioApp().getElementById(tabname + '_interrupt').style.display = show ? "none" : "block";
-    gradioApp().getElementById(tabname + '_skip').style.display = show ? "none" : "block";
+    setSubmitButtonsVisibility(tabname, ! show, !show, false);
+}
+
+function showSubmitInterruptingPlaceholder(tabname) {
+    setSubmitButtonsVisibility(tabname, false, true, true);
 }
 
 function showRestoreProgressButton(tabname, show) {
diff --git a/modules/ui_toprow.py b/modules/ui_toprow.py
index 457fbf52..30cf1b1b 100644
--- a/modules/ui_toprow.py
+++ b/modules/ui_toprow.py
@@ -17,6 +17,7 @@ class Toprow:
     button_deepbooru = None

 

     interrupt = None

+    interrupting = None

     skip = None

     submit = None

 

@@ -98,14 +99,9 @@ class Toprow:
 

             self.interrupt = gr.Button('Interrupt', elem_id=f"{self.id_part}_interrupt", elem_classes="generate-box-interrupt", tooltip="End generation immediately or after completing current batch")

             self.skip = gr.Button('Skip', elem_id=f"{self.id_part}_skip", elem_classes="generate-box-skip", tooltip="Stop generation of current batch and continues onto next batch")

+            self.interrupting = gr.Button('Interrupting...', elem_id=f"{self.id_part}_interrupting", elem_classes="generate-box-interrupting", tooltip="Interrupting generation...")

             self.submit = gr.Button('Generate', elem_id=f"{self.id_part}_generate", variant='primary', tooltip="Right click generate forever menu")

 

-            self.skip.click(

-                fn=lambda: shared.state.skip(),

-                inputs=[],

-                outputs=[],

-            )

-

             def interrupt_function():

                 if not shared.state.stopping_generation and shared.state.job_count > 1 and shared.opts.interrupt_after_current:

                     shared.state.stop_generating()

@@ -113,11 +109,9 @@ class Toprow:
                 else:

                     shared.state.interrupt()

 

-            self.interrupt.click(

-                fn=interrupt_function,

-                inputs=[],

-                outputs=[],

-            )

+            self.skip.click(fn=shared.state.skip)

+            self.interrupt.click(fn=interrupt_function, _js='function(){ showSubmitInterruptingPlaceholder("' + self.id_part + '"); }')

+            self.interrupting.click(fn=interrupt_function)

 

     def create_tools_row(self):

         with gr.Row(elem_id=f"{self.id_part}_tools"):

diff --git a/style.css b/style.css
index 4352737e..04b0a2fa 100644
--- a/style.css
+++ b/style.css
@@ -331,17 +331,17 @@ input[type="checkbox"].input-accordion-checkbox{
 .generate-box{

     position: relative;

 }

-.gradio-button.generate-box-skip, .gradio-button.generate-box-interrupt{

+.gradio-button.generate-box-skip, .gradio-button.generate-box-interrupt, .gradio-button.generate-box-interrupting{

     position: absolute;

     width: 50%;

     height: 100%;

     display: none;

     background: #b4c0cc;

 }

-.gradio-button.generate-box-skip:hover, .gradio-button.generate-box-interrupt:hover{

+.gradio-button.generate-box-skip:hover, .gradio-button.generate-box-interrupt:hover, .gradio-button.generate-box-interrupting:hover{

     background: #c2cfdb;

 }

-.gradio-button.generate-box-interrupt{

+.gradio-button.generate-box-interrupt, .gradio-button.generate-box-interrupting{

     left: 0;

     border-radius: 0.5rem 0 0 0.5rem;

 }