Update visualization

app_dialogue.py

@@ -1,4 +1,5 @@
 import base64
+import copy
 import logging
 import os
 import re
@@ -21,28 +22,28 @@ MODELS = [
 SYSTEM_PROMPT = [
     """The following is a conversation between a highly knowledgeable and intelligent visual AI assistant, called Assistant, and a human user, called User. In the following interactions, User and Assistant will converse in natural language, and Assistant will do its best to answer User’s questions. Assistant has the ability to perceive images and reason about the content of visual inputs. Assistant was built to be respectful, polite and inclusive. It knows a lot, and always tells the truth. When prompted with an image, it does not make up facts.
 
-The conversation begins:\n""",
-    """User:<fake_token_around_image><image:https://i1.pickpik.com/photos/515/906/355/kittens-cats-pet-cute-preview.jpg><fake_token_around_image>Describe this image.<end_of_utterance>\n""",
-    """Assistant: Five kittens are standing together in the center of the photograph. From the left to right, there is one orange kitten, two kittens white and black stripes, and two brown kittens with an orange head. They are in bright green grass and it looks like they are moving forward.<end_of_utterance>\n""",
+The conversation begins:""",
+    """\nUser:<fake_token_around_image><image:https://i1.pickpik.com/photos/515/906/355/kittens-cats-pet-cute-preview.jpg><fake_token_around_image>Describe this image.<end_of_utterance>""",
+    """\nAssistant: Five kittens are standing together in the center of the photograph. From the left to right, there is one orange kitten, two kittens white and black stripes, and two brown kittens with an orange head. They are in bright green grass and it looks like they are moving forward.<end_of_utterance>""",
     (
-        "User:How about this"
+        "\nUser:How about this"
         " image?<fake_token_around_image><image:https://cdn.pixabay.com/photo/2017/09/25/13/12/puppy-2785074_1280.jpg><fake_token_around_image>Can"
-        " you describe it too?<end_of_utterance>\n"
+        " you describe it too?<end_of_utterance>"
     ),
-    """Assistant: A dog is lying on the floor, looking at the camera. It is looking directly at you. The dog has a white body and brown patches on its face and ears. Its eyes are dark. Its nose is black, and it has long, floppy ears, white paws, long fur, big eyes.<end_of_utterance>\n""",
-    "User: What kind of breed is it?<end_of_utterance>\n",
-    """Assistant: It looks like a Cavalier King Charles Spaniel. These breeds are known for their gentle, affectionate nature. Their long ears and big, brown eyes give them a sweet, expressive face. Cavaliers are small dogs weighing between 13 and 20 pounds. They have a silky, medium-length coat that comes in various colors, including black and tan, tricolor, red and white, or black.<end_of_utterance>\n""",
-    "User: What can you tell me about this breed of dogs?<end_of_utterance>\n",
-    """Assistant: One specific characteristic of the Cavalier King Charles Spaniel is its friendly and affectionate nature. This breed is known for being extremely sociable and forming strong bonds with their owners. They are often described as "velcro dogs" because they love to be close to their human companions, whether it's sitting on their laps, cuddling on the couch, or simply following them around the house.<end_of_utterance>\n""",
-    "User: ghjkhjabnufs<end_of_utterance>\n",
-    """Assistant: That doesn’t seem to be a word. Could you ask me another way?<end_of_utterance>\n""",
-    "User: Do you like Cavalier King Charles Spaniel?<end_of_utterance>\n",
-    """Assistant: I do not have personal opinions as I’m just a computer program. However, cavaliers are known for being excellent family pets due to their gentle and patient demeanor, making them great with children and other pets. Their affectionate nature also makes them ideal therapy dogs, as they can provide comfort and emotional support to those in need.<end_of_utterance>\n""",
+    """\nAssistant: A dog is lying on the floor, looking at the camera. It is looking directly at you. The dog has a white body and brown patches on its face and ears. Its eyes are dark. Its nose is black, and it has long, floppy ears, white paws, long fur, big eyes.<end_of_utterance>""",
+    "\nUser: What kind of breed is it?<end_of_utterance>",
+    """\nAssistant: It looks like a Cavalier King Charles Spaniel. These breeds are known for their gentle, affectionate nature. Their long ears and big, brown eyes give them a sweet, expressive face. Cavaliers are small dogs weighing between 13 and 20 pounds. They have a silky, medium-length coat that comes in various colors, including black and tan, tricolor, red and white, or black.<end_of_utterance>""",
+    "\nUser: What can you tell me about this breed of dogs?<end_of_utterance>",
+    """\nAssistant: One specific characteristic of the Cavalier King Charles Spaniel is its friendly and affectionate nature. This breed is known for being extremely sociable and forming strong bonds with their owners. They are often described as "velcro dogs" because they love to be close to their human companions, whether it's sitting on their laps, cuddling on the couch, or simply following them around the house.<end_of_utterance>""",
+    "\nUser: ghjkhjabnufs<end_of_utterance>",
+    """\nAssistant: That doesn’t seem to be a word. Could you ask me another way?<end_of_utterance>""",
+    "\nUser: Do you like Cavalier King Charles Spaniel?<end_of_utterance>\n",
+    """\nAssistant: I do not have personal opinions as I’m just a computer program. However, cavaliers are known for being excellent family pets due to their gentle and patient demeanor, making them great with children and other pets. Their affectionate nature also makes them ideal therapy dogs, as they can provide comfort and emotional support to those in need.<end_of_utterance>""",
     (
-        "User: How many dogs do you see in this"
-        " image?<fake_token_around_image><image:https://i.dailymail.co.uk/i/pix/2011/07/01/article-2010308-0CD22A8300000578-496_634x414.jpg><fake_token_around_image><end_of_utterance>\n"
+        "\nUser: How many dogs do you see in this"
+        " image?<fake_token_around_image><image:https://i.dailymail.co.uk/i/pix/2011/07/01/article-2010308-0CD22A8300000578-496_634x414.jpg><fake_token_around_image><end_of_utterance>"
     ),
-    """Assistant: There is no dogs in this image. The picture shows a tennis player jumping to volley the ball.<end_of_utterance>\n""",
+    """\nAssistant: There is no dogs in this image. The picture shows a tennis player jumping to volley the ball.<end_of_utterance>""",
 ]
 
 BAN_TOKENS = "<image>;<fake_token_around_image>"
@@ -56,6 +57,19 @@ logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger()
 
 
+def convert_to_rgb(image):
+    # `image.convert("RGB")` would only work for .jpg images, as it creates a wrong background
+    # for transparent images. The call to `alpha_composite` handles this case
+    if image.mode == "RGB":
+        return image
+
+    image_rgba = image.convert("RGBA")
+    background = Image.new("RGBA", image_rgba.size, (255, 255, 255))
+    alpha_composite = Image.alpha_composite(background, image_rgba)
+    alpha_composite = alpha_composite.convert("RGB")
+    return alpha_composite
+
+
 # Conversion between PIL Image <-> base64 <-> Markdown utils
 def pil_to_base64(pil_image):
     """
@@ -198,7 +212,7 @@ def user_prompt_list_to_markdown(user_prompt_list: List[Union[str, PIL.Image.Ima
         if isinstance(elem, str):
             resulting_string += elem
         elif isinstance(elem, PIL.Image.Image):
-            resulting_string += pil_to_markdown_im(elem)
+            resulting_string += pil_to_markdown_im(convert_to_rgb(elem))
         else:
             raise ValueError(
                 "Unknown type for `user_prompt_list`. Expected an element of type `str` or `PIL.Image.Image` and got"
@@ -248,7 +262,7 @@ def format_user_prompt_with_im_history_and_system_conditioning(
     Produces the resulting list that needs to go inside the processor.
     It handles the potential image box input, the history and the system conditionning.
     """
-    resulting_list = SYSTEM_PROMPT
+    resulting_list = copy.deepcopy(SYSTEM_PROMPT)
 
     # Format history
     for turn in history:
@@ -500,6 +514,15 @@ with gr.Blocks(title="IDEFICS", theme=gr.themes.Base()) as demo:
                     interactive=True,
                     label="Sampling temperature",
                 )
