Download index.html from Glint-Research/Tiny-ML-Leaderboard: direct link, hf CLI and curl.
- Browser
- Download file 82.5 kB
-
https://huggingface.co/spaces/Glint-Research/Tiny-ML-Leaderboard/resolve/dc5e09c403c32c029582b0fe2d87fccec38b7b67/index.html
- Command line
-
hf download hf://spaces/Glint-Research/Tiny-ML-Leaderboard@dc5e09c403c32c029582b0fe2d87fccec38b7b67/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Glint-Research/Tiny-ML-Leaderboard/resolve/dc5e09c403c32c029582b0fe2d87fccec38b7b67/index.html
82.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tiny-ML Leaderboard</title> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3"></script> | |
| <style> | |
| :root { | |
| --bg: #0d1117; | |
| --bg-warm: #161b22; | |
| --card: #161b22; | |
| --card-hover: #1c2129; | |
| --border: #30363d; | |
| --border-light: #21262d; | |
| --text: #c9d1d9; | |
| --text-secondary: #8b949e; | |
| --text-muted: #484f58; | |
| --accent: #58a6ff; | |
| --green: #3fb950; | |
| --orange: #d29922; | |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); | |
| --shadow-md: 0 4px 12px rgba(0,0,0,0.35); | |
| --radius: 12px; | |
| --radius-sm: 8px; | |
| --radius-xs: 6px; | |
| --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| --compactai: #3fb950; | |
| --supralabs: #58a6ff; | |
| --axiomiclabs: #c2b6ff; | |
| --mihaipopa: #93c6aa; | |
| --cromia: #ffffff; | |
| --wop: #ff9b50; | |
| --GODELEV: #1a56db; | |
| --finnianx: #06b6d4; | |
| --ivmelabs: #ff0000; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .shell { | |
| max-width: 1240px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| .welcome { padding: 1rem 0 1.5rem; } | |
| .welcome h1 { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| margin-bottom: 4px; | |
| } | |
| .welcome p { color: var(--text-secondary); font-size: 0.95rem; } | |
| .stat-row { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); | |
| gap: 12px; | |
| margin-bottom: 1.5rem; | |
| } | |
| .stat-pill { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 1rem 1.15rem; | |
| transition: box-shadow var(--transition), transform var(--transition); | |
| } | |
| .stat-pill:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } | |
| .stat-pill .label { | |
| font-size: 0.72rem; font-weight: 600; text-transform: uppercase; | |
| letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 3px; | |
| } | |
| .stat-pill .value { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; } | |
| .stat-pill .sub { font-size: 0.75rem; color: var(--text-secondary); margin-top: 1px; } | |
| .info-banner { | |
| background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); | |
| padding: 1rem 1.15rem; margin-bottom: 1.5rem; font-size: 0.88rem; line-height: 1.6; | |
| display: flex; align-items: flex-start; gap: 10px; | |
| } | |
| .info-banner svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--accent); } | |
| .info-banner a { color: var(--accent); text-decoration: none; } | |
| .info-banner a:hover { text-decoration: underline; } | |
| .info-banner.clickable { cursor: pointer; user-select: none; } | |
| .info-banner.clickable:hover { border-color: var(--accent); } | |
| .banner-expand { | |
| max-height: 0; overflow: hidden; | |
| transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease; | |
| opacity: 0; margin-top: 0; | |
| } | |
| .banner-expand.open { | |
| max-height: 300px; opacity: 1; margin-top: 10px; | |
| } | |
| .banner-expand-inner { | |
| padding: 0.85rem 1rem; background: var(--bg); border-radius: var(--radius-xs); | |
| border: 1px solid var(--border-light); font-size: 0.84rem; color: var(--text-secondary); line-height: 1.65; | |
| } | |
| .banner-expand-inner code { | |
| background: rgba(88,166,255,0.1); padding: 1px 5px; border-radius: 3px; | |
| font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.82rem; color: var(--accent); | |
| } | |
| .banner-hint { | |
| font-size: 0.75rem; color: var(--text-muted); margin-left: 6px; | |
| transition: transform 0.25s ease; display: inline-block; | |
| } | |
| .banner-hint.rotated { transform: rotate(180deg); } | |
| .section { margin-bottom: 1.5rem; } | |
| .timeline-toolbar { | |
| display: flex; align-items: center; gap: 6px; | |
| margin-bottom: 10px; | |
| overflow-x: auto; -webkit-overflow-scrolling: touch; | |
| scrollbar-width: none; | |
| padding-bottom: 2px; | |
| } | |
| .timeline-toolbar::-webkit-scrollbar { display: none; } | |
| .tl-sep { | |
| width: 1px; height: 18px; background: var(--border); | |
| margin: 0 4px; flex-shrink: 0; | |
| } | |
| .timeline { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| } | |
| .tl-month { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 10px 16px; | |
| background: var(--bg-warm); | |
| border-bottom: 1px solid var(--border); | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--text-secondary); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1; | |
| } | |
| .tl-month .tl-month-count { | |
| margin-left: auto; | |
| font-weight: 500; | |
| text-transform: none; | |
| letter-spacing: 0; | |
| color: var(--text-muted); | |
| font-size: 0.74rem; | |
| } | |
| .tl-row { | |
| display: grid; | |
| grid-template-columns: 92px 1fr auto auto; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 11px 16px; | |
| border-bottom: 1px solid var(--border-light); | |
| transition: background var(--transition); | |
| } | |
| .tl-row:last-child { border-bottom: none; } | |
| .tl-row:hover { background: var(--card-hover); } | |
| .tl-date { | |
| font-variant-numeric: tabular-nums; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .tl-date::before { | |
| content: ''; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--org-color, var(--text-muted)); | |
| flex-shrink: 0; | |
| box-shadow: 0 0 0 3px rgba(255,255,255,0.04); | |
| } | |
| .tl-name { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| min-width: 0; | |
| } | |
| .tl-name a { | |
| color: var(--text); | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 0.88rem; | |
| letter-spacing: -0.01em; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .tl-name a:hover { color: var(--accent); } | |
| .tl-params { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| font-variant-numeric: tabular-nums; | |
| white-space: nowrap; | |
| } | |
| .tl-org { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 2px 9px; | |
| border-radius: 4px; | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| } | |
| @media (max-width: 640px) { | |
| .tl-row { | |
| grid-template-columns: 78px 1fr; | |
| grid-template-areas: "date name" "date extras"; | |
| row-gap: 4px; | |
| } | |
| .tl-date { grid-area: date; } | |
| .tl-name { grid-area: name; } | |
| .tl-params { grid-area: extras; justify-self: end; } | |
| .tl-org { grid-area: extras; justify-self: end; } | |
| } | |
| .tl-empty { | |
| padding: 24px 16px; | |
| text-align: center; | |
| color: var(--text-muted); | |
| font-size: 0.84rem; | |
| } | |
| .section-head { | |
| display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; | |
| } | |
| .section-head h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; } | |
| .section-head .badge { | |
| font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 100px; | |
| background: var(--bg-warm); color: var(--text-secondary); border: 1px solid var(--border); | |
| } | |
| .section-head .head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } | |
| .sort-control { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| background: var(--bg-warm); border: 1px solid var(--border); | |
| border-radius: 100px; padding: 2px 4px 2px 12px; | |
| font-size: 0.68rem; font-weight: 600; color: var(--text-muted); | |
| text-transform: uppercase; letter-spacing: 0.05em; | |
| } | |
| .sort-control select { | |
| background: transparent; border: none; color: var(--text); | |
| font-size: 0.76rem; font-weight: 600; text-transform: none; letter-spacing: 0; | |
| padding: 4px 26px 4px 8px; border-radius: 100px; cursor: pointer; outline: none; | |
| appearance: none; -webkit-appearance: none; -moz-appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; background-position: right 8px center; | |
| transition: background-color var(--transition); | |
| } | |
| .sort-control select:hover { background-color: var(--bg); } | |
| .sort-control select:focus { box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3); } | |
| .sort-control select option { background: var(--bg-warm); color: var(--text); } | |
| .table-wrap { | |
| background: var(--card); border: 1px solid var(--border); | |
| border-radius: var(--radius); overflow: hidden; | |
| } | |
| .table-toolbar { | |
| display: flex; align-items: center; gap: 6px; padding: 10px 14px; | |
| border-bottom: 1px solid var(--border-light); overflow-x: auto; -webkit-overflow-scrolling: touch; | |
| } | |
| .filter-chip { | |
| display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; | |
| border-radius: 100px; font-size: 0.76rem; font-weight: 500; color: var(--text-secondary); | |
| background: var(--bg); border: 1px solid var(--border); cursor: pointer; | |
| transition: all var(--transition); white-space: nowrap; user-select: none; | |
| } | |
| .filter-chip:hover { border-color: var(--accent); color: var(--text); } | |
| .filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } | |
| .filter-chip .dot { width: 7px; height: 7px; border-radius: 50%; } | |
| .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } | |
| table { width: 100%; border-collapse: collapse; font-size: 0.84rem; } | |
| thead { position: sticky; top: 0; z-index: 2; } | |
| th { | |
| background: #1c2129; padding: 9px 12px; text-align: left; font-weight: 600; | |
| font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.05em; | |
| color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; | |
| } | |
| td { | |
| padding: 10px 12px; border-bottom: 1px solid var(--border-light); | |
| transition: background var(--transition); | |
| } | |
| tr:last-child td { border-bottom: none; } | |
| tbody tr { transition: background var(--transition); } | |
| .lb-row.hover td { background: var(--bg-warm); } | |
| .cell-rank { width: 42px; text-align: center; font-weight: 700; color: var(--text-muted); font-size: 0.82rem; } | |
| .cell-rank .medal { font-size: 1rem; } | |
| .cell-rank.rank-1 { color: #ffd700; } | |
| .cell-rank.rank-2 { color: #c0c0c0; } | |
| .cell-rank.rank-3 { color: #cd7f32; } | |
| .cell-model { min-width: 150px; } | |
| .model-name { font-weight: 600; letter-spacing: -0.01em; } | |
| .model-params { font-size: 0.73rem; color: var(--text-muted); margin-top: 1px; } | |
| .org-tag { | |
| display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; | |
| border-radius: 4px; font-size: 0.73rem; font-weight: 600; white-space: nowrap; | |
| } | |
| .org-tag .org-dot { width: 6px; height: 6px; border-radius: 50%; } | |
| .cell-metric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 75px; } | |
| .info-icon { cursor: help; opacity: 0.5; font-size: 0.85em; vertical-align: middle; } | |
| .info-icon:hover { opacity: 1; } | |
| .metric-val { font-weight: 600; font-size: 0.84rem; } | |
| .metric-na { color: var(--text-muted); font-style: italic; font-weight: 400; font-size: 0.78rem; } | |
| .best { color: var(--green); font-weight: 700; } | |
| .cell-links { white-space: nowrap; } | |
| .cell-links a { | |
| display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; | |
| border-radius: var(--radius-xs); font-size: 0.73rem; font-weight: 500; | |
| color: var(--accent); text-decoration: none; transition: all var(--transition); | |
| } | |
| .cell-links a:hover { background: rgba(88,166,255,0.1); } | |
| .cell-tokens { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; } | |
| .cell-date { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; } | |
| .chart-grid { | |
| display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 1.5rem; | |
| } | |
| .chart-card { | |
| background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); | |
| padding: 1.15rem; transition: box-shadow var(--transition); | |
| } | |
| .chart-card:hover { box-shadow: var(--shadow-sm); } | |
| .chart-card.full { grid-column: 1 / -1; } | |
| .chart-card h3 { font-size: 0.88rem; font-weight: 600; margin-bottom: 3px; } | |
| .chart-card .chart-sub { font-size: 0.73rem; color: var(--text-muted); margin-bottom: 10px; } | |
| .chart-card canvas { max-height: 500px; } | |
| .legend-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } | |
| .legend-bar .legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-secondary); } | |
| .legend-bar .ldot { width: 8px; height: 8px; border-radius: 50%; } | |
| .eff-note { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 0.72rem; color: var(--text-muted); } | |
| .eff-note span { display: flex; align-items: center; gap: 5px; } | |
| .eff-note .line-sample { width: 18px; height: 2px; border-radius: 1px; } | |
| .timeline-bubble-wrap { position: relative; } | |
| .timeline-custom-tooltip { | |
| position: absolute; pointer-events: none; background: #1c2129; | |
| border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; | |
| font-size: 0.78rem; color: var(--text); box-shadow: var(--shadow-md); | |
| opacity: 0; transition: opacity 0.15s ease; z-index: 10; white-space: nowrap; | |
| } | |
| .timeline-custom-tooltip.visible { opacity: 1; } | |
| .timeline-custom-tooltip .tt-name { font-weight: 600; margin-bottom: 2px; } | |
| .timeline-custom-tooltip .tt-val { color: var(--text-secondary); } | |
| .wiki-bubble-wrap { position: relative; } | |
| .wiki-custom-tooltip { | |
| position: absolute; pointer-events: none; background: #1c2129; | |
| border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; | |
| font-size: 0.78rem; color: var(--text); box-shadow: var(--shadow-md); | |
| opacity: 0; transition: opacity 0.15s ease; z-index: 10; white-space: nowrap; | |
| } | |
| .wiki-custom-tooltip.visible { opacity: 1; } | |
| .wiki-custom-tooltip .tt-name { font-weight: 600; margin-bottom: 2px; } | |
| .wiki-custom-tooltip .tt-val { color: var(--text-secondary); } | |
| .cta-card { | |
| background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); | |
| padding: 1.25rem; display: flex; align-items: center; justify-content: space-between; | |
| gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; | |
| } | |
| .cta-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 3px; } | |
| .cta-card p { font-size: 0.84rem; color: var(--text-secondary); max-width: 520px; line-height: 1.55; } | |
| .cta-btn { | |
| display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; | |
| border-radius: var(--radius-sm); background: var(--accent); color: #fff; | |
| font-size: 0.84rem; font-weight: 600; text-decoration: none; border: none; | |
| cursor: pointer; transition: all var(--transition); flex-shrink: 0; | |
| } | |
| .cta-btn:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: var(--shadow-md); } | |
| footer { | |
| margin-top: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--border); | |
| font-size: 0.78rem; color: var(--text-muted); text-align: center; line-height: 1.6; | |
| } | |
| footer a { color: var(--accent); text-decoration: none; } | |
| footer a:hover { text-decoration: underline; } | |
| /* ─── Loading Screen ─── */ | |
| #loading-screen { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 9999; | |
| background: #18181b; | |
| display: grid; | |
| place-items: center; | |
| transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.55s; | |
| } | |
| #loading-screen.hidden { | |
| opacity: 0; | |
| visibility: hidden; | |
| pointer-events: none; | |
| } | |
| #main-content { | |
| transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| #main-content.loading { | |
| opacity: 0; | |
| } | |
| @keyframes fadeUp { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .anim { animation: fadeUp 0.45s cubic-bezier(0.4,0,0.2,1) both; } | |
| .d1 { animation-delay: .04s; } | |
| .d2 { animation-delay: .08s; } | |
| .d3 { animation-delay: .12s; } | |
| .d4 { animation-delay: .16s; } | |
| .d5 { animation-delay: .20s; } | |
| .d6 { animation-delay: .24s; } | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } | |
| @media (max-width: 1024px) { | |
| .chart-grid { grid-template-columns: 1fr; } | |
| .chart-card.full { grid-column: 1; } | |
| } | |
| @media (max-width: 768px) { | |
| .shell { padding: 1rem; } | |
| .stat-row { grid-template-columns: repeat(2, 1fr); } | |
| .welcome h1 { font-size: 1.4rem; } | |
| table { font-size: 0.76rem; } | |
| th, td { padding: 7px 8px; } | |
| .cta-card { flex-direction: column; align-items: flex-start; } | |
| } | |
| @media (max-width: 480px) { | |
| .stat-row { grid-template-columns: 1fr; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Loading Screen --> | |
| <div id="loading-screen"> | |
| <div class="ai-drop-logo-202606" data-duration="0.9" data-path-stagger="0.19" data-stroke-width="3" data-split-pieces="48" data-order="outside-in" aria-label="Animated logo intro"> | |
| <style> | |
| .ai-drop-logo-202606{ | |
| --logo-size:min(72vmin,560px); | |
| --stroke-color:#FAFAF9; | |
| --duration:.9s; | |
| --fill-delay:2.2s; | |
| width:var(--logo-size); | |
| aspect-ratio:1/1; | |
| display:grid; | |
| place-items:center; | |
| position:relative; | |
| overflow:hidden; | |
| border-radius:0; | |
| background:transparent; | |
| isolation:isolate; | |
| } | |
| .ai-drop-logo-202606, | |
| .ai-drop-logo-202606 *{box-sizing:border-box;} | |
| .ai-drop-logo-202606 > svg{ | |
| width:100%; | |
| height:100%; | |
| display:block; | |
| overflow:visible; | |
| filter:drop-shadow(0 10px 24px rgba(0,0,0,.12)); | |
| animation:aiLogoCameraIn202606 1.15s cubic-bezier(.2,.8,.18,1) both; | |
| } | |
| .ai-drop-logo-202606 .ai-static-bg-202606{display:none ;} | |
| .ai-drop-logo-202606 .ai-fill-source-202606{ | |
| opacity:0; | |
| stroke:transparent; | |
| fill:transparent; | |
| pointer-events:none; | |
| animation:aiLogoFillIn202606 .32s ease forwards; | |
| animation-delay:var(--fill-delay); | |
| } | |
| .ai-drop-logo-202606 .ai-draw-segment-202606{ | |
| stroke:var(--stroke-color); | |
| stroke-width:var(--stroke-width,.4); | |
| stroke-linecap:round; | |
| stroke-linejoin:round; | |
| vector-effect:non-scaling-stroke; | |
| fill:transparent; | |
| opacity:1; | |
| pointer-events:none; | |
| stroke-dasharray:0 var(--path-length); | |
| stroke-dashoffset:var(--dash-offset); | |
| animation:aiLogoDrawSegment202606 var(--segment-duration,.12s) cubic-bezier(.32,.02,.11,1) forwards; | |
| animation-delay:var(--delay,0s); | |
| } | |
| .ai-drop-logo-202606::after{ | |
| content:""; | |
| position:absolute; | |
| inset:-20%; | |
| pointer-events:none; | |
| opacity:0; | |
| mix-blend-mode:screen; | |
| background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.1) 48%,rgba(255,255,255,.3) 52%,transparent 65%); | |
| transform:translateX(-90%) skewX(-16deg); | |
| animation:aiLogoSweep202606 .65s ease 1.55s both; | |
| } | |
| @keyframes aiLogoDrawSegment202606{to{stroke-dasharray:var(--segment-length) var(--path-length);}} | |
| @keyframes aiLogoFillIn202606{to{opacity:1;}} | |
| @keyframes aiLogoCameraIn202606{0%{opacity:0;transform:scale(.94);filter:blur(7px) drop-shadow(0 10px 24px rgba(0,0,0,.12));}55%{opacity:1;filter:blur(0) drop-shadow(0 10px 24px rgba(0,0,0,.12));}100%{opacity:1;transform:scale(1);}} | |
| @keyframes aiLogoSweep202606{0%{opacity:0;transform:translateX(-90%) skewX(-16deg);}25%{opacity:1;}100%{opacity:0;transform:translateX(90%) skewX(-16deg);}} | |
| /* Modal styles */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.5); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| } | |
| .modal-card { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 2rem; | |
| width: 90%; | |
| max-width: 400px; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .modal-card h3 { | |
| margin-top: 0; | |
| } | |
| .modal-card ul { | |
| text-align: left; | |
| padding-left: 1.2rem; | |
| } | |
| .modal-card .cta-btn { | |
| margin-right: 0.5rem; | |
| } | |
| .close-btn { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| } | |
| </style> | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2000" height="2000" viewBox="0 0 2000 2000" role="img" aria-label="Logo"> | |
| <path fill="#FAFAF9" d="M0 0L2000 0L2000 2000L0 2000L0 0Z"/> | |
| <path fill="#0E0E0D" d="M594.2 131.344C634.565 130.294 674.831 131.682 715.189 131.899C769.916 132.193 824.404 131.059 879.096 133.595C886.024 140.302 893.025 148.361 900.005 155.402L966.412 222.938C951.074 238.646 935.625 253.012 920.026 268.365C913.337 262.054 906.522 254.203 899.959 247.5C883.415 230.614 866.679 213.918 849.753 197.415C771.305 195.91 692.84 195.573 614.383 196.405C605.573 203.954 592.363 218.097 583.492 226.96L524.782 284.673C512.219 297.249 492.442 318.172 479.279 329.132C481.785 332.897 483.963 336.87 485.791 341.006C497.48 367.732 496.197 391.425 485.653 417.947C491.053 423.815 497.197 429.705 502.886 435.362C544.401 476.647 586.221 517.608 627.594 559.041C630.165 558.093 632.755 557.196 635.362 556.349C665.786 546.485 686.998 551.289 714.634 565.318C722.523 555.062 736.099 542.689 745.555 532.851L817.813 458.766L1019.14 251.556L1093.32 175.347C1105.89 162.43 1118.84 150.148 1130.73 136.58C1160.87 135.523 1194.23 136.854 1224.87 136.89C1292.6 136.877 1360.33 137.431 1428.04 138.554C1471.38 182.779 1519.67 227.775 1564.05 271.502C1646.16 238.938 1719.27 309.891 1689.68 394.149C1739.32 444.155 1790.56 492.725 1840.64 542.222C1841.21 557.147 1840.15 575.886 1840.03 591.207C1840.12 625.823 1839.8 660.439 1839.09 695.048L1837.56 897.671C1828.6 907.806 1813.32 922.229 1803.34 932.207L1737.98 997.455L1844.59 1104.07C1845.17 1218.99 1844.84 1333.92 1843.59 1448.84C1794.96 1498.47 1742.65 1547.76 1694.93 1597.85C1703.98 1619.46 1704.46 1643.71 1696.26 1665.65C1687.84 1689.18 1670.18 1708.27 1647.38 1718.5C1622.78 1729.63 1597.69 1729.69 1572.7 1720.1C1557.1 1734.46 1539.66 1752.79 1524.51 1767.95L1435.98 1856.49L1121.35 1860.76C1109.44 1849.3 1098.82 1837.51 1087.21 1825.84L968.603 1705.19L899.885 1635.45C887.282 1622.82 867.467 1604.27 856.346 1591.17C843.087 1576.26 822.712 1557.61 808.17 1542.73C779.607 1513.5 750.216 1482.6 721.267 1453.87C686.025 1472.29 658.88 1470.89 623.846 1453.51C615.504 1464.35 593.218 1485.33 582.706 1496.63C554.755 1526.67 523.1 1556.46 495.774 1586.82C508.674 1618.81 508.462 1646.71 490.593 1676.88C501.723 1688.55 512.775 1698.47 524.16 1709.74L617.151 1801.63C629.401 1801.87 642.124 1801.93 654.346 1801.3C721.783 1797.84 791.778 1800.29 858.914 1795.48C880.141 1774.28 902.383 1754.14 923.539 1732.96C938.164 1747.69 954.047 1764.91 968.376 1780.08C943.148 1806.1 911.417 1834.58 885.036 1860.33L696.748 1865.16C663.707 1866 623.269 1868.33 591.299 1867.7C579.767 1856.78 568.207 1844.48 556.7 1833.29L438.527 1717.11C420.513 1722.23 403.708 1722.91 385.528 1717.81C361.811 1711.29 341.649 1695.63 329.467 1674.27C316.396 1650.97 313.789 1626.42 320.97 1600.81C312.401 1591.4 296.463 1576.92 286.588 1567.06L186.508 1468.06C185.434 1407.57 186.735 1349.31 187.014 1289.06C186.809 1228.04 186.971 1167.02 187.5 1106C204.834 1089.04 224.205 1068.14 241.161 1050.57L316.015 973.696L586.336 696.194C566.315 665.744 568.162 636.782 580.388 604.175C573.538 596.43 562.669 586.143 555.152 578.618C538.46 561.626 521.482 544.918 504.225 528.5C482.616 507.71 460.99 485.515 439.769 464.236C434.267 466.829 428.529 468.891 422.635 470.393C396.621 477.08 371.886 471.573 349.21 458.143C343.837 463.724 338.205 469.115 332.5 474.357C304.301 500.266 278.411 530.489 249.654 555.633C248.519 565.856 249.552 584.308 249.75 595.155C249.963 613.433 250.047 631.713 250 649.992L250.903 764.121C251.036 799.829 250.514 836.308 251.515 871.926C268.537 889.056 285.118 906.684 302.361 923.96C288.399 938.378 270.627 954.782 255.981 969.37C232.844 946.484 210.715 923.138 187.663 900.13C185.852 885.656 186.075 864.125 186.068 849L186.007 772.339C185.202 721.388 184.861 670.431 184.984 619.473C184.772 589.277 183.838 559.131 184.533 528.945C225.147 487.709 268.895 446.515 309.97 405.481C305.762 389.372 304.739 375.483 308.434 359.043C313.806 334.43 328.896 313.032 350.276 299.707C375.568 284.122 399.02 282.528 427.09 289.229L533.691 184.79L567.811 150.495C573.498 144.784 579.467 138.795 585.365 133.25C587.835 130.928 590.456 131.53 594.2 131.344Z"/> | |
| <path fill="#FAFAF9" d="M1159.64 201.313C1177.23 200.596 1204.85 201.966 1223.67 202.01L1400.61 203.359C1410.17 210.436 1430.86 232.414 1440.33 241.71L1518.06 317.502C1505.1 349.927 1506.44 372.792 1522.02 404.027C1515.63 413.052 1486.14 443.097 1477.17 452.603C1448.47 483.01 1419.7 514.957 1390.68 544.93C1361.05 528.982 1331.53 531.097 1301.99 545.427L1084.48 329.992C1068.94 345.461 1054.33 361.1 1038.96 376.514L1259.3 594.835C1251.77 614.262 1251.14 635.683 1257.5 655.522C1265.37 680.03 1280.97 699.327 1303.93 711.12C1326.13 722.789 1352.13 724.922 1375.94 717.029C1399.77 709.434 1419.56 692.595 1430.86 670.286C1443.83 644.49 1443.32 619.889 1434.59 593.074C1452.99 574.784 1472.87 552.54 1490.75 533.411L1572.66 445.729C1602.22 454.17 1616.62 452.142 1644.92 441.492C1656 452.104 1666.97 463.675 1678.05 474.462C1710.53 505.612 1742.67 537.111 1774.47 568.952C1775.45 611.807 1774.69 652.219 1774.3 694.824C1774.03 753.476 1773.42 812.126 1772.49 870.771C1760.47 884.279 1740.19 903.304 1726.96 916.539L1636.12 1007.38L1368.11 1275.23C1347.83 1266.87 1325.21 1266.12 1304.42 1273.1C1266.63 1285.58 1242.19 1318.43 1239.56 1358.05C1238.61 1372.23 1241.84 1383.82 1246.17 1397.14C1225.42 1419.29 1200.11 1443.36 1178.39 1465.07L1041.61 1601.95C1056.21 1617.2 1072.55 1632.98 1087.55 1648L1208.69 1526.84L1290.04 1445.63C1319.23 1459.96 1343.31 1459.31 1373 1447.66L1522.68 1594.19C1510.74 1626.19 1511.29 1644.32 1524.48 1675.86C1513.36 1688.06 1497.46 1703.09 1485.55 1715L1409.03 1791.55C1354.1 1792.85 1299.17 1793.68 1244.23 1794.02C1211.31 1794.31 1180.03 1795.07 1147 1794.61C1141.19 1786.55 1116.17 1762.69 1107.24 1753.76L1035.13 1680.68L762.042 1402.49C767.413 1386.53 768.291 1369.39 764.58 1352.96C758.86 1328.39 744.288 1306.71 722.668 1293.44C701.407 1280.19 675.741 1275.98 651.358 1281.72C626.673 1287.42 605.379 1302.94 592.393 1324.69C577.378 1349.83 576.318 1374.23 583.458 1401.84C551.598 1436.75 516.39 1470.62 483.964 1505.17C472.532 1517.35 460.075 1529.03 449.03 1541.59C442.996 1539.05 436.747 1537.06 430.357 1535.63C405.766 1530.22 381.92 1534.7 360.708 1548.25C350.199 1540.05 324.183 1512.84 313.787 1502.32C293.468 1481.75 271.245 1461.43 251.502 1440.79C249.815 1388.06 251.293 1333.32 251.872 1280.51C252.414 1231.17 251.152 1181.22 252.484 1131.97C345.725 1037.5 438.406 942.49 530.522 846.93C566.095 810.384 602.778 771.192 638.997 735.628C714.621 753.562 773.903 692.194 754.748 616.85L1012.49 351.996L1117.5 244.044C1131.26 230.159 1145.17 214.271 1159.64 201.313Z"/> | |
| <path fill="#0E0E0D" d="M992.499 487.677C996.624 487.107 1002.52 487.146 1006.83 487.144C1086.25 487.102 1149.24 556.275 1143.1 635.239C1141.78 652.279 1137.53 664.578 1131.81 680.111C1149.79 699.742 1176.07 724.542 1195.58 744.051L1323.59 872C1331.67 868.439 1339.82 865.077 1348.32 862.638C1413.76 843.848 1482.33 875.978 1510.65 937.376C1526.23 970.778 1527.58 1009.07 1514.4 1043.49C1502.01 1077.2 1476.62 1104.53 1443.92 1119.37C1406.01 1136.67 1371.36 1136.19 1332.9 1121.77C1309.94 1143.23 1284.23 1170.27 1261.54 1192.96L1132.82 1321.83C1136.44 1331.45 1139.17 1339.98 1141.07 1350.14C1147.68 1386.24 1139.61 1423.49 1118.65 1453.62C1097.22 1484.78 1065.4 1503.48 1028.56 1510.46C1004.07 1515.03 977.487 1511.48 954.472 1502.29C920.435 1488.85 893.317 1462.17 879.337 1428.35C863.222 1390.42 865.46 1355.88 880.468 1318.3C874.09 1310.93 863.543 1301 856.495 1293.95L813.304 1250.77L685.45 1123.07C615.743 1147.93 540.036 1119.27 509.918 1050.45C494.85 1016.6 494.189 978.083 508.086 943.74C521.377 909.563 548.046 882.296 581.92 868.251C621.762 851.539 655.866 854.734 694.85 870.512C702.508 863.471 710.541 855.155 717.874 847.649C771.725 792.525 828.205 739.233 881.59 683.723C875.646 669.312 871.522 657.643 869.427 642.006C864.825 605.163 875.175 568.012 898.163 538.856C921.361 509.026 955.423 492.29 992.499 487.677Z"/> | |
| <path fill="#FAFAF9" d="M1083.38 738.149C1089.65 740.863 1251.77 905.286 1268.93 922.407C1260.26 936.622 1254.14 952.243 1250.85 968.564C1243.05 1007.42 1252.64 1042.65 1274.13 1075.24C1253.6 1096.73 1230.35 1119.09 1209.22 1140.23L1086.25 1263.11C1071.45 1252.85 1054.91 1245.38 1037.43 1241.07C1002.56 1232.59 965.741 1238.33 935.099 1257.01L928.419 1260.95L745.525 1077.91C780.129 1025.96 782.851 973.782 750.921 919.588C809.628 859.494 871.229 799.25 930.747 739.732C979.743 769.722 1035.08 770.055 1083.38 738.149Z"/> | |
| <path fill="#0E0E0D" d="M396.456 1038.93L623.371 1265.96C608.779 1281.1 592.811 1296.59 577.893 1311.54C574.008 1309.98 367.417 1101.93 350.542 1084.99L396.456 1038.93Z"/> | |
| <path fill="#0E0E0D" d="M1438.57 700.843C1443.99 703.679 1486.1 747.49 1492.84 754.234L1661.42 922.991L1616.21 968.232C1611.12 966.286 1412.9 766.244 1392.88 746.523L1438.57 700.843Z"/> | |
| <path fill="#FAFAF9" d="M1691.82 1043.73C1697.92 1048.52 1714.81 1066.17 1720.81 1072.18L1779.43 1130.88C1781.31 1191.96 1779.3 1253.13 1779.17 1314.21C1779.1 1350.18 1779.45 1386.15 1778.45 1422.11C1736.08 1464.5 1693.52 1507.78 1650.71 1549.64L1648.93 1548.82C1619.5 1535.37 1598.01 1536.72 1568.5 1547.98L1538.22 1517.73C1524.92 1506.67 1507.27 1487.68 1494.53 1475.11L1418.99 1401.5C1431.19 1372.36 1430.21 1347.34 1416.62 1319.06C1444.48 1289.21 1480.03 1255.5 1509.25 1226.28L1691.82 1043.73Z"/> | |
| </svg> | |
| <script> | |
| (() => { | |
| const script = document.currentScript; | |
| const root = script && script.closest('.ai-drop-logo-202606'); | |
| if (!root || root.dataset.aiLogoReady === 'true') return; | |
| root.dataset.aiLogoReady = 'true'; | |
| const svg = root.querySelector('svg'); | |
| const duration = parseFloat(root.dataset.duration || '0.9'); | |
| const pathStagger = parseFloat(root.dataset.pathStagger || '0.19'); | |
| const strokeWidth = parseFloat(root.dataset.strokeWidth || '0.4'); | |
| const splitPieces = parseInt(root.dataset.splitPieces || '48', 10); | |
| const order = root.dataset.order || 'outside-in'; | |
| const MAX_SEGMENTS = 2600; | |
| svg.removeAttribute('width'); | |
| svg.removeAttribute('height'); | |
| svg.setAttribute('preserveAspectRatio','xMidYMid meet'); | |
| root.style.setProperty('--stroke-width', strokeWidth); | |
| const shapes = [...svg.querySelectorAll('path,line,polyline,polygon,circle,ellipse,rect')]; | |
| const candidates = shapes.filter((el, index) => { | |
| const d = (el.getAttribute('d') || '').replace(/\s+/g,''); | |
| const isFullBg = index === 0 && d === 'M00L20000L20002000L02000L00Z'; | |
| if (isFullBg) { | |
| el.classList.add('ai-static-bg-202606'); | |
| el.style.display = 'none'; | |
| return false; | |
| } | |
| return true; | |
| }); | |
| candidates.forEach(el => { | |
| el.classList.add('ai-fill-source-202606'); | |
| el.style.fill = 'transparent'; | |
| }); | |
| function lengthOf(el){ | |
| try { return Math.max(1, el.getTotalLength()); } | |
| catch(e){ return 1000; } | |
| } | |
| function orderedSegmentIndex(visualOrder, count){ | |
| if(order === 'reverse') return count - 1 - visualOrder; | |
| if(order === 'inside-out' || order === 'outside-in'){ | |
| const center = (count - 1) / 2; | |
| const sorted = [...Array(count).keys()].sort((a,b) => { | |
| return order === 'inside-out' | |
| ? Math.abs(a - center) - Math.abs(b - center) | |
| : Math.abs(b - center) - Math.abs(a - center); | |
| }); | |
| return sorted[visualOrder]; | |
| } | |
| return visualOrder; | |
| } | |
| requestAnimationFrame(() => { | |
| const lengths = candidates.map(lengthOf); | |
| const requestedTotal = candidates.reduce((sum, el, i) => { | |
| return sum + Math.max(1, Math.min(splitPieces, Math.ceil(lengths[i] / 2))); | |
| }, 0); | |
| const capScale = requestedTotal > MAX_SEGMENTS ? MAX_SEGMENTS / requestedTotal : 1; | |
| let maxEndTime = 0; | |
| candidates.forEach((el, pathIndex) => { | |
| const len = lengths[pathIndex]; | |
| const rawPieces = Math.max(1, Math.min(splitPieces, Math.ceil(len / 2))); | |
| const pieces = Math.max(1, Math.floor(rawPieces * capScale)); | |
| const parent = el.parentNode; | |
| const group = document.createElementNS('http://www.w3.org/2000/svg','g'); | |
| parent.insertBefore(group, el.nextSibling); | |
| el.classList.add('ai-fill-source-202606'); | |
| const chunk = len / pieces; | |
| const internalStep = pieces > 1 ? (duration * 0.82) / pieces : 0; | |
| const segDuration = pieces > 1 ? Math.max(0.06, Math.min(0.4, duration / pieces * 1.55)) : duration; | |
| const pathDelay = pathIndex * pathStagger; | |
| for(let visualOrder = 0; visualOrder < pieces; visualOrder++){ | |
| const segIndex = orderedSegmentIndex(visualOrder, pieces); | |
| const start = segIndex * chunk; | |
| const segLen = segIndex === pieces - 1 ? (len - start) : chunk; | |
| const clone = el.cloneNode(true); | |
| clone.removeAttribute('id'); | |
| clone.removeAttribute('aria-label'); | |
| clone.classList.remove('ai-fill-source-202606'); | |
| clone.classList.add('ai-draw-segment-202606'); | |
| clone.setAttribute('aria-hidden','true'); | |
| clone.style.setProperty('--path-length', len.toFixed(3)); | |
| clone.style.setProperty('--segment-length', Math.max(0.01, segLen + 0.35).toFixed(3)); | |
| clone.style.setProperty('--dash-offset', (-start).toFixed(3)); | |
| clone.style.setProperty('--delay', (pathDelay + visualOrder * internalStep).toFixed(3) + 's'); | |
| clone.style.setProperty('--segment-duration', segDuration.toFixed(3) + 's'); | |
| group.appendChild(clone); | |
| maxEndTime = Math.max(maxEndTime, pathDelay + visualOrder * internalStep + segDuration); | |
| } | |
| }); | |
| root.style.setProperty('--fill-delay', Math.max(0, maxEndTime - 0.04).toFixed(3) + 's'); | |
| // Signal loading completion | |
| const totalAnimationMs = (maxEndTime + 0.32 + 0.3) * 1000; | |
| setTimeout(() => { | |
| const ls = document.getElementById('loading-screen'); | |
| const mc = document.getElementById('main-content'); | |
| if (ls) ls.classList.add('hidden'); | |
| if (mc) mc.classList.remove('loading'); | |
| }, totalAnimationMs); | |
| }); | |
| })(); | |
| </script> | |
| </div> | |
| </div> | |
| <div id="main-content" class="loading"> | |
| <div class="shell"> | |
| <div id="submitModal" class="modal-overlay" style="display:none;"> | |
| <div class="modal-card"> | |
| <span class="close-btn" onclick="closeModal()">×</span> | |
| <h3>Agree to Terms</h3> | |
| <p>Before submitting your model, please confirm that you agree to the following terms:</p> | |
| <ul> | |
| <li>Your model uses acc_norm for evaluation.</li> | |
| <li>For WikiText-2 benchmarks, you have used byte perplexity.</li> | |
| </ul> | |
| <button id="modalAgreeBtn" class="cta-btn">I Agree</button> | |
| <button id="modalCancelBtn" class="cta-btn" style="margin-left:10px;background:var(--border);color:var(--text);">Cancel</button> | |
| </div> | |
| </div> | |
| <div class="welcome anim"> | |
| <h1>Tiny-ML Leaderboard</h1> | |
| <p>Sub-150M parameter language models, same eval harness, transparent methodology.</p> | |
| </div> | |
| <div class="stat-row anim d1" id="stat-row"></div> | |
| <div class="info-banner anim d2"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg> | |
| <div> | |
| <strong>Why this exists.</strong> The community deserves a single place to compare tiny LMs fairly. | |
| We include every model with verifiable benchmarks — ours, our competitors', yours. | |
| <a href="https://huggingface.co/spaces/CompactAI-O/Tiny-ML-Leaderboard/discussions" target="_blank">Submit a model via PR.</a> | |
| </div> | |
| </div> | |
| <div class="info-banner anim d2 clickable" id="unknown-banner" onclick="toggleUnknownBanner()"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg> | |
| <div style="flex:1"> | |
| <div style="display:flex;align-items:center;gap:4px;flex-wrap:wrap"> | |
| <strong>Unknown org?</strong> | |
| <span>The "Unknown" tag is for model makers submitting their model ahead of official release.</span> | |
| <span>If that's you — DM <strong>glintresearch</strong> on Discord.</span> | |
| <span class="banner-hint" id="banner-hint">▼</span> | |
| </div> | |
| <div class="banner-expand" id="banner-expand"> | |
| <div class="banner-expand-inner"> | |
| Model makers can submit their model's benchmarks before the official release so it appears on the leaderboard immediately when announced. The <strong>Unknown</strong> tag is temporary — once you DM <strong>glintresearch</strong> on Discord we can update it to your organization name and color. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="info-banner anim d2"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg> | |
| <div> | |
| <strong>What is Efficiency ⚡?</strong> | |
| Efficiency = <code>Overall Score ÷ log‍ 10(Params)</code>. | |
| It measures how much benchmark performance a model delivers per parameter. | |
| Small models that punch above their weight deserve just as much recognition as large ones — | |
| this puts them on equal footing. <strong>We added this for fairness, not to boost any | |
| specific ranking.</strong> Glint Research holds #1 in efficiency but is #5 in overall score. | |
| Switch to <em>Overall Score</em> to rank by raw performance. | |
| </div> | |
| </div> | |
| <div class="section anim d3" id="table-section"> | |
| <div class="section-head"> | |
| <h2>Detailed Results</h2> | |
| <div class="head-right"> | |
| <span class="badge" id="model-count-badge"></span> | |
| <div class="sort-control"> | |
| <span>Sort</span> | |
| <select id="sort-select" aria-label="Sort leaderboard by"> | |
| <option value="efficiency">Efficiency ⚡</option> | |
| <option value="score">Overall Score</option> | |
| <option value="wiki">WikiText-2 PPL</option> | |
| <option value="blimp">BLiMP</option> | |
| <option value="arc">ARC-Easy</option> | |
| <option value="params">Parameters</option> | |
| <option value="date">Release Date</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="table-wrap"> | |
| <div class="table-toolbar" id="org-filters"></div> | |
| <div class="table-scroll"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Model</th> | |
| <th>Org</th> | |
| <th>Params</th> | |
| <th class="cell-metric">Eff. ⚡</th> | |
| <th class="cell-metric">WikiText-2 ↓</th> | |
| <th class="cell-metric">BLiMP ↑</th> | |
| <th class="cell-metric">ARC-Easy ↑</th> | |
| <th>Training Tokens</th> | |
| <th>Released</th> | |
| <th>Links</th> | |
| </tr> | |
| </thead> | |
| <tbody id="leaderboard-body"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section anim d4" id="timeline-section"> | |
| <div class="section-head"> | |
| <h2>Model Release Timeline</h2> | |
| <span class="badge">Most recent first</span> | |
| </div> | |
| <div class="timeline" id="timeline-list"></div> | |
| </div> | |
| <div class="section anim d5" id="charts-section"> | |
| <div class="section-head"><h2>Benchmark Overview</h2></div> | |
| <div class="legend-bar" id="legend-bar"></div> | |
| <div class="chart-grid"> | |
| <div class="chart-card"> | |
| <h3>BLiMP ↑</h3> | |
| <p class="chart-sub">Higher is better</p> | |
| <canvas id="blimpChart"></canvas> | |
| </div> | |
| <div class="chart-card"> | |
| <h3>ARC-Easy ↑</h3> | |
| <p class="chart-sub">Higher is better</p> | |
| <canvas id="arcChart"></canvas> | |
| </div> | |
| <div class="chart-card full wiki-bubble-wrap"> | |
| <h3>WikiText-2 Perplexity ↓</h3> | |
| <p class="chart-sub">Lower is better · bubble size = perplexity (smaller bubble = better)</p> | |
| <canvas id="wikiChart"></canvas> | |
| <div class="wiki-custom-tooltip" id="wikiTooltip"> | |
| <div class="tt-name"></div> | |
| <div class="tt-val"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section anim d6"> | |
| <div class="section-head"> | |
| <h2>Model Efficiency</h2> | |
| <span class="badge">Leaderboard Score vs Params</span> | |
| </div> | |
| <div class="chart-grid"> | |
| <div class="chart-card full"> | |
| <h3>Parameters vs Leaderboard Score</h3> | |
| <p class="chart-sub">Scatter of each model's overall score vs its parameter count. The <strong>Efficiency ⚡</strong> column ranks models by <code>score ÷ log‍ 10(params)</code>, rewarding strong benchmark performance with fewer parameters. Points above the dashed threshold line are ≥1σ more efficient than the trend. Top 3 marked.</p> | |
| <canvas id="efficiencyChart" style="max-height:400px"></canvas> | |
| <div class="eff-note"> | |
| <span><span class="line-sample" style="border-top:2px dashed rgba(255,200,0,0.4)"></span> Avg trend</span> | |
| <span><span class="line-sample" style="border-top:2px dashed rgba(255,200,0,0.8)"></span> High-efficiency threshold</span> | |
| <span><span class="line-sample" style="background:rgba(255,230,0,0.1);height:8px"></span> Outperforming zone</span> | |
| </div> | |
| </div> | |
| <div class="chart-card full"> | |
| <h3>Models Released by Org</h3> | |
| <canvas id="orgCountChart" style="max-height:260px"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="cta-card anim d5"> | |
| <div> | |
| <h3>Add your model</h3> | |
| <p>Open a PR with your model's benchmark results and reproduction steps. We require: params, training data provenance, eval harness used, and scores for all three of the benchmarks using lm-eval harness.</p> | |
| <button id="submitBtn" class="cta-btn" onclick="handleSubmit()"> | |
| <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg> | |
| Submit Model | |
| </button> | |
| </div> | |
| </div> | |
| <footer> | |
| Tiny-ML Leaderboard by <a href="https://huggingface.co/CompactAI-O">Glint Research</a>. | |
| Not affiliated with SupraLabs or LH-Tech-AI. | |
| All benchmark data is self-reported by model authors unless otherwise noted. | |
| </footer> | |
| </div> | |
| </div> | |
| <script> | |
| const models = [ | |
| { | |
| name: 'MicroSupra-1k', | |
| org: 'supralabs', | |
| params: '1K', | |
| blimp: 58.61, | |
| arc: 26.39, | |
| wiki: 422285.72, | |
| tokens: '—', | |
| releaseDate: '2026-05-13', | |
| links: { | |
| card: 'https://huggingface.co/SupraLabs/MicroSupra-1k' | |
| } | |
| }, | |
| { | |
| name: 'Glint-0.1', | |
| org: 'compactai', | |
| params: '1M', | |
| blimp: 46.7, | |
| arc: 21.0, | |
| wiki: null, | |
| tokens: '~100M', | |
| releaseDate: '2026-03-09', | |
| links: { | |
| card: 'https://huggingface.co/CompactAI-O/Glint-0.1' | |
| } | |
| }, | |
| { | |
| name: 'Supra-Mini-v2', | |
| org: 'supralabs', | |
| params: '168K', | |
| blimp: 53.5, | |
| arc: 26.8, | |
| wiki: 7.79, | |
| tokens: '—', | |
| releaseDate: '2026-05-12', | |
| links: { | |
| card: 'https://huggingface.co/SupraLabs/Supra-Mini-v2-0.1M' | |
| } | |
| }, | |
| { | |
| name: 'Glint-0.2', | |
| org: 'compactai', | |
| params: '1M', | |
| blimp: 49.8, | |
| arc: 27.0, | |
| wiki: null, | |
| tokens: '~100M', | |
| releaseDate: '2026-03-22', | |
| links: { | |
| card: 'https://huggingface.co/CompactAI-O/Glint-0.2' | |
| } | |
| }, | |
| { | |
| name: 'Glint-0.3', | |
| org: 'compactai', | |
| params: '1M', | |
| blimp: 47.3, | |
| arc: 25.5, | |
| wiki: null, | |
| tokens: '~100M', | |
| releaseDate: '2026-04-04', | |
| links: { | |
| card: 'https://huggingface.co/CompactAI-O/Glint-0.3' | |
| } | |
| }, | |
| { | |
| name: 'CinnabarLM 1.4M', | |
| org: 'mihaipopa', | |
| params: '1.51M', | |
| blimp: 60.7, | |
| arc: 24.58, | |
| wiki: 2.316, | |
| tokens: '~30M', | |
| releaseDate: '2026-05-19', | |
| links: { | |
| card: 'https://huggingface.co/MihaiPopa-1/CinnabarLM-1.4M-Base' | |
| } | |
| }, | |
| { | |
| name: 'Glint-0.4', | |
| org: 'compactai', | |
| params: '1M', | |
| blimp: 58.5, | |
| arc: 31.0, | |
| wiki: 5.24, | |
| tokens: '10B', | |
| releaseDate: '2026-04-19', | |
| links: { | |
| card: 'https://huggingface.co/CompactAI-O/Glint-0.4' | |
| } | |
| }, | |
| { | |
| name: 'CinnabarLM 1.5M', | |
| org: 'mihaipopa', | |
| params: '1.71M', | |
| blimp: 60.51, | |
| arc: 26.68, | |
| wiki: 2.35, | |
| tokens: '~50M', | |
| releaseDate: '2026-05-19', | |
| links: { | |
| card: 'https://huggingface.co/MihaiPopa-1/CinnabarLM-1.5M-Base' | |
| } | |
| }, | |
| { | |
| name: 'PotentSulfurLM 500K', | |
| org: 'mihaipopa', | |
| params: '587K', | |
| blimp: 59.01, | |
| arc: 27.06, | |
| wiki: 2.613, | |
| tokens: '~200M', | |
| releaseDate: '2026-05-27', | |
| links: { | |
| card: 'https://huggingface.co/MihaiPopa-1/PotentSulfurLM-500K-Base' | |
| } | |
| }, | |
| { | |
| name: 'MicroLM2-1M', | |
| org: 'cromia', | |
| params: '1.71M', | |
| blimp: 54.2, | |
| arc: 27.4, | |
| wiki: null, | |
| tokens: '~4.5B', | |
| releaseDate: '2026-05-22', | |
| links: { | |
| card: 'https://huggingface.co/CromIA/MicroLM2-1M' | |
| } | |
| }, | |
| { | |
| name: 'Glint-1', | |
| org: 'compactai', | |
| params: '1M', | |
| blimp: 61.2, | |
| arc: 32.0, | |
| wiki: 4.07, | |
| tokens: '100B', | |
| releaseDate: '2026-05-02', | |
| links: { | |
| card: 'https://huggingface.co/CompactAI-O/Glint-1' | |
| } | |
| }, | |
| { | |
| name: 'Supra-Mini-v3', | |
| org: 'supralabs', | |
| params: '468K', | |
| blimp: 55.3, | |
| arc: 27.3, | |
| wiki: 4.49, | |
| tokens: '—', | |
| releaseDate: '2026-05-14', | |
| links: { | |
| card: 'https://huggingface.co/SupraLabs/Supra-Mini-v3-0.5M' | |
| } | |
| }, | |
| { | |
| name: 'Cosmos-T-80M', | |
| org: 'wop', | |
| params: '79.7M', | |
| blimp: 50.47, | |
| arc: 27.82, | |
| wiki: 365703.85, | |
| tokens: '~21M', | |
| releaseDate: '2026-05-30', | |
| links: { | |
| card: 'https://huggingface.co/wop/Cosmos-T-80M' | |
| } | |
| }, | |
| { | |
| name: 'Cosmos-T2-80M-Test', | |
| org: 'wop', | |
| params: '87.60M', | |
| blimp: 57.61, | |
| arc: 25, | |
| wiki: 18, | |
| tokens: '~18M', | |
| releaseDate: '2026-05-31', | |
| links: { | |
| card: 'https://huggingface.co/wop/Cosmos-T2-80M-Test' | |
| } | |
| }, | |
| { | |
| name: 'Supra-Mini-v4', | |
| org: 'supralabs', | |
| params: '2.62M', | |
| blimp: 60.7, | |
| arc: 31.5, | |
| wiki: 3.17, | |
| tokens: '—', | |
| releaseDate: '2026-05-14', | |
| links: { | |
| card: 'https://huggingface.co/SupraLabs/Supra-Mini-v4-2M' | |
| } | |
| }, | |
| { | |
| name: 'CinnabarLM 4M', | |
| org: 'mihaipopa', | |
| params: '4.23M', | |
| blimp: 62.87, | |
| arc: 27.36, | |
| wiki: 2.226, | |
| tokens: '~80M', | |
| releaseDate: '2026-05-05', | |
| links: { | |
| card: 'https://huggingface.co/MihaiPopa-1/CinnabarLM-4M-Base' | |
| } | |
| }, | |
| { | |
| name: 'Cosmos-T2-Accelerate-beta', | |
| org: 'wop', | |
| params: '5.03M', | |
| blimp: 54.30, | |
| arc: 26.30, | |
| wiki: 5191.69, | |
| tokens: '~22M', | |
| releaseDate: '2026-06-02', | |
| links: { | |
| card: 'https://huggingface.co/wop/Cosmos-T2-Accelerate-beta' | |
| } | |
| }, | |
| { | |
| name: 'Cosmos-T2A-low', | |
| org: 'wop', | |
| params: '9.96M', | |
| blimp: 47.80, | |
| arc: 31.00, | |
| wiki: 6077.57, | |
| tokens: '~46.7M', | |
| releaseDate: '2026-06-04', | |
| links: { | |
| card: 'https://huggingface.co/wop/Cosmos-T2A-low' | |
| } | |
| }, | |
| { | |
| name: 'Shard-1', | |
| org: 'compactai', | |
| params: '54.5M', | |
| blimp: null, | |
| arc: 43.94, | |
| wiki: 24.10, | |
| tokens: '~20B', | |
| releaseDate: '2026-05-02', | |
| links: { | |
| card: 'https://huggingface.co/CompactAI-O/Shard-1' | |
| } | |
| }, | |
| { | |
| name: 'Cosmos-T2-Accelerate-Beta2', | |
| org: 'wop', | |
| params: '9.96M', | |
| blimp: 69, | |
| arc: 28, | |
| wiki: 8.98, | |
| tokens: '~10M', | |
| releaseDate: '2026-06-03', | |
| links: { | |
| card: 'https://huggingface.co/wop/Cosmos-T2-Accelerate-Beta2' | |
| } | |
| }, | |
| { | |
| name: 'Monostep v1', | |
| org: 'wop', | |
| params: '16M', | |
| blimp: null, | |
| arc: null, | |
| wiki: 109459.63, | |
| tokens: '?', | |
| releaseDate: '2026-06-04', | |
| links: { | |
| card: 'https://huggingface.co/wop/Monostep-v1' | |
| } | |
| }, | |
| { | |
| name: 'StorySupra-10M', | |
| org: 'supralabs', | |
| params: '12.6M', | |
| blimp: 61.47, | |
| arc: 28.45, | |
| wiki: 78970.02, | |
| tokens: '—', | |
| releaseDate: '2026-05-15', | |
| links: { | |
| card: 'https://huggingface.co/SupraLabs/StorySupra-10M' | |
| } | |
| }, | |
| { | |
| name: 'Supra-Mini-v5', | |
| org: 'supralabs', | |
| params: '7.87M', | |
| blimp: 63.5, | |
| arc: 34.4, | |
| wiki: 2.66, | |
| tokens: '—', | |
| releaseDate: '2026-05-16', | |
| links: { | |
| card: 'https://huggingface.co/SupraLabs/Supra-Mini-v5-8M' | |
| } | |
| }, | |
| { | |
| name: 'DistillSupra-0.2M', | |
| org: 'supralabs', | |
| params: '289K', | |
| blimp: null, | |
| arc: 25.17, | |
| wiki: 70687.56, | |
| tokens: '—', | |
| releaseDate: '2026-05-15', | |
| links: { | |
| card: 'https://huggingface.co/SupraLabs/DistillSupra-0.2M' | |
| } | |
| }, | |
| { | |
| name: 'Cosmos-T2-Accelerate-Preview', | |
| org: 'wop', | |
| params: '9.96M', | |
| blimp: 56.95, | |
| arc: 26.80, | |
| wiki: 8.92, | |
| tokens: '462M', | |
| releaseDate: '2026-06-01', | |
| links: { | |
| card: 'https://huggingface.co/wop/Cosmos-T2-Accelerate-Preview', | |
| demo: 'https://huggingface.co/spaces/wop/Cosmos-T2-Chat' | |
| } | |
| }, | |
| { | |
| name: 'Glint-1.3 (merged)', | |
| org: 'compactai', | |
| params: '982K', | |
| blimp: 68.7, | |
| arc: 32.5, | |
| wiki: 3.08, | |
| tokens: '100B', | |
| releaseDate: '2026-05-13', | |
| links: { | |
| card: 'https://huggingface.co/CompactAI-O/Glint-1.3' | |
| } | |
| }, | |
| { | |
| name: 'Supra-Mini-v6', | |
| org: 'supralabs', | |
| params: '1.41M', | |
| blimp: 61.86, | |
| arc: 30.26, | |
| wiki: 3.00, | |
| tokens: '—', | |
| releaseDate: '2026-05-30', | |
| links: { | |
| card: 'https://huggingface.co/SupraLabs/Supra-Mini-v6-1M' | |
| } | |
| }, | |
| { | |
| name: 'GPT-S-5M', | |
| org: 'axiomiclabs', | |
| params: '5.16M', | |
| blimp: 72.27, | |
| arc: 35.69, | |
| wiki: 2.56, | |
| tokens: '25B', | |
| releaseDate: '2026-05-19', | |
| links: { | |
| card: 'https://huggingface.co/AxiomicLabs/GPT-S-5M' | |
| } | |
| }, | |
| { | |
| name: 'Archaea-74M', | |
| org: 'GODELEV', | |
| params: '74M', | |
| blimp: 74.91, | |
| arc: 39.06, | |
| wiki: 68.06, | |
| tokens: '~1.2B', | |
| releaseDate: '2026-06-01', | |
| links: { | |
| card: 'https://huggingface.co/GODELEV/Archaea-74M' | |
| } | |
| }, | |
| { | |
| name: 'Supra-50M-Instruct', | |
| org: 'supralabs', | |
| params: '51.8M', | |
| blimp: 76.3, | |
| arc: 52.2, | |
| wiki: 151.15, | |
| tokens: '20B', | |
| releaseDate: '2026-05-21', | |
| links: { | |
| card: 'https://huggingface.co/SupraLabs/Supra-50M-Instruct', | |
| base: 'https://huggingface.co/SupraLabs/Supra-50M-Base' | |
| } | |
| }, | |
| { | |
| name: 'Michel-Tiny', | |
| org: 'finnianx', | |
| params: '55.7M', | |
| blimp: 74.08, | |
| arc: 37.33, | |
| wiki: 2.29, | |
| tokens: '1.3B', | |
| releaseDate: '2026-06-05', | |
| links: { | |
| card: 'https://huggingface.co/finnianx/michel-tiny' | |
| } | |
| }, | |
| { | |
| name: 'Michel-Nano-v2', | |
| org: 'finnianx', | |
| params: '9.94M', | |
| blimp: 72.52, | |
| arc: 35.90, | |
| wiki: 2.45, | |
| tokens: '6.5B', | |
| releaseDate: '2026-06-13', | |
| links: { | |
| card: 'https://huggingface.co/finnianx/michel-nano-v2' | |
| } | |
| }, | |
| { | |
| name: 'Michel-Nano', | |
| org: 'finnianx', | |
| params: '5.96M', | |
| blimp: 65.23, | |
| arc: 33.38, | |
| wiki: 3.24, | |
| tokens: '1.1B', | |
| releaseDate: '2026-06-10', | |
| links: { | |
| card: 'https://huggingface.co/finnianx/michel-nano' | |
| } | |
| }, | |
| { | |
| name: 'Michel-Micro', | |
| org: 'finnianx', | |
| params: '28.4M', | |
| blimp: 69.75, | |
| arc: 38.59, | |
| wiki: 2.30, | |
| tokens: '2.6B', | |
| releaseDate: '2026-06-09', | |
| links: { | |
| card: 'https://huggingface.co/finnianx/michel-micro' | |
| } | |
| }, | |
| { | |
| name: 'Ivme-Conversate-22M', | |
| org: 'ivmelabs', | |
| params: '22.03M', | |
| blimp: 61.40, | |
| arc: 30.85, | |
| wiki: 2.96, | |
| tokens: '~1.57B', | |
| releaseDate: '2026-06-05', | |
| links: { | |
| card: 'https://huggingface.co/IvmeLabs/Ivme-Conversate-22M-Base' | |
| } | |
| }, | |
| { | |
| name: 'kirk-tung', | |
| org: 'rtc', | |
| params: '53.1M', | |
| blimp: 72.81, | |
| arc: 30.30, | |
| wiki: 2.3767, | |
| tokens: '1.1B', | |
| releaseDate: '2026-06-09', | |
| links: { | |
| card: 'https://huggingface.co/rtc2022/kirk-tung' | |
| } | |
| }, | |
| { | |
| name: 'Supra-Mini-0.1M', | |
| org: 'supralabs', | |
| params: '117K', | |
| blimp: 51.77, | |
| arc: 26.39, | |
| wiki: 25.17, | |
| tokens: '500M', | |
| releaseDate: '2026-05-18', | |
| links: { | |
| card: 'https://huggingface.co/SupraLabs/Supra-Mini-0.1M' | |
| } | |
| }, | |
| { | |
| name: 'Supra-50M-Base', | |
| org: 'supralabs', | |
| params: '51.8M', | |
| blimp: 76.3, | |
| arc: 52.2, | |
| wiki: null, | |
| tokens: '20B', | |
| releaseDate: '2026-05-27', | |
| links: { | |
| card: 'https://huggingface.co/SupraLabs/Supra-50M-Base' | |
| } | |
| }, | |
| { | |
| name: 'Supra-50M-Reasoning', | |
| org: 'supralabs', | |
| params: '51.8M', | |
| blimp: 64.14, | |
| arc: 45.16, | |
| wiki: 166.27, | |
| tokens: '20B', | |
| releaseDate: '2026-06-04', | |
| links: { | |
| card: 'https://huggingface.co/SupraLabs/Supra-50M-Reasoning', | |
| demo: 'https://huggingface.co/spaces/SupraLabs/Supra-50M-Reasoning-Demo' | |
| } | |
| }, | |
| { | |
| name: 'Supra-1.5-50M-Instruct-exp', | |
| org: 'supralabs', | |
| params: '51.8M', | |
| blimp: 67.4, | |
| arc: null, | |
| wiki: null, | |
| tokens: '23B', | |
| releaseDate: '2026-06-12', | |
| links: { | |
| card: 'https://huggingface.co/SupraLabs/Supra-1.5-50M-Instruct-exp' | |
| } | |
| }, | |
| ]; | |
| const orgNameMap = { | |
| compactai: 'Glint Research', | |
| supralabs: 'SupraLabs', | |
| axiomiclabs: 'Axiomic Labs', | |
| mihaipopa: 'Mihai Popa', | |
| cromia: 'CromIA', | |
| wop: 'wop', | |
| GODELEV: 'GODELEV', | |
| finnianx: 'finnianx', | |
| ivmelabs: 'IvmeLabs', | |
| rtc: 'RTC', | |
| unknown: 'Unknown', | |
| }; | |
| const colorMap = { | |
| compactai: '#3fb950', | |
| supralabs: '#58a6ff', | |
| axiomiclabs: '#c2b6ff', | |
| mihaipopa: '#93c6aa', | |
| cromia: '#ffffff', | |
| wop: '#ff9b50', | |
| GODELEV: '#1a56db', | |
| finnianx: '#06b6d4', | |
| ivmelabs: '#ff0000', | |
| rtc: '#e8a87c', | |
| unknown: '#000000', | |
| }; | |
| const bgMap = {}; | |
| Object.keys(colorMap).forEach(k => { | |
| const c = colorMap[k]; | |
| const r = parseInt(c.slice(1, 3), 16); | |
| const g = parseInt(c.slice(3, 5), 16); | |
| const b = parseInt(c.slice(5, 7), 16); | |
| bgMap[k] = `rgba(${r},${g},${b},0.7)`; | |
| }); | |
| function parseParams(s) { | |
| if (!s || typeof s !== 'string') return NaN; | |
| const u = s.toUpperCase().replace(/,/g, ''); | |
| if (u.endsWith('B')) return parseFloat(u) * 1e9; | |
| if (u.endsWith('M')) return parseFloat(u) * 1e6; | |
| if (u.endsWith('K')) return parseFloat(u) * 1e3; | |
| return parseFloat(u) || NaN; | |
| } | |
| const WIKI_PPL_CAP = 500; | |
| const wikiScoreLogs = models | |
| .filter(m => m.wiki !== null && typeof m.wiki === 'number' && m.wiki > 0) | |
| .map(m => Math.log(Math.min(m.wiki, WIKI_PPL_CAP))); | |
| const wikiMinLog = Math.min(...wikiScoreLogs); | |
| const wikiMaxLog = Math.max(...wikiScoreLogs); | |
| function getWikiScore(m) { | |
| if (m.wiki === null || typeof m.wiki !== 'number' || m.wiki <= 0 || wikiMinLog === wikiMaxLog) return null; | |
| const cappedLog = Math.log(Math.min(m.wiki, WIKI_PPL_CAP)); | |
| const normalized = 1 - ((cappedLog - wikiMinLog) / (wikiMaxLog - wikiMinLog)); | |
| return Math.max(0, Math.min(1, normalized)) * 100; | |
| } | |
| function getScore(m) { | |
| const wikiScore = getWikiScore(m); | |
| const hasBlimp = typeof m.blimp === 'number'; | |
| const hasArc = typeof m.arc === 'number'; | |
| const hasWiki = wikiScore !== null; | |
| if (!hasBlimp && !hasArc && !hasWiki) return -1; | |
| const blimpScore = hasBlimp ? m.blimp : 0; | |
| const arcScore = hasArc ? m.arc : 0; | |
| const wikiVal = hasWiki ? wikiScore : 0; | |
| return (blimpScore + arcScore + wikiVal) / 3; | |
| } | |
| function getEfficiencyScore(m) { | |
| const score = getScore(m); | |
| if (score < 0) return -1; | |
| const p = parseParams(m.params); | |
| if (isNaN(p) || p <= 0) return -1; | |
| return score / Math.log10(p + 1); | |
| } | |
| function orgTint(orgKey, alpha) { | |
| const c = colorMap[orgKey]; | |
| const r = parseInt(c.slice(1, 3), 16); | |
| const g = parseInt(c.slice(3, 5), 16); | |
| const b = parseInt(c.slice(5, 7), 16); | |
| return `rgba(${r},${g},${b},${alpha})`; | |
| } | |
| const worstGreen = [255, 255, 255]; | |
| const bestGreen = [63, 185, 80]; | |
| function getColor(value, min, max, lowerIsBetter, useLog = false) { | |
| if (value === null || isNaN(value) || min === max) return ''; | |
| let v = value, mn = min, mx = max; | |
| if (useLog) { v = Math.log(v); mn = Math.log(mn); mx = Math.log(mx); } | |
| let p = (v - mn) / (mx - mn); | |
| if (lowerIsBetter) p = 1 - p; | |
| const a = Math.pow(Math.max(0, Math.min(1, p)), 2.5); | |
| const r = Math.round(worstGreen[0] + (bestGreen[0] - worstGreen[0]) * a); | |
| const g = Math.round(worstGreen[1] + (bestGreen[1] - worstGreen[1]) * a); | |
| const b = Math.round(worstGreen[2] + (bestGreen[2] - worstGreen[2]) * a); | |
| return `color:rgb(${r},${g},${b})`; | |
| } | |
| /* ─── Stats ─── */ | |
| function renderStats() { | |
| const orgs = new Set(models.map(m => m.org)); | |
| const blimps = models.filter(m => m.blimp).map(m => m.blimp); | |
| const arcs = models.filter(m => m.arc).map(m => m.arc); | |
| const bestB = Math.max(...blimps); | |
| const bestA = Math.max(...arcs); | |
| document.getElementById('stat-row').innerHTML = ` | |
| <div class="stat-pill"><div class="label">Models</div><div class="value">${models.length}</div><div class="sub">On leaderboard</div></div> | |
| <div class="stat-pill"><div class="label">Organizations</div><div class="value">${orgs.size}</div><div class="sub">Contributing</div></div> | |
| <div class="stat-pill"><div class="label">Best BLiMP</div><div class="value" style="color:var(--green)">${bestB}%</div><div class="sub">${models.find(m => m.blimp === bestB).name}</div></div> | |
| <div class="stat-pill"><div class="label">Best ARC-E</div><div class="value" style="color:var(--green)">${bestA}%</div><div class="sub">${models.find(m => m.arc === bestA).name}</div></div> | |
| `; | |
| document.getElementById('model-count-badge').textContent = `${models.length} models`; | |
| } | |
| /* ─── Filters ─── */ | |
| let activeFilter = 'all'; | |
| let activeSort = 'efficiency'; | |
| const sortComparators = { | |
| score: (a, b) => getScore(b) - getScore(a), | |
| wiki: (a, b) => { | |
| if (a.wiki == null) return 1; | |
| if (b.wiki == null) return -1; | |
| return a.wiki - b.wiki; | |
| }, | |
| blimp: (a, b) => { | |
| if (a.blimp == null) return 1; | |
| if (b.blimp == null) return -1; | |
| return b.blimp - a.blimp; | |
| }, | |
| arc: (a, b) => { | |
| if (a.arc == null) return 1; | |
| if (b.arc == null) return -1; | |
| return b.arc - a.arc; | |
| }, | |
| efficiency: (a, b) => getEfficiencyScore(b) - getEfficiencyScore(a), | |
| params: (a, b) => parseParams(a.params) - parseParams(b.params), | |
| date: (a, b) => { | |
| if (!a.releaseDate) return 1; | |
| if (!b.releaseDate) return -1; | |
| return new Date(b.releaseDate) - new Date(a.releaseDate); | |
| } | |
| }; | |
| function sizeBucket(params) { | |
| const n = parseParams(params); | |
| if (isNaN(n) || n < 1e6) return 'small'; | |
| if (n < 1e7) return 'medium'; | |
| return 'large'; | |
| } | |
| function matchesFilter(m) { | |
| if (activeFilter === 'all') return true; | |
| if (activeFilter === 'small' || activeFilter === 'medium' || activeFilter === 'large') { | |
| return sizeBucket(m.params) === activeFilter; | |
| } | |
| return m.org === activeFilter; | |
| } | |
| function getFilteredModels() { | |
| return models.filter(matchesFilter); | |
| } | |
| function setupSortControl() { | |
| const sel = document.getElementById('sort-select'); | |
| if (!sel) return; | |
| sel.value = activeSort; | |
| sel.addEventListener('change', e => { | |
| activeSort = e.target.value; | |
| renderTable(); | |
| }); | |
| } | |
| function renderFilteredViews() { | |
| renderTable(); | |
| buildLegend(); | |
| renderTimeline(); | |
| buildBarChart('blimpChart', 'blimp', false); | |
| buildBarChart('arcChart', 'arc', false); | |
| buildWikiChart(); | |
| buildEfficiencyChart(); | |
| buildOrgCountChart(); | |
| } | |
| function buildFilters() { | |
| const tb = document.getElementById('org-filters'); | |
| if (!tb) return; | |
| const sizeChips = [ | |
| { key: 'all', label: 'All' }, | |
| { key: 'small', label: '< 1M' }, | |
| { key: 'medium', label: '1–10M' }, | |
| { key: 'large', label: '10M+' } | |
| ]; | |
| sizeChips.forEach(({ key, label }) => { | |
| const c = document.createElement('div'); | |
| c.className = 'filter-chip' + (key === 'all' ? ' active' : ''); | |
| c.dataset.filter = key; | |
| c.textContent = label; | |
| tb.appendChild(c); | |
| }); | |
| const sep = document.createElement('div'); | |
| sep.className = 'tl-sep'; | |
| tb.appendChild(sep); | |
| const orgs = [...new Set(models.map(m => m.org))]; | |
| orgs.forEach(org => { | |
| const c = document.createElement('div'); | |
| c.className = 'filter-chip'; | |
| c.dataset.filter = org; | |
| c.innerHTML = `<span class="dot" style="background:${colorMap[org]}"></span>${orgNameMap[org]}`; | |
| tb.appendChild(c); | |
| }); | |
| tb.addEventListener('click', e => { | |
| const chip = e.target.closest('.filter-chip'); | |
| if (!chip) return; | |
| tb.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active')); | |
| chip.classList.add('active'); | |
| activeFilter = chip.dataset.filter; | |
| renderFilteredViews(); | |
| }); | |
| } | |
| /* ─── Table ─── */ | |
| function formatDate(dateStr) { | |
| if (!dateStr) return '—'; | |
| const date = new Date(dateStr); | |
| return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); | |
| } | |
| function renderTable() { | |
| const tbody = document.getElementById('leaderboard-body'); | |
| const cmp = sortComparators[activeSort] || sortComparators.score; | |
| const filtered = getFilteredModels().sort(cmp); | |
| document.getElementById('model-count-badge').textContent = activeFilter === 'all' | |
| ? `${models.length} models` | |
| : `${filtered.length} of ${models.length} models`; | |
| const blimps = models.filter(m => m.blimp).map(m => m.blimp); | |
| const arcs = models.filter(m => m.arc).map(m => m.arc); | |
| const wikis = models.filter(m => m.wiki).map(m => m.wiki); | |
| const effs = models.filter(m => getEfficiencyScore(m) >= 0).map(m => getEfficiencyScore(m)); | |
| const bMin = Math.min(...blimps), bMax = Math.max(...blimps); | |
| const aMin = Math.min(...arcs), aMax = Math.max(...arcs); | |
| const wMin = Math.min(...wikis), wMax = Math.max(...wikis); | |
| const eMin = Math.min(...effs), eMax = Math.max(...effs); | |
| tbody.innerHTML = filtered.map((m, idx) => { | |
| const oc = colorMap[m.org]; | |
| const orgBg = orgTint(m.org, 0.15); | |
| const isBestBlimp = m.blimp && m.blimp === bMax; | |
| const isBestArc = m.arc && m.arc === aMax; | |
| const isBestWiki = m.wiki && m.wiki === wMin; | |
| const rank = idx + 1; | |
| const rankClass = rank <= 3 ? ` rank-${rank}` : ''; | |
| return `<tr class="lb-row" onmouseenter="this.classList.add('hover')" onmouseleave="this.classList.remove('hover')"> | |
| <td class="cell-rank${rankClass}">#${rank}</td> | |
| <td class="cell-model"> | |
| <div class="model-name">${m.name}</div> | |
| </td> | |
| <td><span class="org-tag" style="background:${orgBg};color:${oc}"><span class="org-dot" style="background:${oc}"></span>${orgNameMap[m.org]}</span></td> | |
| <td>${m.params}</td> | |
| <td class="cell-metric" style="${getColor(getEfficiencyScore(m), eMin, eMax, false)}"> | |
| ${getEfficiencyScore(m) >= 0 | |
| ? `<span class="metric-val${getEfficiencyScore(m) >= eMax ? ' best' : ''}">${getEfficiencyScore(m).toFixed(2)}</span>` | |
| : '<span class="metric-na">TBD</span>'} | |
| </td> | |
| <td class="cell-metric ${m.wiki === null ? '' : ''}" style="${getColor(m.wiki, wMin, wMax, true, true)}"> | |
| ${m.wiki !== null | |
| ? `<span class="metric-val${isBestWiki ? ' best' : ''}">${m.wiki}</span>` | |
| : '<span class="metric-na">TBD</span>'} | |
| </td> | |
| <td class="cell-metric" style="${getColor(m.blimp, bMin, bMax, false)}"> | |
| ${m.blimp !== null | |
| ? `<span class="metric-val${isBestBlimp ? ' best' : ''}">${m.blimp}%</span>` | |
| : '<span class="metric-na">TBD</span>'} | |
| </td> | |
| <td class="cell-metric" style="${getColor(m.arc, aMin, aMax, false)}"> | |
| ${m.arc !== null | |
| ? `<span class="metric-val${isBestArc ? ' best' : ''}">${m.arc}%</span>` | |
| : '<span class="metric-na">TBD</span>'} | |
| </td> | |
| <td class="cell-tokens">${m.tokens}</td> | |
| <td class="cell-date">${formatDate(m.releaseDate)}</td> | |
| <td class="cell-links"> | |
| ${m.links.card ? `<a href="${m.links.card}" target="_blank">card</a>` : '<span class="metric-na">—</span>'} | |
| ${m.links.base ? `<a href="${m.links.base}" target="_blank">base</a>` : ''} | |
| ${m.links.demo ? `<a href="${m.links.demo}" target="_blank">demo</a>` : ''} | |
| </td> | |
| </tr>`; | |
| }).join(''); | |
| } | |
| /* ─── Legend ─── */ | |
| function buildLegend() { | |
| const bar = document.getElementById('legend-bar'); | |
| const orgs = [...new Set(getFilteredModels().map(m => m.org))]; | |
| bar.innerHTML = orgs.map(org => | |
| `<span class="legend-item"><span class="ldot" style="background:${colorMap[org]}"></span>${orgNameMap[org]}</span>` | |
| ).join(''); | |
| } | |
| /* ─── Chart defaults ─── */ | |
| Chart.defaults.color = '#8b949e'; | |
| Chart.defaults.borderColor = 'rgba(255,255,255,0.06)'; | |
| Chart.defaults.font.family = "-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif"; | |
| Chart.defaults.font.size = 11; | |
| Chart.defaults.plugins.legend.display = false; | |
| const tooltipStyle = { | |
| backgroundColor: '#1c2129', | |
| titleColor: '#c9d1d9', | |
| bodyColor: '#8b949e', | |
| borderColor: '#30363d', | |
| borderWidth: 1, | |
| cornerRadius: 8, | |
| padding: 10, | |
| displayColors: false | |
| }; | |
| /* ─── Timeline ─── */ | |
| function renderTimeline() { | |
| const container = document.getElementById('timeline-list'); | |
| if (!container) return; | |
| const sorted = getFilteredModels() | |
| .sort((a, b) => new Date(b.releaseDate) - new Date(a.releaseDate)); | |
| const monthKey = d => { | |
| const [y, m] = d.split('-'); | |
| return `${y}-${m}`; | |
| }; | |
| const monthLabel = key => { | |
| const [y, m] = key.split('-'); | |
| const dt = new Date(parseInt(y), parseInt(m) - 1, 1); | |
| return dt.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }); | |
| }; | |
| const dayLabel = d => { | |
| const [y, m, day] = d.split('-').map(Number); | |
| const dt = new Date(y, m - 1, day); | |
| return dt.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); | |
| }; | |
| if (sorted.length === 0) { | |
| container.innerHTML = '<div class="tl-empty">No models match this filter.</div>'; | |
| return; | |
| } | |
| const groups = {}; | |
| sorted.forEach(m => { | |
| const k = monthKey(m.releaseDate); | |
| (groups[k] = groups[k] || []).push(m); | |
| }); | |
| container.innerHTML = Object.keys(groups).map(key => { | |
| const items = groups[key]; | |
| const rows = items.map(m => { | |
| const oc = colorMap[m.org]; | |
| const orgBg = orgTint(m.org, 0.15); | |
| return `<div class="tl-row" style="--org-color:${oc}"> | |
| <div class="tl-date">${dayLabel(m.releaseDate)}</div> | |
| <div class="tl-name"> | |
| <a href="${m.links.card}" target="_blank" rel="noopener">${m.name}</a> | |
| </div> | |
| <div class="tl-params">${m.params} params</div> | |
| <div class="tl-org" style="background:${orgBg};color:${oc}">${orgNameMap[m.org]}</div> | |
| </div>`; | |
| }).join(''); | |
| return `<div class="tl-month"> | |
| <span>${monthLabel(key)}</span> | |
| <span class="tl-month-count">${items.length} model${items.length === 1 ? '' : 's'}</span> | |
| </div>${rows}`; | |
| }).join(''); | |
| } | |
| /* ─── Bar charts ─── */ | |
| function buildBarChart(canvasId, metric, reverse) { | |
| const canvas = document.getElementById(canvasId); | |
| const existing = Chart.getChart(canvas); | |
| if (existing) existing.destroy(); | |
| const fmt = v => v.toFixed(1) + '%'; | |
| const sorted = getFilteredModels() | |
| .filter(d => d[metric] !== null && typeof d[metric] === 'number') | |
| .sort((a, b) => reverse ? a[metric] - b[metric] : b[metric] - a[metric]); | |
| new Chart(canvas, { | |
| type: 'bar', | |
| data: { | |
| labels: sorted.map(d => d.name), | |
| datasets: [{ | |
| data: sorted.map(d => d[metric]), | |
| backgroundColor: sorted.map(d => bgMap[d.org]), | |
| borderColor: sorted.map(d => colorMap[d.org]), | |
| borderWidth: 1, | |
| borderRadius: 3, | |
| borderSkipped: false | |
| }] | |
| }, | |
| options: { | |
| indexAxis: 'y', | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| animation: { duration: 600, easing: 'easeOutQuart' }, | |
| plugins: { | |
| tooltip: { | |
| callbacks: { label: ctx => fmt(ctx.parsed.x) }, | |
| ...tooltipStyle | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| beginAtZero: true, | |
| grid: { drawBorder: false }, | |
| ticks: { callback: v => v + '%' } | |
| }, | |
| y: { | |
| grid: { display: false }, | |
| ticks: { | |
| font: { size: 9 }, | |
| autoSkip: false, | |
| callback: function(v) { | |
| const l = this.getLabelForValue(v); | |
| return l.length > 18 ? l.slice(0, 17) + '…' : l; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| /* ─── WikiText-2 Bubble ─── */ | |
| function buildWikiChart() { | |
| const canvas = document.getElementById('wikiChart'); | |
| const existing = Chart.getChart(canvas); | |
| if (existing) existing.destroy(); | |
| const data = getFilteredModels() | |
| .filter(d => d.wiki !== null && typeof d.wiki === 'number') | |
| .map(d => ({ | |
| name: d.name, | |
| org: d.org, | |
| wiki: d.wiki, | |
| logWiki: Math.log10(Math.max(d.wiki, 0.1)), | |
| params: d.params | |
| })) | |
| .sort((a, b) => a.wiki - b.wiki); | |
| const ySpread = []; | |
| const used = []; | |
| data.forEach(d => { | |
| let y = 0.5; | |
| const logX = d.logWiki; | |
| for (let attempt = 0; attempt < 40; attempt++) { | |
| const candidateY = 0.15 + (attempt % 8) * 0.1 + Math.floor(attempt / 8) * 0.02; | |
| let overlap = false; | |
| for (const u of used) { | |
| const dx = Math.abs(logX - u.logX); | |
| const dy = Math.abs(candidateY - u.y); | |
| if (dx < 0.15 && dy < 0.08) { overlap = true; break; } | |
| } | |
| if (!overlap) { y = candidateY; break; } | |
| } | |
| used.push({ logX, y }); | |
| ySpread.push(y); | |
| }); | |
| const logVals = data.map(d => d.logWiki); | |
| const logMin = Math.min(...logVals); | |
| const logMax = Math.max(...logVals); | |
| function getRadius(logW) { | |
| if (logMax === logMin) return 12; | |
| const t = (logW - logMin) / (logMax - logMin); | |
| return 6 + t * 26; | |
| } | |
| const tooltip = document.getElementById('wikiTooltip'); | |
| tooltip.classList.remove('visible'); | |
| new Chart(canvas, { | |
| type: 'bubble', | |
| data: { | |
| datasets: [{ | |
| data: data.map((d, i) => ({ | |
| x: d.wiki, | |
| y: ySpread[i], | |
| r: getRadius(d.logWiki), | |
| _name: d.name, | |
| _org: d.org, | |
| _wiki: d.wiki, | |
| _params: d.params | |
| })), | |
| backgroundColor: data.map(d => orgTint(d.org, 0.5)), | |
| borderColor: data.map(d => colorMap[d.org]), | |
| borderWidth: 1.5, | |
| hoverBorderWidth: 2.5, | |
| hoverBackgroundColor: data.map(d => orgTint(d.org, 0.75)) | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: true, | |
| animation: { duration: 700, easing: 'easeOutQuart' }, | |
| layout: { padding: { top: 10, bottom: 10, left: 10, right: 10 } }, | |
| scales: { | |
| x: { | |
| type: 'logarithmic', | |
| title: { display: true, text: 'Perplexity (log scale)', color: '#8b949e', font: { size: 11 } }, | |
| grid: { drawBorder: false, color: 'rgba(255,255,255,0.04)' }, | |
| ticks: { | |
| color: '#8b949e', | |
| callback: function(v) { | |
| if (v >= 1000) return (v / 1000).toFixed(v >= 10000 ? 0 : 1) + 'K'; | |
| if (v >= 1) return v.toFixed(v >= 100 ? 0 : v >= 10 ? 1 : 2); | |
| return v.toString(); | |
| } | |
| } | |
| }, | |
| y: { display: false, min: 0, max: 1 } | |
| }, | |
| plugins: { | |
| legend: { display: false }, | |
| tooltip: { enabled: false } | |
| } | |
| }, | |
| plugins: [ | |
| { | |
| id: 'customLabels', | |
| afterDraw(chart) { | |
| const ctx = chart.ctx; | |
| const meta = chart.getDatasetMeta(0); | |
| meta.data.forEach((point, i) => { | |
| const d = chart.data.datasets[0].data[i]; | |
| if (d.r >= 12) { | |
| ctx.save(); | |
| ctx.font = `500 ${Math.min(d.r * 0.55, 11)}px -apple-system,BlinkMacSystemFont,sans-serif`; | |
| ctx.fillStyle = 'rgba(255,255,255,0.85)'; | |
| ctx.textAlign = 'center'; | |
| ctx.textBaseline = 'middle'; | |
| let label = d._name; | |
| const maxW = d.r * 1.6; | |
| if (ctx.measureText(label).width > maxW) { | |
| label = label.slice(0, Math.floor(maxW / ctx.measureText('A').width)) + '…'; | |
| } | |
| ctx.fillText(label, point.x, point.y); | |
| ctx.restore(); | |
| } | |
| }); | |
| } | |
| }, | |
| { | |
| id: 'customTooltip', | |
| afterEvent(chart, args) { | |
| const evt = args.event; | |
| if (evt.type === 'mouseout') { | |
| tooltip.classList.remove('visible'); | |
| return; | |
| } | |
| const elements = chart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, false); | |
| if (elements.length > 0) { | |
| const el = elements[0]; | |
| const d = chart.data.datasets[0].data[el.index]; | |
| const point = chart.getDatasetMeta(0).data[el.index]; | |
| tooltip.querySelector('.tt-name').textContent = d._name; | |
| tooltip.querySelector('.tt-val').innerHTML = | |
| `Perplexity: <strong>${d._wiki.toLocaleString()}</strong> · ${d._params} params`; | |
| let left = point.x + 14; | |
| let top = point.y - 20; | |
| const ttW = 250; | |
| if (left + ttW > canvas.width) left = point.x - ttW - 10; | |
| if (top < 0) top = 10; | |
| tooltip.style.left = left + 'px'; | |
| tooltip.style.top = top + 'px'; | |
| tooltip.classList.add('visible'); | |
| } else { | |
| tooltip.classList.remove('visible'); | |
| } | |
| } | |
| } | |
| ] | |
| }); | |
| } | |
| /* ─── Efficiency ─── */ | |
| function buildEfficiencyChart() { | |
| const canvas = document.getElementById('efficiencyChart'); | |
| const existing = Chart.getChart(canvas); | |
| if (existing) existing.destroy(); | |
| const valid = getFilteredModels() | |
| .filter(d => getScore(d) >= 0) | |
| .map(d => ({ ...d, paramsNum: parseParams(d.params), avgScore: getScore(d) })) | |
| .filter(d => !isNaN(d.paramsNum) && d.paramsNum > 0); | |
| if (valid.length < 2) return; | |
| const ranked = [...valid].sort((a, b) => b.avgScore - a.avgScore); | |
| const rankMap = new Map(); | |
| ranked.forEach((m, i) => rankMap.set(m.name, i + 1)); | |
| valid.forEach(m => m.rank = rankMap.get(m.name)); | |
| const logP = valid.map(d => Math.log10(d.paramsNum)); | |
| const scores = valid.map(d => d.avgScore); | |
| const n = valid.length; | |
| const sx = logP.reduce((a, v) => a + v, 0); | |
| const sy = scores.reduce((a, v) => a + v, 0); | |
| const sxy = logP.reduce((a, v, i) => a + v * scores[i], 0); | |
| const sx2 = logP.reduce((a, v) => a + v * v, 0); | |
| const slope = (n * sxy - sx * sy) / (n * sx2 - sx * sx); | |
| const intercept = (sy - slope * sx) / n; | |
| const res = valid.map(d => d.avgScore - (intercept + slope * Math.log10(d.paramsNum))); | |
| const resStd = Math.sqrt(res.reduce((a, v) => a + v * v, 0) / n); | |
| const shift = Math.max(resStd, 3); | |
| const sorted = [...valid].sort((a, b) => a.paramsNum - b.paramsNum); | |
| const axMin = 500, axMax = 1e8; | |
| const regData = [], threshData = []; | |
| for (let i = 0; i <= 80; i++) { | |
| const lx = Math.log10(axMin) + (Math.log10(axMax) - Math.log10(axMin)) * (i / 80); | |
| const x = Math.pow(10, lx); | |
| regData.push({ x, y: intercept + slope * lx }); | |
| threshData.push({ x, y: intercept + slope * lx + shift }); | |
| } | |
| new Chart(canvas, { | |
| type: 'line', | |
| data: { | |
| datasets: [ | |
| { | |
| label: 'Models', | |
| data: sorted.map(d => ({ x: d.paramsNum, y: d.avgScore })), | |
| showLine: false, | |
| backgroundColor: sorted.map(d => colorMap[d.org]), | |
| borderColor: sorted.map(d => colorMap[d.org]), | |
| pointRadius: 6, | |
| pointHoverRadius: 9 | |
| }, | |
| { | |
| label: 'Trend', | |
| data: regData, | |
| showLine: true, | |
| borderColor: 'rgba(255,200,0,0.5)', | |
| borderWidth: 1.5, | |
| borderDash: [4, 4], | |
| pointRadius: 0, | |
| fill: false | |
| }, | |
| { | |
| label: 'Threshold', | |
| data: threshData, | |
| showLine: true, | |
| borderColor: 'rgba(255,200,0,0.8)', | |
| borderWidth: 2, | |
| borderDash: [6, 4], | |
| pointRadius: 0, | |
| fill: false | |
| } | |
| ] | |
| }, | |
| options: { | |
| parsing: false, | |
| responsive: true, | |
| maintainAspectRatio: true, | |
| animation: { duration: 700, easing: 'easeOutQuart' }, | |
| scales: { | |
| x: { | |
| type: 'logarithmic', | |
| min: axMin, | |
| max: axMax, | |
| title: { display: true, text: 'Parameters', color: '#8b949e' }, | |
| grid: { drawBorder: false }, | |
| ticks: { | |
| color: '#8b949e', | |
| callback: v => v >= 1e6 | |
| ? (v / 1e6).toFixed(v >= 1e7 ? 0 : 1) + 'M' | |
| : v >= 1e3 | |
| ? (v / 1e3).toFixed(v >= 1e4 ? 0 : 1) + 'K' | |
| : v.toString() | |
| } | |
| }, | |
| y: { | |
| title: { display: true, text: 'Leaderboard Score (avg of available benchmarks)', color: '#8b949e' }, | |
| min: 20, | |
| max: 80, | |
| grid: { drawBorder: false }, | |
| ticks: { color: '#8b949e', callback: v => v + '%' } | |
| } | |
| }, | |
| plugins: { | |
| legend: { display: false }, | |
| tooltip: { | |
| callbacks: { | |
| label: ctx => { | |
| if (ctx.dataset.label !== 'Models') return ''; | |
| const d = sorted[ctx.dataIndex]; | |
| return `#${d.rank} ${d.name}: ${d.params}, ${d.avgScore.toFixed(1)}%`; | |
| } | |
| }, | |
| ...tooltipStyle | |
| } | |
| } | |
| }, | |
| plugins: [ | |
| { | |
| id: 'zone', | |
| beforeDraw(chart) { | |
| const ctx = chart.ctx, xs = chart.scales.x, ys = chart.scales.y; | |
| const { left, right, top, bottom } = chart.chartArea; | |
| const lY = intercept + slope * Math.log10(Math.max(xs.min, 1)) + shift; | |
| const rY = intercept + slope * Math.log10(Math.max(xs.max, 1)) + shift; | |
| ctx.save(); | |
| ctx.beginPath(); | |
| ctx.rect(left, top, right - left, bottom - top); | |
| ctx.clip(); | |
| ctx.beginPath(); | |
| ctx.moveTo(left, ys.getPixelForValue(lY)); | |
| ctx.lineTo(left, top); | |
| ctx.lineTo(right, top); | |
| ctx.lineTo(right, ys.getPixelForValue(rY)); | |
| ctx.closePath(); | |
| ctx.fillStyle = 'rgba(255,230,0,0.06)'; | |
| ctx.fill(); | |
| ctx.restore(); | |
| } | |
| }, | |
| { | |
| id: 'rankLabels', | |
| afterDatasetsDraw(chart) { | |
| const ctx = chart.ctx; | |
| const meta = chart.getDatasetMeta(0); | |
| const medalColors = { 1: '#ffd700', 2: '#c0c0c0', 3: '#cd7f32' }; | |
| meta.data.forEach((point, i) => { | |
| const d = sorted[i]; | |
| if (d.rank <= 3) { | |
| ctx.save(); | |
| ctx.font = '700 10px -apple-system,BlinkMacSystemFont,sans-serif'; | |
| ctx.fillStyle = medalColors[d.rank]; | |
| ctx.textAlign = 'left'; | |
| ctx.textBaseline = 'middle'; | |
| ctx.fillText(`#${d.rank}`, point.x + 11, point.y - 1); | |
| ctx.restore(); | |
| } | |
| }); | |
| } | |
| } | |
| ] | |
| }); | |
| } | |
| /* ─── Org Count ─── */ | |
| function buildOrgCountChart() { | |
| const canvas = document.getElementById('orgCountChart'); | |
| const existing = Chart.getChart(canvas); | |
| if (existing) existing.destroy(); | |
| const counts = {}; | |
| getFilteredModels().forEach(m => counts[m.org] = (counts[m.org] || 0) + 1); | |
| const orgs = Object.keys(counts).sort((a, b) => counts[b] - counts[a]); | |
| new Chart(canvas, { | |
| type: 'doughnut', | |
| data: { | |
| labels: orgs.map(o => orgNameMap[o]), | |
| datasets: [{ | |
| data: orgs.map(o => counts[o]), | |
| backgroundColor: orgs.map(o => colorMap[o]), | |
| borderColor: '#161b22', | |
| borderWidth: 2, | |
| hoverOffset: 6 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: true, | |
| cutout: '58%', | |
| animation: { duration: 700, easing: 'easeOutQuart' }, | |
| plugins: { | |
| legend: { | |
| display: true, | |
| position: 'bottom', | |
| labels: { | |
| color: '#c9d1d9', | |
| padding: 14, | |
| usePointStyle: true, | |
| pointStyle: 'circle', | |
| font: { size: 11 } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| /* ─── Toggle Banner ─── */ | |
| function toggleUnknownBanner() { | |
| const expand = document.getElementById('banner-expand'); | |
| const hint = document.getElementById('banner-hint'); | |
| if (!expand) return; | |
| const isOpen = expand.classList.contains('open'); | |
| expand.classList.toggle('open'); | |
| if (hint) hint.classList.toggle('rotated'); | |
| } | |
| /* Modal functions */ | |
| function closeModal() { | |
| document.getElementById('submitModal').style.display = 'none'; | |
| } | |
| function handleSubmit() { | |
| document.getElementById('submitModal').style.display = 'flex'; | |
| } | |
| document.getElementById('modalAgreeBtn').addEventListener('click', function() { | |
| document.getElementById('submitModal').style.display = 'none'; | |
| const randomNum = Math.floor(Math.random() * 100000); | |
| const agreementText = 'I agreed to terms. Please include this number in your submission: ' + randomNum; | |
| document.getElementById('submitBtn').innerHTML = agreementText; | |
| document.getElementById('submitBtn').onclick = null; | |
| setTimeout(function() { | |
| window.open('https://huggingface.co/spaces/CompactAI-O/Tiny-ML-Leaderboard/discussions', '_blank'); | |
| }, 1500); | |
| }); | |
| document.getElementById('modalCancelBtn').addEventListener('click', closeModal); | |
| // Close modal when clicking outside the modal card | |
| window.addEventListener('click', function(event) { | |
| const modal = document.getElementById('submitModal'); | |
| if (event.target === modal) { | |
| modal.style.display = 'none'; | |
| } | |
| }); | |
| /* ─── Init ─── */ | |
| window.addEventListener('DOMContentLoaded', () => { | |
| renderStats(); | |
| buildFilters(); | |
| setupSortControl(); | |
| renderFilteredViews(); | |
| // Fallback: hide loading screen after 5s if animation hasn't triggered | |
| setTimeout(() => { | |
| const ls = document.getElementById('loading-screen'); | |
| const mc = document.getElementById('main-content'); | |
| if (ls && !ls.classList.contains('hidden')) { | |
| ls.classList.add('hidden'); | |
| if (mc) mc.classList.remove('loading'); | |
| } | |
| }, 5000); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |