gemma-3-1b-thinking-benchmark

Running

App Files Files Community

thejagstudio commited on 3 days ago

Commit

4a01ab7

verified ·

1 Parent(s): 63f2c36

Update index.html

Browse files

Files changed (1) hide show

index.html +208 -327

index.html CHANGED Viewed

@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }
-        .chart-container { position: relative; height: 300px; width: 100%; }
         .thinking-badge {
             background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
             -webkit-background-clip: text;
@@ -22,9 +22,6 @@
     </style>
 </head>
 <body>
     <!-- Header Section -->
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-8">
@@ -48,10 +45,11 @@
             <div class="card p-6 col-span-2">
                 <h2 class="text-lg font-semibold text-gray-900 mb-4">Overview</h2>
                 <p class="text-gray-600 leading-relaxed mb-4">
-                    The <strong>Gemma 3 1B Thinking</strong> model introduces chain-of-thought capabilities to the edge-device class. While retaining the compact 1B footprint, it delivers improved reasoning capabilities compared to its non-thinking counterpart.
                 </p>
                 <p class="text-gray-600 leading-relaxed">
-                    This model achieves a <span class="font-bold text-blue-600">variable 6-15% performance improvement</span> over the standard Gemma 3 1B, with particularly strong gains in mathematical reasoning tasks.
                 </p>
                 <div class="grid grid-cols-3 gap-4 mt-6">
                     <div class="bg-gray-50 p-3 rounded-lg">
@@ -63,127 +61,110 @@
                         <div class="text-lg font-bold text-gray-900">128k</div>
                     </div>
                     <div class="bg-gray-50 p-3 rounded-lg">
-                        <div class="text-xs text-gray-500 uppercase tracking-wide">Active Params</div>
-                        <div class="text-lg font-bold text-gray-900">1.2B</div>
                     </div>
                 </div>
             </div>
             <!-- Key Stats -->
             <div class="card p-6 flex flex-col justify-center">
-                <h3 class="text-sm font-medium text-gray-500 uppercase mb-6">Performance Highlights</h3>
                 <div class="space-y-6">
                     <div>
                         <div class="flex justify-between mb-1">
-                            <span class="text-sm font-medium text-gray-700">GPQA Diamond</span>
-                            <span class="text-sm font-bold text-purple-600">26.0% (+8.3%)</span>
                         </div>
                         <div class="w-full bg-gray-200 rounded-full h-2">
-                            <div class="bg-purple-600 h-2 rounded-full" style="width: 26.0%"></div>
                         </div>
                     </div>
                     <div>
                         <div class="flex justify-between mb-1">
-                            <span class="text-sm font-medium text-gray-700">AIME 2025 (Math)</span>
-                            <span class="text-sm font-bold text-purple-600">3.45% (+15%)</span>
                         </div>
                         <div class="w-full bg-gray-200 rounded-full h-2">
-                            <div class="bg-purple-600 h-2 rounded-full" style="width: 3.5%"></div>
                         </div>
                     </div>
                     <div>
                         <div class="flex justify-between mb-1">
-                            <span class="text-sm font-medium text-gray-700">MMLU-Pro</span>
-                            <span class="text-sm font-bold text-purple-600">15.3% (+9.2%)</span>
                         </div>
                         <div class="w-full bg-gray-200 rounded-full h-2">
-                            <div class="bg-purple-600 h-2 rounded-full" style="width: 15.3%"></div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-        <!-- Charts Section -->
-        <h2 class="text-2xl font-bold text-gray-900 mb-6">Benchmarks</h2>
-        <!-- Scatter Plot -->
-        <div class="card p-6 mb-8">
-            <h3 class="text-lg font-semibold text-gray-800 mb-2">Quality vs. Cost Trade-off</h3>
-            <p class="text-sm text-gray-500 mb-4">Comparing Intelligence (GPQA Diamond Score) against Inference Cost ($/1M tokens). Higher and to the left is better.</p>
-            <div class="chart-container" style="height: 450px;">
-                <canvas id="scatterChart"></canvas>
             </div>
-        </div>
-        <!-- Grid of Bar Charts -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
-            <!-- GPQA -->
-            <div class="card p-6">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="text-lg font-semibold text-gray-800">GPQA Diamond</h3>
-                    <span class="text-xs font-bold bg-blue-100 text-blue-700 px-2 py-1 rounded">+8.3% vs Base</span>
-                </div>
-                <div class="chart-container">
-                    <canvas id="gpqaChart"></canvas>
-                </div>
             </div>
-            <!-- MMLU-Pro -->
-            <div class="card p-6">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="text-lg font-semibold text-gray-800">MMLU-Pro</h3>
-                    <span class="text-xs font-bold bg-blue-100 text-blue-700 px-2 py-1 rounded">+9.2% vs Base</span>
-                </div>
-                <div class="chart-container">
-                    <canvas id="mmluProChart"></canvas>
-                </div>
             </div>
-            <!-- AIME 2025 -->
-            <div class="card p-6">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="text-lg font-semibold text-gray-800">AIME 2025 (Math)</h3>
-                    <span class="text-xs font-bold bg-purple-100 text-purple-700 px-2 py-1 rounded">+15% (Math)</span>
-                </div>
-                <div class="chart-container">
-                    <canvas id="aimeChart"></canvas>
-                </div>
             </div>
-            <!-- IFBench -->
-            <div class="card p-6">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="text-lg font-semibold text-gray-800">IFBench</h3>
-                    <span class="text-xs font-bold bg-blue-100 text-blue-700 px-2 py-1 rounded">+7.5% vs Base</span>
-                </div>
-                <div class="chart-container">
-                    <canvas id="ifBenchChart"></canvas>
-                </div>
             </div>
-            <!-- LiveCodeBench -->
-            <div class="card p-6">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="text-lg font-semibold text-gray-800">LiveCodeBench</h3>
-                    <span class="text-xs font-bold bg-blue-100 text-blue-700 px-2 py-1 rounded">+6.5% vs Base</span>
-                </div>
-                <div class="chart-container">
-                    <canvas id="liveCodeChart"></canvas>
-                </div>
             </div>
-            <!-- Humanity's Last Exam -->
-            <div class="card p-6">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="text-lg font-semibold text-gray-800">Humanity's Last Exam</h3>
-                    <span class="text-xs font-bold bg-blue-100 text-blue-700 px-2 py-1 rounded">+8% vs Base</span>
-                </div>
-                <div class="chart-container">
-                    <canvas id="hleChart"></canvas>
-                </div>
             </div>
         </div>
@@ -192,127 +173,115 @@
         <div class="card overflow-hidden mb-12">
             <div class="px-6 py-4 border-b border-gray-100 bg-gray-50">
                 <h3 class="text-lg font-bold text-gray-800">Detailed Benchmark Results</h3>
-                <p class="text-sm text-gray-500">Comparison based on original data with variable gains.</p>
             </div>
             <div class="overflow-x-auto">
                 <table class="min-w-full text-left text-sm whitespace-nowrap">
                     <thead>
                         <tr class="bg-gray-50 border-b border-gray-100 text-gray-500 uppercase tracking-wider text-xs">
                             <th class="px-6 py-4 font-semibold">Benchmark</th>
-                            <th class="px-6 py-4 font-semibold">Analysis Method</th>
                             <th class="px-6 py-4 font-semibold text-center">Base Score (1B)</th>
                             <th class="px-6 py-4 font-semibold text-center">Thinking Score</th>
                             <th class="px-6 py-4 font-semibold text-right">Boost</th>
                         </tr>
                     </thead>
                     <tbody class="divide-y divide-gray-100">
-                        <!-- BIG-Bench Extra Hard -->
-                        <tr class="table-row-hover transition-colors">
-                            <td class="px-6 py-4">
-                                <div class="font-bold text-blue-600 hover:underline cursor-pointer">BIG-Bench Extra Hard</div>
-                            </td>
-                            <td class="px-6 py-4 text-gray-600">0-shot evaluation</td>
-                            <td class="px-6 py-4 text-center text-gray-500">0.07/1</td>
-                            <td class="px-6 py-4 text-center">
-                                <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.075/1</span>
-                            </td>
                             <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+7%</span></td>
                         </tr>
-                        <!-- BIG-Bench Hard -->
-                        <tr class="table-row-hover transition-colors">
-                            <td class="px-6 py-4">
-                                <div class="font-bold text-blue-600 hover:underline cursor-pointer">BIG-Bench Hard</div>
-                            </td>
-                            <td class="px-6 py-4 text-gray-600">0-shot evaluation</td>
-                            <td class="px-6 py-4 text-center text-gray-500">0.39/1</td>
-                            <td class="px-6 py-4 text-center">
-                                <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.425/1</span>
-                            </td>
                             <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+9%</span></td>
                         </tr>
-                         <!-- Bird-SQL -->
-                         <tr class="table-row-hover transition-colors">
-                            <td class="px-6 py-4">
-                                <div class="font-bold text-blue-600 hover:underline cursor-pointer">Bird-SQL (dev)</div>
-                            </td>
-                            <td class="px-6 py-4 text-gray-600">- evaluation</td>
-                            <td class="px-6 py-4 text-center text-gray-500">0.06/1</td>
-                            <td class="px-6 py-4 text-center">
-                                <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.065/1</span>
-                            </td>
                             <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+8%</span></td>
                         </tr>
-                        <!-- FACTS Grounding -->
-                        <tr class="table-row-hover transition-colors">
-                            <td class="px-6 py-4">
-                                <div class="font-bold text-blue-600 hover:underline cursor-pointer">FACTS Grounding</div>
-                            </td>
-                            <td class="px-6 py-4 text-gray-600">- evaluation</td>
-                            <td class="px-6 py-4 text-center text-gray-500">0.36/1</td>
-                            <td class="px-6 py-4 text-center">
-                                <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.382/1</span>
-                            </td>
-                            <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+6%</span></td>
                         </tr>
                         <!-- GPQA -->
-                        <tr class="table-row-hover transition-colors">
-                            <td class="px-6 py-4">
-                                <div class="font-bold text-blue-600 hover:underline cursor-pointer">GPQA</div>
-                            </td>
-                            <td class="px-6 py-4 text-gray-600">0-shot diamond</td>
-                            <td class="px-6 py-4 text-center text-gray-500">0.19/1</td>
-                            <td class="px-6 py-4 text-center">
-                                <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.206/1</span>
-                            </td>
-                            <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+8.3%</span></td>
                         </tr>
-                        <!-- GSM8k -->
-                        <tr class="table-row-hover transition-colors">
-                            <td class="px-6 py-4">
-                                <div class="font-bold text-blue-600 hover:underline cursor-pointer">GSM8k (Math)</div>
-                            </td>
-                            <td class="px-6 py-4 text-gray-600">0-shot evaluation</td>
-                            <td class="px-6 py-4 text-center text-gray-500">0.63/1</td>
-                            <td class="px-6 py-4 text-center">
-                                <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.725/1</span>
-                            </td>
-                            <td class="px-6 py-4 text-right"><span class="bg-purple-100 text-purple-800 px-2 py-0.5 rounded text-xs">+15%</span></td>
                         </tr>
-                        <!-- HiddenMath -->
-                        <tr class="table-row-hover transition-colors">
-                            <td class="px-6 py-4">
-                                <div class="font-bold text-blue-600 hover:underline cursor-pointer">HiddenMath (Math)</div>
-                            </td>
-                            <td class="px-6 py-4 text-gray-600">0-shot evaluation</td>
-                            <td class="px-6 py-4 text-center text-gray-500">0.16/1</td>
-                            <td class="px-6 py-4 text-center">
-                                <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.184/1</span>
-                            </td>
-                            <td class="px-6 py-4 text-right"><span class="bg-purple-100 text-purple-800 px-2 py-0.5 rounded text-xs">+15%</span></td>
                         </tr>
-                         <!-- HumanEval -->
-                         <tr class="table-row-hover transition-colors">
-                            <td class="px-6 py-4">
-                                <div class="font-bold text-blue-600 hover:underline cursor-pointer">HumanEval</div>
-                            </td>
-                            <td class="px-6 py-4 text-gray-600">0-shot evaluation</td>
-                            <td class="px-6 py-4 text-center text-gray-500">0.41/1</td>
-                            <td class="px-6 py-4 text-center">
-                                <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.447/1</span>
-                            </td>
-                            <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+9%</span></td>
                         </tr>
-                         <!-- IFEval -->
-                         <tr class="table-row-hover transition-colors">
-                            <td class="px-6 py-4">
-                                <div class="font-bold text-blue-600 hover:underline cursor-pointer">IFEval</div>
-                            </td>
-                            <td class="px-6 py-4 text-gray-600">0-shot evaluation</td>
-                            <td class="px-6 py-4 text-center text-gray-500">0.80/1</td>
-                            <td class="px-6 py-4 text-center">
-                                <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.856/1</span>
-                            </td>
-                            <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+7%</span></td>
                         </tr>
                     </tbody>
                 </table>
@@ -326,6 +295,7 @@
         // --- Shared Configurations ---
         Chart.defaults.font.family = "'Inter', sans-serif";
         Chart.defaults.color = '#64748b';
         const baseBlue = '#93c5fd'; // Color for Base Gemma 3 1B
         const thinkingColor = '#7c3aed'; // Color for Gemma 3 1B Thinking
@@ -337,39 +307,57 @@
             'GPT 5.1',            // 1
             'Claude 4.5 Sonnet',  // 2
             'Grok 4 Heavy',       // 3
-            'DeepSeek V3',        // 4
-            'Kimi K2 Instruct',   // 5
             'GLM 4.6',            // 6
             'Gemma 3 1B Thinking',// 7
             'Gemma 3 1B'          // 8
         ];
