Swap out the UI elements

app_dialogue.py

@@ -333,6 +333,14 @@ textbox = gr.Textbox(
     scale=6,
     max_lines=5,
 )
+chatbot = gr.Chatbot(
+    elem_id="chatbot",
+    label="IDEFICS",
+    visible=True,
+    height=750,
+    avatar_images=[None, BOT_AVATAR]            
+)
+
 with gr.Blocks(title="AI Dad Jokes", theme=gr.themes.Base()) as demo:
     gr.HTML("""<h1 align="center">AI Dad Jokes</h1>""")
     with gr.Row(variant="panel"):
@@ -357,48 +365,19 @@ with gr.Blocks(title="AI Dad Jokes", theme=gr.themes.Base()) as demo:
             visible=False,
         )
 
-
-
     with gr.Row():
         with gr.Column():
             imagebox = gr.Image(type="filepath", label="Image input", visible=True)
+            with gr.Group():
+                with gr.Row():
+                    textbox.render()
+                    submit_btn = gr.Button(value="▶️ Submit", visible=True)
+                with gr.Row():
+                    clear_btn = gr.ClearButton([textbox, imagebox, chatbot], value="🧹 Clear")
+                    regenerate_btn = gr.Button(value="🔄 Regenerate", visible=True)
+                    upload_btn = gr.UploadButton("📁 Upload image", file_types=["image"],visible=False)
         with gr.Column():
-            chatbot = gr.Chatbot(
-                elem_id="chatbot",
-                label="IDEFICS",
-                visible=True,
-                height=750,
-                avatar_images=[None, BOT_AVATAR]
-                #                 value=[
-                #                     [
-                #                         (
-                #                             prefetch_images_in_history(
-                #                                 """Write a funny story including the following characters.
-                # There should be drama and most importantly romance.
-                # Character 1:<fake_token_around_image><image:https://m.media-amazon.com/images/M/MV5BODg1OTczMWEtNTU3MS00OTUzLThjODEtNDg1MWQwZmExYmFlXkEyXkFqcGdeQWFybm8@._V1_QL75_UX500_CR0,0,500,281_.jpg><fake_token_around_image>
-                # Character 2:<fake_token_around_image><image:https://static.wikia.nocookie.net/dreamworks/images/0/09/Shrek_dreamworks.png/revision/latest?cb=20170921225439><fake_token_around_image>
-                # Character 3:<fake_token_around_image><image:https://upload.wikimedia.org/wikipedia/en/e/ef/Marsupilami_1.jpg><fake_token_around_image>
-                # The plot should take place in the world pictured here:<fake_token_around_image><image:https://www.astronomy.com/wp-content/uploads/sites/2/2021/09/ON1.jpg><fake_token_around_image>"""
-                #                             )
-                #                         ),
-                #                         """Once upon a time, in a world where the sky was a dome and the ground was covered in grass, there lived a beautiful princess named Mulan. She was kind, brave, and always ready to help others. One day, while walking through the forest, she stumbled upon a strange creature. It was a green ogre named Shrek, who was lost and looking for his way back home.
-                # Mulan, being the kind-hearted person she was, decided to help Shrek find his way back. As they traveled together, they began to develop a strong bond. Shrek was impressed by Mulan's bravery and determination, while Mulan admired Shrek's loyalty and sense of humor.
-                # However, their journey was not without obstacles. They encountered a mischievous cat named Hoboua, who was always causing trouble and getting into fights. Despite his troublemaking ways, Hoboua had a good heart and eventually became a valuable ally to Mulan and Shrek.
-                # As they traveled, they faced many challenges, including battling fierce dragons and navigating treacherous mountains. Through it all, Mulan and Shrek grew closer, and their feelings for each other deepened.
-                # Finally, they reached Shrek's home, and he was reunited with his family and friends. Mulan, however, was sad to leave him behind. But Shrek had a surprise for her. He had fallen in love with her and wanted to be with her forever.
-                # Mulan was overjoyed, and they shared a passionate kiss. From that day on, they lived happily ever after, exploring the world together and facing any challenges that came their way.
-                # And so, the story of Mulan and Shrek's romance came to an end, leaving a lasting impression on all who heard it.""",
-                #                     ],
-                #                 ],
-            )
-
-    with gr.Group():
-        with gr.Row():
-            textbox.render()
-            submit_btn = gr.Button(value="▶️ Submit", visible=True)
-            clear_btn = gr.ClearButton([textbox, imagebox, chatbot], value="🧹 Clear")
-            regenerate_btn = gr.Button(value="🔄 Regenerate", visible=True)
-            upload_btn = gr.UploadButton("📁 Upload image", file_types=["image"])
+            chatbot.render()
 
     with gr.Row():
         with gr.Accordion("Advanced settings", open=False, visible=True) as parameter_row: