Label dense boxes once per category and avoid overlapping tags

assets/studio.css

@@ -51,7 +51,7 @@
 #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-chips {display:flex!important;flex-direction:row;flex-wrap:wrap;max-height:280px!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}

docs/UI_STUDIO_R8.md

@@ -16,6 +16,11 @@ serve the standalone demo and the private Hugging Face Space.
   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.
+- Box labels appear in sparse and dense scenes. Each exact category gets at most
+  one on-image name across its instances. Labels avoid each other and small boxes;
+  nearby free space and short leader lines handle crowded anchors. The category
+  inspector always retains every category, including labels that cannot physically
+  fit on a tiny canvas. Font weight is explicitly set for legible raster text.
 - Empty detail panels stay hidden; raw prompt/output remain available in accordions.
 
 ## Contract

docs/ui_studio_r8_lock.json

@@ -8,7 +8,7 @@
     "assets/frosted.css": "393bf5f1c04a49a6e9b17e855e573646489b4add85bc7973eb6bb277686b5c80",
     "assets/original.css": "7a244c7f65e40797850dcde7d6b6505b1b5de60aa24b129f44b33ae52291fd2e",
     "assets/paper.css": "61fc60bf8c379a0894fbfe06574964ec2ed256791a23860fa4dbb872eb2869f9",
-    "assets/studio.css": "3275fe0212672640f477e4273a6c8052648f361c7631400aaf6ad2aaebc89185",
+    "assets/studio.css": "dcc22a94afbcff8079c5bcaeda2849f75e6ad7b204af9a49f2c3d954c3df46cd",
     "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",
@@ -40,7 +40,7 @@
     "grounding_demo/catalog.py": "75e543fed7f0ca018fb41c4b528efc2901aa6a0f05232959297d6d40798f676f",
     "grounding_demo/console.py": "dbc1a08c937f18d5c104d4ab18316937d21a2b0d2df9ba2cba296d9ae1e20f16",
     "grounding_demo/protocol.py": "aa4e634070ab7a17c6bc477051e97cb02e772e9e37db89d5de9b6497312635b0",
-    "grounding_demo/render.py": "a4d43398a7d42a2f7884b16141bd43be3b687fdd7ce24fa89405341fb6152b21"
+    "grounding_demo/render.py": "ba6201d2eda2f3bf7fb0988e35f76303a4c43455d18cc60c4db547d87155d73d"
   },
   "case_contract_sha256": "d00f2091dcb3c866e5e3a331f89537839640b2374c4bc32685960706d18b58b1",
   "cases": 27,

grounding_demo/render.py

@@ -1,6 +1,5 @@
 from __future__ import annotations
 
-from collections import defaultdict
 from collections.abc import Iterable
 from pathlib import Path
 
@@ -23,7 +22,10 @@ def _font(size: int) -> ImageFont.FreeTypeFont | ImageFont.ImageFont:
     )
     for candidate in candidates:
         if Path(candidate).is_file():
-            return ImageFont.truetype(candidate, size=size)
+            font = ImageFont.truetype(candidate, size=size)
+            if Path(candidate).name == "Manrope-variable.ttf":
+                font.set_variation_by_axes([600])
+            return font
     return ImageFont.load_default()
 
 
@@ -38,6 +40,59 @@ def _xy(values: tuple[int, ...], width: int, height: int) -> tuple[int, ...]:
     )
 
 
