dynamic layout (#4)

- dynamic layout (ce8f63ea4e62ef8f9b52bc8e0a121df117eb7e44)
- merge (13587bf3d930c4db6fb605738d46cf1e8298d35f)
- Update app_dialogue.py (11feb2c385b97158cdbbb6d1a56e46e41b43f7e3)


Co-authored-by: Apolinário from multimodal AI art <multimodalart@users.noreply.huggingface.co>

app_dialogue.py

@@ -355,7 +355,6 @@ def resize_with_ratio(image: PIL.Image.Image, fixed_width: int) -> PIL.Image.Ima
 
     return resized_img
 
-
 def make_new_lines(draw, image, font, text_is_too_long, lines, num_lines, num_loops):
     max_len_increment = 0
     while text_is_too_long and max_len_increment < 10:
@@ -390,7 +389,6 @@ def make_new_lines(draw, image, font, text_is_too_long, lines, num_lines, num_lo
         lines = new_lines
     return lines, text_width, text_is_too_long
 
-
 def test_font_size(
     draw,
     image,
@@ -548,9 +546,8 @@ def format_user_prompt_with_im_history_and_system_conditioning(
 
     return resulting_list, current_user_prompt_list
 
-
-# dope_callback = gr.CSVLogger()
-# problematic_callback = gr.CSVLogger()
+def expand_layout():
+    return gr.Column(scale=2), gr.Gallery(height=682)
 
 textbox = gr.Textbox(
     placeholder="Upload an image and ask the AI to create a meme!",
@@ -568,16 +565,17 @@ chatbot = gr.Chatbot(
     visible=False,
     avatar_images=[None, BOT_AVATAR],
 )
-css = """
-.gradio-container{max-width: 970px!important}
+css='''
+.gradio-container{max-width: 1000px!important}
 h1{display: flex;align-items: center;justify-content: center;gap: .25em}
-"""
+*{transition: width 0.5s ease, flex-grow 0.5s ease}
+'''
 with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as demo:
     with gr.Row(scale=0.5):
         gr.HTML(
             """<h1 align="center">AI Meme Generator <span style="font-size: 13px;">powered by <a href="https://huggingface.co/blog/idefics">IDEFICS</a></span><img width=40 height=40 src="https://cdn-uploads.huggingface.co/production/uploads/624bebf604abc7ebb01789af/v770xGti5vH1SYLBgyOO_.png" /></h1>"""
         )
-
+        
     with gr.Row(elem_id="model_selector_row"):
         model_selector = gr.Dropdown(
             choices=MODELS,
@@ -589,21 +587,22 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
             visible=False,
         )
     with gr.Row(equal_height=True):
-        with gr.Column(equal_height=1):
+        #scale=2 when expanded
+        with gr.Column(scale=4, min_width=250) as upload_area:
             imagebox = gr.Image(
-                type="filepath", label="Image to meme", height=400, visible=True
+                type="filepath", label="Image to meme", height=272, visible=True
             )
             with gr.Group():
                 with gr.Row():
                     textbox.render()
                 with gr.Row():
-                    submit_btn = gr.Button(value="▶️ Submit", visible=True)
+                    submit_btn = gr.Button(value="▶️ Submit", visible=True, min_width=120)
                     clear_btn = gr.ClearButton(
-                        [textbox, imagebox, chatbot], value="🧹 Clear"
+                        [textbox, imagebox, chatbot], value="🧹 Clear", min_width=120
                     )
-                    regenerate_btn = gr.Button(value="🔄 Regenerate", visible=True)
+                    regenerate_btn = gr.Button(value="🔄 Regenerate", visible=True, min_width=120)
                     upload_btn = gr.UploadButton(
-                        "📁 Upload image", file_types=["image"], visible=False
+                        "📁 Upload image", file_types=["image"], visible=False, min_width=120
                     )
             with gr.Accordion(
                 "Advanced settings", open=False, visible=True
@@ -709,7 +708,7 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
                     inputs=decoding_strategy,
                     outputs=top_p,
                 )
-        with gr.Column(scale=2):
+        with gr.Column(scale=5) as result_area:
             generated_memes_gallery = gr.Gallery(
                 # value="Images generated will appear here",
                 label="IDEFICS Generated Memes",
@@ -717,7 +716,9 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
                 elem_id="generated_memes_gallery",
                 show_download_button=True,
                 show_share_button=True,
-            ).style(columns=[2], object_fit="contain", height=600)
+                columns=[2],
+                object_fit="contain",height=428
+            ) #height 600 when expanded
     with gr.Row(equal_height=True):
         with gr.Box(elem_id="gallery_box"):
             gallery_type_choice = gr.Radio(
@@ -737,7 +738,7 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
                 # value= value given by gallery_type_choice,
                 label="Templates Gallery",
                 allow_preview=False,
-                columns=[6],
+                columns=6,
                 elem_id="gallery",
                 show_share_button=False,
                 height=400,
@@ -880,36 +881,17 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
                 # yield "", None, chat_history
                 full_text += acc_text
                 acc_text = ""
-
-    textbox.submit(
-        fn=lambda: "", inputs=[], outputs=[generated_memes_gallery], queue=False
-    ).then(
-        fn=model_inference,
-        inputs=[
-            model_selector,
-            system_prompt,
-            textbox,
-            chatbot,
-            imagebox,
-            decoding_strategy,
-            temperature,
-            max_new_tokens,
-            repetition_penalty,
-            top_p,
-            all_caps_meme_text,
-            text_at_the_top,
-            font_meme_text,
+    gr.on(
+        triggers=[
+            textbox.submit,
+            imagebox.upload,
+            submit_btn.click
         ],
-        outputs=[textbox, generated_memes_gallery, chatbot],
-    )
-    imagebox.upload(
-        fn=lambda: "", inputs=[], outputs=[generated_memes_gallery], queue=False
-    ).then(
-        fn=lambda: "Write a meme about this image.",
-        inputs=[],
-        outputs=[textbox],
-        queue=False,
+        fn=expand_layout,
+        outputs=[upload_area, generated_memes_gallery],
+        queue=False
     ).then(
+        fn=lambda: "", inputs=[], outputs=[generated_memes_gallery], queue=False).then(
         fn=model_inference,
         inputs=[
             model_selector,
@@ -926,36 +908,7 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
             text_at_the_top,
             font_meme_text,
         ],
-        outputs=[
-            textbox,
-            generated_memes_gallery,
-            chatbot,
-        ],
-    )
-    submit_btn.click(
-        fn=lambda: "", inputs=[], outputs=[generated_memes_gallery], queue=False
-    ).then(
-        fn=model_inference,
-        inputs=[
-            model_selector,
-            system_prompt,
-            textbox,
-            chatbot,
-            imagebox,
-            decoding_strategy,
-            temperature,
-            max_new_tokens,
-            repetition_penalty,
-            top_p,
-            all_caps_meme_text,
-            text_at_the_top,
-            font_meme_text,
-        ],
-        outputs=[
-            textbox,
-            generated_memes_gallery,
-            chatbot,
-        ],
+        outputs=[textbox, generated_memes_gallery, chatbot],
     )
 
     def remove_last_turn(chat_history):
@@ -972,6 +925,7 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
         fn=remove_last_turn,
         inputs=chatbot,
         outputs=[chatbot, textbox, generated_memes_gallery],
+        queue=False
     ).then(
         fn=model_inference,
         inputs=[
@@ -998,13 +952,13 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
 
     upload_btn.upload(add_file, [upload_btn], [imagebox, upload_btn], queue=False)
     submit_btn.click(
-        lambda: gr.update(label="📁 Upload image", interactive=True), [], upload_btn
+        lambda: gr.update(label="📁 Upload image", interactive=True), [], upload_btn, queue=False
     )
     textbox.submit(
-        lambda: gr.update(label="📁 Upload image", interactive=True), [], upload_btn
+        lambda: gr.update(label="📁 Upload image", interactive=True), [], upload_btn, queue=False
     )
     clear_btn.click(
-        lambda: gr.update(label="📁 Upload image", interactive=True), [], upload_btn
+        lambda: gr.update(label="📁 Upload image", interactive=True), [], upload_btn, queue=False
     )
     gallery_type_choice.change(
         fn=choose_gallery,
@@ -1016,6 +970,10 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
         fn=add_file_gallery,
         inputs=[template_gallery],
         outputs=[textbox, imagebox, generated_memes_gallery],
+    ).success(
+        fn=expand_layout,
+        outputs=[upload_area, generated_memes_gallery],
+        queue=False
     ).success(
         fn=model_inference,
         inputs=[
@@ -1040,7 +998,7 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
         ],
     )
     demo.load(
-        fn=choose_gallery, inputs=[gallery_type_choice], outputs=[template_gallery]
+        fn=choose_gallery, inputs=[gallery_type_choice], outputs=[template_gallery], queue=False
     )
 demo.queue(concurrency_count=40, max_size=40)
-demo.launch()
+demo.launch()