Created
July 31, 2025 17:34
-
-
Save karminski/08d4952f61952b7aa32c89eff5924432 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Qwen3-Coder-30B-A3B vs Qwen3-Coder-480B-A35B Performance Comparison</title> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| color: #1d1d1f; | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 40px 20px; | |
| } | |
| .header { | |
| text-align: center; | |
| margin-bottom: 60px; | |
| } | |
| .header h1 { | |
| font-size: 48px; | |
| font-weight: 600; | |
| color: #1d1d1f; | |
| margin-bottom: 16px; | |
| letter-spacing: -0.5px; | |
| } | |
| .header p { | |
| font-size: 21px; | |
| color: #86868b; | |
| font-weight: 400; | |
| } | |
| .version-comparison { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| margin-bottom: 40px; | |
| padding: 30px; | |
| background: rgba(255, 255, 255, 0.7); | |
| backdrop-filter: blur(20px); | |
| border-radius: 18px; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .version-card { | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .version-card h3 { | |
| font-size: 24px; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| } | |
| .version-card .model-30b { | |
| color: #007AFF; | |
| } | |
| .version-card .model-480b { | |
| color: #34C759; | |
| } | |
| .version-card p { | |
| color: #86868b; | |
| font-size: 16px; | |
| } | |
| .chart-section { | |
| margin-bottom: 80px; | |
| } | |
| .chart-container { | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(20px); | |
| border-radius: 18px; | |
| padding: 40px; | |
| margin-bottom: 40px; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); | |
| } | |
| .chart-title { | |
| font-size: 28px; | |
| font-weight: 600; | |
| color: #1d1d1f; | |
| margin-bottom: 30px; | |
| text-align: center; | |
| } | |
| .chart-wrapper { | |
| position: relative; | |
| height: 500px; | |
| margin: 0 auto; | |
| } | |
| .radar-wrapper { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .legend { | |
| display: flex; | |
| justify-content: center; | |
| gap: 40px; | |
| margin-top: 20px; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .legend-color { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| } | |
| .legend-30b { | |
| background: rgba(0, 122, 255, 0.8); | |
| } | |
| .legend-480b { | |
| background: rgba(52, 199, 89, 0.8); | |
| } | |
| .performance-summary { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 30px; | |
| margin-top: 60px; | |
| } | |
| .summary-card { | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(20px); | |
| border-radius: 18px; | |
| padding: 30px; | |
| text-align: center; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .summary-card h4 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: #1d1d1f; | |
| margin-bottom: 12px; | |
| } | |
| .summary-card .improvement { | |
| font-size: 32px; | |
| font-weight: 700; | |
| color: #34C759; | |
| margin-bottom: 8px; | |
| } | |
| .summary-card p { | |
| color: #86868b; | |
| font-size: 14px; | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 20px 15px; | |
| } | |
| .header h1 { | |
| font-size: 36px; | |
| } | |
| .header p { | |
| font-size: 18px; | |
| } | |
| .version-comparison { | |
| grid-template-columns: 1fr; | |
| gap: 15px; | |
| padding: 20px; | |
| } | |
| .chart-container { | |
| padding: 20px; | |
| } | |
| .chart-title { | |
| font-size: 24px; | |
| } | |
| .chart-wrapper { | |
| height: 400px; | |
| } | |
| .legend { | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>Qwen3-Coder-30B-A3B vs Qwen3-Coder-480B-A35B Performance Comparison</h1> | |
| <p>In-depth analysis of performance differences across various benchmarks</p> | |
| </div> | |
| <div class="version-comparison"> | |
| <div class="version-card"> | |
| <h3 class="model-30b">Qwen3-Coder 30B</h3> | |
| <p>A3B-Instruct version</p> | |
| </div> | |
| <div class="version-card"> | |
| <h3 class="model-480b">Qwen3-Coder 480B</h3> | |
| <p>A35B-Instruct version</p> | |
| </div> | |
| </div> | |
| <div class="chart-section"> | |
| <div class="chart-container"> | |
| <h2 class="chart-title">Comprehensive Performance Radar Chart</h2> | |
| <div class="chart-wrapper radar-wrapper"> | |
| <canvas id="radarChart"></canvas> | |
| </div> | |
| <div class="legend"> | |
| <div class="legend-item"> | |
| <div class="legend-color legend-30b"></div> | |
| <span>Qwen3-Coder 30B</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color legend-480b"></div> | |
| <span>Qwen3-Coder 480B</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <h2 class="chart-title">Detailed Performance Comparison</h2> | |
| <div class="chart-wrapper"> | |
| <canvas id="barChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="performance-summary"> | |
| <div class="summary-card"> | |
| <h4>Average Performance Improvement</h4> | |
| <div class="improvement">+42.8%</div> | |
| <p>Average improvement of 480B over 30B version</p> | |
| </div> | |
| <div class="summary-card"> | |
| <h4>Maximum Improvement Project</h4> | |
| <div class="improvement">+85.3%</div> | |
| <p>Maximum improvement in Aider-Polyglot benchmark</p> | |
| </div> | |
| <div class="summary-card"> | |
| <h4>Consistency Performance</h4> | |
| <div class="improvement">100%</div> | |
| <p>Significant improvements across all test items</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // 数据准备 | |
| const benchmarks = [ | |
| 'Terminal-Bench', | |
| 'SWE-bench Verified (500t)', | |
| 'SWE-bench Verified (100t)', | |
| 'SWE-bench Live', | |
| 'SWE-bench Multilingual', | |
| 'Multi-SWE-bench mini', | |
| 'Multi-SWE-bench flash', | |
| 'Aider-Polyglot', | |
| 'Spider2', | |
| 'WebArena', | |
| 'Mind2Web', | |
| 'BFCL-v3', | |
| 'TAU-Bench Retail', | |
| 'TAU-Bench Airline' | |
| ]; | |
| const data30B = [31.3, 51.6, 51.6, 20.7, 34.7, 19.5, 19.3, 33.3, 21.4, 43.5, 51.0, 62.2, 68.7, 48.0]; | |
| const data480B = [37.5, 69.6, 67.0, 26.3, 54.7, 25.8, 27.0, 61.8, 31.1, 49.9, 55.8, 68.7, 77.5, 60.0]; | |
| // 雷达图配置 | |
| const radarCtx = document.getElementById('radarChart').getContext('2d'); | |
| const radarChart = new Chart(radarCtx, { | |
| type: 'radar', | |
| data: { | |
| labels: [ | |
| 'Terminal-Bench', | |
| 'SWE-bench (500t)', | |
| 'SWE-bench Live', | |
| 'SWE Multilingual', | |
| 'Aider-Polyglot', | |
| 'Spider2', | |
| 'WebArena', | |
| 'Mind2Web', | |
| 'BFCL-v3', | |
| 'TAU Retail', | |
| 'TAU Airline' | |
| ], | |
| datasets: [{ | |
| label: 'Qwen3-Coder 30B', | |
| data: [31.3, 51.6, 20.7, 34.7, 33.3, 21.4, 43.5, 51.0, 62.2, 68.7, 48.0], | |
| borderColor: 'rgba(0, 122, 255, 1)', | |
| backgroundColor: 'rgba(0, 122, 255, 0.2)', | |
| borderWidth: 3, | |
| pointBackgroundColor: 'rgba(0, 122, 255, 1)', | |
| pointBorderColor: '#fff', | |
| pointBorderWidth: 2, | |
| pointRadius: 5 | |
| }, { | |
| label: 'Qwen3-Coder 480B', | |
| data: [37.5, 69.6, 26.3, 54.7, 61.8, 31.1, 49.9, 55.8, 68.7, 77.5, 60.0], | |
| borderColor: 'rgba(52, 199, 89, 1)', | |
| backgroundColor: 'rgba(52, 199, 89, 0.2)', | |
| borderWidth: 3, | |
| pointBackgroundColor: 'rgba(52, 199, 89, 1)', | |
| pointBorderColor: '#fff', | |
| pointBorderWidth: 2, | |
| pointRadius: 5 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| r: { | |
| beginAtZero: true, | |
| max: 80, | |
| ticks: { | |
| stepSize: 20, | |
| color: '#86868b', | |
| font: { | |
| family: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif', | |
| size: 12 | |
| } | |
| }, | |
| grid: { | |
| color: 'rgba(134, 134, 139, 0.3)' | |
| }, | |
| angleLines: { | |
| color: 'rgba(134, 134, 139, 0.3)' | |
| }, | |
| pointLabels: { | |
| color: '#1d1d1f', | |
| font: { | |
| family: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif', | |
| size: 11, | |
| weight: '500' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // 柱状图配置 | |
| const barCtx = document.getElementById('barChart').getContext('2d'); | |
| const barChart = new Chart(barCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: benchmarks, | |
| datasets: [{ | |
| label: 'Qwen3-Coder 30B', | |
| data: data30B, | |
| backgroundColor: 'rgba(0, 122, 255, 0.8)', | |
| borderColor: 'rgba(0, 122, 255, 1)', | |
| borderWidth: 1, | |
| borderRadius: 6, | |
| borderSkipped: false, | |
| }, { | |
| label: 'Qwen3-Coder 480B', | |
| data: data480B, | |
| backgroundColor: 'rgba(52, 199, 89, 0.8)', | |
| borderColor: 'rgba(52, 199, 89, 1)', | |
| borderWidth: 1, | |
| borderRadius: 6, | |
| borderSkipped: false, | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| labels: { | |
| font: { | |
| family: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif', | |
| size: 14, | |
| weight: '500' | |
| }, | |
| color: '#1d1d1f', | |
| usePointStyle: true, | |
| pointStyle: 'circle', | |
| padding: 20 | |
| } | |
| }, | |
| tooltip: { | |
| backgroundColor: 'rgba(0, 0, 0, 0.8)', | |
| titleColor: '#fff', | |
| bodyColor: '#fff', | |
| borderColor: 'rgba(255, 255, 255, 0.2)', | |
| borderWidth: 1, | |
| cornerRadius: 8, | |
| font: { | |
| family: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif' | |
| } | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| grid: { | |
| display: false | |
| }, | |
| ticks: { | |
| color: '#86868b', | |
| font: { | |
| family: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif', | |
| size: 11 | |
| }, | |
| maxRotation: 45, | |
| minRotation: 45 | |
| } | |
| }, | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(134, 134, 139, 0.2)' | |
| }, | |
| ticks: { | |
| color: '#86868b', | |
| font: { | |
| family: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif', | |
| size: 12 | |
| } | |
| } | |
| } | |
| }, | |
| interaction: { | |
| intersect: false, | |
| mode: 'index' | |
| } | |
| } | |
| }); | |
| // 添加动画效果 | |
| setTimeout(() => { | |
| radarChart.update('none'); | |
| barChart.update('none'); | |
| }, 100); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
appreciate it. thank you.