Center app and add Qwen-branded visual examples

README.md

@@ -38,5 +38,6 @@ The app limits request concurrency, image size, queue depth, and per-session req
 
 - [Qwen 3.8 announcement](https://qwen.ai/blog?id=qwen3.8)
 - [OpenAI-compatible vision input format](https://developers.openai.com/api/docs/guides/images-vision#analyze-images)
+- [Qwen logo asset](https://logos-download.com/brands/qwen)
 
 Qwen and DashScope are trademarks or services of their respective owners. This Space is not an official Qwen or Alibaba product.

app.py

@@ -22,6 +22,27 @@ MAX_IMAGES = 3
 MAX_IMAGE_BYTES = 15 * 1024 * 1024
 RATE_LIMIT_REQUESTS = 5
 RATE_LIMIT_WINDOW_SECONDS = 5 * 60
+QWEN_LOGO_DATA_URL = "data:image/svg+xml;base64," + base64.b64encode(
+    (Path(__file__).parent / "assets" / "qwen-logo.svg").read_bytes()
+).decode("ascii")
+EXAMPLES_DIR = Path(__file__).parent / "examples"
+VISUAL_EXAMPLES = [
+    {
+        "title": "Count crowded objects",
+        "image": str(EXAMPLES_DIR / "crowded_shapes.png"),
+        "prompt": "Count each kind of shape. Explain how you avoided double-counting, then return a compact JSON summary.",
+    },
+    {
+        "title": "Audit a receipt",
+        "image": str(EXAMPLES_DIR / "mini_receipt.png"),
+        "prompt": "Read this receipt, independently recompute the subtotal and total, and flag any inconsistency.",
+    },
+    {
+        "title": "Solve a visual pattern",
+        "image": str(EXAMPLES_DIR / "logic_grid.png"),
+        "prompt": "Solve the visual logic puzzle. State the rule you infer and identify the missing tile.",
+    },
+]
 
 _requests_by_session: dict[str, deque[float]] = defaultdict(deque)
 _rate_limit_lock = Lock()
@@ -202,6 +223,11 @@ def clear_chat() -> tuple[list[Any], list[Any], dict[str, Any]]:
     return [], [], {"text": "", "files": []}
 
 
+def load_visual_example(event: gr.SelectData) -> dict[str, Any]:
+    example = VISUAL_EXAMPLES[int(event.index)]
+    return {"text": example["prompt"], "files": [example["image"]]}
+
+
 def _draw_prompt_boxes(
     original_path: str,
     boxes: list[dict[str, Any]] | None,
@@ -408,13 +434,27 @@ For reference, the prompt boxes in normalized XYXY coordinates are: {_normalized
 
 
 CSS = """
-.gradio-container { max-width: 1080px !important; }
+.gradio-container {
+  width: min(1080px, calc(100% - 32px)) !important;
+  max-width: 1080px !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
 #hero { text-align: center; margin: 0 auto 0.75rem; }
-#hero h1 { font-size: clamp(2rem, 5vw, 3.8rem); margin-bottom: 0.25rem; }
+#hero .hero-lockup { display: flex; align-items: center; justify-content: center; gap: 0.85rem; }
+#hero img { width: clamp(54px, 8vw, 78px); height: auto; flex: 0 0 auto; }
+#hero h1 { font-size: clamp(2rem, 5vw, 3.8rem); margin: 0; line-height: 1.05; }
 #hero p { color: var(--body-text-color-subdued); font-size: 1.05rem; }
 #notice { border-left: 4px solid var(--color-accent); padding-left: 1rem; }
 #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; }
+#example-prompts { color: var(--body-text-color-subdued); font-size: 0.92rem; }
+@media (max-width: 560px) {
+  .gradio-container { width: calc(100% - 16px) !important; }
+  #hero .hero-lockup { gap: 0.4rem; }
+  #hero img { width: 48px; }
+}
 """
 
 
@@ -424,11 +464,13 @@ with gr.Blocks(title="Free Qwen 3.8 Max") as demo:
     box_annotations = gr.State([])
     pending_corner = gr.State(None)
 
-    gr.Markdown(
-        """
-        # Free Qwen 3.8 Max 👀
-
-        **100 million promotional tokens, shared with the community.** Ask anything or attach up to three images to test Qwen's visual understanding.
+    gr.HTML(
+        f"""
+        <div class="hero-lockup">
+          <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>
         """,
         elem_id="hero",
     )
@@ -458,15 +500,22 @@ with gr.Blocks(title="Free Qwen 3.8 Max") as demo:
                     max_plain_text_length=8_000,
                 )
 
-                gr.Examples(
-                    examples=[
-                        [{"text": "Count each kind of shape. Explain how you avoided double-counting, then return a compact JSON summary.", "files": ["examples/crowded_shapes.png"]}],
-                        [{"text": "Read this receipt, independently recompute the subtotal and total, and flag any inconsistency.", "files": ["examples/mini_receipt.png"]}],
-                        [{"text": "Solve the visual logic puzzle. State the rule you infer and identify the missing tile.", "files": ["examples/logic_grid.png"]}],
-                    ],
-                    inputs=message,
-                    label="Try a visual challenge",
-                    example_labels=["Count crowded objects", "Audit a receipt", "Solve a visual pattern"],
+                example_gallery = gr.Gallery(
+                    value=[(example["image"], example["title"]) for example in VISUAL_EXAMPLES],
+                    label="Try a visual challenge — click a sample to load it",
+                    columns=3,
+                    rows=1,
+                    height=255,
+                    object_fit="contain",
+                    allow_preview=False,
+                    buttons=[],
+                    elem_id="examples-gallery",
+                )
+                gr.Markdown(
+                    """
+                    **Sample prompts:** Count every shape without double-counting · Recompute the receipt total and flag errors · Infer the visual rule and solve the missing tile
+                    """,
+                    elem_id="example-prompts",
                 )
 
                 with gr.Accordion("Generation settings", open=False):
@@ -547,6 +596,12 @@ with gr.Blocks(title="Free Qwen 3.8 Max") as demo:
         queue=False,
         api_name=False,
     )
+    example_gallery.select(
+        load_visual_example,
+        outputs=message,
+        queue=False,
+        api_name=False,
+    )
     box_image.upload(
         load_box_image,
         inputs=box_image,