Model Matrix Arena

1"use client";
2
3import * as React from "react";
4
5interface ModelMatrixProps {
6  variant?: string;
7}
8
9export default function ModelMatrix({ variant = "Arena" }: ModelMatrixProps) {
10  const [activePrompt, setActivePrompt] = React.useState("Explain raft consensus algorithm in 2 sentences.");
11
12  const models = [
13    {
14      name: "Claude 3.5 Sonnet",
15      provider: "Anthropic",
16      speed: "84 tok/s",
17      score: 9.8,
18      response:
19        "Raft achieves consensus by electing a single distinguished leader that manages a replicated log across cluster nodes. State transitions only commit once a majority of followers acknowledge entries, guaranteeing consistency even during network partitions.",
20      badge: "Highest Quality",
21      color: "#7DFFB3",
22    },
23    {
24      name: "GPT-4o",
25      provider: "OpenAI",
26      speed: "92 tok/s",
27      score: 9.4,
28      response:
29        "Raft is a leader-based distributed consensus protocol designed for understandability, dividing time into terms to elect leaders and replicate logs. It ensures data integrity across server clusters by requiring consensus from a majority before committing state changes.",
30      badge: "Fastest Response",
31      color: "#38BDF8",
32    },
33  ];
34
35  return (
36    <div className="w-full max-w-115 overflow-hidden rounded-card bg-surface shadow-card border border-line">
37      {/* Header */}
38      <div className="primitive-card-bar flex items-center justify-between border-b border-line bg-surface/90 px-3.5 py-2.5">
39        <div className="flex items-center gap-2">
40          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
41            <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
42            <line x1="8" y1="21" x2="16" y2="21" />
43            <line x1="12" y1="17" x2="12" y2="21" />
44          </svg>
45          <span className="font-display font-semibold text-[13.5px] text-ink">
46            Multi-Model Evaluation Matrix
47          </span>
48        </div>
49        <span className="font-mono text-[10.5px] text-ink-3">Live Side-by-Side</span>
50      </div>
51
52      {/* Prompt Bar */}
53      <div className="border-b border-line bg-inset/40 p-2.5">
54        <div className="flex items-center gap-2 font-mono text-[11.5px] text-ink-2">
55          <span className="text-accent font-bold">Prompt:</span>
56          <span className="text-ink truncate">&ldquo;{activePrompt}&rdquo;</span>
57        </div>
58      </div>
59
60      {/* Comparison Grid */}
61      <div className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-line">
62        {models.map((m) => (
63          <div key={m.name} className="p-3.5 flex flex-col justify-between space-y-3">
64            <div>
65              <div className="flex items-center justify-between">
66                <div>
67                  <h4 className="font-display font-semibold text-[13.5px] text-ink">{m.name}</h4>
68                  <span className="font-mono text-[10.5px] text-ink-3">{m.provider}</span>
69                </div>
70                <span
71                  className="rounded-full px-2 py-0.5 font-mono text-[10.5px] font-medium"
72                  style={{ background: `${m.color}18`, color: m.color }}
73                >
74                  ★ {m.score}/10
75                </span>
76              </div>
77
78              <p className="mt-2.5 rounded-control bg-inset/60 p-2.5 font-body text-[12px] leading-relaxed text-ink border border-line/40">
79                {m.response}
80              </p>
81            </div>
82
83            <div className="flex items-center justify-between pt-1 border-t border-line/40 font-mono text-[10.5px] text-ink-3">
84              <span>Speed: {m.speed}</span>
85              <span className="text-accent">{m.badge}</span>
86            </div>
87          </div>
88        ))}
89      </div>
90    </div>
91  );
92}
93