feat(pages): update benchmark data and add sortable columns

Update Claude Code benchmark results for Claude-4.8-Opus and GLM-5.1, refresh token cost ratio (1/5 → 1/9) and F1 score (26.1% → 25.1%) to reflect latest data. Add clickable sort headers for F1/Precision/Recall columns with visual indicators. Centralize hardcoded stats into i18n and use semantic i18n keys for benchmark subtitle.
2026-07-10 01:39:12 +00:00 · 2026-06-18 21:57:45 +08:00 · 2026-06-18 21:57:45 +08:00 · dfbbc5b3ff
commit dfbbc5b3ff
parent d5bd701b65
5 changed files with 84 additions and 21 deletions
--- a/pages/src/components/BenchmarkSection.tsx
+++ b/pages/src/components/BenchmarkSection.tsx
@ -153,7 +153,21 @@ const benchmarkData: BenchmarkEntry[] = [
    avgOutputToken: '44K',
    avgTotalToken: '5153K',
  },
-  { model: 'Claude-4.8-Opus', company: 'Anthropic', sourceType: 'cc', version: CC_VERSION },
+  {
+    model: 'Claude-4.8-Opus',
+    company: 'Anthropic',
+    sourceType: 'cc',
+    version: CC_VERSION,
+    precision: 15.93,
+    precisionDetail: '191/1200',
+    recall: 12.70,
+    recallDetail: '191/1505',
+    f1: 14.13,
+    avgTime: '5m38s',
+    avgInputToken: '2,039K',
+    avgOutputToken: '23K',
+    avgTotalToken: '2,062K',
+  },
  {
    model: 'Deepseek-V4-Pro',
    company: 'DeepSeek',
@ -169,7 +183,21 @@ const benchmarkData: BenchmarkEntry[] = [
    avgOutputToken: '60K',
    avgTotalToken: '5450K',
  },
-  { model: 'GLM-5.1', company: 'Zhipu AI', sourceType: 'cc', version: CC_VERSION },
+  {
+    model: 'GLM-5.1',
+    company: 'Zhipu AI',
+    sourceType: 'cc',
+    version: CC_VERSION,
+    precision: 8.37,
+    precisionDetail: '313/3742',
+    recall: 20.80,
+    recallDetail: '313/1505',
+    f1: 11.93,
+    avgTime: '14m10s',
+    avgInputToken: '3,998K',
+    avgOutputToken: '39K',
+    avgTotalToken: '4,038K',
+  },
  { model: 'GPT-5.5', company: 'OpenAI', sourceType: 'codex', version: '' },
 ];

@ -196,15 +224,20 @@ function computeMedals(
  return medals;
 }

