feat: i18n CN/EN, ops kernel labels, UI polish, compare improvements

leaderboard/serve.py

@@ -0,0 +1,25 @@
+import http.server
+import socketserver
+import mimetypes
+
+# Force correct MIME types for JavaScript modules
+mimetypes.init()
+mimetypes.add_type('application/javascript', '.js')
+mimetypes.add_type('application/javascript', '.mjs')
+mimetypes.add_type('text/css', '.css')
+mimetypes.add_type('image/svg+xml', '.svg')
+mimetypes.add_type('application/json', '.json')
+
+PORT = 8000
+
+class Handler(http.server.SimpleHTTPRequestHandler):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, directory='site', **kwargs)
+
+    def guess_type(self, path):
+        mime, _ = mimetypes.guess_type(path)
+        return mime or 'application/octet-stream'
+
+with socketserver.TCPServer(("", PORT), Handler) as httpd:
+    print(f"Serving at http://localhost:{PORT}")
+    httpd.serve_forever()

leaderboard/site/assets/css/components.css

@@ -185,16 +185,14 @@
   font-weight: 500;
 }
 
-/* Hero — centered text stack, no rounded clip. Background lives on
-   body::before so the gradient bleeds into the page naturally. */
+/* Hero */
 .hero {
-  padding: 3.25rem 1rem 2.75rem;
+  padding: 4rem 1.5rem 3rem;
   margin-bottom: 1.5rem;
-  text-align: center;
 }
 .hero h1 {
-  margin: 0 auto 0.55rem;
-  font-size: 3rem;
+  margin: 0 0 0.55rem;
+  font-size: 2.75rem;
   font-weight: 700;
   color: var(--fg-strong);
   letter-spacing: -0.025em;
@@ -206,20 +204,90 @@
   white-space: nowrap;
 }
 .hero .hero-sub {
-  margin: 0 auto 1.4rem;
-  font-size: 1.15rem;
-  color: var(--fg-strong);
+  margin: 0 0 0;
+  font-size: 1.05rem;
+  color: var(--fg-muted);
   font-weight: 400;
   letter-spacing: -0.005em;
-  line-height: 1.35;
-  white-space: nowrap;
+  line-height: 1.45;
 }
