UI improvements, gradio update

modules/html.py

@@ -26,7 +26,7 @@ progress {
   border-radius: 5px; /* Round the corners of the progress bar */
   background-color: #f3f3f3; /* Light grey background */
   width: 100%;
-  margin-top: 6px;
+  margin-top: 5px; 
 }
 
 /* Style the progress bar container */
@@ -65,56 +65,97 @@ progress::after {
   display: none !important;
 }
 
-.progress-bar{
-  height: 15px !important;
+#progress-bar {
+  height: 22px !important;
 }
 
 .stylebox{
   min-height: 110px !important;
 }
 
-.generate_button {
-  min-height: 166px !important;
+#generate-button {
+  height: 60px !important;
   white-space: pre-line !important;
-  font-size: 1.33em !important;
+}
+
+#style-selection input {
+  min-height: 39px !important;
 }
 
 .stylebox label span {
   margin-bottom: 22px !important;
 }
 
-.scroll-hide{
+.scroll-hide {
   resize: none !important;
 }
 
-.refresh_button{
-  border: none !important;
-  background: none !important;
-  font-size: none !important;
-  box-shadow: none !important;
+.input-label h5 {
+  margin: 0 !important;
+  padding-top: 3px !important;
 }
 
-#prompt-examples > .label, #greet-examples > .label {
-  display: none;
+.icon-buttons > a > button > div, .icon-buttons > button > div  {
+  width: 2em;
+  height: 2em;
 }
 
-.input-label h5 {
-  margin: 0 !important;
+.stretch {
+  column-gap: 0 !important;
 }
 
-.input-label {
-  margin-bottom: -10px !important;
+.gap {
+  row-gap: 6px !important;
 }
 
-.icon-buttons > a > button > div, .icon-buttons > button > div  {
-  width: 2em;
-  height: 2em;
+.gallery {
+  row-gap: 2px !important;
+}
+
+#prompt-examples .label, #greet-examples .label {
+  display: none;
+}
+
+#prompt-examples > .gallery::before, #greet-examples > .gallery::before {
+  content: "Beispiele";
+  font-size: 1.05em;
+  font-weight: var(--prose-header-text-weight);
+  padding-top: 0.33em;
 }
 
 #toggle-greet-checkbox span {
   font-size: 1.05em !important;
   font-weight: var(--prose-header-text-weight) !important;
 }
+
+.panel-container {
+  box-shadow: var(--block-shadow);
+  border: var(--block-border-width) solid var(--border-color-primary);
+  border-radius: var(--block-radius);
+  padding: 5px;
+  max-width: 1280px;
+  margin-bottom: 10px !important;
+}
+
+.label-wrap {
+  justify-content: start !important; 
+  margin-bottom: 0 !important;
+}
+
+.label-wrap .icon {
+  padding-top: 5px !important;
+}
+
+.label-wrap span{
+  font-size: 1.05em !important;
+  font-weight: var(--prose-header-text-weight) !important;
+  padding-right: 5px;
+}
+
+.generated-image img {
+  width: 1280px !important;
+}
+
 '''
 progress_html = '''
 <div class="loader-container" style="visibility:*visibility*;max-width:1280px;">

requirements_versions.txt

@@ -11,5 +11,5 @@ psutil==5.9.5
 numpy==1.23.5
 pytorch_lightning==1.9.4
 omegaconf==2.2.3
-gradio==3.44.4
+gradio==3.45.1
 pygit2==1.12.2

webui.py

@@ -9,10 +9,18 @@ from modules.sdxl_styles import style_keys, aspect_ratios
 
 QM_LOGO=Image.open("resources/qm_logo.png")
 QM_COLOR=Color(name="qm", c50="#effaed",c100="#def5db",c200="#64b445",c300="#c6eec0",c400="#b9ebb3",c500="#64b445",c600="#55993b",c700="#467e30",c800="#325a23",c900="#233f18",c950="#192d11")
+PROMPT_EXAMPLES = [["Der Weihnachtsmann mit seinem Sack voller Geschenke", "Santa Claus with his sack full of gifts"], 
+                   ["Malerisches Winterdorf in einer Schneekugel", "Scenic winter village inside a snow globe"], 
+                   ["Niedliche Pinguine in Schals und Mützen eingewickelt", "Cute penguins wrapped up in scarves and hats"]]
+EXAMPLE_GREETINGS = [ 
+    "Ich wünsche dir von Herzen ein frohes Weihnachtsfest.",
+    "Frohe Weihnachten und viele glückliche Momente mit deinen Liebsten!",
+    "Zauberhafte Weihnachten für dich!"
+]
 
 def generate(*args):
     yield gr.update(interactive=False), \
-          gr.update(visible=True, value=modules.html.make_progress_html(1, "0/30")), \
+          gr.update(value=modules.html.make_progress_html(1, "0/30")), \
           gr.update(visible=True), \
           gr.update(visible=False)
 
@@ -36,14 +44,17 @@ def generate(*args):
             if flag == 'results':
                 image = product[0]
                 yield gr.update(interactive=True), \
-                      gr.update(visible=False), \
+                      gr.update(value=""), \
                       gr.update(visible=False, value=image), \
-                      gr.update(visible=True)
+                      gr.update(visible=True, value=image)
                 finished = True
     return
 
+def translate_promt_example(prompt_de):
+    return [x for x in PROMPT_EXAMPLES if x[0] == prompt_de][0][1]
+
 def toggle_greet_visibility(is_visible):
-    return gr.update(visible=is_visible), gr.update(visible=is_visible)
+    return gr.update(visible=is_visible)
 
 def debounce():
     time.sleep(0.5)
@@ -80,66 +91,58 @@ with shared.gradio_root:
     """
     # QualityMinds KI Weihnachtskarten-Generator
     """)
-    with gr.Row(elem_classes='type_row'):
-        with gr.Column(scale=2):
-            gr.Markdown("##### Prompt (Englisch)", elem_classes="input-label")
-            prompt = gr.Textbox(label="Prompt (Englisch)", value="", 
-                                placeholder="Was möchtest Du auf der Weihnachtskarte abbilden?", 
-                                autofocus=True, elem_classes='type_row', container=False, lines=2)
-            description_de = gr.Textbox(label="Beschreibung", visible=False)
-            gr.Markdown("##### Beispiele", elem_classes="input-label")
-            gr.Examples(examples=[["Der Weihnachtsmann mit seinem Sack voller Geschenke", "Santa Claus with his sack full of gifts"], 
-                                  ["Malerisches Winterdorf in einer Schneekugel", "Scenic winter village inside a snow globe"], 
-                                  ["Niedliche Pinguine in Schals und Mützen eingewickelt", "Cute penguins wrapped up in scarves and hats"]],
-                        inputs=[description_de, prompt], elem_id="prompt-examples", cache_examples=False)
-
-        with gr.Column(scale=1, min_width="120px"):
-            gr.Markdown("##### Stil", elem_classes="input-label")
-            style_selection = gr.Dropdown(choices=style_keys, value='Kinofilm', container=False)
-            run_button = gr.Button(value="Weihnachtskarte\nerstellen", variant='primary', elem_classes='generate_button')
-            progress_html = gr.HTML(visible=False, elem_id='progress-bar', elem_classes='progress-bar')
+    with gr.Accordion("Info", elem_classes='panel-container', open=False):
+        with gr.Column():
+            gr.Markdown("""
+            * Beschreibe das Motiv der Weihnachtskarte in einem Prompt (Englisch), wähle ggf. Stil und los!
+            * Zur Übersetzung einer Beschreibung ins Englische eignet sich beispielsweise [deepl.com](https://www.deepl.com/translator#de/Schneekugeln) helfen.
+            * Chat-KIs wie [Bing Chat](https://www.bing.com/search?q=Bing+AI&showconv=1) können bei der Erstellung persönlicher Weihnachtsgrüße helfen, z.B. mit Prompts wie
+                * Erstelle fünf unterschiedliche persönliche Weihnachtsgrüße für meinen Vater Anakin (je ca. 120 Zeichen). Erwähne dabei unseren gemeinsamen Urlaub auf Tatooine.
+                * Erstelle drei unterschiedliche persönliche Weihnachtsgrüße für meinen geschätzten Arbeitskollegen Michael (je ca. 150 Zeichen). Gehe dabei Schritt für Schritt vor.
+                * Erstelle fünf unterschiedliche persönliche Weihnachtsgrüße für eine Weihnachtskarte, auf der eine Schneekugel abgebildet ist (je ca. 133 Zeichen) und erkläre diese.
+            * Dieses Werkzeug basiert auf [Stable Diffusion XL](https://stability.ai/stable-diffusion) v1.0 und der Oberfläche [Fooocus](https://github.com/lllyasviel/Fooocus), der Code ist OpenSource auf [HuggingFace](https://huggingface.co/spaces/QualityMinds/Weihnachtskarten/tree/main) verfügbar.
+            """)
+
+    with gr.Row(elem_classes='panel-container'):
+        with gr.Column():
+            with gr.Row():
+                with gr.Column(scale=5):
+                    gr.Markdown("##### Prompt (Englisch)", elem_classes="input-label")
+                    prompt = gr.Textbox(label="Prompt (Englisch)", value="", 
+                                        placeholder="Was möchtest Du auf der Weihnachtskarte abbilden?", 
+                                        autofocus=True, container=False, lines=2)
+                with gr.Column(scale=1, min_width="80px"):
+                    gr.Markdown("##### Stil", elem_classes="input-label")
+                    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')
+            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)
     