+                decoding_strategy.change(
+                    fn=lambda selection: gr.Slider.update(
+                        visible=(
+                            selection in ["contrastive_sampling", "beam_sampling", "sampling_top_p", "sampling_top_k"]
+                        )
+                    ),
+                    inputs=decoding_strategy,
+                    outputs=temperature,
+                )
                 num_beams = gr.Slider(
                     minimum=0,
                     maximum=20,
@@ -687,18 +710,38 @@ with gr.Blocks(title="IDEFICS", theme=gr.themes.Base()) as demo:
 
         if image is None:
             # Case where there is no image OR the image is passed as `<fake_token_around_image><image:IMAGE_URL><fake_token_around_image>`
-            chat_history.append((user_prompt_list_to_markdown(user_prompt_list), generated_text.strip("<end_of_utterance>")))
+            chat_history.append(
+                (user_prompt_list_to_markdown(user_prompt_list), generated_text.strip("<end_of_utterance>"))
+            )
         else:
             # Case where the image is passed through the Image Box.
             # Convert the image into base64 for both passing it through the chat history and
             # displaying the image inside the same bubble as the text.
             chat_history.append(
-                (f"{user_prompt_list_to_markdown([image] + user_prompt_list)}", generated_text.strip("<end_of_utterance>"))
+                (
+                    f"{user_prompt_list_to_markdown([image] + user_prompt_list)}",
+                    generated_text.strip("<end_of_utterance>"),
+                )
             )
         return "", None, chat_history
 
-    def process_example(message, image): 
-        clear_msg, image_value, chat = model_inference(message, [], image, "greedy", 3, 1.0, 0, 512, 16, 1.0, 1.0, 50, 0.95, 0.95)
+    def process_example(message, image):
+        clear_msg, image_value, chat = model_inference(
+            user_prompt_str=message,
+            chat_history=[],
+            image=image,
+            decoding_strategy="greedy",
+            num_beams=3,
+            temperature=1.0,
+            no_repeat_ngram_size=0,
+            max_new_tokens=512,
+            min_length=16,
+            repetition_penalty=1.0,
+            length_penalty=1.0,
+            top_k=50,
+            top_p=0.95,
+            penalty_alpha=0.95,
+        )
         return clear_msg, image_value, chat
 
     textbox.submit(
@@ -746,26 +789,49 @@ with gr.Blocks(title="IDEFICS", theme=gr.themes.Base()) as demo:
         ],
     )
 