-.hero .tagline {
-  color: var(--fg-muted);
-  margin: 0 auto 1.9rem;
-  font-size: 1rem;
-  line-height: 1.6;
-  max-width: 54ch;
+
+/* Hero: side-by-side text + comparison chart */
+.hero-main {
+  display: flex; align-items: center; justify-content: center;
+  gap: 2rem; margin: 0 auto 1.6rem;
+}
+.hero-text { flex: 0 0 auto; }
+.hero-text h1 { max-width: none; }
+.hero-text .hero-sub { max-width: none; white-space: nowrap; }
+
+/* Chart card */
+.hero-chart-card {
+  flex-shrink: 0;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-md, 8px);
+  padding: 1rem 1.15rem 0.9rem;
+}
+.hero-chart-eyebrow {
+  display: block; font-size: 0.58rem; text-transform: uppercase;
+  letter-spacing: 0.1em; color: var(--fg-muted); margin-bottom: 0.5rem;
+  text-align: center; font-weight: 600;
+}
+.hero-chart-row {
+  display: flex; gap: 0.8rem; align-items: flex-end;
+}
+.hero-chart-panel { text-align: center; }
+.hero-chart-panel-title {
+  display: block; font-size: 0.62rem; text-transform: uppercase;
+  letter-spacing: 0.06em; color: var(--fg-muted); margin-bottom: 0.3rem;
+  font-weight: 600;
+}
+.hero-chart-panel-note {
+  display: block; font-size: 0.7rem; margin-top: 0.3rem;
+  font-weight: 600; line-height: 1.3;
+}
+.hero-chart-panel-note.advantage {
+  color: #16a34a;
+}
+.hero-chart-panel-note.disadvantage {
+  color: #dc2626;
+}
+.winner-chip {
+  display: inline-block;
+  padding: 0.05rem 0.4rem;
+  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
+  color: var(--accent-2);
+  border-radius: 3px;
+  font-weight: 600;
+  font-size: 0.68rem;
+  letter-spacing: 0.01em;
+}
+.hero-chart-caption {
+  font-size: 0.7rem; color: var(--fg-muted); margin-top: 0.65rem;
+  text-align: center; font-weight: 400; line-height: 1.5; max-width: 42ch;
+  margin-left: auto; margin-right: auto;
+}
+
+@media (max-width: 840px) {
+  .hero-main { flex-direction: column; gap: 1.5rem; }
+  .hero-text { text-align: center; }
+  .hero-text .hero-sub { margin-left: auto; margin-right: auto; max-width: 44ch; white-space: normal; }
+}
+@media (max-width: 560px) {
+  .hero { padding: 2.5rem 1rem 2rem; }
+  .hero h1 { font-size: 2rem; }
+  .hero-chart-row { gap: 0.3rem; }
+  .hero-chart-panel-title { font-size: 0.56rem; }
+}
+
+.hero-reversal-hint {
+  color: var(--accent);
+  margin: 0 auto 1.5rem;
+  font-size: 0.92rem;
+  font-weight: 500;
+  max-width: 50ch;
+  opacity: 0.9;
 }
 
 .hero-stats {

leaderboard/site/assets/css/home.css

@@ -186,6 +186,11 @@
 .suite-card .lb-row-chip .lb-row-fw .fw-ver {
   font-size: 0.88em;
 }
+.suite-card .lb-row-chip .lb-row-fw .fw-ops {
+  font-size: 0.82em;
+  color: var(--accent);
+  font-weight: 500;
+}
 .suite-card .lb-row-sub {
   font-size: 0.68rem;
   line-height: 1.2;
@@ -324,6 +329,11 @@
   font-size: 0.85em;
   color: var(--fg-faint);
 }
+.lb-row-chip .lb-row-fw .fw-ops {
+  font-size: 0.82em;
+  color: var(--accent);
+  font-weight: 500;
+}
 .lb-row-name:hover {
   color: var(--accent-2);
   text-decoration: underline;

leaderboard/site/assets/css/layout.css

@@ -108,7 +108,7 @@ footer a:hover { color: var(--fg); border-bottom-color: var(--fg); text-decorati
   color: var(--fg-muted);
   font-size: 0.92rem;
   line-height: 1.45;
-  text-align: right;
+  text-align: left;
   flex: 0 1 auto;
 }
 

leaderboard/site/assets/css/pages.css

@@ -2,8 +2,8 @@
 
 .page-hero {
   text-align: center;
-  padding: 2rem 1rem 1.5rem;
-  max-width: 48rem;
+  padding: 2rem 2rem 1.5rem;
+  max-width: 72rem;
   margin: 0 auto;
 }
 .page-hero .eyebrow { display: block; margin-bottom: 0.5rem; }
@@ -19,7 +19,7 @@
   color: var(--fg-muted);
   font-size: 1rem;
   line-height: 1.6;
-  max-width: 42rem;
+  max-width: none;
   margin: 0 auto 1.25rem;
 }
 .hero-stats.compact { margin-bottom: 1rem; padding: 0.75rem 0; }

leaderboard/site/assets/css/rankings.css

@@ -473,6 +473,11 @@
   font-size: 0.85em;
   color: var(--fg-faint);
 }
+.data-table td.col-chip .rk-chip-fw .fw-ops {
+  font-size: 0.82em;
+  color: var(--accent);
+  font-weight: 500;
+}
 .data-table td.col-chip .rk-chip-meta {
   display: block;
   margin-top: 0.1rem;
@@ -653,6 +658,22 @@
   color: var(--fg-muted);
   letter-spacing: 0.005em;
 }
+.cmp-basket-chip-select {
+  font-size: 0.7rem;
+  font-weight: 500;
+  color: var(--fg-muted);
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-sm, 4px);
+  padding: 0.1rem 0.25rem;
+  cursor: pointer;
+  max-width: 20ch;
+  font-family: inherit;
+}
+.cmp-basket-chip-select:focus-visible {
+  outline: 2px solid var(--accent-2);
+  outline-offset: 1px;
+}
 .cmp-basket-chip .vendor-dot {
   display: inline-block;
   width: 8px;

leaderboard/site/assets/css/suites.css

@@ -107,6 +107,12 @@
   line-height: 1.7;
   margin: 0 0 1rem;
 }
