Skip to content

Instantly share code, notes, and snippets.

@tarruda

tarruda/qwen-3.5-comparison.html

Last active February 24, 2026 19:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tarruda/1f7195036197dec2ad726402de6bd2d0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tarruda/1f7195036197dec2ad726402de6bd2d0 to your computer and use it in GitHub Desktop.
Download ZIP
Qwen3.5 models comparison
Raw
qwen-3.5-comparison.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Qwen 3.5 Models Benchmark Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
background-color: #0f172a; /* tailwind slate-900 */
color: #f8fafc; /* tailwind slate-50 */
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.chart-container {
position: relative;
height: 320px;
width: 100%;
}
</style>
</head>
<body class="p-6 md:p-10">
<div class="max-w-7xl mx-auto">
<header class="mb-10 text-center md:text-left">
<h1 class="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400 mb-2">
Qwen 3.5 Family Benchmarks
</h1>
<p class="text-slate-400 text-lg">
Comparative analysis of Qwen3.5 27B, 35B-A3B, 122B-A10B, and 397B-A17B across Language, Coding, Agents, and Multimodal tasks.
</p>
</header>
<!-- Charts Grid -->
<div id="charts-container" class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
<!-- Charts will be injected here by JavaScript -->
</div>
<!-- Data Table -->
<div class="bg-slate-800 rounded-xl shadow-lg border border-slate-700 overflow-hidden">
<div class="p-6 border-b border-slate-700">
<h2 class="text-xl font-bold text-white">Raw Data Table</h2>
</div>
<div class="overflow-x-auto" id="table-container">
<!-- Table will be injected here by JavaScript -->
</div>
</div>
</div>
<script>
// Parsed Benchmark Data extracted from Hugging Face model pages
const benchmarkData = {
"Knowledge": {
labels: ["MMLU-Pro", "MMLU-Redux", "SuperGPQA", "C-Eval"],
models: {
"Qwen3.5-27B": [86.1, 93.2, 65.6, 90.5],
"Qwen3.5-35B-A3B": [85.3, 93.3, 63.4, 90.2],
"Qwen3.5-122B-A10B": [86.7, 94.0, 67.1, 91.9],
"Qwen3.5-397B-A17B": [87.8, 94.9, 70.4, 93.0]
}
},
"Instruction Following": {
labels: ["IFEval", "IFBench", "MultiChallenge"],
models: {
"Qwen3.5-27B": [95.0, 76.5, 60.8],
"Qwen3.5-35B-A3B": [91.9, 70.2, 60.0],
"Qwen3.5-122B-A10B": [93.4, 76.1, 61.5],
"Qwen3.5-397B-A17B": [92.6, 76.5, 67.6]
}
},
"STEM & Reasoning": {
labels: ["GPQA", "HLE", "HMMT Feb '25", "HMMT Nov '25"],
models: {
"Qwen3.5-27B": [85.5, 24.3, 92.0, 89.8],
"Qwen3.5-35B-A3B": [84.2, 22.4, 89.0, 89.2],
"Qwen3.5-122B-A10B": [86.6, 25.3, 91.4, 90.3],
"Qwen3.5-397B-A17B": [88.4, 28.7, 94.8, 92.7]
}
},
"Coding & General Agents": {
labels: ["SWE-bench", "Terminal Bench 2", "LiveCodeBench", "BFCL-V4", "TAU2-Bench"],
models: {
"Qwen3.5-27B": [72.4, 41.6, 80.7, 68.5, 79.0],
"Qwen3.5-35B-A3B": [69.2, 40.5, 74.6, 67.3, 81.2],
"Qwen3.5-122B-A10B": [72.0, 49.4, 78.9, 72.2, 79.5],
"Qwen3.5-397B-A17B": [76.4, 52.5, 83.6, 72.9, 86.7]
}
},
"Search Agents & Long Context": {
labels: ["HLE w/ Tool", "BrowseComp", "WideSearch", "LongBench v2"],
models: {
"Qwen3.5-27B": [48.5, 61.0, 61.1, 60.6],
"Qwen3.5-35B-A3B": [47.4, 61.0, 57.1, 59.0],
"Qwen3.5-122B-A10B": [47.5, 63.8, 60.5, 60.2],
"Qwen3.5-397B-A17B": [48.3, 69.0, 74.0, 63.2]
}
},
"Multilingualism": {
labels: ["MMMLU", "MMLU-ProX", "INCLUDE", "Global PIQA"],
models: {
"Qwen3.5-27B": [85.9, 82.2, 81.6, 87.5],
"Qwen3.5-35B-A3B": [85.2, 81.0, 79.7, 86.6],
"Qwen3.5-122B-A10B": [86.7, 82.2, 82.8, 88.4],
"Qwen3.5-397B-A17B": [88.5, 84.7, 85.6, 89.8]
}
},
"Vision Language (STEM & VQA)": {
labels: ["MMMU", "MMMU-Pro", "MathVision", "MathVista", "RealWorldQA"],
models: {
"Qwen3.5-27B": [82.3, 75.0, 86.0, 87.8, 83.7],
"Qwen3.5-35B-A3B": [81.4, 75.1, 83.9, 86.2, 84.1],
"Qwen3.5-122B-A10B": [83.9, 76.9, 86.2, 87.4, 85.1],
"Qwen3.5-397B-A17B": [85.0, 79.0, 88.6, 90.3, 83.9]
}
}
};
// UI Color Mapping
const modelColors = {
"Qwen3.5-27B": { bg: "rgba(74, 222, 128, 0.7)", border: "rgb(74, 222, 128)" }, // Green
"Qwen3.5-35B-A3B": { bg: "rgba(96, 165, 250, 0.7)", border: "rgb(96, 165, 250)" }, // Blue
"Qwen3.5-122B-A10B": { bg: "rgba(167, 139, 250, 0.7)", border: "rgb(167, 139, 250)" }, // Purple
"Qwen3.5-397B-A17B": { bg: "rgba(248, 113, 113, 0.7)", border: "rgb(248, 113, 113)" } // Red
};
const chartsContainer = document.getElementById('charts-container');
// Loop over categories and dynamically build Canvas elements
Object.keys(benchmarkData).forEach(category => {
const card = document.createElement('div');
card.className = "bg-slate-800 p-6 rounded-xl shadow-lg border border-slate-700";
const title = document.createElement('h2');
title.className = "text-xl font-bold text-white mb-4";
title.innerText = category;
card.appendChild(title);
const chartDiv = document.createElement('div');
chartDiv.className = "chart-container";
const canvas = document.createElement('canvas');
chartDiv.appendChild(canvas);
card.appendChild(chartDiv);
chartsContainer.appendChild(card);
const categoryData = benchmarkData[category];
const datasets = Object.keys(categoryData.models).map(modelName => {
return {
label: modelName,
data: categoryData.models[modelName],
backgroundColor: modelColors[modelName].bg,
borderColor: modelColors[modelName].border,
borderWidth: 1,
borderRadius: 4
}
});
// Instantiate Chart.js bar chart
new Chart(canvas, {
type: 'bar',
data: {
labels: categoryData.labels,
datasets: datasets
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: { color: '#e2e8f0', padding: 15, font: { family: 'Inter' } }
}
},
scales: {
y: {
beginAtZero: false,
ticks: { color: '#94a3b8', font: { family: 'Inter' } },
grid: { color: '#334155' }
},
x: {
ticks: { color: '#94a3b8', font: { family: 'Inter' } },
grid: { display: false }
}
}
}
});
});
// Loop over the dataset again to build the Data Table at the bottom
const tableContainer = document.getElementById('table-container');
let tableHTML = `<table class="min-w-full text-sm text-left whitespace-nowrap text-slate-300">
<thead class="text-xs text-slate-400 uppercase bg-slate-900">
<tr>
<th class="px-6 py-4">Category / Metric</th>
<th class="px-6 py-4 text-emerald-400">27B</th>
<th class="px-6 py-4 text-blue-400">35B-A3B</th>
<th class="px-6 py-4 text-purple-400">122B-A10B</th>
<th class="px-6 py-4 text-red-400">397B-A17B</th>
</tr>
</thead>
<tbody>`;
Object.keys(benchmarkData).forEach(category => {
const data = benchmarkData[category];
tableHTML += `<tr class="bg-slate-700/50 font-semibold border-b border-slate-700 text-white">
<td colspan="5" class="px-6 py-3">${category}</td>
</tr>`;
data.labels.forEach((label, index) => {
tableHTML += `<tr class="bg-slate-800 border-b border-slate-700 hover:bg-slate-700 transition duration-150">
<td class="px-6 py-3 text-slate-200 pl-10">${label}</td>
<td class="px-6 py-3">${data.models['Qwen3.5-27B'][index]}</td>
<td class="px-6 py-3">${data.models['Qwen3.5-35B-A3B'][index]}</td>
<td class="px-6 py-3">${data.models['Qwen3.5-122B-A10B'][index]}</td>
<td class="px-6 py-3 font-bold text-red-300">${data.models['Qwen3.5-397B-A17B'][index]}</td>
</tr>`;
});
});
tableHTML += `</tbody></table>`;
tableContainer.innerHTML = tableHTML;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment