Add box-prompt examples and editable prompts

README.md

@@ -15,9 +15,9 @@ short_description: A Space to try the new Qwen 3.8 Max for free
 
 Try Qwen 3.8 Max with text and image inputs. Thinking mode is enabled by default; its reasoning summary appears in a collapsible panel while the final answer streams token by token.
 
-The Space also includes a box-prompting playground inspired by [Roboflow's Qwen 3.8 Max evaluation](https://blog.roboflow.com/qwen3-8-max/): mark positive and optional negative examples directly on an image, then ask Qwen to find similar objects. Detection results are parsed from normalized XYXY coordinates and rendered back onto the original image.
+The Space also includes a box-prompting playground inspired by [Roboflow's Qwen 3.8 Max evaluation](https://blog.roboflow.com/qwen3-8-max/): mark positive and optional negative examples directly on an image, then ask Qwen to find similar objects. Three ready-made presets demonstrate shape, color, and size matching; each loads an editable instruction and example boxes. Detection results are parsed from normalized XYXY coordinates and rendered back onto the original image.
 
-This is an unofficial community demo, generously backed by a limited pool of promotional Qwen API tokens. Availability is best-effort and the demo may be paused when the pool is exhausted.
+This is an unofficial community demo, generously backed by a limited pool of Qwen API tokens. Availability is best-effort and the demo may be paused when the pool is exhausted.
 
 ## Configuration
 

app.py

@@ -44,6 +44,35 @@ VISUAL_EXAMPLES = [
         "prompt": "Solve the visual logic puzzle. State the rule you infer and identify the missing tile.",
     },
 ]
+BOX_EXAMPLES = [
+    {
+        "title": "Blue circles, not squares",
+        "image": str(EXAMPLES_DIR / "crowded_shapes.png"),
+        "prompt": "Find every other blue circle. Ignore blue squares and shapes of other colors.",
+        "boxes": [
+            {"box": [761, 81, 849, 169], "kind": "positive"},
+            {"box": [205, 96, 281, 172], "kind": "negative"},
+        ],
+    },
+    {
+        "title": "Matching mint bottles",
+        "image": str(EXAMPLES_DIR / "box_product_shelf.png"),
+        "prompt": "Find every other teal MINT bottle. Ignore the purple MINT bottles and all cans.",
+        "boxes": [
+            {"box": [80, 118, 142, 292], "kind": "positive"},
+            {"box": [780, 118, 842, 292], "kind": "negative"},
+        ],
+    },
+    {
+        "title": "Standard green cars",
+        "image": str(EXAMPLES_DIR / "box_parking_lot.png"),
+        "prompt": "Find the other standard-size green cars. Do not include the oversized green vehicle.",
+        "boxes": [
+            {"box": [88, 112, 172, 262], "kind": "positive"},
+            {"box": [793, 340, 905, 518], "kind": "negative"},
+        ],
+    },
+]
 
 _requests_by_session: dict[str, deque[float]] = defaultdict(deque)
 _rate_limit_lock = Lock()
@@ -304,15 +333,43 @@ def _draw_prompt_boxes(
 
 def load_box_image(
     image_path: str | None,
-) -> tuple[str | None, list[Any], None, str | None, str]:
+) -> tuple[str | None, list[Any], None, str | None, str, str]:
     if not image_path:
-        return None, [], None, None, "Upload an image to begin."
+        return None, [], None, None, "Upload an image to begin.", ""
     return (
         image_path,
         [],
         None,
         image_path,
         "Choose Positive or Negative, then click two opposite corners of an object.",
+        "",
+    )
+
+
+def load_box_example(
+    event: gr.SelectData,
+) -> tuple[str, list[dict[str, Any]], None, Image.Image, str, str, None, str]:
+    example = BOX_EXAMPLES[int(event.index)]
+    original_path = example["image"]
+    annotations = [
+        {"box": list(annotation["box"]), "kind": annotation["kind"]}
+        for annotation in example["boxes"]
+    ]
+    positive_count = sum(box["kind"] == "positive" for box in annotations)
+    negative_count = len(annotations) - positive_count
+    status = (
+        f"Loaded **{example['title']}** with {positive_count} positive and "
+        f"{negative_count} negative example box(es). Edit the prompt or run it as-is."
+    )
+    return (
+        original_path,
+        annotations,
+        None,
+        _draw_prompt_boxes(original_path, annotations),
+        status,
+        example["prompt"],
+        None,
+        "",
     )
 
 
@@ -414,6 +471,7 @@ def _parse_detection_boxes(answer: str, width: int, height: int) -> list[tuple[t
 def detect_similar(
     original_path: str | None,
     boxes: list[dict[str, Any]] | None,
+    target_prompt: str,
     enable_thinking: bool,
     max_output_tokens: int,
     request: gr.Request,
@@ -426,9 +484,14 @@ def detect_similar(
     _check_rate_limit(getattr(request, "session_hash", None))
 
     annotated_image = _draw_prompt_boxes(original_path, annotations)
+    requested_target = target_prompt.strip() or (
+        "Find every other unboxed object that visually matches the positive examples."
+    )
     prompt = f"""
 The image contains visual box prompts drawn by the user. Green boxes marked with + are positive examples of the object to find. Red boxes marked with − are negative examples that must be ignored.
 
+The user's instruction is: {requested_target}
+
 Find every other unboxed object in this same image that matches the positive examples while respecting the negative examples. Return only valid JSON in this exact shape:
 {{"objects": [{{"label": "match", "box_2d": [x_min, y_min, x_max, y_max]}}]}}
 
@@ -508,6 +571,7 @@ body > gradio-app, gradio-app {
 #chat-shell { max-width: 840px; margin: 0 auto; width: 100%; }
 #box-shell { max-width: 960px; margin: 0 auto; width: 100%; }
 #examples-gallery { margin-top: 0.35rem; }
+#box-examples-gallery { margin: 0.35rem 0 1rem; }
 #example-prompts { color: var(--body-text-color-subdued); font-size: 0.92rem; }
 @media (max-width: 560px) {
   .gradio-container { width: calc(100% - 16px) !important; }
@@ -529,7 +593,7 @@ with gr.Blocks(title="Free Qwen 3.8 Max") as demo:
           <img src="{QWEN_LOGO_DATA_URL}" alt="Qwen logo">
           <h1>Free Qwen 3.8 Max</h1>
         </div>
-        <p><strong>100 million promotional tokens, shared with the community.</strong> Ask anything or attach up to three images to test Qwen's visual understanding.</p>
+        <p><strong>100 million tokens, shared with the community.</strong> Ask anything or attach up to three images to test Qwen's visual understanding.</p>
         """,
         elem_id="hero",
     )
@@ -611,6 +675,20 @@ with gr.Blocks(title="Free Qwen 3.8 Max") as demo:
                     Upload an image, choose **Positive** or **Negative**, and click two opposite corners to mark each example. Qwen will find other objects that look like the positive examples while avoiding the negatives.
                     """
                 )
+                box_examples_gallery = gr.Gallery(
+                    value=[
+                        (example["image"], example["title"])
+                        for example in BOX_EXAMPLES
+                    ],
+                    label="Box-prompt examples — click one to load its image, boxes, and prompt",
+                    columns=3,
+                    rows=1,
+                    height=245,
+                    object_fit="contain",
+                    allow_preview=False,
+                    buttons=[],
+                    elem_id="box-examples-gallery",
+                )
                 with gr.Row():
                     with gr.Column(scale=3):
                         box_image = gr.Image(
@@ -622,6 +700,11 @@ with gr.Blocks(title="Free Qwen 3.8 Max") as demo:
                         )
                         box_status = gr.Markdown("Upload an image to begin.")
                     with gr.Column(scale=1, min_width=220):
+                        box_target_prompt = gr.Textbox(
+                            label="What should Qwen find?",
+                            placeholder="For example: Find the other blue circles, but ignore blue squares.",
+                            lines=4,
+                        )
                         box_kind = gr.Radio(
                             ["Positive", "Negative"],
                             value="Positive",
@@ -666,7 +749,29 @@ with gr.Blocks(title="Free Qwen 3.8 Max") as demo:
     box_image.upload(
         load_box_image,
         inputs=box_image,
-        outputs=[box_original, box_annotations, pending_corner, box_image, box_status],
+        outputs=[
+            box_original,
+            box_annotations,
+            pending_corner,
+            box_image,
+            box_status,
+            box_target_prompt,
+        ],
+        queue=False,
+        api_name=False,
+    )
+    box_examples_gallery.select(
+        load_box_example,
+        outputs=[
+            box_original,
+            box_annotations,
+            pending_corner,
+            box_image,
+            box_status,
+            box_target_prompt,
+            box_result,
+            box_details,
+        ],
         queue=False,
         api_name=False,
     )
@@ -693,7 +798,7 @@ with gr.Blocks(title="Free Qwen 3.8 Max") as demo:
     )
     run_box_prompt.click(
         detect_similar,
-        inputs=[box_original, box_annotations, thinking, max_tokens],
+        inputs=[box_original, box_annotations, box_target_prompt, thinking, max_tokens],
         outputs=[box_result, box_details],
         concurrency_limit=1,
         concurrency_id="qwen-api",

scripts/generate_examples.py

@@ -82,7 +82,62 @@ def logic_grid() -> None:
     image.save(OUTPUT / "logic_grid.png")
 
 
+def product_shelf() -> None:
+    image = Image.new("RGB", (960, 600), "#f4efe6")
+    draw = ImageDraw.Draw(image)
+    draw.text((34, 24), "Pantry shelf", font=FONT, fill="#1f2937")
+    draw.rectangle((28, 92, 932, 535), fill="#e7dfd2", outline="#c2b6a3", width=3)
+    for y in (300, 520):
+        draw.rectangle((42, y, 918, y + 15), fill="#8b6f47")
+
+    def bottle(x: int, y: int, color: str = "#0f9f8f") -> None:
+        draw.rounded_rectangle((x + 16, y, x + 46, y + 34), radius=5, fill="#d8f3ef")
+        draw.rounded_rectangle((x, y + 26, x + 62, y + 174), radius=18, fill=color)
+        draw.rounded_rectangle((x + 8, y + 82, x + 54, y + 126), radius=6, fill="#fffaf0")
+        draw.text((x + 17, y + 91), "MINT", font=ImageFont.load_default(size=12), fill="#0f766e")
+
+    def can(x: int, y: int, color: str) -> None:
+        draw.rounded_rectangle((x, y, x + 76, y + 142), radius=12, fill=color, outline="#6b7280", width=2)
+        draw.rectangle((x + 8, y + 48, x + 68, y + 92), fill="#fff7ed")
+
+    bottle(80, 118)
+    can(205, 148, "#ef4444")
+    bottle(340, 118)
+    can(474, 148, "#38bdf8")
+    bottle(620, 118)
+    bottle(780, 118, "#7c3aed")
+    can(110, 365, "#f59e0b")
+    bottle(275, 338)
+    can(430, 365, "#ef4444")
+    bottle(590, 338, "#7c3aed")
+    bottle(765, 338)
+    image.save(OUTPUT / "box_product_shelf.png")
+
+
+def parking_lot() -> None:
+    image = Image.new("RGB", (960, 600), "#374151")
+    draw = ImageDraw.Draw(image)
+    draw.text((34, 22), "Parking lot", font=FONT, fill="white")
+    for x in range(65, 930, 145):
+        draw.line((x, 90, x, 550), fill="#d1d5db", width=4)
+
+    def car(x: int, y: int, color: str, width: int = 84, height: int = 150) -> None:
+        draw.rounded_rectangle((x, y, x + width, y + height), radius=20, fill=color, outline="#111827", width=3)
+        draw.rounded_rectangle((x + 12, y + 32, x + width - 12, y + 82), radius=10, fill="#bfdbfe")
+        draw.rectangle((x + 10, y + 112, x + width - 10, y + 126), fill="#e5e7eb")
+
+    car(88, 112, "#22c55e")
+    car(238, 345, "#ef4444")
+    car(382, 125, "#22c55e")
+    car(522, 330, "#3b82f6")
+    car(674, 118, "#22c55e")
+    car(793, 340, "#22c55e", width=112, height=178)
+    image.save(OUTPUT / "box_parking_lot.png")
+
+
 if __name__ == "__main__":
     crowded_shapes()
     mini_receipt()
     logic_grid()
+    product_shelf()
+    parking_lot()

tests/test_app.py

@@ -99,3 +99,25 @@ def test_two_clicks_create_positive_box(tmp_path) -> None:
 
     assert boxes == [{"box": [20, 15, 120, 80], "kind": "positive"}]
     assert pending is None
+
+
+def test_box_example_loads_image_boxes_and_prompt() -> None:
+    (
+        original_path,
+        boxes,
+        pending,
+        annotated_image,
+        status,
+        prompt,
+        result,
+        details,
+    ) = app.load_box_example(SimpleNamespace(index=1))
+
+    assert original_path.endswith("box_product_shelf.png")
+    assert [box["kind"] for box in boxes] == ["positive", "negative"]
+    assert pending is None
+    assert annotated_image.size == (960, 600)
+    assert "Matching mint bottles" in status
+    assert "teal MINT bottle" in prompt
+    assert result is None
+    assert details == ""