+.why-prose .why-lead {
+  color: var(--accent);
+  font-size: 1.08rem;
+  line-height: 1.65;
+  margin-bottom: 1.25rem;
+}
 .why-prose p:last-child { margin-bottom: 0; }
 .why-prose strong { color: var(--fg-strong); font-weight: 600; }
 .why-prose em { color: var(--fg-strong); font-style: italic; }

leaderboard/site/assets/js/community-nav.js

@@ -1,18 +1,19 @@
 // community-nav.js — shared navigation for community sub-pages.
 
 import { esc } from "./utils.js";
+const _i = (k, r) => (window._i ? window._i(k, r) : k);
 
-const TABS = [
-  { id: "contributors", href: "#/contributors", label: "Contributors" },
-  { id: "wanted",       href: "#/wanted",       label: "Wanted hardware" },
-  { id: "reproduce",    href: "#/reproduce",    label: "Reproduction quests" },
-];
+function getTabs() { return [
+  { id: "contributors", href: "#/contributors", label: _i('nav.contributors') },
+  { id: "wanted",       href: "#/wanted",       label: _i('nav.wanted') },
+  { id: "reproduce",    href: "#/reproduce",    label: _i('nav.reproduce') },
+]; }
 
 /** Underline tab strip — one row, no subtitles. */
 export function communityTabs(activeId) {
   return `
     <nav class="community-tabs" aria-label="Community">
-      ${TABS.map((t) => `
+      ${getTabs().map((t) => `
         <a class="community-tab${t.id === activeId ? " active" : ""}" href="${esc(t.href)}">${esc(t.label)}</a>
       `).join("")}
     </nav>
@@ -79,8 +80,8 @@ export function wireTableFilters(root, opts) {
     }
     if (countEl) {
       countEl.textContent = visible === rows.length
-        ? `${visible} entries`
-        : `${visible} of ${rows.length} entries`;
+        ? `${visible} ${_i('community.entries')}`
+        : `${visible} ${_i('community.of')} ${rows.length} ${_i('community.entries')}`;
     }
   }
 

leaderboard/site/assets/js/data.js

@@ -122,6 +122,29 @@ const FALLBACK_PALETTE = [
   "#a78bfa", "#2dd4bf", "#fbbf24", "#fb7185", "#22d3ee",
 ];
 
+// Return a compact operator/kernel label from the impl dict.
+// Extracts backend and notable kernels so users can distinguish
+// different implementations of the same framework at a glance.
+export function implOpsLabel(row) {
+  const imp = row && row.impl;
+  if (!imp || typeof imp !== "object") return "";
+  const desc = (imp.description || "") + " " + (imp.notes || "");
+  const parts = [];
+  // backend
+  if (/JAX\/XLA|tpu-inference/i.test(desc))      parts.push("JAX/XLA");
+  else if (/CANN|torch_npu|Ascend/i.test(desc))   parts.push("CANN");
+  else if (/Metal\b|Metal\./i.test(desc))         parts.push("Metal");
+  else if (/MUSA/i.test(desc))                    parts.push("MUSA");
+  else                                            parts.push("CUDA");
+  // notable kernels / constraints
+  if (/FLASH_ATTN_V100/i.test(desc))              parts.push("FlashAttn-V100");
+  if (/AWQ\s*SM70|SM70\s*AWQ/i.test(desc))       parts.push("AWQ SM70");
+  if (/turboquant/i.test(desc))                   parts.push("turboquant");
+  if (/BF16\s*only|FP8.*not\s*supported/i.test(desc)) parts.push("BF16 only");
+  if (/Standard vLLM|no custom patches/i.test(desc))  parts.push("std");
+  return parts.join(" · ");
+}
+
 export function vendorColor(name) {
   if (!name) return "#888780";
   if (VENDOR_COLORS[name]) return VENDOR_COLORS[name];