+def _intersects(a, b, gap=2):
+    return a[0] < b[2]+gap and b[0] < a[2]+gap and a[1] < b[3]+gap and b[1] < a[3]+gap
+
+
+def layout_box_labels(primitives, width, height, font, padding=4):
+    """One collision-free badge per exact category; returned boxes stay untouched."""
+    groups = {}
+    for primitive in primitives:
+        if len(primitive.coordinates) == 4:
+            groups.setdefault(primitive.label, []).append(_xy(primitive.coordinates, width, height))
+    area = lambda b: max(0,b[2]-b[0])*max(0,b[3]-b[1])
+    small = [b for boxes in groups.values() for b in boxes if area(b)<width*height*.01]
+    measure = ImageDraw.Draw(Image.new("RGB", (1, 1)))
+    occupied, placed = [], []
+    # Give small targets first choice of nearby space. Large regions have more
+    # candidate anchors. Ordering affects label placement only, never predictions.
+    for label, boxes in sorted(groups.items(), key=lambda item: max(map(area,item[1]))):
+        text = label if len(label)<=38 else label[:37]+"…"
+        while text:
+            bounds = measure.textbbox((0,0),text,font=font)
+            tw, th = bounds[2]-bounds[0]+2*padding, bounds[3]-bounds[1]+2*padding
+            if tw<=width-2 and th<=height-2: break
+            text = text[:-2]+"…" if len(text)>2 else ""
+        if not text: continue
+        candidates=[]
+        for target in sorted(boxes,key=area,reverse=True):
+            x1,y1,x2,y2=target
+            for x,y in [(x1,y1-th-2),(x1,y1+2),(x1,y2+2),(x2-tw,y1-th-2),
+                        (x2-tw,y2-th-2),(x2+2,y1),(x1-tw-2,y1)]:
+                x=max(1,min(x,width-tw-1));y=max(1,min(y,height-th-1))
+                candidates.append(((x,y,x+tw,y+th),target))
+        chosen=next(((b,t) for b,t in candidates if not any(_intersects(b,o) for o in occupied+small)),None)
+        if chosen is None:
+            # Rare crowded anchors use the nearest free area with a leader line.
+            # Never put a badge on another badge or cover a small prediction.
+            free=[]
+            for y in range(1,max(2,height-th),max(4,th//2)):
+                for x in range(1,max(2,width-tw),max(6,tw//4)):
+                    b=(x,y,x+tw,y+th)
+                    if any(_intersects(b,o) for o in occupied+small): continue
+                    for t in boxes:
+                        dx=max(t[0]-b[2],b[0]-t[2],0);dy=max(t[1]-b[3],b[1]-t[3],0)
+                        # Prefer top-left anchors among equally near locations.
+                        score=dx*dx+dy*dy+.01*((x-t[0])**2+(y-t[1])**2)
+                        free.append((score,b,t))
+            if free:
+                _,b,t=min(free,key=lambda item:item[0]);chosen=(b,t)
+        if chosen:
+            b,target=chosen;occupied.append(b)
+            placed.append(dict(label=label,text=text,box=b,target=target,text_bounds=bounds))
+    return placed
+
+
 def draw_primitives(
     image: Image.Image,
     primitives: Iterable[Primitive],
@@ -54,9 +109,8 @@ def draw_primitives(
     # 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)))
+    font = _font(max(12 if dense else 13, round(min(width, height) / 48)))
     label_colors: dict[str, tuple[int, int, int]] = {}
-    seen: defaultdict[str, int] = defaultdict(int)
 
     for ref in references:
         if len(ref.coordinates) != 4:
@@ -69,13 +123,11 @@ 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)
 
-    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.
     # Keep region interiors untouched; geometry and labels are separate passes.
     for primitive in primitives:
         color = label_colors.setdefault(primitive.label, PALETTE[len(label_colors) % len(PALETTE)])
-        seen[primitive.label] += 1
         coords = _xy(primitive.coordinates, width, height)
         if len(coords) == 2:
             x, y = coords
@@ -94,44 +146,22 @@ def draw_primitives(
                 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))
-
-    # Dense scenes use the linked category inspector instead of a wall of text.
-    # Sparse labels are clamped to the canvas and never overlap one another or
-    # cover a small target. Exact predictions are never suppressed or merged.
-    occupied = []
-    small_targets = [_xy(p.coordinates, width, height) for p in primitives
-                     if len(p.coordinates) == 4
-                     and (p.coordinates[2] - p.coordinates[0]) *
-                         (p.coordinates[3] - p.coordinates[1]) < 10000]
-
-    def intersects(a, b):
-        return a[0] < b[2] and b[0] < a[2] and a[1] < b[3] and b[1] < a[3]
-
-    for text, color, (x1, y1, x2, y2) in labels if len(labels) <= 12 else []:
-        text = text[:38]
-        tb = draw.textbbox((0, 0), text, font=font)
-        while tb[2] - tb[0] + line * 4 > width - 2 and text:
-            text = text[:-1]
-            tb = draw.textbbox((0, 0), text + "…", font=font)
-        if not text:
-            continue
-        tw, th = tb[2] - tb[0] + line * 4, tb[3] - tb[1] + line * 2
-        candidates = [(x1, y1-th-line), (x1, y2+line),
-                      (x2-tw, y1-th-line), (x1+line, y1+line)]
-        for tx, ty in candidates:
-            tx, ty = max(0, min(tx, width-tw-1)), max(0, min(ty, height-th-1))
-            box = (tx, ty, tx+tw, ty+th)
-            if any(intersects(box, other) for other in occupied + small_targets):
-                continue
-            occupied.append(box)
-            light = tuple(round(c * .15 + 255 * .85) for c in color)
-            draw.rounded_rectangle(box, radius=line*2, fill=(*light, 250),
-                                   outline=(*color, 255), width=max(1, line//2))
-            draw.text((tx+line*2-tb[0], ty+line-tb[1]), text, font=font,
-                      fill=(47, 31, 65, 255))
-            break
+
+    # Labels remain visible in dense scenes, once per category across all boxes.
+    padding=max(4,line*2)
+    for badge in layout_box_labels(primitives,width,height,font,padding):
+        text,box,target=badge["text"],badge["box"],badge["target"]
+        color=label_colors[badge["label"]]
+        tx,ty=box[:2];tb=badge["text_bounds"]
+        # Attach displaced badges to their actual prediction with a fine leader.
+        if not _intersects(box,target,gap=4):
+            cx,cy=(box[0]+box[2])/2,(box[1]+box[3])/2
+            ex=max(target[0],min(cx,target[2]));ey=max(target[1],min(cy,target[3]))
+            sx=max(box[0],min(ex,box[2]));sy=max(box[1],min(ey,box[3]))
+            draw.line((sx,sy,ex,ey),fill=(*color,230),width=1)
+        light=tuple(round(c*.10+255*.90) for c in color)
+        draw.rounded_rectangle(box,radius=3,fill=(*light,248),outline=(*color,255),width=1)
+        draw.text((tx+padding-tb[0],ty+padding-tb[1]),text,font=font,fill=(38,30,49,255))
 
     if title:
         tb = draw.textbbox((0, 0), title, font=font)

tests/test_render.py

@@ -1,10 +1,26 @@
 import unittest
 from PIL import Image
 from grounding_demo.protocol import Primitive
-from grounding_demo.render import draw_primitives, PURPLE
+from grounding_demo.render import draw_primitives, layout_box_labels, _font, PURPLE
 
 
 class RenderRegression(unittest.TestCase):
+    def test_dense_labels_are_unique_visible_and_do_not_overlap(self):
+        boxes = [Primitive(f"category {i}", (50+(i%5)*180, 50+(i//5)*210,
+                                           150+(i%5)*180, 190+(i//5)*210)) for i in range(20)]
+        boxes += [Primitive("category 0", (700, 800, 850, 950))]
+        original = list(boxes)
+        labels = layout_box_labels(boxes, 1000, 1000, _font(16))
+        self.assertEqual(len(labels), 20)
+        self.assertEqual(len({row["label"] for row in labels}), 20)
+        for i, row in enumerate(labels):
+            x1,y1,x2,y2=row["box"]
+            self.assertTrue(0<=x1<x2<=1000 and 0<=y1<y2<=1000)
+            for other in labels[i+1:]:
+                a,b,c,d=other["box"]
+                self.assertFalse(x1<c and a<x2 and y1<d and b<y2)
+        self.assertEqual(boxes, original)
+
     def test_large_late_region_does_not_erase_small_target(self):
         image = Image.new("RGB", (1000, 1000), "white")
         small = Primitive("boat", (300, 400, 350, 450))