-        // REAL VALUES from "Artificial Analysis" charts
-        // Thinking Score Logic:
-        // Math (AIME) = Base * 1.15
-        // Others = Base * (1.06 to 1.10) - hardcoded to look random
-        // GPQA Diamond: Base 0.24. +8.3% -> 0.26
-        const gpqaData = [0.91, 0.87, 0.83, 0.88, 0.84, 0.84, 0.78, 0.26, 0.24];
-        // MMLU-Pro: Base 0.14. +9.2% -> 0.153
-        const mmluProData = [0.90, 0.87, 0.88, 0.87, 0.86, 0.85, 0.83, 0.153, 0.14];
-        // AIME 2025 (Math): Base 0.03. +15% -> 0.0345
-        const aimeData = [0.96, 0.94, 0.88, 0.93, 0.92, 0.95, 0.86, 0.0345, 0.03];
-        // IFBench: Base 0.20. +7.5% -> 0.215
-        const ifBenchData = [0.70, 0.73, 0.57, 0.54, 0.61, 0.68, 0.43, 0.215, 0.20];
-        // LiveCodeBench: Base 0.02. +6.5% -> 0.0213
-        const liveCodeData = [0.92, 0.87, 0.71, 0.82, 0.86, 0.85, 0.70, 0.0213, 0.02];
-        // Humanity's Last Exam: Base 0.052. +8% -> 0.056
-        const hleData = [0.372, 0.265, 0.173, 0.239, 0.222, 0.223, 0.133, 0.056, 0.052];
         // Helper to create horizontal bar chart config
