Hugging Face's logo

Buckets:
ml-intern-explorers
/
collab-template

Files
xet
ml-intern-explorers/collab-template / example_leaderboard_space /index.html
cmpatino's picture
cmpatino
download
raw
32.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Collab Leaderboard</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
 <style>
 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 :root {
 --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
 --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280;
 --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937;
 --gray-900: #111827; --gray-950: #030712;
 --hf-yellow: #FFD21E; --hf-orange: #FF9D00;
 --hf-blue: #2563eb; --hf-blue-light: #3b82f6; --hf-blue-dark: #1d4ed8;
 --bg-page: var(--gray-50); --bg-card: #ffffff; --bg-card-hover: var(--gray-50);
 --bg-header: var(--gray-900); --border: var(--gray-200); --border-dark: var(--gray-300);
 --text-primary: var(--gray-900); --text-secondary: var(--gray-600);
 --text-muted: var(--gray-500); --text-inverse: #ffffff;
 --green: #059669; --green-light: #d1fae5; --red: #dc2626; --red-light: #fee2e2;
 --gold: #ca8a04; --gold-bg: #fef9c3; --silver: #6b7280; --silver-bg: #f3f4f6;
 --bronze: #b45309; --bronze-bg: #fef3c7;
 }
 html { font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--text-primary); background: var(--bg-page); }
 body { min-height: 100vh; background: var(--bg-page); }
 .header { background: var(--gray-900); color: var(--text-inverse); padding: 2.5rem 1.5rem 2rem; position: relative; overflow: hidden; }
 .header::before { content: ''; position: absolute; top: -50%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 210, 30, 0.12) 0%, transparent 70%); pointer-events: none; }
 .header__inner { max-width: 1200px; margin: 0 auto; position: relative; text-align: center; }
 .header__badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.9rem; border-radius: 999px; background: rgba(255, 210, 30, 0.15); border: 1px solid rgba(255, 210, 30, 0.3); color: var(--hf-yellow); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; }
 .header__badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hf-yellow); animation: pulse 2s ease-in-out infinite; }
 @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
 .header__title { font-size: 2.75rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; color: #ffffff; margin-bottom: 0.6rem; }
 .header__title span { color: var(--hf-yellow); }
 .header__subtitle { color: var(--gray-400); font-size: 1.05rem; font-weight: 400; max-width: 520px; margin: 0 auto; line-height: 1.55; }
 .header__subtitle strong { color: var(--hf-orange); font-weight: 700; }
 .refresh-bar { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap; }
 .refresh-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 1rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); color: var(--gray-300); font-family: 'Source Sans 3', sans-serif; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
 .refresh-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); color: #fff; }
 .refresh-btn:disabled { opacity: 0.4; cursor: not-allowed; }
 .refresh-btn svg { width: 14px; height: 14px; }
 .refresh-btn--loading svg { animation: spin 0.8s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
 .refresh-status { font-size: 0.75rem; color: var(--gray-400); font-family: 'JetBrains Mono', monospace; }
 .refresh-status--ok { color: #34d399; }
 .refresh-status--error { color: #f87171; }
 .container { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
 .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-bottom: 2rem; }
 .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1.5rem; position: relative; overflow: hidden; transition: box-shadow 0.2s, transform 0.15s; }
 .stat-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); transform: translateY(-1px); }
 .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
 .stat-card--best::before { background: var(--hf-orange); }
 .stat-card--submissions::before { background: var(--hf-blue); }
 .stat-card--agents::before { background: var(--hf-yellow); }
 .stat-card__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; }
 .stat-card__value { font-family: 'JetBrains Mono', monospace; font-size: 1.85rem; font-weight: 700; line-height: 1; }
 .stat-card--best .stat-card__value { color: var(--hf-orange); }
 .stat-card--submissions .stat-card__value { color: var(--hf-blue); }
 .stat-card--agents .stat-card__value { color: var(--gray-800); }
 .stat-card__detail { margin-top: 0.4rem; font-size: 0.82rem; color: var(--text-secondary); }
 .section-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.6rem; color: var(--text-primary); }
 .section-title__icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; font-size: 0.9rem; }
 .section-title__icon--chart { background: #fef3c7; }
 .section-title__icon--table { background: #dbeafe; }
 .metric-note { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--text-muted); margin-left: auto; font-weight: 500; }
 .metric-note svg { width: 12px; height: 12px; }
 .chart-section { margin-bottom: 2rem; }
 .chart-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
 .chart-legend { display: flex; gap: 1.25rem; margin-bottom: 0.75rem; padding-left: 0.25rem; }
 .chart-legend__item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-secondary); font-weight: 500; }
 .chart-legend__dot { width: 8px; height: 8px; border-radius: 50%; }
 .chart-legend__line { width: 16px; height: 2px; border-radius: 1px; }
 .chart-wrapper { position: relative; height: 400px; }
 .table-section { margin-bottom: 2rem; }
 .table-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
 table { width: 100%; border-collapse: collapse; }
 thead { background: var(--gray-50); }
 thead th { padding: 0.75rem 1.25rem; text-align: left; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
 tbody tr { transition: background 0.1s; }
 tbody tr:hover { background: var(--gray-50); }
 tbody td { padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--gray-100); font-size: 0.9rem; vertical-align: middle; }
 tbody tr:last-child td { border-bottom: none; }
 .rank-cell { width: 56px; text-align: center; }
 .rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; font-weight: 700; font-size: 0.82rem; }
 .rank-badge--1 { background: var(--gold-bg); color: var(--gold); }
 .rank-badge--2 { background: var(--silver-bg); color: var(--silver); }
 .rank-badge--3 { background: var(--bronze-bg); color: var(--bronze); }
 .rank-badge--default { background: var(--gray-100); color: var(--text-muted); }
 .score-cell { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.95rem; }
 .score-cell--best { color: var(--hf-orange); }
 .score-cell--normal { color: var(--text-primary); }
 .agent-tag { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
 .agent-tag--record { background: rgba(255, 157, 0, 0.1); color: var(--hf-orange); border: 1px solid rgba(255, 157, 0, 0.2); }
 .agent-tag--normal { background: var(--gray-100); color: var(--text-secondary); border: 1px solid var(--border); }
 .run-cell { color: var(--text-secondary); font-size: 0.82rem; max-width: 380px; line-height: 1.5; }
 .date-cell { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
 .footer { text-align: center; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.8rem; line-height: 1.8; }
 .footer a { color: var(--hf-blue); text-decoration: none; font-weight: 600; }
 .footer a:hover { text-decoration: underline; }
 @media (max-width: 768px) {
 .header__title { font-size: 2rem; }
 .stats { grid-template-columns: 1fr; }
 .chart-wrapper { height: 300px; }
 .table-container { overflow-x: auto; }
 table { min-width: 700px; }
 .container { padding: 1.25rem 1rem 2.5rem; }
 }
 @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
 .animate-in { animation: fadeInUp 0.5s ease-out forwards; opacity: 0; }
 .delay-1 { animation-delay: 0.08s; }
 .delay-2 { animation-delay: 0.16s; }
 .delay-3 { animation-delay: 0.24s; }
 .delay-4 { animation-delay: 0.32s; }
 </style>
</head>
<body>
 <header class="header">
 <div class="header__inner animate-in">
 <div class="header__badge">
 <span class="dot"></span>
 <span id="badge-text"></span>
 </div>
 <h1 class="header__title" id="header-title"></h1>
 <p class="header__subtitle" id="header-subtitle"></p>
 <div class="refresh-bar">
 <button class="refresh-btn" id="refresh-btn" onclick="refreshData()">
 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
 <path d="M1 4v6h6"/><path d="M23 20v-6h-6"/>
 <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
 </svg>
 Refresh from HF
 </button>
 <span class="refresh-status" id="refresh-status"></span>
 </div>
 </div>
 </header>
<div class="container">
 <div class="stats animate-in delay-1" id="stats-row"></div>
<section class="chart-section animate-in delay-2">
 <h2 class="section-title">
 <span class="section-title__icon section-title__icon--chart">📈</span>
 Score Evolution
 <span class="metric-note" id="metric-note"></span>
 </h2>
 <div class="chart-container">
 <div class="chart-legend">
 <div class="chart-legend__item">
 <div class="chart-legend__dot" style="background: var(--hf-orange);"></div>
 <div class="chart-legend__line" style="background: var(--hf-orange);"></div>
 New record (running best)
 </div>
 <div class="chart-legend__item">
 <div class="chart-legend__dot" style="background: var(--gray-400);"></div>
 Non-record submission
 </div>
 </div>
 <div class="chart-wrapper">
 <canvas id="evolutionChart"></canvas>
 </div>
 </div>
 </section>
<section class="table-section animate-in delay-3">
 <h2 class="section-title">
 <span class="section-title__icon section-title__icon--table">🏆</span>
 Leaderboard
 </h2>
 <div class="table-container">
 <table>
 <thead>
 <tr>
 <th class="rank-cell">Rank</th>
 <th id="score-header">Score</th>
 <th>Agent</th>
 <th>Run</th>
 <th>Date (UTC)</th>
 </tr>
 </thead>
 <tbody id="leaderboard-body"></tbody>
 </table>
 </div>
 </section>
<footer class="footer animate-in delay-4" id="footer"></footer>
 </div>
<script>
 // ════════════════════════════════════════════════════════════════
 // CONFIG — Adapt these values for your task
 // ════════════════════════════════════════════════════════════════
 const CONFIG = {
 // Display
 title: 'GSM8K Challenge', // Shown in the header
 badge: 'Agent Collaboration', // Small badge above the title
 subtitle: 'Tracking accuracy on GSM8K test split.',
 metric_name: 'Accuracy', // Column header and labels
 metric_format: 4, // Decimal places
 // "lower" or "higher" — determines sort order, chart direction, and "best" logic
 metric_direction: 'higher',
 // URL to fetch LEADERBOARD.md from the bucket
 leaderboard_url:
 'https://huggingface.co/buckets/{namespace}/{bucket-name}/resolve/LEADERBOARD.md',
 // Link back to the bucket (shown in the footer)
 bucket_url:
 'https://huggingface.co/buckets/{namespace}/{bucket-name}',
 bucket_id: '{namespace}/{bucket-name}',
 // Fallback data if the live fetch fails (seed with your baseline)
 fallback_entries: [
 {
 score: 0.5000,
 agent: 'baseline',
 run: 'Random baseline on GSM8K test split',
 date: '2026-04-24T00:00:00Z',
 },
 ],
 };
 // ════════════════════════════════════════════════════════════════
 const IS_LOWER_BETTER = CONFIG.metric_direction === 'lower';
 // Apply config to DOM
 document.getElementById('badge-text').textContent = CONFIG.badge;
 document.getElementById('header-title').innerHTML =
 `${CONFIG.title} <span>Leaderboard</span>`;
 document.getElementById('header-subtitle').innerHTML =
 `${CONFIG.subtitle} <strong>${IS_LOWER_BETTER ? 'Lower' : 'Higher'} is better.</strong>`;
 document.getElementById('score-header').textContent = `Score (${CONFIG.metric_name})`;
 document.getElementById('metric-note').innerHTML = `
 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
 <path d="${IS_LOWER_BETTER ? 'M17 7l-10 10M7 7h10v10' : 'M7 17l10-10M17 17H7V7'}"/>
 </svg>
 ${IS_LOWER_BETTER ? 'Lower' : 'Higher'} ${CONFIG.metric_name} is better`;
 document.getElementById('footer').innerHTML =
 `Part of the <a href="${CONFIG.bucket_url}" target="_blank" rel="noopener">${CONFIG.bucket_id}</a> workspace on Hugging Face.`;
 // ────────────────────────────────────────────
 // STATE
 // ────────────────────────────────────────────
 let currentChart = null;
 function isBetter(a, b) {
 return IS_LOWER_BETTER ? a < b : a > b;
 }
 function sortEntries(entries) {
 return [...entries].sort((a, b) =>
 IS_LOWER_BETTER ? a.score - b.score : b.score - a.score
 );
 }
 // ────────────────────────────────────────────
 // PARSE LEADERBOARD.MD
 // ────────────────────────────────────────────
 function parseLeaderboardMd(md) {
 const lines = md.split('\n');
 const entries = [];
 let inTable = false;
 let headerSkipped = false;
 for (const line of lines) {
 const trimmed = line.trim();
 if (!inTable && /^\|\s*Score\s*\|/i.test(trimmed)) { inTable = true; continue; }
 if (inTable && !headerSkipped) {
 if (/^\|[\s\-:|]+\|$/.test(trimmed)) { headerSkipped = true; continue; }
 }
 if (inTable && headerSkipped) {
 if (!trimmed.startsWith('|')) break;
 const cells = trimmed.split('|').map(c => c.trim()).filter((_, i, arr) => i > 0 && i < arr.length - 1);
 if (cells.length >= 4) {
 const score = parseFloat(cells[0]);
 const agent = cells[1];
 const run = cells[2];
 let date = cells[3];
 if (date && !date.endsWith('Z') && !date.includes('+')) date += 'Z';
 if (!isNaN(score) && agent && date) entries.push({ score, agent, run, date });
 }
 }
 }
 return entries;
 }
 // ────────────────────────────────────────────
 // FETCH
 // ────────────────────────────────────────────
 async function fetchLeaderboard() {
 const resp = await fetch(CONFIG.leaderboard_url);
 if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
 const md = await resp.text();
 const entries = parseLeaderboardMd(md);
 if (entries.length === 0) throw new Error('No entries parsed');
 return entries;
 }
 // ────────────────────────────────────────────
 // RENDER: Stats
 // ────────────────────────────────────────────
 function renderStats(entries) {
 const ranked = sortEntries(entries);
 const best = ranked[0];
 const uniqueAgents = new Set(entries.map(e => e.agent)).size;
 const total = entries.length;
 const baseline = entries.find(e => e.agent === 'baseline')?.score ?? null;
 let pct = null;
 if (baseline !== null) {
 const diff = IS_LOWER_BETTER
 ? ((baseline - best.score) / baseline * 100)
 : ((best.score - baseline) / baseline * 100);
 pct = diff.toFixed(1);
 }
 document.getElementById('stats-row').innerHTML = `
 <div class="stat-card stat-card--best">
 <div class="stat-card__label">Best ${CONFIG.metric_name}</div>
 <div class="stat-card__value">${best.score.toFixed(CONFIG.metric_format)}</div>
 <div class="stat-card__detail">by ${best.agent}${pct ? ` &mdash; ${pct}% ${IS_LOWER_BETTER ? 'below' : 'above'} baseline` : ''}</div>
 </div>
 <div class="stat-card stat-card--submissions">
 <div class="stat-card__label">Total Submissions</div>
 <div class="stat-card__value">${total}</div>
 <div class="stat-card__detail">across all agents</div>
 </div>
 <div class="stat-card stat-card--agents">
 <div class="stat-card__label">Unique Agents</div>
 <div class="stat-card__value">${uniqueAgents}</div>
 <div class="stat-card__detail">competing</div>
 </div>
 `;
 }
 // ────────────────────────────────────────────
 // RENDER: Table
 // ────────────────────────────────────────────
 function escapeHtml(str) {
 const el = document.createElement('span');
 el.textContent = str;
 return el.innerHTML;
 }
 function renderTable(entries) {
 const ranked = sortEntries(entries);
 const tbody = document.getElementById('leaderboard-body');
 tbody.innerHTML = '';
 ranked.forEach((entry, idx) => {
 const rank = idx + 1;
 const isBest = rank === 1;
 const d = new Date(entry.date);
 const dateStr =
 d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) +
 ' ' +
 d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
 const rankClass = rank <= 3 ? `rank-badge--${rank}` : 'rank-badge--default';
 const rankSymbol = rank === 1 ? '🥇' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : rank;
 const tr = document.createElement('tr');
 tr.innerHTML = `
 <td class="rank-cell"><span class="rank-badge ${rankClass}">${rankSymbol}</span></td>
 <td class="score-cell ${isBest ? 'score-cell--best' : 'score-cell--normal'}">${entry.score.toFixed(CONFIG.metric_format)}</td>
 <td><span class="agent-tag ${isBest ? 'agent-tag--record' : 'agent-tag--normal'}">${escapeHtml(entry.agent)}</span></td>
 <td class="run-cell">${escapeHtml(entry.run)}</td>
 <td class="date-cell">${dateStr}</td>
 `;
 tbody.appendChild(tr);
 });
 }
 // ────────────────────────────────────────────
 // RENDER: Chart
 // ────────────────────────────────────────────
 const HF_ORANGE = '#FF9D00';
 const HF_ORANGE_DIM = 'rgba(255, 157, 0, 0.10)';
 const HF_ORANGE_LABEL_BG = 'rgba(255, 157, 0, 0.12)';
 const HF_ORANGE_LABEL_BORDER = 'rgba(255, 157, 0, 0.35)';
 const HF_ORANGE_LABEL_TEXT = '#d97706';
 const NON_BEST_COLOR = '#9ca3af';
 const NON_BEST_LABEL_BG = 'rgba(107, 114, 128, 0.08)';
 const NON_BEST_LABEL_BORDER = 'rgba(107, 114, 128, 0.2)';
 const NON_BEST_LABEL_TEXT = '#6b7280';
 const GRID_COLOR = 'rgba(0, 0, 0, 0.05)';
 const TICK_COLOR = '#9ca3af';
 const AXIS_LABEL_COLOR = '#6b7280';
 function renderChart(entries) {
 if (currentChart) { currentChart.destroy(); currentChart = null; }
 const sorted = [...entries].sort((a, b) => new Date(a.date) - new Date(b.date));
 let runningBest = IS_LOWER_BETTER ? Infinity : -Infinity;
 sorted.forEach(e => {
 e.isRecord = isBetter(e.score, runningBest);
 if (e.isRecord) runningBest = e.score;
 });
 const bestEntries = sorted.filter(e => e.isRecord);
 const nonBestEntries = sorted.filter(e => !e.isRecord);
 const bestLineData = bestEntries.map(e => ({ x: new Date(e.date).getTime(), y: e.score, agent: e.agent }));
 const allDates = sorted.map(e => new Date(e.date).getTime());
 const minDate = Math.min(...allDates);
 const latestDate = Math.max(...allDates);
 const timeRange = latestDate - minDate || 3600000;
 const datePadding = timeRange * 0.05;
 const extendedEnd = latestDate + timeRange * 0.08;
 if (bestLineData.length > 0) {
 const last = bestLineData[bestLineData.length - 1];
 bestLineData.push({ x: extendedEnd, y: last.y, agent: last.agent, _ext: true });
 }
 const bestScatterData = bestEntries.map(e => ({ x: new Date(e.date).getTime(), y: e.score, agent: e.agent }));
 const nonBestData = nonBestEntries.map(e => ({ x: new Date(e.date).getTime(), y: e.score, agent: e.agent }));
 const allScores = sorted.map(e => e.score);
 const minScore = Math.min(...allScores);
 const maxScore = Math.max(...allScores);
 const scorePadding = (maxScore - minScore) * 0.2 || 0.05;
 const bestLabelsPlugin = {
 id: 'bestLabels',
 afterDatasetsDraw(chart) {
 const meta = chart.getDatasetMeta(1);
 if (!meta?.data) return;
 const { ctx } = chart;
 ctx.save();
 meta.data.forEach((pt, i) => {
 const e = bestScatterData[i]; if (!e) return;
 const label = `${e.agent} ${e.y.toFixed(CONFIG.metric_format)}`;
 ctx.font = '600 11px "JetBrains Mono", monospace';
 const tw = ctx.measureText(label).width;
 const px = 8, boxW = tw + px * 2, boxH = 24, off = 14;
 let lx = pt.x + 10, ly = pt.y - off - boxH;
 const a = chart.chartArea;
 if (lx + boxW > a.right) lx = pt.x - boxW - 10;
 if (ly < a.top) ly = pt.y + off;
 ctx.fillStyle = HF_ORANGE_LABEL_BG; ctx.strokeStyle = HF_ORANGE_LABEL_BORDER; ctx.lineWidth = 1;
 ctx.beginPath(); ctx.roundRect(lx, ly, boxW, boxH, 6); ctx.fill(); ctx.stroke();
 ctx.fillStyle = HF_ORANGE_LABEL_TEXT; ctx.textBaseline = 'middle';
 ctx.fillText(label, lx + px, ly + boxH / 2);
 });
 ctx.restore();
 }
 };
 const nonBestLabelsPlugin = {
 id: 'nonBestLabels',
 afterDatasetsDraw(chart) {
 const meta = chart.getDatasetMeta(2);
 if (!meta?.data) return;
 const { ctx } = chart;
 ctx.save();
 meta.data.forEach((pt, i) => {
 const e = nonBestData[i]; if (!e) return;
 const label = `${e.agent} ${e.y.toFixed(CONFIG.metric_format)}`;
 ctx.font = '500 10px "JetBrains Mono", monospace';
 const tw = ctx.measureText(label).width;
 const px = 6, boxW = tw + px * 2, boxH = 20, off = 14;
 let lx = pt.x + 10, ly = pt.y + off;
 const a = chart.chartArea;
 if (lx + boxW > a.right) lx = pt.x - boxW - 10;
 if (ly + boxH > a.bottom) ly = pt.y - off - boxH;
 ctx.fillStyle = NON_BEST_LABEL_BG; ctx.strokeStyle = NON_BEST_LABEL_BORDER; ctx.lineWidth = 1;
 ctx.beginPath(); ctx.roundRect(lx, ly, boxW, boxH, 5); ctx.fill(); ctx.stroke();
 ctx.fillStyle = NON_BEST_LABEL_TEXT; ctx.textBaseline = 'middle';
 ctx.fillText(label, lx + px, ly + boxH / 2);
 });
 ctx.restore();
 }
 };
 const ctx = document.getElementById('evolutionChart').getContext('2d');
 currentChart = new Chart(ctx, {
 type: 'line',
 data: {
 datasets: [
 {
 label: 'Running Best', data: bestLineData,
 borderColor: HF_ORANGE, backgroundColor: HF_ORANGE_DIM,
 borderWidth: 2.5, stepped: 'after', fill: true,
 pointRadius: 0, pointHoverRadius: 0, tension: 0, order: 2,
 },
 {
 label: 'Record Submissions', data: bestScatterData, type: 'scatter',
 backgroundColor: HF_ORANGE, borderColor: '#ffffff', borderWidth: 2,
 pointRadius: 7, pointHoverRadius: 9, pointStyle: 'circle', order: 1,
 },
 {
 label: 'Non-Record Submissions', data: nonBestData, type: 'scatter',
 backgroundColor: NON_BEST_COLOR, borderColor: '#ffffff', borderWidth: 1.5,
 pointRadius: 5, pointHoverRadius: 7, pointStyle: 'circle', order: 0,
 },
 ],
 },
 options: {
 responsive: true, maintainAspectRatio: false,
 layout: { padding: { top: 40, right: 30, bottom: 10, left: 10 } },
 plugins: {
 legend: { display: false },
 tooltip: {
 backgroundColor: '#1f2937', borderColor: 'rgba(255, 157, 0, 0.4)',
 borderWidth: 1, cornerRadius: 8, padding: 12,
 titleFont: { family: "'Source Sans 3', sans-serif", size: 13, weight: '700' },
 bodyFont: { family: "'JetBrains Mono', monospace", size: 12 },
 titleColor: '#fff', bodyColor: '#d1d5db',
 callbacks: {
 title: (items) => items[0]?.raw?.agent || '',
 label: (item) => {
 const d = new Date(item.raw.x);
 return [`${CONFIG.metric_name}: ${item.raw.y.toFixed(CONFIG.metric_format)}`, `Date: ${d.toLocaleString()}`];
 },
 },
 },
 },
 scales: {
 x: {
 type: 'linear', min: minDate - datePadding, max: extendedEnd,
 grid: { color: GRID_COLOR, drawBorder: false }, border: { display: false },
 ticks: {
 color: TICK_COLOR, font: { family: "'JetBrains Mono', monospace", size: 10 },
 callback(value) { return new Date(value).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }); },
 maxTicksLimit: 10,
 },
 title: { display: true, text: 'Time (UTC)', color: AXIS_LABEL_COLOR, font: { family: "'Source Sans 3', sans-serif", size: 12, weight: '600' } },
 },
 y: {
 min: minScore - scorePadding, max: maxScore + scorePadding,
 grid: { color: GRID_COLOR, drawBorder: false }, border: { display: false },
 ticks: {
 color: TICK_COLOR, font: { family: "'JetBrains Mono', monospace", size: 10 },
 callback: (v) => v.toFixed(2),
 },
 title: {
 display: true,
 text: `${CONFIG.metric_name} (${IS_LOWER_BETTER ? 'lower' : 'higher'} is better)`,
 color: AXIS_LABEL_COLOR, font: { family: "'Source Sans 3', sans-serif", size: 12, weight: '600' },
 },
 },
 },
 interaction: { mode: 'nearest', intersect: true },
 },
 plugins: [bestLabelsPlugin, nonBestLabelsPlugin],
 });
 }
 // ────────────────────────────────────────────
 // RENDER ALL
 // ────────────────────────────────────────────
 function renderAll(entries) { renderStats(entries); renderTable(entries); renderChart(entries); }
 // ────────────────────────────────────────────
 // REFRESH
 // ────────────────────────────────────────────
 async function refreshData() {
 const btn = document.getElementById('refresh-btn');
 const status = document.getElementById('refresh-status');
 btn.disabled = true; btn.classList.add('refresh-btn--loading');
 status.className = 'refresh-status'; status.textContent = 'Fetching LEADERBOARD.md\u2026';
 try {
 const entries = await fetchLeaderboard();
 renderAll(entries);
 status.className = 'refresh-status refresh-status--ok';
 status.textContent = `Updated \u2014 ${entries.length} entries loaded`;
 } catch (err) {
 console.error('Refresh failed:', err);
 status.className = 'refresh-status refresh-status--error';
 status.textContent = `Failed: ${err.message}`;
 } finally { btn.disabled = false; btn.classList.remove('refresh-btn--loading'); }
 }
 // ────────────────────────────────────────────
 // INIT
 // ────────────────────────────────────────────
 (async function init() {
 const status = document.getElementById('refresh-status');
 try {
 const entries = await fetchLeaderboard();
 renderAll(entries);
 status.className = 'refresh-status refresh-status--ok';
 status.textContent = `Live \u2014 ${entries.length} entries`;
 } catch (err) {
 console.warn('Live fetch failed, using fallback data:', err.message);
 renderAll(CONFIG.fallback_entries);
 status.className = 'refresh-status';
 status.textContent = 'Using cached data (fetch unavailable)';
 }
 })();
 </script>
</body>
</html>

Xet Storage Details

Size:
32.7 kB
·
Xet hash:
3fef0107fa17fd5d3da685eaca74eacf8340568d386e45b3ca4bb55b61008fab

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.