Added blogpost

Author: adaamko

blog/assets/squeez_mascot.png

@@ -0,0 +1,76 @@
+<div style="padding: 1rem 0">
+<div style="display:flex;flex-wrap:wrap;gap:10px;margin-bottom:1.5rem">
+  <div style="background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:.75rem 1rem;flex:1;min-width:120px">
+    <div style="font-size:12px;color:var(--color-text-secondary);margin-bottom:4px">Recall</div>
+    <div style="font-size:22px;font-weight:500;color:var(--color-text-primary)">0.862</div>
+  </div>
+  <div style="background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:.75rem 1rem;flex:1;min-width:120px">
+    <div style="font-size:12px;color:var(--color-text-secondary);margin-bottom:4px">F1</div>
+    <div style="font-size:22px;font-weight:500;color:var(--color-text-primary)">0.804</div>
+  </div>
+  <div style="background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:.75rem 1rem;flex:1;min-width:120px">
+    <div style="font-size:12px;color:var(--color-text-secondary);margin-bottom:4px">Tokens removed</div>
+    <div style="font-size:22px;font-weight:500;color:var(--color-text-primary)">91.5%</div>
+  </div>
+  <div style="background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:.75rem 1rem;flex:1;min-width:120px">
+    <div style="font-size:12px;color:var(--color-text-secondary);margin-bottom:4px">vs Qwen 35B recall</div>
+    <div style="font-size:22px;font-weight:500;color:var(--color-text-primary)">+11.3pp</div>
+  </div>
+</div>
+
+<div style="display:flex;gap:16px;flex-wrap:wrap;margin-bottom:.75rem;font-size:12px;color:var(--color-text-secondary)">
+  <span style="display:flex;align-items:center;gap:5px"><span style="width:10px;height:10px;border-radius:2px;background:#7F77DD"></span>Squeez-2B (ours)</span>
+  <span style="display:flex;align-items:center;gap:5px"><span style="width:10px;height:10px;border-radius:2px;background:#1D9E75"></span>Qwen 3.5 35B A3B</span>
+  <span style="display:flex;align-items:center;gap:5px"><span style="width:10px;height:10px;border-radius:2px;background:#378ADD"></span>Kimi K2</span>
+  <span style="display:flex;align-items:center;gap:5px"><span style="width:10px;height:10px;border-radius:2px;background:#888780"></span>Qwen 3.5 2B base</span>
+  <span style="display:flex;align-items:center;gap:5px"><span style="width:10px;height:10px;border-radius:2px;background:#D3D1C7"></span>Heuristics</span>
+</div>
+
+<div style="position:relative;height:300px;width:100%">
+  <canvas id="mainChart"></canvas>
+</div>
+</div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
+<script>
+const labels = ['Squeez-2B', 'Qwen 35B A3B', 'Kimi K2', 'Qwen 3.5 2B base', 'BM25', 'First-N', 'Random', 'Last-N'];
+const recall = [0.8624, 0.7498, 0.5286, 0.5299, 0.2172, 0.1445, 0.1009, 0.0503];
+const f1     = [0.8035, 0.7254, 0.6827, 0.5482, 0.2314, 0.1570, 0.1966, 0.1393];
+const colors = ['#7F77DD','#1D9E75','#378ADD','#888780','#D3D1C7','#D3D1C7','#D3D1C7','#D3D1C7'];
+const f1colors = colors.map(c => c + 'aa');
+
+new Chart(document.getElementById('mainChart'), {
+  type: 'bar',
+  data: {
+    labels,
+    datasets: [
+      { label: 'Recall', data: recall, backgroundColor: colors, borderRadius: 4, borderSkipped: false, barPercentage: 0.45, categoryPercentage: 0.85 },
+      { label: 'F1', data: f1, backgroundColor: f1colors, borderRadius: 4, borderSkipped: false, barPercentage: 0.45, categoryPercentage: 0.85 }
+    ]
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { display: false },
+      tooltip: {
+        callbacks: {
+          label: ctx => ` ${ctx.dataset.label}: ${ctx.parsed.y.toFixed(3)}`
+        }
+      }
+    },
+    scales: {
+      y: {
+        min: 0, max: 1,
+        ticks: { color: '#888780', font: { size: 11 }, callback: v => v.toFixed(1) },
+        grid: { color: 'rgba(136,135,128,0.12)' },
+        border: { display: false }
+      },
+      x: {
+        ticks: { color: '#888780', font: { size: 11 }, maxRotation: 20 },
+        grid: { display: false },
+        border: { display: false }
+      }
+    }
+  }
+});
+</script>