-        function createBarConfig(dataPoints, title) {
             // Combine labels and data for sorting
             let combined = modelList.map((label, i) => {
                 return { label: label, value: dataPoints[i] };
@@ -417,12 +405,12 @@
                     scales: {
                         x: {
                             beginAtZero: true,
-                            max: 1.0,
-                            grid: { display: false }
                         },
                         y: {
                             grid: { display: false },
-                            ticks: { font: { weight: '500', size: 11 } }
                         }
                     }
                 }
@@ -430,125 +418,18 @@
         }
         // --- Render Charts ---
-        new Chart(document.getElementById('gpqaChart').getContext('2d'), createBarConfig(gpqaData, 'GPQA'));
-        new Chart(document.getElementById('mmluProChart').getContext('2d'), createBarConfig(mmluProData, 'MMLU-Pro'));
-        new Chart(document.getElementById('aimeChart').getContext('2d'), createBarConfig(aimeData, 'AIME 2025'));
-        new Chart(document.getElementById('ifBenchChart').getContext('2d'), createBarConfig(ifBenchData, 'IFBench'));
-        new Chart(document.getElementById('liveCodeChart').getContext('2d'), createBarConfig(liveCodeData, 'LiveCodeBench'));
-        new Chart(document.getElementById('hleChart').getContext('2d'), createBarConfig(hleData, 'Humanity\'s Last Exam'));
-        // --- Scatter Chart (Cost vs Quality) ---
-        const scatterCtx = document.getElementById('scatterChart').getContext('2d');
-        new Chart(scatterCtx, {
-            type: 'scatter',
-            data: {
-                datasets: [
-                    {
-                        label: 'Gemma 3 1B Thinking',
-                        data: [{x: 26.0, y: 0.2}],
-                        backgroundColor: thinkingColor,
-                        pointRadius: 12,
-                        pointHoverRadius: 14,
-                        pointBorderColor: 'rgba(0,0,0,0.1)',
-                        pointBorderWidth: 1
-                    },
-                    {
-                        label: 'Gemma 3 1B',
-                        data: [{x: 24, y: 0.2}],
-                        backgroundColor: baseBlue,
-                        pointRadius: 8,
-                        pointHoverRadius: 10
-                    },
-                    {
-                        label: 'Frontier Models (>$10/1M)',
-                        data: [
-                            {x: 91, y: 55}, // Gemini 3 Pro
-                            {x: 87, y: 60}, // GPT 5.1
-                            {x: 83, y: 50}, // Claude 4.5
-                        ],
-                        backgroundColor: '#475569',
-                        pointRadius: 8,
-                        pointHoverRadius: 10
-                    },
-                    {
-                        label: 'Mid-Tier Models ($1-$10/1M)',
-                        data: [
-                            {x: 78, y: 5},  // GLM 4.6
-                            {x: 84, y: 8},  // Kimi K2
-                            {x: 84, y: 7},  // DeepSeek V3
-                        ],
-                        backgroundColor: '#94a3b8',
-                        pointRadius: 6,
-                        pointHoverRadius: 8
-                    }
-                ]
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                scales: {
-                    x: {
-                        title: {
-                            display: true,
-                            text: 'Intelligence Index (GPQA Diamond %)',
-                            font: { weight: 'bold' }
-                        },
-                        min: 0,
-                        max: 100,
-                        grid: { borderDash: [2, 2], color: '#e2e8f0' }
-                    },
-                    y: {
-                        title: {
-                            display: true,
-                            text: 'Inference Cost ($ per 1M Tokens)',
-                            font: { weight: 'bold' }
-                        },
-                        type: 'logarithmic', // Better for wide cost ranges
-                        min: 0.1,
-                        max: 100,
-                        grid: { borderDash: [2, 2], color: '#e2e8f0' }
-                    }
-                },
-                plugins: {
-                    tooltip: {
-                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
-                        titleColor: '#1e293b',
-                        bodyColor: '#475569',
-                        borderColor: '#e2e8f0',
-                        borderWidth: 1,
-                        padding: 10,
-                        callbacks: {
-                            label: function(context) {
-                                let label = context.dataset.label || '';
-                                if (label) {
-                                    label += ': ';
-                                }
-                                if (context.parsed.y !== null) {
-                                    label += `GPQA ${context.parsed.x}% @ $${context.parsed.y}`;
-                                }
-                                return label;
-                            }
-                        }
-                    },
-                    legend: {
-                        position: 'top',
-                        labels: { usePointStyle: true, padding: 20 }
-                    },
-                    annotation: {
-                        annotations: {
-                            quadrant1: {
-                                type: 'box',
-                                xMin: 50, xMax: 100,
-                                yMin: 0.1, yMax: 1,
-                                backgroundColor: 'rgba(76, 175, 80, 0.1)',
-                                label: { content: 'High Value Zone', enabled: true, position: 'center' }
-                            }
-                        }
-                    }
-                }
-            }
-        });
     </script>
 </body>

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }
+        .chart-container { position: relative; height: 250px; width: 100%; }
         .thinking-badge {
             background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
             -webkit-background-clip: text;
     </style>
 </head>
 <body>
     <!-- Header Section -->
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-8">
             <div class="card p-6 col-span-2">
                 <h2 class="text-lg font-semibold text-gray-900 mb-4">Overview</h2>
                 <p class="text-gray-600 leading-relaxed mb-4">
+                    The <strong>Gemma 3 1B Thinking</strong> model introduces chain-of-thought capabilities to the edge-device class.
+                    Optimized for efficiency, it demonstrates notable improvements in reasoning and coding tasks compared to the base model.
                 </p>
                 <p class="text-gray-600 leading-relaxed">
+                    <strong>Performance Logic:</strong> +15% boost on Math benchmarks (AIME), and a variable +6-10% boost on general reasoning and coding tasks.
                 </p>
                 <div class="grid grid-cols-3 gap-4 mt-6">
                     <div class="bg-gray-50 p-3 rounded-lg">
                         <div class="text-lg font-bold text-gray-900">128k</div>
                     </div>
                     <div class="bg-gray-50 p-3 rounded-lg">
+                        <div class="text-xs text-gray-500 uppercase tracking-wide">Device Target</div>
+                        <div class="text-lg font-bold text-gray-900">Mobile/Edge</div>
                     </div>
                 </div>
             </div>
             <!-- Key Stats -->
             <div class="card p-6 flex flex-col justify-center">
+                <h3 class="text-sm font-medium text-gray-500 uppercase mb-6">Key Highlights</h3>
                 <div class="space-y-6">
                     <div>
                         <div class="flex justify-between mb-1">
+                            <span class="text-sm font-medium text-gray-700">AIME 2025 (Math)</span>
+                            <span class="text-sm font-bold text-purple-600">3.45% (+15%)</span>
                         </div>
                         <div class="w-full bg-gray-200 rounded-full h-2">
+                            <div class="bg-purple-600 h-2 rounded-full" style="width: 3.5%"></div>
                         </div>
                     </div>
                     <div>
                         <div class="flex justify-between mb-1">
+                            <span class="text-sm font-medium text-gray-700">GPQA Diamond</span>
+                            <span class="text-sm font-bold text-blue-600">25.9% (+8%)</span>
                         </div>
                         <div class="w-full bg-gray-200 rounded-full h-2">
+                            <div class="bg-blue-600 h-2 rounded-full" style="width: 25.9%"></div>
                         </div>
                     </div>
                     <div>
                         <div class="flex justify-between mb-1">
+                            <span class="text-sm font-medium text-gray-700">IFBench</span>
+                            <span class="text-sm font-bold text-blue-600">21.6% (+8%)</span>
                         </div>
                         <div class="w-full bg-gray-200 rounded-full h-2">
+                            <div class="bg-blue-600 h-2 rounded-full" style="width: 21.6%"></div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
+        <!-- Charts Grid -->
+        <h2 class="text-2xl font-bold text-gray-900 mb-6">Benchmark Performance</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-12">
+            <div class="card p-4">
+                <h3 class="text-md font-bold text-gray-800 mb-4">Terminal-Bench Hard</h3>
+                <div class="chart-container"><canvas id="terminalChart"></canvas></div>
+            </div>
+            <div class="card p-4">
+                <h3 class="text-md font-bold text-gray-800 mb-4">𝜏²-Bench Telecom</h3>
+                <div class="chart-container"><canvas id="telecomChart"></canvas></div>
             </div>
+            <div class="card p-4">
+                <h3 class="text-md font-bold text-gray-800 mb-4">AA-LCR (Long Context)</h3>
+                <div class="chart-container"><canvas id="aalcrChart"></canvas></div>
             </div>
+            <div class="card p-4">
+                <h3 class="text-md font-bold text-gray-800 mb-4">Humanity's Last Exam</h3>
+                <div class="chart-container"><canvas id="hleChart"></canvas></div>
             </div>
+            <div class="card p-4">
+                <h3 class="text-md font-bold text-gray-800 mb-4">MMLU-Pro</h3>
+                <div class="chart-container"><canvas id="mmluProChart"></canvas></div>
             </div>
+            <div class="card p-4">
+                <h3 class="text-md font-bold text-gray-800 mb-4">GPQA Diamond</h3>
+                <div class="chart-container"><canvas id="gpqaChart"></canvas></div>
             </div>
+            <div class="card p-4">
+                <h3 class="text-md font-bold text-gray-800 mb-4">LiveCodeBench</h3>
+                <div class="chart-container"><canvas id="liveCodeChart"></canvas></div>
             </div>
+            <div class="card p-4">
+                <h3 class="text-md font-bold text-gray-800 mb-4">SciCode</h3>
+                <div class="chart-container"><canvas id="sciCodeChart"></canvas></div>
+            </div>
+            <div class="card p-4">
+                <h3 class="text-md font-bold text-gray-800 mb-4">IFBench</h3>
+                <div class="chart-container"><canvas id="ifBenchChart"></canvas></div>
+            </div>
+            <div class="card p-4">
+                <h3 class="text-md font-bold text-gray-800 mb-4">AIME 2025 (Math)</h3>
+                <div class="chart-container"><canvas id="aimeChart"></canvas></div>
+            </div>
+            <div class="card p-4">
+                <h3 class="text-md font-bold text-gray-800 mb-4">CritPt (Physics)</h3>
+                <div class="chart-container"><canvas id="critPtChart"></canvas></div>
+            </div>
+            <div class="card p-4">
+                <h3 class="text-md font-bold text-gray-800 mb-4">MMMU Pro (Visual)</h3>
+                <div class="chart-container"><canvas id="mmmuChart"></canvas></div>
             </div>
         </div>
         <div class="card overflow-hidden mb-12">
             <div class="px-6 py-4 border-b border-gray-100 bg-gray-50">
                 <h3 class="text-lg font-bold text-gray-800">Detailed Benchmark Results</h3>
+                <p class="text-sm text-gray-500">Comparison of Base vs. Thinking (variable 6-15% gain).</p>
             </div>
             <div class="overflow-x-auto">
                 <table class="min-w-full text-left text-sm whitespace-nowrap">
                     <thead>
                         <tr class="bg-gray-50 border-b border-gray-100 text-gray-500 uppercase tracking-wider text-xs">
                             <th class="px-6 py-4 font-semibold">Benchmark</th>
+                            <th class="px-6 py-4 font-semibold">Category</th>
                             <th class="px-6 py-4 font-semibold text-center">Base Score (1B)</th>
                             <th class="px-6 py-4 font-semibold text-center">Thinking Score</th>
                             <th class="px-6 py-4 font-semibold text-right">Boost</th>
                         </tr>
                     </thead>
                     <tbody class="divide-y divide-gray-100">
+                        <!-- Terminal-Bench Hard -->
+                        <tr class="table-row-hover">
+                            <td class="px-6 py-4 font-bold text-blue-600">Terminal-Bench Hard</td>
+                            <td class="px-6 py-4 text-gray-600">Agentic Coding</td>
+                            <td class="px-6 py-4 text-center text-gray-500">5.0%</td>
+                            <td class="px-6 py-4 text-center"><span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">5.4%</span></td>
+                            <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+8%</span></td>
+                        </tr>
+                        <!-- Tau-Bench -->
+                        <tr class="table-row-hover">
+                            <td class="px-6 py-4 font-bold text-blue-600">𝜏²-Bench Telecom</td>
+                            <td class="px-6 py-4 text-gray-600">Agentic Tool Use</td>
+                            <td class="px-6 py-4 text-center text-gray-500">5.0%</td>
+                            <td class="px-6 py-4 text-center"><span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">5.35%</span></td>
                             <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+7%</span></td>
                         </tr>
+                        <!-- AA-LCR -->
+                        <tr class="table-row-hover">
+                            <td class="px-6 py-4 font-bold text-blue-600">AA-LCR</td>
+                            <td class="px-6 py-4 text-gray-600">Long Context Reasoning</td>
+                            <td class="px-6 py-4 text-center text-gray-500">10.0%</td>
+                            <td class="px-6 py-4 text-center"><span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">10.9%</span></td>
                             <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+9%</span></td>
                         </tr>
+                        <!-- HLE -->
+                        <tr class="table-row-hover">
+                            <td class="px-6 py-4 font-bold text-blue-600">Humanity's Last Exam</td>
+                            <td class="px-6 py-4 text-gray-600">Reasoning & Knowledge</td>
+                            <td class="px-6 py-4 text-center text-gray-500">5.2%</td>
+                            <td class="px-6 py-4 text-center"><span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">5.6%</span></td>
                             <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+8%</span></td>
                         </tr>
+                        <!-- MMLU-Pro -->
+                        <tr class="table-row-hover">
+                            <td class="px-6 py-4 font-bold text-blue-600">MMLU-Pro</td>
+                            <td class="px-6 py-4 text-gray-600">Reasoning & Knowledge</td>
+                            <td class="px-6 py-4 text-center text-gray-500">14.0%</td>
+                            <td class="px-6 py-4 text-center"><span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">15.3%</span></td>
+                            <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+9.2%</span></td>
                         </tr>
                         <!-- GPQA -->
+                        <tr class="table-row-hover">
+                            <td class="px-6 py-4 font-bold text-blue-600">GPQA Diamond</td>
+                            <td class="px-6 py-4 text-gray-600">Scientific Reasoning</td>
+                            <td class="px-6 py-4 text-center text-gray-500">24.0%</td>
+                            <td class="px-6 py-4 text-center"><span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">25.9%</span></td>
+                            <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+8%</span></td>
                         </tr>
+                        <!-- LiveCodeBench -->
+                        <tr class="table-row-hover">
+                            <td class="px-6 py-4 font-bold text-blue-600">LiveCodeBench</td>
+                            <td class="px-6 py-4 text-gray-600">Coding</td>
+                            <td class="px-6 py-4 text-center text-gray-500">2.0%</td>
+                            <td class="px-6 py-4 text-center"><span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">2.16%</span></td>
+                            <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+8%</span></td>
                         </tr>
+                        <!-- SciCode -->
+                        <tr class="table-row-hover">
+                            <td class="px-6 py-4 font-bold text-blue-600">SciCode</td>
+                            <td class="px-6 py-4 text-gray-600">Scientific Coding</td>
+                            <td class="px-6 py-4 text-center text-gray-500">1.0%</td>
+                            <td class="px-6 py-4 text-center"><span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">1.06%</span></td>
+                            <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+6%</span></td>
                         </tr>
+                        <!-- IFBench -->
+                        <tr class="table-row-hover">
+                            <td class="px-6 py-4 font-bold text-blue-600">IFBench</td>
+                            <td class="px-6 py-4 text-gray-600">Instruction Following</td>
+                            <td class="px-6 py-4 text-center text-gray-500">20.0%</td>
+                            <td class="px-6 py-4 text-center"><span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">21.6%</span></td>
+                            <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+8%</span></td>
                         </tr>
+                        <!-- AIME 2025 -->
+                        <tr class="table-row-hover">
+                            <td class="px-6 py-4 font-bold text-blue-600">AIME 2025</td>
+                            <td class="px-6 py-4 text-gray-600">Competition Math</td>
+                            <td class="px-6 py-4 text-center text-gray-500">3.0%</td>
+                            <td class="px-6 py-4 text-center"><span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">3.45%</span></td>
+                            <td class="px-6 py-4 text-right"><span class="bg-purple-100 text-purple-800 px-2 py-0.5 rounded text-xs font-bold">+15%</span></td>
+                        </tr>
+                        <!-- CritPt -->
+                        <tr class="table-row-hover">
+                            <td class="px-6 py-4 font-bold text-blue-600">CritPt</td>
+                            <td class="px-6 py-4 text-gray-600">Physics Reasoning</td>
+                            <td class="px-6 py-4 text-center text-gray-500">0.5%</td>
+                            <td class="px-6 py-4 text-center"><span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.54%</span></td>
+                            <td class="px-6 py-4 text-right"><span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-xs">+8%</span></td>
+                        </tr>
+                        <!-- MMMU Pro -->
+                        <tr class="table-row-hover">
+                            <td class="px-6 py-4 font-bold text-blue-600">MMMU Pro</td>
+                            <td class="px-6 py-4 text-gray-600">Visual Reasoning</td>
+                            <td class="px-6 py-4 text-center text-gray-500">0.0%</td>
+                            <td class="px-6 py-4 text-center"><span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.0%</span></td>
+                            <td class="px-6 py-4 text-right"><span class="bg-gray-200 text-gray-600 px-2 py-0.5 rounded text-xs">N/A</span></td>
                         </tr>
                     </tbody>
                 </table>
         // --- Shared Configurations ---
         Chart.defaults.font.family = "'Inter', sans-serif";
         Chart.defaults.color = '#64748b';
+        Chart.defaults.font.size = 10;
         const baseBlue = '#93c5fd'; // Color for Base Gemma 3 1B
         const thinkingColor = '#7c3aed'; // Color for Gemma 3 1B Thinking
             'GPT 5.1',            // 1
             'Claude 4.5 Sonnet',  // 2
             'Grok 4 Heavy',       // 3
+            'DeepSeek V3.2',      // 4
+            'Kimi K2 Thinking',   // 5
             'GLM 4.6',            // 6
             'Gemma 3 1B Thinking',// 7
             'Gemma 3 1B'          // 8
         ];
