Fix responsive layout, request status lifecycle and prediction inspection

app.py

@@ -4,6 +4,7 @@ import base64
 import html
 import json
 import os
+from uuid import uuid4
 from io import BytesIO
 
 import gradio as gr
@@ -259,7 +260,11 @@ def run_inference_stream(path, query_text, route):
 
 
 def run_console(path, query_text, route):
+    # Identifies this request even when a proxy coalesces busy + final SSE events.
+    run_id = uuid4().hex
     for state in run_inference_stream(path, query_text, route):
+        state = list(state)
+        state[5] = state[5].replace("data-phase=", f"data-run-id='{run_id}' data-phase=", 1)
         yield (*state, state[-1])
 
 
@@ -275,6 +280,7 @@ def service_status():
 
 CSS = (ROOT / "assets" / "paper.css").read_text(encoding="utf-8")
 CSS += "\n" + (ROOT / "assets" / "original.css").read_text(encoding="utf-8")
+CSS += "\n" + (ROOT / "assets" / "studio.css").read_text(encoding="utf-8")
 CSS = CSS.replace(
     "__MANROPE_DATA__",
     base64.b64encode((ROOT / "assets" / "Manrope-variable.ttf").read_bytes()).decode(),
@@ -282,7 +288,7 @@ CSS = CSS.replace(
 # Gradio 5 scopes css= rules inside .contain, including media-query selectors.
 # Host sizing must live in head; workbench styling remains scoped.
 HOST_HEAD = """<style id="grounding-host-layout">
-gradio-app:has(#console) .gradio-container { width:100%!important; max-width:1800px!important; min-width:0!important; box-sizing:border-box; overflow:clip!important; padding:24px 32px 32px!important; margin:0 auto!important; }
+gradio-app:has(#console) .gradio-container { width:100%!important; max-width:1440px!important; min-width:0!important; box-sizing:border-box; overflow:clip!important; padding:24px 32px 32px!important; margin:0 auto!important; }
 gradio-app:has(#console) .gradio-container>main { width:100%!important; max-width:none!important; min-width:0!important; padding:0!important; }
 gradio-app:has(#console) .gradio-container .contain { max-width:none!important; }
 gradio-app:has(#console) footer:not(.studio-footer) { display:none!important; }
@@ -357,10 +363,10 @@ with gr.Blocks(
                             + html.escape(os.getenv("GROUNDING_MAX_TOKENS", "1024"))
                             + "</b><small>Read-only runtime configuration. Only the current image and task prompt enter inference.</small></div>"
                         )
+                run_btn = gr.Button(RUN_LABEL, variant="primary", elem_id="run-button")
                 with gr.Column(elem_id="service-panel"):
                     health = gr.HTML("<div class='api-status'>Checking inference service…</div>")
                     health_btn = gr.Button("Refresh connection", size="sm", elem_id="health-button")
-                run_btn = gr.Button(RUN_LABEL, variant="primary", elem_id="run-button")
             with gr.Column(scale=7, min_width=400, elem_id="visual-stage"):
                 task_help = gr.HTML(task_help_html(first_route), elem_id="task-guide")
                 with gr.Row(elem_id="stage-toolbar"):
@@ -374,6 +380,7 @@ with gr.Blocks(
                         height=400,
                         elem_id="stage-image",
                         show_download_button=False,
+                        show_share_button=False,
                         show_fullscreen_button=False,
                     )
                     gr.HTML(
@@ -406,6 +413,8 @@ with gr.Blocks(
                     )
                     gr.HTML("<p class='query-hint'>Enter to run · Shift + Enter for a new line</p>")
                     mobile_run = gr.Button(RUN_LABEL, variant="primary", elem_id="mobile-run-button")
+                with gr.Column(elem_id="targets-panel"):
+                    targets = gr.HTML(targets_html([]), elem_id="targets-content")
         with gr.Row(elem_id="review-row", equal_height=True):
             with gr.Column(scale=4, min_width=320, elem_id="sandbox-panel"):
                 gr.HTML(
@@ -432,22 +441,20 @@ with gr.Blocks(
                         metrics = gr.HTML(metrics_html(ROUTE_META[first_route][0]))
                     with gr.Column(scale=6, min_width=240, elem_id="sidebar"):
                         gr.HTML(
-                            "<div class='inspector-heading'><h2>Visual Evidence</h2><span class='live-mark'>Select a category to inspect individual instances.</span></div>"
+                            "<div class='inspector-heading'><h2>Target Detail</h2><span class='live-mark'>Select a category below the canvas to magnify its original pixels.</span></div>"
                         )
-                        with gr.Column(elem_id="targets-panel"):
-                            targets = gr.HTML(targets_html([]), elem_id="targets-content")
                         gr.HTML(
                             "<div class='evidence-detail' hidden><div class='detail-heading'><span>Detail View</span><small>Original pixels · magnified</small></div><div class='detail-image'></div><div class='detail-coordinates'></div></div>",
                             elem_id="detail-panel",
                         )
-    with gr.Accordion("Prompt Console", open=True, elem_id="prompt-console"):
+    with gr.Accordion("Prompt Console", open=False, elem_id="prompt-console"):
         prompt = gr.Textbox(
             value=first_case["prompt"], label="COMPILED PROMPT", lines=3, interactive=False
         )
         gr.HTML(
             "<div class='console-note'>Transparent inputs: only this image and compiled prompt are sent to the model. No annotations, training answers, or expected counts are included.</div>"
         )
-    with gr.Accordion("Structured Output", open=True, elem_id="output-console"):
+    with gr.Accordion("Structured Output", open=False, elem_id="output-console"):
         normalized = gr.Code(
             value="[]", language="json", label="PARSED COORDINATES · 0–999", interactive=False
         )

assets/console.js

@@ -6,6 +6,7 @@
   const listen = (el, event, fn) => el.addEventListener(event, fn, { signal: abort.signal });
   let observer, resize, frame, interval, selected, targetRoot, image, lastSrc, lastDraw;
   let waiting = false, waitStart = 0, ready = false, watchdog, instanceIndex = 0;
+  let clientPending = false, previousRunId = '', clientNotice;
   let zoom = 1, panX = 0, panY = 0, drag, moved = false;
   const $ = s => document.querySelector(s);
   const svg = (tag, attrs = {}) => {
@@ -94,7 +95,9 @@
         : { cx: p[0] / 999 * w, cy: p[1] / 999 * h, r: 13 };
       const tag = p.length === 4 ? 'rect' : 'circle';
       mask.append(svg(tag, { ...attr, fill: 'black' }));
-      marks.push(svg(tag, { ...attr, class: 'focus-outline', pathLength: 1 }));
+      const outline = svg(tag, { ...attr, class: 'focus-outline', pathLength: 1 });
+      outline.style.stroke = getComputedStyle(selected.querySelector('i')).backgroundColor;
+      marks.push(svg(tag, { ...attr, class: 'focus-halo' }), outline);
     }
     defs.append(mask); layer.append(defs);
     layer.append(svg('rect', { width: w, height: h, mask: 'url(#grounding-focus-mask)', class: 'focus-dimmer' }), ...marks);
@@ -153,12 +156,19 @@
       const clock = document.createElement('time'); clock.className = 'wait-clock';
       clock.setAttribute('aria-hidden', 'true'); clock.textContent = '0.0 s'; node.append(clock);
     }
-    $('#stage-status .stage-status')?.replaceWith(node);
+    // This node belongs to us, outside Gradio's HTML component. Never replace
+    // Svelte-owned children: doing so can leave an orphan busy status forever.
+    clientNotice?.remove(); clientNotice = node;
+    node.classList.add('client-notice');
+    $('#stage-toolbar').append(node);
+    $('#stage-toolbar').classList.add('client-pending');
   }
   // A reverse proxy can buffer the first SSE event. Acknowledge the actual click
   // immediately; backend events still own final results and measured latency.
   window.groundingConsoleBegin = () => {
     if (!ready || waiting) return;
+    previousRunId = $('#stage-status .stage-status')?.dataset.runId || '';
+    clientPending = true;
     clientStatus('Request submitted · Awaiting inference', 'busy'); setWaiting(true);
     watchdog = setTimeout(() => {
       if (!waiting) return;
@@ -173,7 +183,13 @@
   function reconcile() {
     const stage = $('#stage-image'), targets = $('#targets-content');
     if (!stage || !targets) return;
-    setWaiting($('.stage-status')?.dataset.phase === 'busy');
+    const server = $('#stage-status .stage-status');
+    if (clientPending && (server?.dataset.runId || '') !== previousRunId) {
+      clientPending = false;
+      clientNotice?.remove(); clientNotice = null;
+      $('#stage-toolbar').classList.remove('client-pending');
+    }
+    if (!clientPending) setWaiting(server?.dataset.phase === 'busy');
     const chips = targets.querySelector('.target-chips');
     if (targetRoot !== chips) { targetRoot = chips; clearSelection(); }
     const nextImage = stage.querySelector('img');
@@ -269,6 +285,7 @@
   window.groundingConsoleCleanup = () => {
     abort.abort(); observer?.disconnect(); resize?.disconnect(); cancelAnimationFrame(frame); clearInterval(interval); clearTimeout(watchdog);
     if (ready) setWaiting(false); removeLayer();
+    clientNotice?.remove(); $('#stage-toolbar')?.classList.remove('client-pending');
     delete window.groundingConsoleBegin;
   };
 }

assets/studio.css

@@ -0,0 +1,98 @@
+/* GroundingPI studio r8. Shared by the standalone demo and private HF Space. */
+#workspace-top {min-height:0;box-shadow:0 12px 36px #30204408;background:#fff}
+#controls {flex:0 0 286px!important;min-width:0!important;width:286px;padding:24px!important;gap:20px!important;background:#fcfbfe}
+.control-brand {container-type:inline-size;gap:12px}
+.control-brand h2 {font-size:clamp(26px,14cqw,38px);white-space:nowrap;line-height:1.15;letter-spacing:-.045em}
+.control-brand .xpeng-logo {width:176px;max-width:80%;height:auto}
+.control-brand p {font-size:12px;line-height:1.65}
+#control-settings {padding:12px!important;gap:12px!important}
+#control-fields {flex-direction:column!important;gap:10px!important}
+#control-fields>.form {width:100%!important;flex:0 0 auto!important}
+#media-type {flex:0 0 auto!important}
+.media-field {display:flex;align-items:center;justify-content:space-between;gap:12px}
+.media-field>span {margin:0!important}.media-field>div {height:28px;background:none;border:0;padding:0}
+.media-field>div>span {min-width:0;background:#edf3e2;color:#4c681c;box-shadow:none;font-size:11px;padding:0 10px}
+#run-button {margin-top:0!important;min-height:48px!important;border-radius:8px!important;box-shadow:none!important;font-size:14px!important}
+#service-panel {gap:2px!important;margin-top:0!important}
+.api-status small {font-size:11px}
+#service-panel #health-button {min-height:32px!important;justify-content:flex-start;padding-left:0!important}
+#controls[inert] {opacity:1}
+#visual-stage {--stage-gutter:24px;background:#fff}
+#task-guide {padding:22px var(--stage-gutter) 0!important}
+.task-guide strong {font-size:18px}.task-guide p {font-size:12px}
+.task-guide small {font-size:11px}
+#stage-toolbar {min-height:40px;padding:10px var(--stage-gutter)!important;gap:0!important}
+.stage-status {padding:0;border:0;background:transparent;font-size:11px;min-height:20px;align-items:center;flex-wrap:nowrap}
+.stage-status i {margin-top:0!important}.stage-status.busy i {margin-top:0!important}
+.stage-status .wait-clock {white-space:nowrap;margin-left:8px}
+#stage-toolbar.client-pending #stage-status {display:none!important}
+.client-notice {max-width:100%;flex:1}
+#canvas-viewport,#canvas-viewport:has(.focus-caption) {padding:0 var(--stage-gutter)!important;overflow:hidden!important}
+#stage-image {height:clamp(300px,48vh,520px)!important;overflow:visible!important;transition:transform 180ms ease}
+#stage-image .image-container {background:#f6f5f8!important;border-radius:6px;overflow:hidden}
+#stage-image img {box-shadow:none;border-radius:0}
+#stage-image .icon-button-wrapper {display:none!important}
+#canvas-chrome {position:relative!important;inset:auto!important;flex:0 0 auto!important;background:#fff}
+.canvas-tools {padding:8px 0;min-height:48px;gap:8px}
+.image-dimensions {border:0;background:transparent;padding:0;color:var(--muted)}
+.zoom-tools {border-color:#e8e4ec;border-radius:6px;box-shadow:none}
+.zoom-tools button,.canvas-download {width:32px;height:32px}
+.zoom-value {min-width:42px}
+.focus-halo {fill:none;stroke:#fff;stroke-width:5;vector-effect:non-scaling-stroke;opacity:.95}
+.focus-outline {fill:none;stroke-width:2.5;vector-effect:non-scaling-stroke;animation:none}
+.focus-dimmer {opacity:.16;animation:none}
+.focus-caption {width:100%!important;max-width:100%;box-sizing:border-box;margin:0 0 10px;padding:6px 8px 6px 12px;box-shadow:none;background:#f8f6fb;gap:6px}
+.focus-caption span {max-height:none;font-size:12px;flex:1}
+.focus-caption button {width:32px;height:32px;flex-shrink:0}
+#query-row {padding:6px var(--stage-gutter) 14px!important}
+#query-dock {max-width:none;width:100%;padding:10px 12px!important;box-shadow:none!important;border-color:#ddd6e6!important}
+#query-dock textarea {font-size:12px!important;line-height:1.7!important}
+.query-hint {text-align:left;margin:7px 0 0;font-size:10px}
+#targets-panel {padding:0 var(--stage-gutter) 20px!important;gap:0!important;border:0!important;min-width:0!important}
+.targets-summary {border-top:1px solid var(--line);padding-top:14px;font-size:12px}
+.targets-summary b {font-size:16px}.targets-summary>span {font-size:11px}
+.target-chips {display:flex!important;flex-direction:row;flex-wrap:wrap;max-height:140px!important;gap:6px;margin:10px 0 0;padding:2px}
+.target-chip {width:auto!important;flex:0 1 auto;min-width:0;min-height:34px!important;padding:7px 10px!important;gap:7px!important;background:#fff!important;border-radius:6px!important;font-size:11px!important}
+.target-chip>span {overflow-wrap:anywhere}.target-chip b {margin-left:3px}
+.target-chip[aria-pressed=true] {border-color:var(--purple)!important;background:#f0eaf7!important}
+.target-chip:focus-visible {outline:2px solid var(--purple);outline-offset:2px}
+.focus-help {margin-top:10px;gap:12px}.targets-caption {display:none}
+.empty-targets {min-height:0;padding:12px 0;border-top:1px solid var(--line);text-align:left;align-items:flex-start}
+.empty-targets strong {font-size:12px}.empty-targets span {font-size:11px}.empty-targets svg {display:none}
+#review-row {gap:16px!important}
+#sandbox-panel {flex-basis:40%!important;box-shadow:none;padding:18px!important}
+#review-summary {min-width:0!important;box-shadow:none}
+#result-columns {gap:16px!important}
+#metrics-panel {min-width:0!important;flex:1 1 45%!important}
+#sidebar {min-width:0!important;flex:1 1 55%!important}
+#sidebar:not(:has(.evidence-detail:not([hidden]))) {display:none!important}
+#result-columns:not(:has(.evidence-detail:not([hidden]))) .metrics-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px}
+.detail-image {height:170px}.evidence-detail {max-width:none}
+#prompt-console,#output-console {box-shadow:none!important;padding:12px 18px!important}
+.studio-header {padding-bottom:18px}.studio-header h1 {font-size:30px}
+@media(min-width:1500px){#controls {flex-basis:310px!important;width:310px;padding:28px!important}.control-brand .xpeng-logo {width:190px}#visual-stage {--stage-gutter:32px}#stage-image {height:clamp(420px,50vh,580px)!important}}
+@media(max-width:1100px){#controls {flex-basis:246px!important;width:246px;padding:18px!important}.control-brand h2 {font-size:14cqw}#visual-stage {--stage-gutter:18px}#stage-image {height:clamp(300px,40vw,440px)!important}.header-scope {display:none}#review-row {flex-wrap:wrap!important}#sandbox-panel {flex:1 1 34%!important}#review-summary {flex:1 1 58%!important}}
+@media(max-width:760px){
+  .studio-header h1 {font-size:25px}.header-description {font-size:12px}
+  #controls {width:100%;flex:0 0 auto!important;padding:16px!important;gap:12px!important}
+  .control-brand {container-type:normal;gap:10px;flex-wrap:nowrap}
+  .control-brand h2 {font-size:clamp(22px,6vw,30px);white-space:nowrap}
+  .control-brand .xpeng-logo {width:96px;max-width:30%}
+  #control-settings {padding:0!important;border:0!important;gap:10px!important}
+  #control-fields {flex-direction:row!important;align-items:center;gap:16px!important}
+  #control-fields>.form {width:0!important;flex:1 1 0!important}
+  #media-type {flex:0 0 30%!important}.media-field {display:block}.media-field>span {margin-bottom:7px!important}
+  .media-field>div {height:39px}.media-field>div>span {min-width:60px}
+  #service-panel {padding-top:6px!important}.api-status small,.connection-detail {display:none}
+  #service-panel #health-button {min-height:28px!important;font-size:11px!important}
+  #visual-stage {--stage-gutter:14px}
+  #task-guide {padding-top:16px!important}.task-guide strong {font-size:16px}
+  #stage-image {height:clamp(230px,68vw,440px)!important}
+  #stage-toolbar {padding-top:10px!important;padding-bottom:10px!important}
+  .canvas-tools {flex-wrap:wrap}.zoom-tools button,.canvas-download {width:38px;height:38px}
+  #query-row {padding-top:4px!important}#mobile-run-button {border-radius:8px!important;font-size:14px!important;margin-top:10px}
+  #targets-panel {padding-bottom:16px!important}.target-chip {min-height:40px!important}.target-chips {max-height:none!important}
+  .focus-caption button {width:38px;height:38px}.focus-caption span {font-size:11px}
+  #review-row {flex-direction:column!important}#sandbox-panel,#review-summary {flex:0 0 auto!important}
+  #metrics-panel,#sidebar {flex:0 0 auto!important}
+}

docs/UI_STUDIO_R8.md

@@ -0,0 +1,36 @@
+# GroundingPI Studio r8
+
+User-requested layout and visualization revision, 2026-09-16. The same UI files
+serve the standalone demo and the private Hugging Face Space.
+
+## Changes
+
+- Container-relative brand sizing prevents the GroundingPI title from clipping.
+- Bounded sidebar, consistent canvas/query gutters, visible desktop action, and
+  stacked mobile controls. Native image sharing is explicitly disabled.
+- Request identifiers let the browser distinguish consecutive identical outputs.
+  The immediate client acknowledgement owns a separate node; it never replaces
+  Gradio/Svelte-managed status DOM. Completion/error clears the timer and inert state.
+- Category chips sit next to the canvas workflow. Selection shows original pixels,
+  exact returned geometry, category-colored focus with a contrast halo, instance
+  navigation and a magnified crop. Closing focus restores every prediction.
+- Dense boxes use fine edges and short corner marks, with no filled interiors.
+  No prediction is suppressed, merged, moved, deduplicated or replaced.
+- Empty detail panels stay hidden; raw prompt/output remain available in accordions.
+
+## Contract
+
+The 27 examples, 9 task routes, protocol parser, prompts, native inference backend,
+model revision and generated coordinates are unchanged. Dataset annotations are
+never substituted for predictions. The original r7 manifest remains as provenance;
+`ui_studio_r8_lock.json` records the reviewed new UI bytes and unchanged case contract.
+
+## Verification scope
+
+Console request lifecycle, protocol/render regressions and packaging lock checks;
+browser review at mobile, intermediate and desktop widths; success, error and repeat
+requests; category/instance focus, zoom/reset, example switching and upload reset.
+Local visual regression uses a separate, non-deployed HTTP fixture replaying a
+recorded real 27-target HF response. Its latency is test latency. The deployed HF
+Space is checked with a fresh real model request after release; these checks are
+qualitative UI acceptance, not a benchmark.

docs/ui_studio_r8_lock.json

@@ -0,0 +1,48 @@
+{
+  "files": {
+    "app.py": "95f3f0d399588edf789fecdd7099ef4622f180cdb7fe8389989bf0951a89a78f",
+    "assets/Manrope-OFL.txt": "e01b637272e0cbdfb240184dd98ea5cc671556d9894dae2668d92ab2c906787c",
+    "assets/Manrope-variable.ttf": "d0639be45d0af36e798172419d7bd173c4bd4f29e2b76cbb69db1d11bf8b0a40",
+    "assets/SOURCES.md": "3cceb52136b55f86840e9585e3c37faed1adc762452b0fea50aecba696dac7fa",
+    "assets/console.js": "3af36a3aeafb72e85018b1c663f624b92877bad0152ee9e264a1c440d689f60e",
+    "assets/frosted.css": "393bf5f1c04a49a6e9b17e855e573646489b4add85bc7973eb6bb277686b5c80",
+    "assets/original.css": "7a244c7f65e40797850dcde7d6b6505b1b5de60aa24b129f44b33ae52291fd2e",
+    "assets/paper.css": "61fc60bf8c379a0894fbfe06574964ec2ed256791a23860fa4dbb872eb2869f9",
+    "assets/studio.css": "3275fe0212672640f477e4273a6c8052648f361c7631400aaf6ad2aaebc89185",
+    "assets/xpeng-logo.png": "ff0db78ddf8f9a122eec74e8eb79581f8e5dbc46803dddeb780a06f5ae295750",
+    "cases/dense/dense-01-o365_bbox_gt50_00009110.jpg": "398038106cbac731516dd01de25354fe4d61f3599df64baa611f1d5a99e0e8fb",
+    "cases/dense/dense-02-o365_bbox_gt50_00004676.jpg": "7ee3beb63bdfd50c183538bd56f9d7e079fa41bde78aad9d5fe0d22c041c2673",
+    "cases/dense/dense-03-o365_bbox_gt50_00011992.jpg": "eb9331146b66a1af1e8c832a22043c6f1b45d5d3bb7231816f975ced2cd88e39",
+    "cases/dense_point/dense_point-01-sensenova_sa1b_point_1067906__phrase_000.jpg": "917975c9b31791290a2a660c91af8ae0653cfe258fa0c53539bcb868867aece2",
+    "cases/dense_point/dense_point-02-sensenova_sa1b_point_1445784__phrase_002.jpg": "0b9a2281fec580c02b9292d8b3f96b675a8659d721f4dd8a1ae16a1eadbaf4e9",
+    "cases/dense_point/dense_point-03-sensenova_sa1b_point_1451598__phrase_001.jpg": "d2f0e070f49cc001ef6855964175c8c383358fcc2185d62abf29ba0de0d1be22",
+    "cases/grounding/grounding-01-object365-locate_anything_object365_object365-file-0027-row-000000119924.jpg": "2e3946eafcbdc2d2ac9e0b62343595e0b51e71b38eb15c3b0669fab46c78e9f6",
+    "cases/grounding/grounding-02-object365-locate_anything_object365_object365-file-0027-row-000001469030.jpg": "c6abef94a28290ca94e8dd043ba58e326cfcb22088b75f32274acc07af15950c",
+    "cases/grounding/grounding-03-object365-locate_anything_object365_object365-file-0027-row-000001076761.jpg": "ff9581327870a05ad8679c3e5891f27dfe55acc98ed713a8abf8d02e7604774b",
+    "cases/gui/gui-01-groundcua-locate_anything_groundcua_groundcua-file-0014-row-000000043686__gui_0008.jpg": "c9c27a9df49bac1c9664eb74ecf1fe9967e20281add73fff1273437af06b743b",
+    "cases/gui/gui-02-groundcua-locate_anything_groundcua_groundcua-file-0014-row-000000006009__gui_0028.jpg": "7ff12fde621319e2959b3112fa6c1fe4e6ef83b8943a6ee169d7fc2140f59e74",
+    "cases/gui/gui-03-groundcua-locate_anything_groundcua_groundcua-file-0014-row-000000041853__gui_0052.jpg": "8ba06f95a90cf6954aa7c8f7554b4f28d966afbfc8b8151c96e540e224139cf5",
+    "cases/layout/layout-01-layout_doclaynet_train_16966.jpg": "8ba09e49907c5d7a3a31148a3fceaf2695bd04f35a017a62ef8c455b985f7218",
+    "cases/layout/layout-02-layout_doclaynet_train_20356.jpg": "5fbf03f82cc66566e4630547b53b7f51cd0ebd772a072c1d6f37f8c0bafdb646",
+    "cases/layout/layout-03-layout_doclaynet_train_3435.jpg": "8e035b83d1ca53298816550d4891fd9f2d84f83b59bba178cafdf6bf8623a9fe",
+    "cases/ocr/ocr-01-ocr_textocr-locate_anything_ocr_textocr_textocr-file-0042-row-000000019189.jpg": "4634583edfab147e8708c6119e726fb8f394744e0225c8319136bb5000ba5d8c",
+    "cases/ocr/ocr-02-ocr_textocr-locate_anything_ocr_textocr_textocr-file-0042-row-000000018671.jpg": "8db936cadff524299c5b61b94992f3b70ec90e1dd3873f072b34d41692393bdd",
+    "cases/ocr/ocr-03-ocr_textocr-locate_anything_ocr_textocr_textocr-file-0042-row-000000021130.jpg": "d959da84d676117701e6d3920bff692aab94d6075e5714e2a324df3b61f18cf8",
+    "cases/refer_point/refer_point-01-roboafford_affordance_point_paco_491580_000.jpg": "e5233bcfadb4d6cb3be1a0ac75573183084494661dd31cc42e7282d21b6c3e13",
+    "cases/refer_point/refer_point-02-roboafford_affordance_point_paco_558444_002.jpg": "df60dcc4812e93720202874e7b88cca122b25ff2615dd31e2bd697a552bce322",
+    "cases/refer_point/refer_point-03-roboafford_affordance_point_paco_311488_000.jpg": "e4fc006bbcb49c5e57c3b002a35e5866c15c898d6930117e0f89617121cd3928",
+    "cases/referring/referring-01-humanref_nocot_lf2_00007963.jpg": "4fac0cc45af121260bc7468aa63fbe7f6dfdcbc5a2f251c04a8a0e06212048df",
+    "cases/referring/referring-02-humanref_nocot_lf2_00004121.jpg": "9b7ec8dc3ad013a57fab9d1199ee0ce14a3104f8e56f60df908b8769d32e195d",
+    "cases/referring/referring-03-humanref_nocot_lf2_00011458.jpg": "44978de1893cdcf9c0c3ed7dd40df3d3f38b7c5334ba0929d2604a2a2fb5d561",
+    "cases/visual_prompt/visual_prompt-01-sensenova_sa1b_visual_1718306.jpg": "57104d07c82cfb97a72075ef479f7d8d1c00db82386aa5c38da0ef163a82dc2f",
+    "cases/visual_prompt/visual_prompt-02-sensenova_sa1b_visual_2475968.jpg": "ba96beb1cc54682f56e34b1381fefc9b7b95905363cff917bbfdac886e265bac",
+    "cases/visual_prompt/visual_prompt-03-sensenova_sa1b_visual_1573415.jpg": "2593b4f81c4fbfd70e73df0710fb143af232126daa0a96bc86c72575713475a5",
+    "grounding_demo/catalog.py": "75e543fed7f0ca018fb41c4b528efc2901aa6a0f05232959297d6d40798f676f",
+    "grounding_demo/console.py": "dbc1a08c937f18d5c104d4ab18316937d21a2b0d2df9ba2cba296d9ae1e20f16",
+    "grounding_demo/protocol.py": "aa4e634070ab7a17c6bc477051e97cb02e772e9e37db89d5de9b6497312635b0",
+    "grounding_demo/render.py": "a4d43398a7d42a2f7884b16141bd43be3b687fdd7ce24fa89405341fb6152b21"
+  },
+  "case_contract_sha256": "d00f2091dcb3c866e5e3a331f89537839640b2374c4bc32685960706d18b58b1",
+  "cases": 27,
+  "routes": 9
+}

grounding_demo/render.py

@@ -48,7 +48,11 @@ def draw_primitives(
     overlay = Image.new("RGBA", canvas.size, (0, 0, 0, 0))
     draw = ImageDraw.Draw(overlay)
     width, height = canvas.size
-    line = max(2, round(min(width, height) / 260))
+    primitives = list(primitives)
+    dense = len(primitives) > 12
+    # Fine boundaries keep a dense scene readable; short corners make small
+    # boxes discoverable without filling, moving, or removing any prediction.
+    line = max(1 if dense else 2, round(min(width, height) / (420 if dense else 260)))
     radius = max(6, line * 3)
     font = _font(max(13, round(min(width, height) / 42)))
     label_colors: dict[str, tuple[int, int, int]] = {}
@@ -65,7 +69,6 @@ def draw_primitives(
             draw.line((x, y1, min(x + dash, x2), y1), fill=(*GREEN, 255), width=line)
             draw.line((x, y2, min(x + dash, x2), y2), fill=(*GREEN, 255), width=line)
 
-    primitives = list(primitives)
     labels = []
     # Opaque RGBA writes replace earlier pixels in a Pillow layer. In particular,
     # a later lake/cloud fill used to erase every small object drawn inside it.
@@ -86,6 +89,11 @@ def draw_primitives(
         else:
             x1, y1, x2, y2 = coords
             draw.rectangle(coords, outline=(*color, 255), width=line)
+            if dense:
+                corner = min(max(4, round(min(width, height) / 80)), (x2-x1)//3, (y2-y1)//3)
+                if corner > 0:
+                    for x, y, dx, dy in ((x1,y1,1,1),(x2,y1,-1,1),(x1,y2,1,-1),(x2,y2,-1,-1)):
+                        draw.line((x+dx*corner,y,x,y,x,y+dy*corner), fill=(*color,255), width=max(2,line))
             if seen[primitive.label] == 1:
                 labels.append((primitive.label, color, coords))
 

scripts/build_bundle.py

@@ -17,7 +17,9 @@ def main():
     if args.output.exists():
         raise SystemExit("Output already exists; choose a new archive path.")
     args.output.parent.mkdir(parents=True, exist_ok=True)
-    lock = ROOT / "docs/ui_paper_r7_lock.json"
+    lock = ROOT / "docs/ui_studio_r8_lock.json"
+    if not lock.exists():
+        lock = ROOT / "docs/ui_paper_r7_lock.json"
     if not lock.exists():
         lock = ROOT / "docs/ui_lock.json"
     if fingerprint(ROOT) != json.loads(lock.read_text()):
@@ -33,6 +35,8 @@ def main():
            "scripts/prepare_model_repo.py", "scripts/validate_gradio.py"]
     paths = [ROOT / name for name in top]
     paths.extend([lock, ROOT / "docs/UI_PAPER_R7.md"])
+    if (ROOT / "docs/UI_STUDIO_R8.md").exists():
+        paths.append(ROOT / "docs/UI_STUDIO_R8.md")
     for folder, suffixes in {"assets": {".css", ".js", ".png", ".ttf", ".txt", ".md"},
                              "grounding_demo": {".py"}, "tests": {".py"}}.items():
         paths.extend(p for p in (ROOT / folder).rglob("*") if p.is_file() and p.suffix in suffixes)

scripts/verify_ui.py

@@ -29,7 +29,9 @@ def main():
     parser.add_argument("--reference", type=Path, help="Original project; compare then create lock without overwrite")
     args = parser.parse_args()
     current = fingerprint(ROOT)
-    lock = ROOT / "docs/ui_paper_r7_lock.json"
+    lock = ROOT / "docs/ui_studio_r8_lock.json"
+    if not lock.exists():
+        lock = ROOT / "docs/ui_paper_r7_lock.json"
     if not lock.exists():
         lock = ROOT / "docs/ui_lock.json"
     if args.reference:

tests/test_console.py

@@ -1,6 +1,7 @@
 import json
 import html
 import unittest
+import re
 from html.parser import HTMLParser
 from unittest.mock import patch
 
@@ -9,6 +10,22 @@ from grounding_demo.console import compile_query, query_from_prompt, targets_htm
 
 
 class ConsoleTest(unittest.TestCase):
+    def test_request_ids_distinguish_identical_results_and_errors(self):
+        path = str(app.ROOT / app.CASES[0]["image"])
+        raw = "<|object_ref_start|>car<|object_ref_end|><|box_start|><1><2><30><40><|box_end|>"
+        runs = []
+        for error in (False, False, True):
+            with patch.object(app.GroundingClient, "infer", return_value=(raw, .1, {}),
+                              side_effect=TimeoutError("test") if error else None):
+                states = list(app.run_console(path, "car", "grounding"))
+            ids = [re.search("data-run-id='([^']+)'", state[5]).group(1) for state in states]
+            self.assertEqual(ids[0], ids[-1])
+            self.assertIn("data-phase='busy'", states[0][5])
+            self.assertNotIn("data-phase='busy'", states[-1][5])
+            self.assertTrue(states[-1][-1]["interactive"])
+            runs.append(ids[0])
+        self.assertEqual(len(set(runs)), 3)
+
     def test_all_27_prompts_roundtrip_exactly(self):
         for row in app.CASES:
             with self.subTest(case=row["id"]):