Add Direct URL Anchors for Individual Models

index.html

@@ -2297,6 +2297,10 @@
     return models.filter(m => !m.type);
   }
 
+  function modelAnchorId(model) {
+    return `${model.org}-${model.name}`.toLowerCase().replace(/[^a-z0-9._-]+/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
+  }
+
 function getFilteredModels(models = MODELS, filter = activeFilter) {
   let arr = getModelEntries(models);
   if (filter === '<3M')       arr = arr.filter(m => m.params && m.params < 3000000);
@@ -2632,7 +2636,7 @@ function getFilteredModels(models = MODELS, filter = activeFilter) {
       const inCompare = compareSet.has(m.name);
 
       return `
-        <tr>
+        <tr id="${modelAnchorId(m)}">
           <td class="td-compare"><button class="compare-toggle ${inCompare ? 'active' : ''}" onclick="toggleCompare('${encodeURIComponent(m.name)}')" title="${inCompare ? 'Remove from comparison' : 'Add to comparison'}" aria-pressed="${inCompare}">${inCompare ? '−' : '+'}</button></td>
           <td class="td-rank">${rank}</td>
           <td class="td-model"><a class="${categoryLeaders.has(m.name) ? 'category-leader' : ''}" title="${getCategoryLeaderTitle(categoryLeaders.get(m.name))}" href="${m.links.card}" target="_blank">${m.name}</a>${cutoffTag}<span class="model-org"><a href="${org.url}" target="_blank">${org.name}</a> &middot; ${m.paramsDisplay}</span></td>
@@ -3306,10 +3310,11 @@ function getFilteredModels(models = MODELS, filter = activeFilter) {
     const href = model.links && model.links.card ? model.links.card : '#';
     const score = '<span class="filter-leader-score">' + escapeHtml(formatMetricValue(entry.score, metric, 2)) + '</span>';
     const params = escapeHtml(model.paramsDisplay || model.params) + ' params';
+    const cardId = modelAnchorId(model) + '-' + (showSizeLabel ? 'highlight' : attribute === 'data-size-filter' ? 'size' : 'benchmark') + '-' + String(value).toLowerCase().replace(/[^a-z0-9._-]+/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
     const details = showSizeLabel
       ? '<div class="highlight-leader-footer"><span class="filter-leader-meta"><span class="highlight-leader-org">' + escapeHtml(org.name) + '</span><span class="highlight-leader-params">' + params + '</span></span><div class="highlight-leader-score">' + score + '<span class="size-score-label">Int Index</span></div></div>'
       : score + '<span class="filter-leader-meta">' + escapeHtml(org.name) + ' · ' + params + '</span>';
-    return '<article class="filter-leader-card' + (active ? ' active' : '') + '" role="button" tabindex="0" ' +
+    return '<article class="filter-leader-card' + (active ? ' active' : '') + '" id="' + escapeHtml(cardId) + '" role="button" tabindex="0" ' +
       attribute + '="' + escapeHtml(value) + '" style="--leader-org-color:' + escapeHtml(orgColor) + '" aria-pressed="' + active + '" aria-label="' + escapeHtml(kicker + ': ' + model.name) + '">' +
       '<span class="filter-leader-kicker"><span>' + escapeHtml(kicker) + '</span></span>' +
       '<a class="filter-leader-name" href="' + escapeHtml(href) + '" target="_blank" rel="noopener noreferrer">' + escapeHtml(model.name) + '</a>' +
@@ -3370,9 +3375,19 @@ function getFilteredModels(models = MODELS, filter = activeFilter) {
     if (filterBar) filterObserver.observe(filterBar, { childList: true });
   });
 
-  window.addEventListener('load', renderFilterLeaders);
+  function scrollToModelHash() {
+    let id;
+    try { id = decodeURIComponent(window.location.hash.slice(1)); } catch { return; }
+    if (!id) return;
+    const highlight = Array.from(document.querySelectorAll('#highlight-leader-grid .filter-leader-card[id]')).find(card => card.id.startsWith(id + '-highlight-'));
+    const target = highlight || document.getElementById(id);
+    if (target && (target.matches('.filter-leader-card') || target.matches('#leaderboard-body > tr'))) target.scrollIntoView({ block: 'center' });
+  }
+
+  window.addEventListener('load', function () { renderFilterLeaders(); scrollToModelHash(); });
+  window.addEventListener('hashchange', scrollToModelHash);
   renderFilterLeaders();
 })();
 </script>
 </body>
-  </html>
+  </html>