Seg: modern pill badges with inline SVG icons (no external CDN)

app.py

@@ -182,10 +182,17 @@ CUSTOM_CSS = """
 #tagline { text-align: center; font-size: 15px; color: #475569;
            max-width: 680px; margin: 4px auto 22px; line-height: 1.55;
            font-weight: 400; }
-#badges { text-align: center; margin: 0 0 32px; }
-#badges img { display: inline-block; margin: 0 3px; height: 24px; vertical-align: middle;
-              opacity: 0.92; transition: opacity 150ms ease; }
-#badges img:hover { opacity: 1; }
+#badges { display: flex; justify-content: center; flex-wrap: wrap;
+          gap: 8px; margin: 0 0 32px; }
+.pill { display: inline-flex; align-items: center; gap: 6px;
+        padding: 7px 14px; border-radius: 999px;
+        background: #f1f5f9; color: #0f172a !important;
+        font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
+        text-decoration: none !important; border: 1px solid #e2e8f0;
+        transition: background 150ms ease, transform 150ms ease, border-color 150ms ease; }
+.pill:hover { background: #0f172a; color: #f8fafc !important;
+              border-color: #0f172a; transform: translateY(-1px); }
+.pill svg { width: 14px; height: 14px; }
 
 /* AnnotatedImage hover pop: when a region is highlighted, lift + brighten it */
 #seg-out .layer-wrap canvas { transition: transform 200ms ease, filter 200ms ease; }
@@ -199,10 +206,21 @@ HEADER_HTML = """
 <div id="title">Sapiens2: Segmentation</div>
 <div id="subtitle">ICLR 2026</div>
 <div id="badges">
-  <a href="https://github.com/facebookresearch/sapiens2"><img src="https://img.shields.io/badge/Code-GitHub-181717?logo=github&logoColor=white"></a>
-  <a href="https://huggingface.co/facebook/sapiens2"><img src="https://img.shields.io/badge/Models-HuggingFace-FF9D00?logo=huggingface&logoColor=white"></a>
-  <a href="https://openreview.net/pdf?id=IVAlYCqdvW"><img src="https://img.shields.io/badge/Paper-OpenReview-94DD15?logo=adobeacrobatreader&logoColor=white"></a>
-  <a href="https://rawalkhirodkar.github.io/sapiens2"><img src="https://img.shields.io/badge/Project-Page-007FFF?logo=googlechrome&logoColor=white"></a>
+  <a class="pill" href="https://github.com/facebookresearch/sapiens2" target="_blank" rel="noopener">
+    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1.1-.7.1-.7.1-.7 1.3.1 2 1.3 2 1.3 1.1 1.9 3 1.4 3.7 1 .1-.8.4-1.4.8-1.7-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.3-3.2-.1-.4-.6-1.6.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.6.2 2.8.1 3.2.8.8 1.3 1.9 1.3 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3"/></svg>
+    Code
+  </a>
+  <a class="pill" href="https://huggingface.co/facebook/sapiens2" target="_blank" rel="noopener">
+    🤗 Models
+  </a>
+  <a class="pill" href="https://openreview.net/pdf?id=IVAlYCqdvW" target="_blank" rel="noopener">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg>
+    Paper
+  </a>
+  <a class="pill" href="https://rawalkhirodkar.github.io/sapiens2" target="_blank" rel="noopener">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+    Project
+  </a>
 </div>
 """