unsloth_dynamic_2_vs_aider_deepseek_v3_1.py

unsloth_dynamic_2_vs_aider_deepseek_v3_1.py

import React from "react";
import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from "recharts";

const showPassRate1 = false;
const data = [
  { name: "TQ1_0", unsloth: undefined, aider: 51.6, pass_rate_1: 19.1 },
  { name: "IQ1_M", unsloth: 79.8, aider: 56.9, pass_rate_1: 24.0 },
  { name: "TQ1_0-thinking", unsloth: undefined, aider: 60.4, pass_rate_1: 26.2 },
  { name: "IQ2_XXS", unsloth: 80.3, aider: undefined, pass_rate_1: undefined },
  { name: "IQ2_M", unsloth: 80.78, aider: 61.3, pass_rate_1: 36.4 },
  { name: "Q2_K", unsloth: 80.8, aider: undefined, pass_rate_1: undefined },
  { name: "Q2_K_XL", unsloth: 80.9, aider: 64.4, pass_rate_1: 31.6 },
  { name: "IQ3_XXS", unsloth: 80.95, aider: undefined, pass_rate_1: undefined },
  { name: "IQ4_XS", unsloth: undefined, aider: 67.6, pass_rate_1: 37.8 },
  { name: "Q3_K_M", unsloth: 81.0, aider: 65.8, pass_rate_1: 37.3 },
  { name: "Q3_K_XL", unsloth: 81.01, aider: 64.9, pass_rate_1: 40.9 },
  { name: "Q4_K_M", unsloth: 81.02, aider: 67.6, pass_rate_1: 37.8 },
  { name: "Q4_K_XL", unsloth: 81.04, aider: 69.3, pass_rate_1: 39.6 },
  { name: "Q5_K_M", unsloth: 81.03, aider: undefined, pass_rate_1: undefined },
  { name: "Q2_K_XL-thinking", unsloth: undefined, aider: 69.8, pass_rate_1: 34.2 },
  { name: "Q5_K_XL", unsloth: undefined, aider: 69.8, pass_rate_1: 41.3 },
  { name: "Q6_K", unsloth: 81.05, aider: undefined, pass_rate_1: undefined },
  { name: "Q6_K_XL", unsloth: undefined, aider: 70.2, pass_rate_1: 41.3 },
  { name: "Q8_0", unsloth: 81.05, aider: undefined, pass_rate_1: undefined },
  { name: "Q4_K_XL-thinking", unsloth: undefined, aider: 76.4, pass_rate_1: 37.3 },
];

if (!showPassRate1) {
  data.forEach(obj => {
    delete obj.pass_rate_1;
  });
}

function domainPad(values: number[], pad = 0.2) {
  const min = Math.min(...values);
  const max = Math.max(...values);
  return [min - pad, max + pad];
}

export default function UnslothDynamicQuantsChart() {
  const unslothValues = data.map(d => d.unsloth).filter((v): v is number => typeof v === "number");
  const aiderValues = data.map(d => d.aider).filter((v): v is number => typeof v === "number");
  const yDomainLeft = domainPad(unslothValues, 0.2);
  const pass1Values = data.map(d => d.pass_rate_1).filter((v): v is number => typeof v === "number");
  const yDomainRight = domainPad([...aiderValues, ...pass1Values], 1);

  return (
    <div className="w-full max-w-5xl mx-auto p-6">
      <div className="rounded-2xl shadow-sm border bg-white p-6">
        <h1 className="text-2xl font-semibold mb-1">Unsloth Dynamic 2.0 Quants</h1>
        <p className="text-sm text-gray-500 mb-4">5-Shot MMLU Score</p>
        <div className="h-80">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart data={data} margin={{ top: 10, right: 20, bottom: 60, left: 20 }}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" angle={-40} textAnchor="end" height={60} label={{ value: "Aider Polyglot Benchmark DeepSeek V3.1 Non-thinking llama.cpp", position: "bottom", offset: 50 }} />
              <YAxis yAxisId="left" domain={yDomainLeft} label={{ value: "5-Shot MMLU (Unsloth)", angle: -90, position: "insideBottomLeft", fill: "#1f77b4" }} tickFormatter={(v: number) => v.toFixed(2)} />
              <YAxis yAxisId="right" orientation="right" domain={yDomainRight} label={{ value: "pass rate (Aider)", angle: 90, position: "insideBottomRight", fill: "#ff7f0e" }} tickFormatter={(v: number) => v.toFixed(1)} />
              <Tooltip formatter={(v: number) => v.toFixed(2)} />
              <Legend />
              <Line yAxisId="left" type="monotone" dataKey="unsloth" name="Unsloth Dynamic 2.0" dot connectNulls stroke="#1f77b4" strokeWidth={2} />
              <Line yAxisId="right" type="monotone" dataKey="aider" name="pass_rate_2" dot connectNulls stroke="#ff7f0e" strokeWidth={2} />
              {showPassRate1 && <Line yAxisId="right" type="monotone" dataKey="pass_rate_1" name="pass_rate_1" dot connectNulls stroke="#2ca02c" strokeWidth={2} />}
            </LineChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  );
}