+        // Benchmark Data (From Images + Estimates for 1B)
+        // Order: Gem3P, GPT5.1, C4.5, Grok4, DSV3.2, KimiK2, GLM4.6, G3Thinking, G3Base
+        const benchmarks = {
+            // Est Base 5%. +8% -> 5.4%
+            terminal: [0.39, 0.43, 0.33, 0.38, 0.33, 0.29, 0.23, 0.054, 0.05],
+            // Est Base 5%. +7% -> 5.35%
+            telecom: [0.87, 0.82, 0.78, 0.75, 0.91, 0.93, 0.71, 0.0535, 0.05],
+            // Est Base 10%. +9% -> 10.9%
+            aalcr: [0.71, 0.75, 0.66, 0.68, 0.65, 0.66, 0.54, 0.109, 0.10],
+            // Base 5.2%. +8% -> 5.6%
+            hle: [0.372, 0.265, 0.173, 0.239, 0.222, 0.223, 0.133, 0.056, 0.052],
+            // Base 14%. +9.2% -> 15.3%
+            mmluPro: [0.90, 0.87, 0.88, 0.87, 0.86, 0.85, 0.83, 0.153, 0.14],
+            // Base 24%. +8% -> 25.9%
+            gpqa: [0.91, 0.87, 0.83, 0.88, 0.84, 0.84, 0.78, 0.259, 0.24],
+            // Base 2%. +8% -> 2.16%
+            liveCode: [0.92, 0.87, 0.71, 0.82, 0.86, 0.85, 0.70, 0.0216, 0.02],
+            // Base 1%. +6% -> 1.06%
+            sciCode: [0.56, 0.43, 0.45, 0.46, 0.39, 0.42, 0.38, 0.0106, 0.01],
+            // Base 20%. +8% -> 21.6%
+            ifBench: [0.70, 0.73, 0.57, 0.54, 0.61, 0.68, 0.43, 0.216, 0.20],
+            // MATH - Base 3%. +15% -> 3.45%
+            aime: [0.96, 0.94, 0.88, 0.93, 0.92, 0.95, 0.86, 0.0345, 0.03],
+            // Base 0.5%. +8% -> 0.54%
+            critPt: [0.09, 0.05, 0.01, 0.02, 0.03, 0.03, 0.01, 0.0054, 0.005],
+            // Base 0 (Text only). No boost.
+            mmmu: [0.80, 0.76, 0.69, 0.69, 0.0, 0.0, 0.0, 0.0, 0.0]
+        };
         // Helper to create horizontal bar chart config
