add greeting part and prepare greeting overlay

modules/html.py

@@ -94,12 +94,16 @@ progress::after {
   box-shadow: none !important;
 }
 
-#prompt_examples > .label {
+#prompt-examples > .label, #greet-examples > .label {
   display: none;
 }
 
 .input-label h5 {
-  margin: 0 0 -10px 0 !important;
+  margin: 0 !important;
+}
+
+.input-label {
+  margin-bottom: -10px !important;
 }
 
 .icon-buttons > a > button > div, .icon-buttons > button > div  {
@@ -107,6 +111,10 @@ progress::after {
   height: 2em;
 }
 
+#toggle-greet-checkbox span {
+  font-size: 1.05em !important;
+  font-weight: var(--prose-header-text-weight) !important;
+}
 '''
 progress_html = '''
 <div class="loader-container" style="visibility:*visibility*;max-width:1280px;">

webui.py

@@ -13,8 +13,9 @@ from modules.sdxl_styles import style_keys, aspect_ratios
 
 def generate(*args):
     yield gr.update(interactive=False), \
-        gr.update(visible=True, value=modules.html.make_progress_html(1, "0/30")), \
-        gr.update()
+          gr.update(visible=True, value=modules.html.make_progress_html(1, "0/30")), \
+          gr.update(visible=True, show_share_button=False, show_download_button=False), \
+          gr.update(visible=False)
 
     while worker.is_working:
         time.sleep(0.1)
@@ -29,17 +30,28 @@ def generate(*args):
             flag, product = worker.outputs.pop(0)
             if flag == 'preview':
                 percentage, title, image = product
-                yield gr.update(interactive=False), \
-                    gr.update(value=modules.html.make_progress_html(percentage, title)), \
-                    gr.update(value=image) if image is not None else gr.update()
+                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()
             if flag == 'results':
                 image = product[0]
                 yield gr.update(interactive=True), \
-                    gr.update(visible=False), \
-                    gr.update(value=image)
+                      gr.update(visible=False), \
+                      gr.update(value=image), \
+                      gr.update()
                 finished = True
     return
 
+def toggle_greet_visibility(is_visible):
+    yield gr.update(visible=is_visible), gr.update(visible=is_visible)
+
+def debounce():
+    time.sleep(0.5)
+
+def make_overlay(generated_image_raw, toggle_greet, greet):
+    return gr.update(visible=False), gr.update(visible=True, value=generated_image_raw)
+
 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")
 shared.gradio_root = gr.Blocks(title='QualityMinds AI Christmas Card Maker', css=modules.html.css, theme=gr.themes.Default(primary_hue=qm_color))
 with shared.gradio_root:
@@ -53,23 +65,43 @@ with shared.gradio_root:
     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?", 
+            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)
+                        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(label='Stil', choices=style_keys, value='Kinofilm', container=False)
+            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')
-    generated_image = gr.Image(label="Weihnachtskarte", width=1280, value="resources/init.png" )
+    
+    with gr.Row(elem_classes='type_row'):
+        with gr.Column(scale=2):
+            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="", placeholder="", interactive=True,
+                               elem_classes='type_row', container=False, lines=2)
+        greet_example_column = gr.Column(scale=1)
+        with greet_example_column:
+            gr.Markdown("<br>", elem_classes="input-label")
+            gr.Markdown("##### Beispiele", elem_classes="input-label")
+            greet_examples = gr.Examples(label="Beispiele", examples=["Frohe Weihnachten"], inputs=[greet],
+                                         elem_id="greet-examples")
+
+    generated_image_raw = gr.Image(visible=False, label="Weihnachtskarte", width=1280, value="resources/init.png", interactive=False )
+    generated_image_overlayed = gr.Image(label="Weihnachtskarte", width=1280, value="resources/init.png" )
 
-    run_button.click(fn=generate, inputs=[prompt, style_selection], outputs=[run_button, progress_html, generated_image])
+    toggle_greet.change(fn=toggle_greet_visibility, inputs=[toggle_greet], outputs=[greet, greet_example_column])
+    greet.change(fn=debounce)\
+         .then(fn=make_overlay, inputs=[generated_image_raw, toggle_greet, greet], outputs=[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])\
+              .then(fn=make_overlay, inputs=[generated_image_raw, toggle_greet, greet], outputs=[generated_image_raw, generated_image_overlayed])
 
 shared.gradio_root.queue(concurrency_count=1, api_open=False)
 shared.gradio_root.launch(server_name="0.0.0.0", show_api=False)