-    with gr.Row(elem_classes='type_row'):
-        example_texts = [ 
-            "Ich wünsche dir von Herzen ein frohes Weihnachtsfest.",
-            "Frohe Weihnachten und viele glückliche Momente mit deinen Liebsten!",
-            "Zauberhafte Weihnachten für dich!!",
-            "Möge die Magie von Weihnachten dein Herz erleuchten und deine Wünsche erfüllen."
-        ]
-        with gr.Column(scale=1):
-            toggle_greet = gr.Checkbox(label="Persönliche Weihnachtsgrüße hinzufügen", elem_id="toggle-greet-checkbox",
-                                       container=False, value=True, interactive=True)
-            greet = gr.Textbox(value=example_texts[0], placeholder="", interactive=True,
-                               elem_classes='type_row', container=False, lines=2, max_lines=2)
-        greet_examples_column = gr.Column(scale=2)
-        with greet_examples_column:
-            gr.Markdown("##### Beispiele", elem_classes="input-label")
-            greet_examples = gr.Examples(label="Beispiele", examples=example_texts, inputs=[greet],
-                                         elem_id="greet-examples")
-
-    generated_image_raw = gr.Image(visible=False, type='pil', label="Erstelle Weihnachtskarte...", width=1280, 
-                                   value="resources/init.png", interactive=False, 
-                                   show_share_button=False, show_download_button=False )
-    generated_image_overlayed = gr.Image(label="Weihnachtskarte", type='pil', width=1280, 
+    toggle_greet = gr.Checkbox(label="Persönliche Weihnachtsgrüße hinzufügen", elem_id="toggle-greet-checkbox",
+                               container=False, value=True, interactive=True)
+
+    greeting_row=gr.Row(elem_classes='panel-container')
+    with greeting_row:
+        with gr.Column():
+            greet = gr.Textbox(value=EXAMPLE_GREETINGS[0], placeholder="", interactive=True, container=False, lines=2, max_lines=2)
+            greet_examples = gr.Examples(elem_id="greet-examples", examples=EXAMPLE_GREETINGS, inputs=[greet])
+
+
+    generated_image_raw = gr.Image(visible=False, type='pil', label="Erstelle Weihnachtskarte...", elem_classes="generated-image", width=1280,
+                                   value="resources/init.png", interactive=False, show_share_button=False, show_download_button=False)
+    generated_image_overlayed = gr.Image(label="Weihnachtskarte", type='pil', elem_classes="generated-image", width=1280,
                                          value=pil_image_with_overlay(Image.open("resources/init.png"), toggle_greet.value, greet.value))
 
-    toggle_greet.change(fn=toggle_greet_visibility, inputs=[toggle_greet], outputs=[greet, greet_examples_column], queue=False)\
+    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])\
+    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)
 