-    gr.Examples(examples=[
-        ["What are the armed baguettes guarding?", "./example_images/baguettes_guarding_paris.png"],
-        ["Can you describe the image?", "example_images/bear_costume.png"],
-        ["What is this object and do you think it is horrifying?", "example_images/can_horror.png"],
-        ["Can you tell me a very short story based on this image?", "example_images/chicken_on_money.png"],
-        ["Can you describe this image in details please?", "example_images/dragons_playing.png"],
-        ["Can you tell me what is unique about this image?", "example_images/ironman_cap.png"],
-        ["Can you write an advertisement for Coca-Cola based on this image?", "example_images/polar_bear_coke.png"],
-        ["What is the rabbit doing in this image? Do you think this image is real?", "example_images/rabbit_force.png"],
-        ["What is happening in this image and why is it unusual?", "example_images/ramen.png"],
-        ["What I should look most forward to when I visit this place?", "example_images/tree_fortress.jpg"],
-        ["<fake_token_around_image><image:https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/blog/stable-diffusion-xl-coreml/a_high_quality_photo_of_a_surfing_dog.7667.final_float16_original.jpg><fake_token_around_image>What do you think the dog is doing and is it unusual?", None],
-        ], 
+    examples_path = os.path.dirname(__file__)
+    gr.Examples(
+        examples=[
+            ["What are the armed baguettes guarding?", f"{examples_path}/example_images/baguettes_guarding_paris.png"],
+            ["Can you describe the image?", f"{examples_path}/example_images/bear_costume.png"],
+            [
+                "What is this object and do you think it is horrifying?",
+                f"{examples_path}/example_images/can_horror.png",
+            ],
+            [
+                "Can you tell me a very short story based on this image?",
+                f"{examples_path}/example_images/chicken_on_money.png",
+            ],
+            ["Can you describe this image in details please?", f"{examples_path}/example_images/dragons_playing.png"],
+            ["Can you tell me what is unique about this image?", f"{examples_path}/example_images/ironman_cap.png"],
+            [
+                "Can you write an advertisement for Coca-Cola based on this image?",
+                f"{examples_path}/example_images/polar_bear_coke.png",
+            ],
+            [
+                "What is the rabbit doing in this image? Do you think this image is real?",
+                f"{examples_path}/example_images/rabbit_force.png",
+            ],
+            ["What is happening in this image and why is it unusual?", f"{examples_path}/example_images/ramen.png"],
+            [
+                "What I should look most forward to when I visit this place?",
+                f"{examples_path}/example_images/tree_fortress.jpg",
+            ],
+            [
+                (
+                    "<fake_token_around_image><image:https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/blog/stable-diffusion-xl-coreml/a_high_quality_photo_of_a_surfing_dog.7667.final_float16_original.jpg><fake_token_around_image>What"
+                    " do you think the dog is doing and is it unusual?"
+                ),
+                None,
+            ],
+        ],
         inputs=[textbox, imagebox],
         outputs=[textbox, imagebox, chatbot],
         fn=process_example,
-        cache_examples=True,   
+        cache_examples=True,
         examples_per_page=5,
         label="Click on any example below to get started",
-    )    
+    )
 
 demo.queue()
 demo.launch()