dynamic layout

app_dialogue.py

@@ -62,7 +62,7 @@ BAN_TOKENS = (  # For documentation puporse. We are not using this list, it is h
 EOS_STRINGS = ["<end_of_utterance>", "\nUser:"]
 STOP_SUSPECT_LIST = []
 
-GRADIO_LINK = "https://huggingfacem4-ai-meme-generator.hf.space"
+GRADIO_LINK = "https://multimodalart-ai-meme-generator.hf.space"
 API_TOKEN = os.getenv("HF_AUTH_TOKEN")
 IDEFICS_LOGO = "https://huggingface.co/spaces/HuggingFaceM4/idefics_playground/resolve/main/IDEFICS_logo.png"
 
@@ -152,7 +152,7 @@ for image_dir in os.listdir("example_images"):
         tmp_filename = H.preprocess(H.value)
         DEFAULT_IMAGES_TMP_PATH_TO_URL[
             tmp_filename
-        ] = f"https://huggingface.co/spaces/HuggingFaceM4/AI_Meme_Generator/resolve/main/example_images/{image_dir}/{im_path}"
+        ] = f"https://huggingface.co/spaces/multimodalart/AI_Meme_Generator/resolve/main/example_images/{image_dir}/{im_path}"
 
 
 # Utils to handle the image markdown display logic
@@ -356,41 +356,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:
-        new_lines = lines.copy()
-        last_line_with_backslash = insert_backslash(
-            new_lines[-1],
-            max_length=(len(new_lines[-1]) + max_len_increment)
-            // (num_lines - num_loops),
-        )
-        penultimate_line, last_line = (
-            last_line_with_backslash.split("\n")[0],
-            last_line_with_backslash.split("\n")[1],
-        )
-        new_lines.pop(-1)
-        new_lines.append(penultimate_line)
-        new_lines.append(last_line)
-        # If the we haven't reached the last line, we split it again
-        if len(new_lines) < num_lines:
-            new_lines, text_width, text_is_too_long = make_new_lines(
-                draw=draw,
-                image=image,
-                font=font,
-                text_is_too_long=text_is_too_long,
-                lines=new_lines,
-                num_lines=num_lines,
-                num_loops=num_loops + 1,
-            )
-        text_width = max([draw.textlength(line, font) for line in new_lines])
-        text_is_too_long = text_width > image.width
-        max_len_increment += 1
-    if not text_is_too_long:
-        lines = new_lines
-    return lines, text_width, text_is_too_long
-
-
 def test_font_size(
     draw,
     image,
@@ -403,25 +368,75 @@ def test_font_size(
 ):
     text_width = draw.textlength(text, font)
     text_is_too_long = True
-    lines = [text]
-    while font.size > min_font and text_is_too_long:
-        font = ImageFont.truetype(
-            f"fonts/{font_meme_text}.ttf", size=font.size - font_size_reduction
-        )
-        if num_lines == 1:
+
+    if num_lines == 1:
+        while font.size > min_font and text_is_too_long:
+            font = ImageFont.truetype(
+                f"fonts/{font_meme_text}.ttf", size=font.size - font_size_reduction
+            )
             text_width = draw.textlength(text, font)
             text_is_too_long = text_width > image.width
-        else:
-            lines, text_width, text_is_too_long = make_new_lines(
-                draw=draw,
-                image=image,
-                font=font,
-                text_is_too_long=text_is_too_long,
-                lines=lines,
-                num_lines=num_lines,
-                num_loops=0,
+
+    elif num_lines == 2:
+        while font.size > min_font and text_is_too_long:
+            font = ImageFont.truetype(
+                f"fonts/{font_meme_text}.ttf", size=font.size - font_size_reduction
             )
-            temp_text = "\n".join(lines)
+            max_len_increment = 0
+            while (
+                text_is_too_long
+                and max_len_increment < 10
+                and max_len_increment < (len(text)) // 2
+            ):
+                temp_text = insert_backslash(
+                    text, max_length=(len(text) + max_len_increment) // 2
+                )
+                first_line, second_line = (
+                    temp_text.split("\n")[0],
+                    temp_text.split("\n")[1],
+                )
+                text_width = max(
+                    draw.textlength(first_line, font),
+                    draw.textlength(second_line, font),
+                )
+                text_is_too_long = text_width > image.width
+                max_len_increment += 1
+
+    elif num_lines == 3:
+        while font.size > min_font and text_is_too_long:
+            font = ImageFont.truetype(
+                f"fonts/{font_meme_text}.ttf", size=font.size - font_size_reduction
+            )
+            max_len_incr_1_split = 0
+            while text_is_too_long and max_len_incr_1_split < 10:
+                first_temp_text = insert_backslash(
+                    text, max_length=(len(text) + max_len_incr_1_split) // 3
+                )
+                first_line, second_line = (
+                    first_temp_text.split("\n")[0],
+                    first_temp_text.split("\n")[1],
+                )
+                max_len_incr_2_split = 0
+                while text_is_too_long and max_len_incr_2_split < 10:
+                    temp_text_second_line = insert_backslash(
+                        second_line,
+                        max_length=(len(second_line) + max_len_incr_2_split) // 2,
+                    )
+                    second_line_1, second_line_2 = (
+                        temp_text_second_line.split("\n")[0],
+                        temp_text_second_line.split("\n")[1],
+                    )
+                    temp_text = first_line + "\n" + second_line_1 + "\n" + second_line_2
+                    text_width = max(
+                        draw.textlength(first_line, font),
+                        draw.textlength(second_line_1, font),
+                        draw.textlength(second_line_2, font),
+                    )
+                    text_is_too_long = text_width > image.width
+                    max_len_incr_2_split += 1
+                max_len_incr_1_split += 1
+    else:
+        raise (ValueError("num_lines can only be 1, 2 or 3"))
 
     if not text_is_too_long and num_lines > 1:
         text = temp_text
@@ -456,7 +471,7 @@ def make_meme_image(
         initial_font_size = 80
     text_is_too_long = True
     num_lines = 0
-    while text_is_too_long and num_lines < 8:
+    while text_is_too_long and num_lines < 3:
         num_lines += 1
         font = ImageFont.truetype(f"fonts/{font_meme_text}.ttf", size=initial_font_size)
         text, font, text_width, text_is_too_long = test_font_size(
@@ -479,7 +494,7 @@ def make_meme_image(
 
     outline_width = 2
     text_x = (image_width - text_width) / 2
-    text_y = image_height - num_lines * font.size - 10 - 2 * num_lines
+    text_y = image_height - num_lines * font.size - 10 - num_lines
     if text_at_the_top:
         text_y = 0
 
@@ -548,9 +563,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 +582,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 +604,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 +725,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 +733,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 +755,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,61 +898,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,
-        ],
-        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,
-    ).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,
+    gr.on(
+        triggers=[
+            textbox.submit,
+            imagebox.upload,
+            submit_btn.click
         ],
-    )
-    submit_btn.click(
-        fn=lambda: "", inputs=[], outputs=[generated_memes_gallery], 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,
@@ -951,11 +925,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,
-        ],
+        outputs=[textbox, generated_memes_gallery, chatbot],
     )
 
     def remove_last_turn(chat_history):
@@ -972,6 +942,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 +969,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 +987,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 +1015,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()