-    gr.Markdown("""
-    ## Info
-    * Beschreibe das Motiv der Weihnachtskarte in einem Prompt (Englisch), wähle ggf. Stil und los!
-    * Zur Übersetzung einer Beschreibung ins Englische eignet sich beispielsweise [deepl.com](https://www.deepl.com/translator#de/Schneekugeln) helfen.
-    * Chat-KIs wie [Bing Chat](https://www.bing.com/search?q=Bing+AI&showconv=1) können bei der Erstellung persönlicher Weihnachtsgrüße helfen, z.B. mit Prompts wie
-      * Erstelle fünf unterschiedliche persönliche Weihnachtsgrüße für meinen Vater Anakin (je ca. 120 Zeichen). Erwähne dabei unseren gemeinsamen Urlaub auf Tatooine.
-      * Erstelle drei unterschiedliche persönliche Weihnachtsgrüße für meinen geschätzten Arbeitskollegen Michael (je ca. 150 Zeichen). Gehe dabei Schritt für Schritt vor.
-      * Erstelle fünf unterschiedliche persönliche Weihnachtsgrüße für eine Weihnachtskarte, auf der eine Schneekugel abgebildet ist (je ca. 133 Zeichen) und erkläre diese.
-    * Dieses Werkzeug basiert auf [Stable Diffusion XL](https://stability.ai/stable-diffusion) v1.0 und der Oberfläche [Fooocus](https://github.com/lllyasviel/Fooocus), der Code ist OpenSource auf [HuggingFace](https://huggingface.co/spaces/QualityMinds/Weihnachtskarten/tree/main) verfügbar.
-    """)
-
 shared.gradio_root.queue(concurrency_count=1, api_open=False)
 shared.gradio_root.launch(server_name="0.0.0.0", show_api=False)