Add examples

.gitignore

@@ -1,6 +1,4 @@
-.gradio
 .vscode
-output
 
 # Created by https://www.toptal.com/developers/gitignore/api/linux,macos,dotenv,python,windows,intellij,visualstudio,visualstudiocode
 # Edit at https://www.toptal.com/developers/gitignore?templates=linux,macos,dotenv,python,windows,intellij,visualstudio,visualstudiocode

app.py

@@ -3,6 +3,7 @@ import gc
 import json
 import os
 from io import BytesIO
+from pathlib import Path
 
 import gradio as gr
 import torch
@@ -17,6 +18,7 @@ from transformers import (
 
 os.environ["CUDA_VISIBLE_DEVICES"] = "0"
 
+EXAMPLES_DIR = Path(__file__).parent / "examples"
 DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
 
 model_ids = [
@@ -61,11 +63,6 @@ with gr.Blocks() as demo:
         "Compare [Qwen3-VL](https://huggingface.co/collections/Qwen/qwen3-vl), [Qwen2.5-VL](https://huggingface.co/collections/Qwen/qwen25-vl) and [Qwen2-VL](https://huggingface.co/collections/Qwen/qwen2-vl) models by [Qwen](https://huggingface.co/Qwen) for object detection."
     )
 
-    if DEVICE != "cuda":
-        gr.Markdown(
-            "👉 It's recommended to run this application on a machine with a CUDA-compatible GPU for optimal performance. You can clone this space locally or duplicate this space with a CUDA-enabled runtime."
-        )
-
     with gr.Row():
         with gr.Column():
             gr.Markdown("## Inputs")
@@ -79,22 +76,22 @@ with gr.Blocks() as demo:
 
             input_model_id = gr.Dropdown(
                 choices=model_ids,
-                label="Select Model ID",
+                label="✨ Select Model ID",
             )
             default_system_prompt = 'You are a helpful assistant to detect objects in images. When asked to detect elements based on a description, you return a valid JSON object containing bounding boxes for all elements in the form `[{"bbox_2d": [xmin, ymin, xmax, ymax], "label": "placeholder"}, ...]`. For example, a valid response could be: `[{"bbox_2d": [10, 30, 20, 60], "label": "placeholder"}, {"bbox_2d": [40, 15, 52, 27], "label": "placeholder"}]`.'
             system_prompt = gr.Textbox(
-                label="System Prompt:",
+                label="System Prompt",
                 lines=3,
                 value=default_system_prompt,
             )
             default_user_prompt = "detect object"
             user_prompt = gr.Textbox(
-                label="User Prompt:",
+                label="User Prompt",
                 lines=3,
                 value=default_user_prompt,
             )
             max_new_tokens = gr.Slider(
-                label="Max New Tokens:",
+                label="Max New Tokens",
                 minimum=32,
                 maximum=4096,
                 value=256,
@@ -102,9 +99,9 @@ with gr.Blocks() as demo:
                 interactive=True,
             )
             image_target_size = gr.Slider(
-                label="Image Target Size (longest side)",
+                label="Image Target Size",
                 minimum=256,
-                maximum=3072,
+                maximum=4096,
                 value=1024,
                 step=1,
                 interactive=True,
@@ -123,7 +120,7 @@ with gr.Blocks() as demo:
 
             output_text = gr.Textbox(
                 label="Output Text",
-                lines=3,
+                lines=10,
                 key="output_text",
             )
 
@@ -137,11 +134,11 @@ with gr.Blocks() as demo:
 
     def run(
         image,
-        image_target_size: int,
+        model_id: str,
         system_prompt: str,
         user_prompt: str,
-        model_id: str,
         max_new_tokens: int = 1024,
+        image_target_size: int | None = None,
     ):
         global current_model, current_processor, current_model_id
         scale = False if model_id.startswith("Qwen/Qwen2.5-VL") else True
@@ -182,13 +179,17 @@ with gr.Blocks() as demo:
         model = current_model
         processor = current_processor
 
+        base64_image = image_to_base64(
+            scale_image(image, image_target_size) if image_target_size else image
+        )
+
         messages = [
             {
                 "role": "user",
                 "content": [
                     {
                         "type": "image",
-                        "image": f"data:image;base64,{image_to_base64(scale_image(image, image_target_size))}",
+                        "image": f"data:image;base64,{base64_image}",
                     },
                     {"type": "text", "text": system_prompt},
                     {"type": "text", "text": user_prompt},
@@ -247,18 +248,89 @@ with gr.Blocks() as demo:
             ]
             bboxes.append((bbox, label))
 
-        return [(image, bboxes), str(output_text)]
+        return [(image, bboxes), str(json.dumps(output_json))]
+
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("## Examples")
+
+            gr.Examples(
+                fn=run,
+                cache_examples=True,
+                cache_mode="eager",
+                run_on_click=True,
+                examples=[
+                    [
+                        EXAMPLES_DIR
+                        / "niklas-ohlrogge-niamoh-de-fDYRfHoRC4k-unsplash.jpg",
+                        "Qwen/Qwen3-VL-4B-Instruct",
+                        default_system_prompt,
+                        "detect sailboat, rowboat, person",
+                        512,
+                        1920,
+                    ],
+                    [
+                        EXAMPLES_DIR / "elevate-nYgy58eb9aw-unsplash.jpg",
+                        "Qwen/Qwen3-VL-4B-Instruct",
+                        default_system_prompt,
+                        "detect shirt, jeans, jacket, skirt, sunglasses, earring, drink",
+                        1024,
+                        1920,
+                    ],
+                    [
+                        EXAMPLES_DIR / "markus-spiske-oPDQGXW7i40-unsplash.jpg",
+                        "Qwen/Qwen3-VL-4B-Instruct",
+                        default_system_prompt,
+                        "detect basketball, player with white jersey, player with black jersey",
+                        512,
+                        1920,
+                    ],
+                    [
+                        EXAMPLES_DIR / "william-hook-9e9PD9blAto-unsplash.jpg",
+                        "Qwen/Qwen3-VL-4B-Instruct",
+                        default_system_prompt,
+                        "detect app to find great places, app to take beautiful photos, app to listen music",
+                        512,
+                        1920,
+                    ],
+                    [
+                        EXAMPLES_DIR / "tasso-mitsarakis-dw7Y4W6Rhmk-unsplash.jpg",
+                        "Qwen/Qwen3-VL-4B-Instruct",
+                        default_system_prompt,
+                        "detect person, bicycle, netherlands flag",
+                        1920,
+                        1920,
+                    ],
+                ],
+                inputs=[
+                    image_input,
+                    input_model_id,
+                    system_prompt,
+                    user_prompt,
+                    max_new_tokens,
+                    image_target_size,
+                ],
+                outputs=[
+                    output_annotated_image,
+                    output_text,
+                ],
+            )
+
+            if DEVICE != "cuda":
+                gr.Markdown(
+                    "👉 It's recommended to run this application on a machine with a CUDA-compatible GPU for optimal performance. You can clone this space locally or duplicate this space with a CUDA-enabled runtime."
+                )
 
     # Connect the button to the detection function
     run_button.click(
         fn=run,
         inputs=[
             image_input,
-            image_target_size,
+            input_model_id,
             system_prompt,
             user_prompt,
-            input_model_id,
             max_new_tokens,
+            image_target_size,
         ],
         outputs=[
             output_annotated_image,

examples/elevate-nYgy58eb9aw-unsplash.link

@@ -0,0 +1 @@
+https://unsplash.com/photos/four-women-holding-drinks-while-laughing-together-during-daytime-nYgy58eb9aw

examples/markus-spiske-oPDQGXW7i40-unsplash.link

@@ -0,0 +1 @@
+https://unsplash.com/photos/group-of-people-playing-basketball-oPDQGXW7i40

examples/niklas-ohlrogge-niamoh-de-fDYRfHoRC4k-unsplash.link

@@ -0,0 +1 @@
+https://unsplash.com/photos/a-group-of-sailboats-in-a-body-of-water-with-a-city-in-the-background-fDYRfHoRC4k

examples/tasso-mitsarakis-dw7Y4W6Rhmk-unsplash.link

@@ -0,0 +1 @@
+https://unsplash.com/photos/a-group-of-sailboats-in-a-body-of-water-with-a-city-in-the-background-fDYRfHoRC4k

examples/william-hook-9e9PD9blAto-unsplash.link

@@ -0,0 +1 @@
+https://unsplash.com/photos/space-gray-iphone-x-9e9PD9blAto