dynamic layout

#4
by multimodalart HF staff - opened
Files changed (1) hide show
  1. app_dialogue.py +39 -81
app_dialogue.py CHANGED
@@ -355,7 +355,6 @@ def resize_with_ratio(image: PIL.Image.Image, fixed_width: int) -> PIL.Image.Ima
355
 
356
  return resized_img
357
 
358
-
359
  def make_new_lines(draw, image, font, text_is_too_long, lines, num_lines, num_loops):
360
  max_len_increment = 0
361
  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
390
  lines = new_lines
391
  return lines, text_width, text_is_too_long
392
 
393
-
394
  def test_font_size(
395
  draw,
396
  image,
@@ -548,9 +546,8 @@ def format_user_prompt_with_im_history_and_system_conditioning(
548
 
549
  return resulting_list, current_user_prompt_list
550
 
551
-
552
- # dope_callback = gr.CSVLogger()
553
- # problematic_callback = gr.CSVLogger()
554
 
555
  textbox = gr.Textbox(
556
  placeholder="Upload an image and ask the AI to create a meme!",
@@ -568,16 +565,17 @@ chatbot = gr.Chatbot(
568
  visible=False,
569
  avatar_images=[None, BOT_AVATAR],
570
  )
571
- css = """
572
- .gradio-container{max-width: 970px!important}
573
  h1{display: flex;align-items: center;justify-content: center;gap: .25em}
574
- """
 
575
  with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as demo:
576
  with gr.Row(scale=0.5):
577
  gr.HTML(
578
  """<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>"""
579
  )
580
-
581
  with gr.Row(elem_id="model_selector_row"):
582
  model_selector = gr.Dropdown(
583
  choices=MODELS,
@@ -589,21 +587,22 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
589
  visible=False,
590
  )
591
  with gr.Row(equal_height=True):
592
- with gr.Column(equal_height=1):
 
593
  imagebox = gr.Image(
594
- type="filepath", label="Image to meme", height=400, visible=True
595
  )
596
  with gr.Group():
597
  with gr.Row():
598
  textbox.render()
599
  with gr.Row():
600
- submit_btn = gr.Button(value="▶️ Submit", visible=True)
601
  clear_btn = gr.ClearButton(
602
- [textbox, imagebox, chatbot], value="🧹 Clear"
603
  )
604
- regenerate_btn = gr.Button(value="🔄 Regenerate", visible=True)
605
  upload_btn = gr.UploadButton(
606
- "📁 Upload image", file_types=["image"], visible=False
607
  )
608
  with gr.Accordion(
609
  "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
709
  inputs=decoding_strategy,
710
  outputs=top_p,
711
  )
712
- with gr.Column(scale=2):
713
  generated_memes_gallery = gr.Gallery(
714
  # value="Images generated will appear here",
715
  label="IDEFICS Generated Memes",
@@ -717,7 +716,9 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
717
  elem_id="generated_memes_gallery",
718
  show_download_button=True,
719
  show_share_button=True,
720
- ).style(columns=[2], object_fit="contain", height=600)
 
 
721
  with gr.Row(equal_height=True):
722
  with gr.Box(elem_id="gallery_box"):
723
  gallery_type_choice = gr.Radio(
@@ -737,7 +738,7 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
737
  # value= value given by gallery_type_choice,
738
  label="Templates Gallery",
739
  allow_preview=False,
740
- columns=[6],
741
  elem_id="gallery",
742
  show_share_button=False,
743
  height=400,
@@ -880,36 +881,17 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
880
  # yield "", None, chat_history
881
  full_text += acc_text
882
  acc_text = ""
883
-
884
- textbox.submit(
885
- fn=lambda: "", inputs=[], outputs=[generated_memes_gallery], queue=False
886
- ).then(
887
- fn=model_inference,
888
- inputs=[
889
- model_selector,
890
- system_prompt,
891
- textbox,
892
- chatbot,
893
- imagebox,
894
- decoding_strategy,
895
- temperature,
896
- max_new_tokens,
897
- repetition_penalty,
898
- top_p,
899
- all_caps_meme_text,
900
- text_at_the_top,
901
- font_meme_text,
902
  ],
903
- outputs=[textbox, generated_memes_gallery, chatbot],
904
- )
905
- imagebox.upload(
906
- fn=lambda: "", inputs=[], outputs=[generated_memes_gallery], queue=False
907
- ).then(
908
- fn=lambda: "Write a meme about this image.",
909
- inputs=[],
910
- outputs=[textbox],
911
- queue=False,
912
  ).then(
 
913
  fn=model_inference,
914
  inputs=[
915
  model_selector,
@@ -926,36 +908,7 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
926
  text_at_the_top,
927
  font_meme_text,
928
  ],
929
- outputs=[
930
- textbox,
931
- generated_memes_gallery,
932
- chatbot,
933
- ],
934
- )
935
- submit_btn.click(
936
- fn=lambda: "", inputs=[], outputs=[generated_memes_gallery], queue=False
937
- ).then(
938
- fn=model_inference,
939
- inputs=[
940
- model_selector,
941
- system_prompt,
942
- textbox,
943
- chatbot,
944
- imagebox,
945
- decoding_strategy,
946
- temperature,
947
- max_new_tokens,
948
- repetition_penalty,
949
- top_p,
950
- all_caps_meme_text,
951
- text_at_the_top,
952
- font_meme_text,
953
- ],
954
- outputs=[
955
- textbox,
956
- generated_memes_gallery,
957
- chatbot,
958
- ],
959
  )
960
 
961
  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
972
  fn=remove_last_turn,
973
  inputs=chatbot,
974
  outputs=[chatbot, textbox, generated_memes_gallery],
 
975
  ).then(
976
  fn=model_inference,
977
  inputs=[
@@ -998,13 +952,13 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
998
 
999
  upload_btn.upload(add_file, [upload_btn], [imagebox, upload_btn], queue=False)
1000
  submit_btn.click(
1001
- lambda: gr.update(label="📁 Upload image", interactive=True), [], upload_btn
1002
  )
1003
  textbox.submit(
1004
- lambda: gr.update(label="📁 Upload image", interactive=True), [], upload_btn
1005
  )
1006
  clear_btn.click(
1007
- lambda: gr.update(label="📁 Upload image", interactive=True), [], upload_btn
1008
  )
1009
  gallery_type_choice.change(
1010
  fn=choose_gallery,
@@ -1016,6 +970,10 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
1016
  fn=add_file_gallery,
1017
  inputs=[template_gallery],
1018
  outputs=[textbox, imagebox, generated_memes_gallery],
 
 
 
 
1019
  ).success(
1020
  fn=model_inference,
1021
  inputs=[
@@ -1040,7 +998,7 @@ with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as de
1040
  ],
1041
  )
1042
  demo.load(
1043
- fn=choose_gallery, inputs=[gallery_type_choice], outputs=[template_gallery]
1044
  )
1045
  demo.queue(concurrency_count=40, max_size=40)
1046
- demo.launch()
 
355
 
356
  return resized_img
357
 
 
358
  def make_new_lines(draw, image, font, text_is_too_long, lines, num_lines, num_loops):
359
  max_len_increment = 0
360
  while text_is_too_long and max_len_increment < 10:
 
389
  lines = new_lines
390
  return lines, text_width, text_is_too_long
391
 
 
392
  def test_font_size(
393
  draw,
394
  image,
 
546
 
547
  return resulting_list, current_user_prompt_list
548
 
549
+ def expand_layout():
550
+ return gr.Column(scale=2), gr.Gallery(height=682)
 
551
 
552
  textbox = gr.Textbox(
553
  placeholder="Upload an image and ask the AI to create a meme!",
 
565
  visible=False,
566
  avatar_images=[None, BOT_AVATAR],
567
  )
568
+ css='''
569
+ .gradio-container{max-width: 1000px!important}
570
  h1{display: flex;align-items: center;justify-content: center;gap: .25em}
571
+ *{transition: width 0.5s ease, flex-grow 0.5s ease}
572
+ '''
573
  with gr.Blocks(title="AI Meme Generator", theme=gr.themes.Base(), css=css) as demo:
574
  with gr.Row(scale=0.5):
575
  gr.HTML(
576
  """<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>"""
577
  )
578
+
579
  with gr.Row(elem_id="model_selector_row"):
580
  model_selector = gr.Dropdown(
581
  choices=MODELS,
 
587
  visible=False,
588
  )
589
  with gr.Row(equal_height=True):
590
+ #scale=2 when expanded
591
+ with gr.Column(scale=4, min_width=250) as upload_area:
592
  imagebox = gr.Image(
593
+ type="filepath", label="Image to meme", height=272, visible=True
594
  )
595
  with gr.Group():
596
  with gr.Row():
597
  textbox.render()
598
  with gr.Row():
599
+ submit_btn = gr.Button(value="▶️ Submit", visible=True, min_width=120)
600
  clear_btn = gr.ClearButton(
601
+ [textbox, imagebox, chatbot], value="🧹 Clear", min_width=120
602
  )
603
+ regenerate_btn = gr.Button(value="🔄 Regenerate", visible=True, min_width=120)
604
  upload_btn = gr.UploadButton(
605
+ "📁 Upload image", file_types=["image"], visible=False, min_width=120
606
  )
607
  with gr.Accordion(
608
  "Advanced settings", open=False, visible=True
 
708
  inputs=decoding_strategy,
709
  outputs=top_p,
710
  )
711
+ with gr.Column(scale=5) as result_area:
712
  generated_memes_gallery = gr.Gallery(
713
  # value="Images generated will appear here",
714
  label="IDEFICS Generated Memes",
 
716
  elem_id="generated_memes_gallery",
717
  show_download_button=True,
718
  show_share_button=True,
719
+ columns=[2],
720
+ object_fit="contain",height=428
721
+ ) #height 600 when expanded
722
  with gr.Row(equal_height=True):
723
  with gr.Box(elem_id="gallery_box"):
724
  gallery_type_choice = gr.Radio(
 
738
  # value= value given by gallery_type_choice,
739
  label="Templates Gallery",
740
  allow_preview=False,
741
+ columns=6,
742
  elem_id="gallery",
743
  show_share_button=False,
744
  height=400,
 
881
  # yield "", None, chat_history
882
  full_text += acc_text
883
  acc_text = ""
884
+ gr.on(
885
+ triggers=[
886
+ textbox.submit,
887
+ imagebox.upload,
888
+ submit_btn.click
 
 
 
 
 
 
 
 
 
 
 
 
 
 
889
  ],
890
+ fn=expand_layout,
891
+ outputs=[upload_area, generated_memes_gallery],
892
+ queue=False
 
 
 
 
 
 
893
  ).then(
894
+ fn=lambda: "", inputs=[], outputs=[generated_memes_gallery], queue=False).then(
895
  fn=model_inference,
896
  inputs=[
897
  model_selector,
 
908
  text_at_the_top,
909
  font_meme_text,
910
  ],
911
+ outputs=[textbox, generated_memes_gallery, chatbot],
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
912
  )
913
 
914
  def remove_last_turn(chat_history):
 
925
  fn=remove_last_turn,
926
  inputs=chatbot,
927
  outputs=[chatbot, textbox, generated_memes_gallery],
928
+ queue=False
929
  ).then(
930
  fn=model_inference,
931
  inputs=[
 
952
 
953
  upload_btn.upload(add_file, [upload_btn], [imagebox, upload_btn], queue=False)
954
  submit_btn.click(
955
+ lambda: gr.update(label="📁 Upload image", interactive=True), [], upload_btn, queue=False
956
  )
957
  textbox.submit(
958
+ lambda: gr.update(label="📁 Upload image", interactive=True), [], upload_btn, queue=False
959
  )
960
  clear_btn.click(
961
+ lambda: gr.update(label="📁 Upload image", interactive=True), [], upload_btn, queue=False
962
  )
963
  gallery_type_choice.change(
964
  fn=choose_gallery,
 
970
  fn=add_file_gallery,
971
  inputs=[template_gallery],
972
  outputs=[textbox, imagebox, generated_memes_gallery],
973
+ ).success(
974
+ fn=expand_layout,
975
+ outputs=[upload_area, generated_memes_gallery],
976
+ queue=False
977
  ).success(
978
  fn=model_inference,
979
  inputs=[
 
998
  ],
999
  )
1000
  demo.load(
1001
+ fn=choose_gallery, inputs=[gallery_type_choice], outputs=[template_gallery], queue=False
1002
  )
1003
  demo.queue(concurrency_count=40, max_size=40)
1004
+ demo.launch()