Explicit image upload field suggestion

app_dialogue.py

@@ -333,6 +333,13 @@ textbox = gr.Textbox(
     label="Text input",
     scale=6,
 )
+chatbot = gr.Chatbot(
+    elem_id="chatbot",
+    label="IDEFICS",
+    visible=True,
+    height=750,
+    avatar_images=[None, BOT_AVATAR]
+)
 with gr.Blocks(title="IDEFICS Playground", theme=gr.themes.Base()) as demo:
     gr.HTML("""<h1 align="center">🐶 IDEFICS Playground</h1>""")
     with gr.Row(variant="panel"):
@@ -360,128 +367,88 @@ with gr.Blocks(title="IDEFICS Playground", theme=gr.themes.Base()) as demo:
             visible=False,
         )
 
-    imagebox = gr.Image(type="filepath", label="Image input", visible=False)
-
-    with gr.Row():
-        # def prefetch_images_in_history(user_prompt_str):
-        #     """
-        #     Pre-fetch the images that are passed in the chatbot default history.
-        #     """
-        #     return prompt_list_to_markdown(handle_manual_images_in_user_prompt(user_prompt_str))
-
-        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"])
-    # with gr.Group():
-    #     with gr.Row():
-    #         with gr.Column(scale=1, min_width=50):
-    #             dope_bttn = gr.Button("Dope🔥")
-    #         with gr.Column(scale=1, min_width=50):
-    #             problematic_bttn = gr.Button("Problematic😬")
-
     with gr.Row():