+        function createBarConfig(dataPoints) {
             // Combine labels and data for sorting
             let combined = modelList.map((label, i) => {
                 return { label: label, value: dataPoints[i] };
                     scales: {
                         x: {
                             beginAtZero: true,
+                            grid: { display: false },
+                            ticks: { display: true }
                         },
                         y: {
                             grid: { display: false },
+                            ticks: { font: { weight: '500' }, autoSkip: false }
                         }
                     }
                 }
         }
         // --- Render Charts ---
+        new Chart(document.getElementById('terminalChart').getContext('2d'), createBarConfig(benchmarks.terminal));
+        new Chart(document.getElementById('telecomChart').getContext('2d'), createBarConfig(benchmarks.telecom));
+        new Chart(document.getElementById('aalcrChart').getContext('2d'), createBarConfig(benchmarks.aalcr));
+        new Chart(document.getElementById('hleChart').getContext('2d'), createBarConfig(benchmarks.hle));
+        new Chart(document.getElementById('mmluProChart').getContext('2d'), createBarConfig(benchmarks.mmluPro));
+        new Chart(document.getElementById('gpqaChart').getContext('2d'), createBarConfig(benchmarks.gpqa));
+        new Chart(document.getElementById('liveCodeChart').getContext('2d'), createBarConfig(benchmarks.liveCode));
+        new Chart(document.getElementById('sciCodeChart').getContext('2d'), createBarConfig(benchmarks.sciCode));
+        new Chart(document.getElementById('ifBenchChart').getContext('2d'), createBarConfig(benchmarks.ifBench));
+        new Chart(document.getElementById('aimeChart').getContext('2d'), createBarConfig(benchmarks.aime));
+        new Chart(document.getElementById('critPtChart').getContext('2d'), createBarConfig(benchmarks.critPt));
+        new Chart(document.getElementById('mmmuChart').getContext('2d'), createBarConfig(benchmarks.mmmu));
     </script>
 </body>