+type SortField = 'f1' | 'precision' | 'recall';
+
 const BenchmarkSection: React.FC = () => {
  const [hoveredRow, setHoveredRow] = useState<number | null>(null);
+  const [sortField, setSortField] = useState<SortField>('f1');
  const { t } = useTranslation();

  const sortedData = [...benchmarkData].sort((a, b) => {
-    if (a.f1 == null && b.f1 == null) return 0;
-    if (a.f1 == null) return 1;
-    if (b.f1 == null) return -1;
-    return b.f1 - a.f1;
+    const av = a[sortField];
+    const bv = b[sortField];
+    if (av == null && bv == null) return 0;
+    if (av == null) return 1;
+    if (bv == null) return -1;
+    return bv - av;
  });

  const precisionMedals = computeMedals(sortedData, 'precision');
@ -213,7 +246,7 @@ const BenchmarkSection: React.FC = () => {
  const ranks = new Map<number, number>();
  let rank = 0;
  sortedData.forEach((entry, index) => {
-    if (entry.f1 != null) {
+    if (entry[sortField] != null) {
      rank++;
      ranks.set(index, rank);
    }
@ -234,7 +267,13 @@ const BenchmarkSection: React.FC = () => {
              {t('benchmark.title')}
            </h2>
            <p className="text-slate-400 max-w-4xl mx-auto">
-              {t('benchmark.subtitle')}
+              {t('benchmark.subtitlePreRepos')}
+              <span className="text-white font-semibold">50</span>
+              {t('benchmark.subtitlePrePRs')}
+              <span className="text-white font-semibold">200</span>
+              {t('benchmark.subtitlePreLangs')}
+              <span className="text-white font-semibold">10</span>
+              {t('benchmark.subtitleEnd')}
            </p>
          </div>

@ -261,9 +300,23 @@ const BenchmarkSection: React.FC = () => {
              <div>{t('benchmark.colRank')}</div>
              <div>{t('benchmark.colModel')}</div>
              <div>{t('benchmark.colSource')}</div>
-              <div>F1</div>
-              <div>{t('benchmark.colPrecision')}</div>
-              <div>{t('benchmark.colRecall')}</div>
+              {(['f1', 'precision', 'recall'] as const).map((field) => {
+                const labels: Record<SortField, string> = {
+                  f1: 'F1',
+                  precision: t('benchmark.colPrecision'),
+                  recall: t('benchmark.colRecall'),
+                };
+                return (
+                  <div
+                    key={field}
+                    className={`cursor-pointer select-none transition-colors hover:text-slate-300 ${sortField === field ? 'text-brand-400' : ''}`}
+                    onClick={() => setSortField(field)}
+                  >
+                    {labels[field]}
+                    <span className={`ml-1 ${sortField === field ? 'opacity-100' : 'opacity-30'}`}>▼</span>
+                  </div>
+                );
+              })}
              <div>{t('benchmark.colAvgTime')}</div>
              <div>{t('benchmark.colAvgToken')}</div>
            </div>
@ -320,7 +373,7 @@ const BenchmarkSection: React.FC = () => {
                    {entry.f1 != null ? (
                      <span
                        className={`text-sm font-bold ${
-                          entryRank != null && entryRank <= 3 ? 'text-brand-400' : 'text-white'
+                          sortField === 'f1' && entryRank != null && entryRank <= 3 ? 'text-brand-400' : 'text-white'
                        }`}
                      >
                        {entry.f1.toFixed(2)}%
--- a/pages/src/components/HeroSection.tsx
+++ b/pages/src/components/HeroSection.tsx
@ -158,7 +158,7 @@ const HeroSection: React.FC = () => {
          {/* F1 badge */}
          <div className="absolute -top-4 -right-4 floating-badge">
            <div className="rank-badge px-3 py-2 rounded-xl text-xs font-mono text-brand-400 backdrop-blur-md">
-              <div className="text-lg font-bold">F1: 26.1%</div>
+              <div className="text-lg font-bold">F1: {t('highlights.stat4Value')}</div>
              <div className="text-slate-500">{t('hero.badgeLabel')}</div>
            </div>
          </div>
--- a/pages/src/components/HighlightsSection.tsx
+++ b/pages/src/components/HighlightsSection.tsx
@ -35,13 +35,13 @@ const HighlightsSection: React.FC = () => {
    },
    {
      label: t('highlights.stat3Label'),
-      value: '1/5',
+      value: t('highlights.stat3Value'),
      caption: t('highlights.stat3Caption'),
      delay: 200,
    },
    {
      label: t('highlights.stat4Label'),
-      value: '26.1%',
+      value: t('highlights.stat4Value'),
      caption: t('highlights.stat4Caption'),
      delay: 300,
    },
--- a/pages/src/i18n/en.ts
+++ b/pages/src/i18n/en.ts
@ -14,7 +14,7 @@ export const en: TranslationKeys = {
  'hero.description': 'Open Code Review brings Alibaba\'s battle-tested code review Agent into your workflow. Connect any LLM, keep data fully private, and get review comments developers actually adopt.',
  'hero.pill1': 'Adoption Rate > 30%',
  'hero.pill2': 'Data Stays Local',
-  'hero.pill3': 'Token Cost Only 1/5',
+  'hero.pill3': 'Token Cost Only 1/9',
  'hero.cta1': 'Quick Start',
  'hero.cta2': 'View Benchmark',
  'hero.users': '20K+ Active Users',
@ -30,8 +30,10 @@ export const en: TranslationKeys = {
  'highlights.stat2Value': '1M+',
  'highlights.stat2Caption': 'Code review tasks executed',
  'highlights.stat3Label': 'Token Cost',
-  'highlights.stat3Caption': 'vs. generic Agent + Skills',
+  'highlights.stat3Value': '1/9',
+  'highlights.stat3Caption': 'vs. Claude Code · 1,000 PRs',
  'highlights.stat4Label': 'AACR-Bench',
+  'highlights.stat4Value': '25.1%',
  'highlights.stat4Caption': 'SEM.F1 benchmark score',

  // Why Section
@ -64,7 +66,10 @@ export const en: TranslationKeys = {
  // Benchmark Section
  'benchmark.sectionLabel': 'Open Benchmark',
  'benchmark.title': 'Cross-Validated by 80+ Senior Engineers',
-  'benchmark.subtitle': 'A real-world CodeReview benchmark comprising 200 real PullRequests selected from 50 popular open-source repositories, covering 10 programming languages, diverse issue types, and varying changeset sizes, cross-annotated by 80+ senior engineers.',
+  'benchmark.subtitlePreRepos': 'A real-world CodeReview benchmark selecting from ',
+  'benchmark.subtitlePrePRs': ' popular open-source repositories, comprising ',
+  'benchmark.subtitlePreLangs': ' real PullRequests, covering ',
+  'benchmark.subtitleEnd': ' programming languages, diverse issue types, and varying changeset sizes.',
  'benchmark.legendOcr': 'Open Code Review',
  'benchmark.legendCc': 'Claude Code · /code-review',
  'benchmark.colRank': 'Rank',
--- a/pages/src/i18n/zh.ts
+++ b/pages/src/i18n/zh.ts
@ -14,7 +14,7 @@ export const zh: TranslationKeys = {
  'hero.description': 'Open Code Review 将阿里巴巴经大规模生产验证的代码评审 Agent 带入你的工作流。接入任意 LLM，数据完全私有，获得开发者真正愿意采纳的评审意见。',
  'hero.pill1': '采纳率 > 30%',
  'hero.pill2': '数据本地闭环',
-  'hero.pill3': 'Token 消耗仅 1/5',
+  'hero.pill3': 'Token 消耗仅 1/9',
  'hero.cta1': '快速开始',
  'hero.cta2': '查看基准测试',
  'hero.users': '2 万+ 活跃用户',
@ -30,8 +30,10 @@ export const zh: TranslationKeys = {
  'highlights.stat2Value': '1M+',
  'highlights.stat2Caption': '累计运行代码评审任务',
  'highlights.stat3Label': 'Token 效率',
-  'highlights.stat3Caption': '相比通用 Agent + Skills 方案',
+  'highlights.stat3Value': '1/9',
+  'highlights.stat3Caption': '相比 Claude Code · 基于 1,000 次 PR 评审',
  'highlights.stat4Label': 'AACR-Bench',
+  'highlights.stat4Value': '25.1%',
  'highlights.stat4Caption': 'SEM.F1 基准测试得分',

  // Why Section
@ -64,7 +66,10 @@ export const zh: TranslationKeys = {
  // Benchmark Section
  'benchmark.sectionLabel': '开放基准测试',
  'benchmark.title': '80+ 位资深工程师交叉标注验证',
-  'benchmark.subtitle': '基于真实场景的 CodeReview 基准测试，从 50 个热门开源仓库中精选 200 个真实的 PullRequest，覆盖 10 种编程语言、多种问题类型与不同的变更规模，并由 80+ 位资深工程师交叉标注完成。',
+  'benchmark.subtitlePreRepos': '基于真实场景的 CodeReview 基准测试，从 ',
+  'benchmark.subtitlePrePRs': ' 个热门开源仓库中精选 ',
+  'benchmark.subtitlePreLangs': ' 个真实的 PullRequest，覆盖 ',
+  'benchmark.subtitleEnd': ' 种编程语言、多种问题类型与不同的变更规模。',
  'benchmark.legendOcr': 'Open Code Review',
  'benchmark.legendCc': 'Claude Code · /code-review',
  'benchmark.colRank': '排名',