-        with gr.Accordion("Advanced settings", open=False, visible=True) as parameter_row:
-            max_new_tokens = gr.Slider(
-                minimum=8,
-                maximum=1024,
-                value=512,
-                step=1,
-                interactive=True,
-                label="Maximum number of new tokens to generate",
-            )
-            repetition_penalty = gr.Slider(
-                minimum=0.0,
-                maximum=5.0,
-                value=1.0,
-                step=0.01,
-                interactive=True,
-                label="Repetition penalty",
-                info="1.0 is equivalent to no penalty",
-            )
-            decoding_strategy = gr.Radio(
-                [
-                    "Greedy",
-                    "Top P Sampling",
-                ],
-                value="Greedy",
-                label="Decoding strategy",
-                interactive=True,
-                info="Higher values is equivalent to sampling more low-probability tokens.",
-            )
-            temperature = gr.Slider(
-                minimum=0.0,
-                maximum=5.0,
-                value=0.4,
-                step=0.1,
-                interactive=True,
-                visible=False,
-                label="Sampling temperature",
-                info="Higher values will produce more diverse outputs.",
-            )
-            decoding_strategy.change(
-                fn=lambda selection: gr.Slider.update(
-                    visible=(
-                        selection in ["contrastive_sampling", "beam_sampling", "Top P Sampling", "sampling_top_k"]
+        with gr.Column():
+            imagebox = gr.Image(type="filepath", label="Image input")
+            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.Accordion("Advanced settings", open=False, visible=True) as parameter_row:
+                    max_new_tokens = gr.Slider(
+                        minimum=8,
+                        maximum=1024,
+                        value=512,
+                        step=1,
+                        interactive=True,
+                        label="Maximum number of new tokens to generate",
                     )
-                ),
-                inputs=decoding_strategy,
-                outputs=temperature,
-            )
-            top_p = gr.Slider(
-                minimum=0.01,
-                maximum=0.99,
-                value=0.8,
-                step=0.01,
-                interactive=True,
-                visible=False,
-                label="Top P",
-                info="Higher values is equivalent to sampling more low-probability tokens.",
-            )
-            decoding_strategy.change(
-                fn=lambda selection: gr.Slider.update(visible=(selection in ["Top P Sampling"])),
-                inputs=decoding_strategy,
-                outputs=top_p,
-            )
-            gr.Markdown(
-                """<p><strong>💡 Pro tip</strong>:<br>
-                You can input an arbitrary number of images at arbitrary positions in the same query.<br>
-                You will need to input each image with its URL with the syntax <code>&lt;fake_token_around_image&gt;&lt;image:IMAGE_URL&gt;&lt;fake_token_around_image&gt;</code>.<br>
-                For example, for two images, you could input <code>TEXT_1&lt;fake_token_around_image&gt;&lt;image:IMAGE_URL_1&gt;&lt;fake_token_around_image&gt;TEXT_2&lt;fake_token_around_image&gt;&lt;image:IMAGE_URL_2&gt;&lt;fake_token_around_image&gt;TEXT_3</code>.<br>
-                In the particular case where two images are consecutive, it is not necessary to add an additional separator: <code>&lt;fake_token_around_image&gt;&lt;image:IMAGE_URL_1&gt;&lt;fake_token_around_image&gt;&lt;image:IMAGE_URL_2&gt;&lt;fake_token_around_image&gt;</code>.</p>"""
-            )
+                    repetition_penalty = gr.Slider(
+                        minimum=0.0,
+                        maximum=5.0,
+                        value=1.0,
+                        step=0.01,
+                        interactive=True,
+                        label="Repetition penalty",
+                        info="1.0 is equivalent to no penalty",
+                    )
+                    decoding_strategy = gr.Radio(
+                        [
+                            "Greedy",
+                            "Top P Sampling",
+                        ],
+                        value="Greedy",
+                        label="Decoding strategy",
+                        interactive=True,
+                        info="Higher values is equivalent to sampling more low-probability tokens.",
+                    )
+                    temperature = gr.Slider(
+                        minimum=0.0,
+                        maximum=5.0,
+                        value=0.4,
+                        step=0.1,
+                        interactive=True,
+                        visible=False,
+                        label="Sampling temperature",
+                        info="Higher values will produce more diverse outputs.",
+                    )
+                    decoding_strategy.change(
+                        fn=lambda selection: gr.Slider.update(
+                            visible=(
+                                selection in ["contrastive_sampling", "beam_sampling", "Top P Sampling", "sampling_top_k"]
+                            )
+                        ),
+                        inputs=decoding_strategy,
+                        outputs=temperature,
+                    )
+                    top_p = gr.Slider(
+                        minimum=0.01,
+                        maximum=0.99,
+                        value=0.8,
+                        step=0.01,
+                        interactive=True,
+                        visible=False,
+                        label="Top P",
+                        info="Higher values is equivalent to sampling more low-probability tokens.",
+                    )
+                    decoding_strategy.change(
+                        fn=lambda selection: gr.Slider.update(visible=(selection in ["Top P Sampling"])),
+                        inputs=decoding_strategy,
+                        outputs=top_p,
+                    )
+                    gr.Markdown(
+                        """<p><strong>💡 Pro tip</strong>:<br>
+                        You can input an arbitrary number of images at arbitrary positions in the same query.<br>
+                        You will need to input each image with its URL with the syntax <code>&lt;fake_token_around_image&gt;&lt;image:IMAGE_URL&gt;&lt;fake_token_around_image&gt;</code>.<br>
+                        For example, for two images, you could input <code>TEXT_1&lt;fake_token_around_image&gt;&lt;image:IMAGE_URL_1&gt;&lt;fake_token_around_image&gt;TEXT_2&lt;fake_token_around_image&gt;&lt;image:IMAGE_URL_2&gt;&lt;fake_token_around_image&gt;TEXT_3</code>.<br>
+                        In the particular case where two images are consecutive, it is not necessary to add an additional separator: <code>&lt;fake_token_around_image&gt;&lt;image:IMAGE_URL_1&gt;&lt;fake_token_around_image&gt;&lt;image:IMAGE_URL_2&gt;&lt;fake_token_around_image&gt;</code>.</p>"""
+                    )
+        with gr.Column():
+            chatbot.render()
 
     def model_inference(
         model_selector,
@@ -867,7 +834,7 @@ with gr.Blocks(title="IDEFICS Playground", theme=gr.themes.Base()) as demo:
         inputs=[textbox, imagebox],
         outputs=[textbox, imagebox, chatbot],
         fn=process_example,
-        cache_examples=True,
+        cache_examples=False,
         examples_per_page=6,
         label=(
             "Click on any example below to get started.\nFor convenience, the model generations have been"
@@ -876,4 +843,4 @@ with gr.Blocks(title="IDEFICS Playground", theme=gr.themes.Base()) as demo:
     )
 
 demo.queue(concurrency_count=40, max_size=40)
-demo.launch()
+demo.launch()