more responsive UX

webui.py

@@ -19,10 +19,8 @@ EXAMPLE_GREETINGS = [
 ]
 
 def generate(*args):
-    yield gr.update(interactive=False), \
-          gr.update(value=modules.html.make_progress_html(1, "0/30")), \
-          gr.update(visible=True), \
-          gr.update(visible=False)
+    yield gr.update(value=modules.html.make_progress_html(1, "0/30")), \
+          gr.update()
 
     while worker.is_working:
         time.sleep(0.1)
@@ -37,16 +35,12 @@ def generate(*args):
             flag, product = worker.outputs.pop(0)
             if flag == 'preview':
                 percentage, title, image = product
-                yield gr.update(), \
-                      gr.update(value=modules.html.make_progress_html(percentage, title)), \
-                      gr.update(value=image) if image is not None else gr.update(), \
-                      gr.update()
+                yield gr.update(value=modules.html.make_progress_html(percentage, title)), \
+                      gr.update(value=image) if image is not None else gr.update()
             if flag == 'results':
                 image = product[0]
-                yield gr.update(interactive=True), \
-                      gr.update(value=""), \
-                      gr.update(visible=False, value=image), \
-                      gr.update(visible=True, value=image)
+                yield gr.update(value=""), \
+                      gr.update(value=image)
                 finished = True
     return
 
@@ -56,6 +50,15 @@ def translate_promt_example(prompt_de):
 def toggle_greet_visibility(is_visible):
     return gr.update(visible=is_visible)
 
+def __toggle_generate_state(is_preview):
+    return gr.update(visible=is_preview), gr.update(visible=not is_preview), gr.update(interactive=not is_preview)
+
+def prepare_generate():
+    return __toggle_generate_state(True)
+
+def finish_generate():
+    return __toggle_generate_state(False)
+
 def debounce():
     time.sleep(0.5)
     return gr.update()
@@ -116,7 +119,7 @@ with shared.gradio_root:
                     style_selection = gr.Dropdown(choices=style_keys, value='Kinofilm', container=False, elem_id="style-selection")
                 with gr.Column(scale=1, min_width="80px"):
                     progress_html = gr.HTML(visible=True, elem_id='progress-bar', elem_classes='progress-bar')
-                    run_button = gr.Button(value="Weihnachtskarte\nerstellen", variant='primary', elem_id='generate-button')
+                    run_button = gr.Button(value="Weihnachtskarte\nerstellen", variant='primary', elem_id='generate-button', )
             with gr.Row():
                 promt_example_de = gr.Textbox(visible=False)
                 gr.Examples(elem_id="prompt-examples", examples=PROMPT_EXAMPLES, inputs=[promt_example_de], cache_examples=False)
@@ -137,12 +140,14 @@ with shared.gradio_root:
                                          value=pil_image_with_overlay(Image.open("resources/init.png"), toggle_greet.value, greet.value))
 
     promt_example_de.change(fn=translate_promt_example, inputs=[promt_example_de], outputs=[prompt], queue=False)
-    toggle_greet.change(fn=toggle_greet_visibility, inputs=[toggle_greet], outputs=[greeting_row], queue=False)\
-                .then(fn=make_overlay, inputs=[generated_image_raw, toggle_greet, greet], outputs=[generated_image_overlayed], queue=False)
-    greet.change(fn=debounce, outputs=[generated_image_overlayed], queue=False)\
-         .then(fn=make_overlay, inputs=[generated_image_raw, toggle_greet, greet], outputs=[generated_image_overlayed], queue=False)
-    run_button.click(fn=generate, inputs=[prompt, style_selection], outputs=[run_button, progress_html, generated_image_raw, generated_image_overlayed], show_progress=False)\
-              .then(fn=make_overlay, inputs=[generated_image_raw, toggle_greet, greet], outputs=[generated_image_overlayed], queue=False)
+    toggle_greet.change(fn=toggle_greet_visibility, inputs=[toggle_greet], outputs=[greeting_row], queue=False, show_progress=False)\
+                .then(fn=make_overlay, inputs=[generated_image_raw, toggle_greet, greet], outputs=[generated_image_overlayed], show_progress=False, queue=False)
+    greet.change(fn=debounce, outputs=[generated_image_overlayed], queue=False, show_progress=False)\
+         .then(fn=make_overlay, inputs=[generated_image_raw, toggle_greet, greet], outputs=[generated_image_overlayed], queue=False, show_progress=False)
+    run_button.click(fn=prepare_generate, outputs=[generated_image_raw, generated_image_overlayed, run_button], queue=False)\
+              .then(fn=generate, inputs=[prompt, style_selection], outputs=[progress_html, generated_image_raw], queue=True)\
+              .then(fn=make_overlay, inputs=[generated_image_raw, toggle_greet, greet], outputs=[generated_image_overlayed], queue=False)\
+              .then(fn=finish_generate, outputs=[generated_image_raw, generated_image_overlayed, run_button], queue=False)
 
 shared.gradio_root.queue(concurrency_count=1, api_open=False)
 shared.gradio_root.launch(server_name="0.0.0.0", show_api=False)