x

src/App.tsx

@@ -1,29 +1,22 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { MultiSelect } from "@/components/ui/multi-select";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import { Button } from "@/components/ui/button";
-import { ChevronDown, ChevronRight } from "lucide-react";
-import { mockData } from "./lib/data"; // Assuming you have this file for mock data
 import { Switch } from "@/components/ui/switch";
 
-interface FlattenedModel extends Model {
+import { mockData } from "@/lib/data";
+
+import { ComparisonSelector } from "@/components/ComparisonSelector";
+import { PricingTable } from "@/components/PricingTable";
+import { benchmarkData } from "./lib/benchmarks/ index";
+import { BenchmarkTable } from "./components/BenchmarkTable";
+
+
+export interface FlattenedModel extends Model {
   provider: string;
   uri: string;
+  benchmark?: {
+    [key: string]: number;
+  };
 }
 
 export interface Model {
@@ -48,6 +41,7 @@ const App: React.FC = () => {
   const [expandedProviders, setExpandedProviders] = useState<string[]>([]);
   const [tokenCalculation, setTokenCalculation] = useState<string>("million");
   const [linkProviderModel, setLinkProviderModel] = useState<boolean>(false);
+  const [benchmarkSortKey, setBenchmarkSortKey] = useState<string | null>(null);
 
   const [sortConfig, setSortConfig] = useState<{
     key: keyof FlattenedModel;
@@ -58,159 +52,99 @@ const App: React.FC = () => {
     setData(mockData);
   }, []);
 
-  const calculatePrice = (price: number, tokens: number): number => {
-    let multiplier = 1;
-    if (tokenCalculation === "thousand") {
-      multiplier = 1e-3;
-    } else if (tokenCalculation === "unit") {
-      multiplier = 1e-6;
-    } else if (tokenCalculation === "billion") {
-      multiplier = 1e3;
-    }
-    return price * tokens * multiplier;
-  };
+  const normalize = (str: string) => str.toLowerCase().replace(/[^a-z0-9]/g, "");
 
-  const calculateComparison = (
-    modelPrice: number,
-    comparisonPrice: number
-  ): string => {
-    return (((modelPrice - comparisonPrice) / comparisonPrice) * 100).toFixed(
-      2
+  const flattenData = (data: Provider[]): FlattenedModel[] =>
+    data.flatMap((provider) =>
+      provider.models.map((model) => {
+        const matchedBenchmark = benchmarkData.find(
+          (b) => normalize(b.model) === normalize(model.name)
+        );
+        return {
+          provider: provider.provider,
+          uri: provider.uri,
+          ...model,
+          benchmark: matchedBenchmark?.benchmark ?? {},
+        };
+      })
     );
-  };
 
-  const flattenData = (data: Provider[]) => {
-    return data.flatMap((provider) =>
-      provider.models.map((model) => ({
-        provider: provider.provider,
-        uri: provider.uri,
-        ...model,
+  const filteredData = useMemo(() => {
+    if (!selectedProviders.length && !selectedModels.length && !linkProviderModel) return data;
+
+    return data
+      .filter((p) => !selectedProviders.length || selectedProviders.includes(p.provider))
+      .map((p) => ({
+        ...p,
+        models: p.models.filter((m) => {
+          if (linkProviderModel && !selectedModels.length) return selectedProviders.includes(p.provider);
+          if (!linkProviderModel && !selectedModels.length) return !selectedProviders.length || selectedProviders.includes(p.provider);
+          return selectedModels.includes(m.name);
+        }),
       }))
-    );
-  };
+      .filter((p) => p.models.length > 0);
+  }, [data, selectedProviders, selectedModels, linkProviderModel]);
 
-  const filteredData =
-    selectedProviders.length === 0 &&
-    selectedModels.length === 0 &&
-    !linkProviderModel
-      ? data.map((provider) => ({
-          ...provider,
-          models: provider.models,
-        }))
-      : data
-          .filter(
-            (provider) =>
-              selectedProviders.length === 0 ||
-              selectedProviders.includes(provider.provider)
-          )
-          .map((provider) => ({
-            ...provider,
-            models: provider.models.filter((model) => {
-              // If linking is enabled and no models are selected, filter by provider
-              if (linkProviderModel && selectedModels.length === 0)
-                return selectedProviders.includes(provider.provider);
-
-              // If no models are selected and linking is off, show all models from selected providers (or all if no providers selected)
-              if (!linkProviderModel && selectedModels.length === 0)
-                return (
-                  selectedProviders.length === 0 ||
-                  selectedProviders.includes(provider.provider)
-                );
-
-              // Otherwise, only show selected models
-              return selectedModels.includes(model.name);
-            }),
-          }))
-          .filter((provider) => provider.models.length > 0);
-
-  const sortedFlattenedData = React.useMemo(() => {
-    let sortableData: FlattenedModel[] = flattenData(filteredData);
-    if (sortConfig !== null) {
-      sortableData.sort((a, b) => {
-        const aValue = a[sortConfig.key];
-        const bValue = b[sortConfig.key];
-
-        if (typeof aValue === "string" && typeof bValue === "string") {
-          return sortConfig.direction === "ascending"
-            ? aValue.localeCompare(bValue)
-            : bValue.localeCompare(aValue);
-        } else if (typeof aValue === "number" && typeof bValue === "number") {
-          return sortConfig.direction === "ascending"
-            ? aValue - bValue
-            : bValue - aValue;
-        } else {
-          return 0;
-        }
-      });
-    }
-    return sortableData;
+  const benchmarkedModels = useMemo(() => {
+    const flattened = flattenData(data); // all models, with benchmark lookup
+    return flattened.filter(
+      (model) => model.benchmark && Object.keys(model.benchmark).length > 0
+    );
+  }, [data]);
+
+  const sortedBenchmarkedModels = useMemo(() => {
+  if (!benchmarkSortKey) return benchmarkedModels;
+
+  return [...benchmarkedModels].sort((a, b) => {
+    const aVal = a.benchmark?.[benchmarkSortKey] ?? -Infinity;
+    const bVal = b.benchmark?.[benchmarkSortKey] ?? -Infinity;
+    return bVal - aVal;
+  });
+}, [benchmarkedModels, benchmarkSortKey]);
+
+
+  const sortedFlattenedData = useMemo(() => {
+    const flattened = flattenData(filteredData);
+    if (!sortConfig) return flattened;
+
+    return [...flattened].sort((a, b) => {
+      const aVal = a[sortConfig.key];
+      const bVal = b[sortConfig.key];
+
+      if (typeof aVal === "string" && typeof bVal === "string") {
+        return sortConfig.direction === "ascending" ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+      } else if (typeof aVal === "number" && typeof bVal === "number") {
+        return sortConfig.direction === "ascending" ? aVal - bVal : bVal - aVal;
+      }
+      return 0;
+    });
   }, [filteredData, sortConfig]);
 
   const requestSort = (key: keyof FlattenedModel) => {
-    let direction = "ascending";
-    if (
-      sortConfig &&
-      sortConfig.key === key &&
-      sortConfig.direction === "ascending"
-    ) {
-      direction = "descending";
-    }
+    const direction = sortConfig?.key === key && sortConfig.direction === "ascending" ? "descending" : "ascending";
     setSortConfig({ key, direction });
   };
 
   const toggleProviderExpansion = (provider: string) => {
     setExpandedProviders((prev) =>
-      prev.includes(provider)
-        ? prev.filter((p) => p !== provider)
-        : [...prev, provider]
+      prev.includes(provider) ? prev.filter((p) => p !== provider) : [...prev, provider]
     );
   };
 
   const getModelsForSelectedProviders = () => {
-    if (!linkProviderModel) {
-      return data
-        .flatMap((provider) =>
-          provider.models.map((model) => ({
-            label: model.name,
-            value: model.name,
-            provider: provider.provider,
-          }))
-        )
-        .reduce(
-          (
-            acc: { label: string; value: string; provider: string }[],
-            curr: { label: string; value: string; provider: string }
-          ) => {
-            if (!acc.find((m) => m.value === curr.value)) {
-              acc.push(curr);
-            }
-            return acc;
-          },
-          []
-        );
-    }
+    const allModels = data.flatMap((provider) =>
+      provider.models.map((model) => ({
+        label: model.name,
+        value: model.name,
+        provider: provider.provider,
+      }))
+    );
 
-    return data
-      .filter((provider) => selectedProviders.includes(provider.provider))
-      .flatMap((provider) =>
-        provider.models.map((model) => ({
-          label: model.name,
-          value: model.name,
-          provider: provider.provider,
-        }))
-      )
-      .reduce(
-        (
-          acc: { label: string; value: string; provider: string }[],
-          curr: { label: string; value: string; provider: string }
-        ) => {
-          if (!acc.find((m) => m.value === curr.value)) {
-            acc.push(curr);
-          }
-          return acc;
-        },
-        []
-      );
+    const filtered = linkProviderModel
+      ? allModels.filter((m) => selectedProviders.includes(m.provider))
+      : allModels;
+
+    return Array.from(new Map(filtered.map((m) => [m.value, m])).values());
   };
 
   return (
@@ -219,121 +153,46 @@ const App: React.FC = () => {
         <CardTitle>LLM Pricing Calculator</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="mb-4">
-          <p className="italic text-sm text-muted-foreground mb-4">
-            <a
-              href="https://huggingface.co/spaces/philschmid/llm-pricing"
-              className="underline"
-            >
-              This is a fork of philschmid tool: philschmid/llm-pricing
-            </a>
-          </p>
-          <h3 className="text-lg font-semibold mb-2">
-            Select Comparison Models
-          </h3>
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-            {data.map((provider) => (
-              <Collapsible
-                key={provider.provider}
-                open={expandedProviders.includes(provider.provider)}
-                onOpenChange={() => toggleProviderExpansion(provider.provider)}
-              >
-                <CollapsibleTrigger asChild>
-                  <Button variant="outline" className="w-full justify-between">
-                    {provider.provider}
-                    {expandedProviders.includes(provider.provider) ? (
-                      <ChevronDown className="h-4 w-4" />
-                    ) : (
-                      <ChevronRight className="h-4 w-4" />
-                    )}
-                  </Button>
-                </CollapsibleTrigger>
-                <CollapsibleContent className="mt-2">
-                  {provider.models.map((model) => (
-                    <div
-                      key={`${provider.provider}:${model.name}`}
-                      className="flex items-center space-x-2 mb-1"
-                    >
-                      <Checkbox
-                        id={`${provider.provider}:${model.name}`}
-                        checked={comparisonModels.includes(
-                          `${provider.provider}:${model.name}`
-                        )}
-                        onCheckedChange={(checked) => {
-                          if (checked) {
-                            setComparisonModels((prev) => [
-                              ...prev,
-                              `${provider.provider}:${model.name}`,
-                            ]);
-                          } else {
-                            setComparisonModels((prev) =>
-                              prev.filter(
-                                (m) =>
-                                  m !== `${provider.provider}:${model.name}`
-                              )
-                            );
-                          }
-                        }}
-                      />
-                      <label
-                        htmlFor={`${provider.provider}:${model.name}`}
-                        className="text-sm font-medium text-gray-700"
-                      >
-                        {model.name}
-                      </label>
-                    </div>
-                  ))}
-                </CollapsibleContent>
-              </Collapsible>
-            ))}
-          </div>
-        </div>
+        {/* Source Link */}
+        <p className="italic text-sm text-muted-foreground mb-4">
+          <a
+            href="https://huggingface.co/spaces/philschmid/llm-pricing"
+            className="underline"
+          >
+            This is a fork of philschmid tool: philschmid/llm-pricing
+          </a>
+        </p>
 
-        <div className="flex gap-4 mb-4">
+        {/* Comparison Model Selector */}
+        <h3 className="text-lg font-semibold mb-2">Select Comparison Models</h3>
+        <ComparisonSelector
+          data={data}
+          expanded={expandedProviders}
+          comparisonModels={comparisonModels}
+          onToggleExpand={toggleProviderExpansion}
+          onChangeModel={(modelId, checked) =>
+            setComparisonModels((prev) =>
+              checked ? [...prev, modelId] : prev.filter((m) => m !== modelId)
+            )
+          }
+        />
+
+        {/* Token Inputs */}
+        <div className="flex gap-4 mt-6 mb-4">
           <div className="flex-1">
-            <label
-              htmlFor="inputTokens"
-              className="block text-sm font-medium text-gray-700"
-            >
-              Input Tokens ({tokenCalculation})
-            </label>
-            <Input
-              id="inputTokens"
-              type="number"
-              value={inputTokens}
-              min={1}
-              onChange={(e) => setInputTokens(Number(e.target.value))}
-              className="mt-1"
-            />
+            <label className="block text-sm font-medium">Input Tokens ({tokenCalculation})</label>
+            <Input type="number" value={inputTokens} min={1} onChange={(e) => setInputTokens(Number(e.target.value))} />
           </div>
           <div className="flex-1">
-            <label
-              htmlFor="outputTokens"
-              className="block text-sm font-medium text-gray-700"
-            >
-              Output Tokens ({tokenCalculation})
-            </label>
-            <Input
-              id="outputTokens"
-              type="number"
-              value={outputTokens}
-              min={1}
-              onChange={(e) => setOutputTokens(Number(e.target.value))}
-              className="mt-1"
-            />
+            <label className="block text-sm font-medium">Output Tokens ({tokenCalculation})</label>
+            <Input type="number" value={outputTokens} min={1} onChange={(e) => setOutputTokens(Number(e.target.value))} />
           </div>
           <div className="flex-1">
-            <label
-              htmlFor="tokenCalculation"
-              className="block text-sm font-medium text-gray-700"
-            >
-              Token Calculation
-            </label>
+            <label className="block text-sm font-medium">Token Calculation</label>
             <select
-              id="tokenCalculation"
               value={tokenCalculation}
               onChange={(e) => setTokenCalculation(e.target.value)}
-              className="mt-1 block w-full pl-3 pr-10 py-2 text-base bg-white border focus:outline-none focus:ring-indigo-500  sm:text-sm rounded-md"
+              className="mt-1 block w-full pl-3 pr-10 py-2 text-base border rounded-md"
             >
               <option value="billion">Billion Tokens</option>
               <option value="million">Million Tokens</option>
@@ -343,196 +202,19 @@ const App: React.FC = () => {
           </div>
         </div>
 
-        <p className="italic text-sm text-muted-foreground mb-4">
-          Note: If you use Amazon Bedrock or Azure prices for Anthropic, Cohere
-          or OpenAI should be the same.
-        </p>
-        <div className="flex items-center space-x-2 mb-4">
-          <Switch
-            id="linkProviderModel"
-            checked={linkProviderModel}
-            onCheckedChange={setLinkProviderModel}
-          />
-          <label htmlFor="linkProviderModel" className="text-sm">
-            Link Provider and Model
-          </label>
+        {/* Provider–Model Toggle */}
+        <div className="flex items-center space-x-2 mb-6">
+          <Switch id="linkProviderModel" checked={linkProviderModel} onCheckedChange={setLinkProviderModel} />
+          <label htmlFor="linkProviderModel" className="text-sm">Link Provider and Model</label>
         </div>
 
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>
-                <button type="button" onClick={() => requestSort("provider")}>
-                  Provider{" "}
-                  {sortConfig?.key === "provider"
-                    ? sortConfig.direction === "ascending"
-                      ? "▲"
-                      : "▼"
-                    : null}
-                </button>
-              </TableHead>
-              <TableHead>
-                <button type="button" onClick={() => requestSort("name")}>
-                  Model{" "}
-                  {sortConfig?.key === "name"
-                    ? sortConfig.direction === "ascending"
-                      ? "▲"
-                      : "▼"
-                    : null}
-                </button>
-              </TableHead>
-
-              <TableHead>
-                <button type="button" onClick={() => requestSort("inputPrice")}>
-                  Input Price (million tokens)
-                  {sortConfig?.key === "inputPrice"
-                    ? sortConfig.direction === "ascending"
-                      ? "▲"
-                      : "▼"
-                    : null}
-                </button>
-              </TableHead>
-              <TableHead>
-                <button
-                  type="button"
-                  onClick={() => requestSort("outputPrice")}
-                >
-                  Output Price (million tokens)
-                  {sortConfig?.key === "outputPrice"
-                    ? sortConfig.direction === "ascending"
-                      ? "▲"
-                      : "▼"
-                    : null}
-                </button>
-              </TableHead>
-
-              <TableHead>
-                Total Price (per {tokenCalculation} tokens){" "}
-              </TableHead>
-              {comparisonModels.map((model) => (
-                <TableHead key={model} colSpan={2}>
-                  Compared to {model}
-                </TableHead>
-              ))}
-            </TableRow>
-            <TableRow>
-              <TableHead>
-                <MultiSelect
-                  options={
-                    data.map((provider) => ({
-                      label: provider.provider,
-                      value: provider.provider,
-                    })) || []
-                  }
-                  onValueChange={setSelectedProviders}
-                  defaultValue={selectedProviders}
-                />
-              </TableHead>
-              <TableHead>
-                <MultiSelect
-                  options={getModelsForSelectedProviders()}
-                  defaultValue={selectedModels}
-                  onValueChange={setSelectedModels}
-                />
-              </TableHead>
-              <TableHead />
-              <TableHead />
-              <TableHead />
-              {comparisonModels.flatMap((model) => [
-                <TableHead key={`${model}-input`}>Input</TableHead>,
-                <TableHead key={`${model}-output`}>Output</TableHead>,
-              ])}
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {sortedFlattenedData.map((item) => (
-              <TableRow key={`${item.provider}-${item.name}`}>
-                <TableCell>
-                  {" "}
-                  <a href={item.uri} className="underline">
-                    {item.provider}
-                  </a>
-                </TableCell>
-                <TableCell>{item.name}</TableCell>
-
-                <TableCell>{item.inputPrice.toFixed(2)}</TableCell>
-                <TableCell>{item.outputPrice.toFixed(2)}</TableCell>
-
-                <TableCell className="font-bold">
-                  $
-                  {(
-                    calculatePrice(item.inputPrice, inputTokens) +
-                    calculatePrice(item.outputPrice, outputTokens)
-                  ).toFixed(2)}
-                </TableCell>
-
-                {comparisonModels.flatMap((comparisonModel) => {
-                  const [comparisonProvider, comparisonModelName] =
-                    comparisonModel.split(":");
-                  const comparisonModelData = data
-                    .find((p) => p.provider === comparisonProvider)
-                    ?.models.find((m) => m.name === comparisonModelName)!;
-                  return [
-                    <TableCell
-                      key={`${comparisonModel}-input`}
-                      className={`${
-                        parseFloat(
-                          calculateComparison(
-                            item.inputPrice,
-                            comparisonModelData.inputPrice
-                          )
-                        ) < 0
-                          ? "bg-green-100"
-                          : parseFloat(
-                              calculateComparison(
-                                item.inputPrice,
-                                comparisonModelData.inputPrice
-                              )
-                            ) > 0
-                          ? "bg-red-100"
-                          : ""
-                      }`}
-                    >
-                      {`${item.provider}:${item.name}` === comparisonModel
-                        ? "0.00%"
-                        : `${calculateComparison(
-                            item.inputPrice,
-                            comparisonModelData.inputPrice
-                          )}%`}
-                    </TableCell>,
-                    <TableCell
-                      key={`${comparisonModel}-output`}
-                      className={`${
-                        parseFloat(
-                          calculateComparison(
-                            item.outputPrice,
-                            comparisonModelData.outputPrice
-                          )
-                        ) < 0
-                          ? "bg-green-100"
-                          : parseFloat(
-                              calculateComparison(
-                                item.outputPrice,
-                                comparisonModelData.outputPrice
-                              )
-                            ) > 0
-                          ? "bg-red-100"
-                          : ""
-                      }`}
-                    >
-                      {`${item.provider}:${item.name}` === comparisonModel
-                        ? "0.00%"
-                        : `${calculateComparison(
-                            item.outputPrice,
-                            comparisonModelData.outputPrice
-                          )}%`}
-                    </TableCell>,
-                  ];
-                })}
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        {/* Pricing Table */}
+        <h2 className="text-lg font-semibold mb-2">Pricing Table</h2>
+
+
+        {/* Benchmark Table */}
+        <h2 className="text-lg font-semibold mt-12 mb-2">Benchmark Table</h2>
+        <BenchmarkTable data={sortedBenchmarkedModels} />
       </CardContent>
     </Card>
   );

src/components/BenchmarkTable.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "@/components/ui/table";
+import { MultiSelect } from "@/components/ui/multi-select";
+import { FlattenedModel } from "@/App";
+
+interface BenchmarkTableProps {
+  data: FlattenedModel[];
+}
+
+export const BenchmarkTable: React.FC<BenchmarkTableProps> = ({ data }) => {
+  // Extract all unique benchmark keys
+  const benchmarkMetrics = React.useMemo(() => {
+    const allKeys = data.flatMap((model) =>
+      model.benchmark ? Object.keys(model.benchmark) : []
+    );
+    return Array.from(new Set(allKeys)).sort();
+  }, [data]);
+
+  // State: visible metrics
+  const [visibleMetrics, setVisibleMetrics] = React.useState<string[]>([]);
+
+  // Set default to all if empty on first render
+  React.useEffect(() => {
+    if (benchmarkMetrics.length && visibleMetrics.length === 0) {
+      setVisibleMetrics(benchmarkMetrics);
+    }
+  }, [benchmarkMetrics]);
+
+  // Style cells by score
+  const getCellStyle = (value?: number) => {
+    if (value === undefined) return "";
+    if (value >= 85) return "bg-green-100";
+    if (value >= 60) return "bg-yellow-100";
+    return "bg-red-100";
+  };
+
+  return (
+    <>
+      <div className="mb-4 max-w-md">
+        <MultiSelect
+          options={benchmarkMetrics.map((metric) => ({
+            label: metric.replace(/_/g, " ").toUpperCase(),
+            value: metric,
+          }))}
+          defaultValue={benchmarkMetrics}
+          onValueChange={setVisibleMetrics}
+          placeholder="Select benchmarks to show"
+        />
+      </div>
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Provider</TableHead>
+            <TableHead>Model</TableHead>
+            {visibleMetrics.map((metric) => (
+              <TableHead key={metric}>
+                {metric.replace(/_/g, " ").toUpperCase()}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.map((model) => (
+            <TableRow key={`${model.provider}-${model.name}`}>
+              <TableCell>
+                <a href={model.uri} className="underline">
+                  {model.provider}
+                </a>
+              </TableCell>
+              <TableCell>{model.name}</TableCell>
+              {visibleMetrics.map((metric) => {
+                const score = model.benchmark?.[metric];
+                return (
+                  <TableCell key={metric} className={getCellStyle(score)}>
+                    {score !== undefined ? `${score.toFixed(1)}%` : "—"}
+                  </TableCell>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </>
+  );
+};

src/components/ComparisonSelector.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { Provider } from "@/App";
+
+interface Props {
+  data: Provider[];
+  expanded: string[];
+  comparisonModels: string[];
+  onToggleExpand: (provider: string) => void;
+  onChangeModel: (value: string, checked: boolean) => void;
+}
+
+export const ComparisonSelector: React.FC<Props> = ({
+  data,
+  expanded,
+  comparisonModels,
+  onToggleExpand,
+  onChangeModel,
+}) => (
+  <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+    {data.map((provider) => (
+      <Collapsible
+        key={provider.provider}
+        open={expanded.includes(provider.provider)}
+        onOpenChange={() => onToggleExpand(provider.provider)}
+      >
+        <CollapsibleTrigger asChild>
+          <Button variant="outline" className="w-full justify-between">
+            {provider.provider}
+            {expanded.includes(provider.provider) ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <ChevronRight className="h-4 w-4" />
+            )}
+          </Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="mt-2">
+          {provider.models.map((model) => {
+            const id = `${provider.provider}:${model.name}`;
+            return (
+              <div key={id} className="flex items-center space-x-2 mb-1">
+                <Checkbox
+                  id={id}
+                  checked={comparisonModels.includes(id)}
+                  onCheckedChange={(checked) => onChangeModel(id, !!checked)}
+                />
+                <label htmlFor={id} className="text-sm font-medium text-gray-700">
+                  {model.name}
+                </label>
+              </div>
+            );
+          })}
+        </CollapsibleContent>
+      </Collapsible>
+    ))}
+  </div>
+);

src/components/PricingTable.tsx

@@ -0,0 +1,174 @@
+import * as React from "react";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "@/components/ui/table";
+import { MultiSelect } from "@/components/ui/multi-select";
+import { FlattenedModel, Provider } from "@/App";
+
+interface PricingTableProps {
+  data: FlattenedModel[];
+  providers: Provider[];
+  selectedProviders: string[];
+  selectedModels: string[];
+  onProviderChange: (values: string[]) => void;
+  onModelChange: (values: string[]) => void;
+  comparisonModels: string[];
+  inputTokens: number;
+  outputTokens: number;
+  tokenCalculation: string;
+  requestSort: (key: keyof FlattenedModel) => void;
+  sortConfig: {
+    key: keyof FlattenedModel;
+    direction: string;
+  } | null;
+  linkProviderModel: boolean;
+}
+
+export const PricingTable: React.FC<PricingTableProps> = ({
+  data,
+  providers,
+  selectedProviders,
+  selectedModels,
+  onProviderChange,
+  onModelChange,
+  comparisonModels,
+  inputTokens,
+  outputTokens,
+  tokenCalculation,
+  requestSort,
+  sortConfig,
+  linkProviderModel,
+}) => {
+  const calculatePrice = (price: number, tokens: number): number => {
+    let multiplier = 1;
+    if (tokenCalculation === "thousand") multiplier = 1e-3;
+    else if (tokenCalculation === "unit") multiplier = 1e-6;
+    else if (tokenCalculation === "billion") multiplier = 1e3;
+    return price * tokens * multiplier;
+  };
+
+  const calculateComparison = (modelPrice: number, comparisonPrice: number): string => {
+    if (comparisonPrice === 0) return "∞";
+    return (((modelPrice - comparisonPrice) / comparisonPrice) * 100).toFixed(2);
+  };
+
+  const getModelsForSelectedProviders = () => {
+    const flatModels = providers.flatMap((provider) =>
+      provider.models.map((model) => ({
+        label: model.name,
+        value: model.name,
+        provider: provider.provider,
+      }))
+    );
+
+    const filtered = linkProviderModel
+      ? flatModels.filter((m) => selectedProviders.includes(m.provider))
+      : flatModels;
+
+    // Remove duplicates
+    return Array.from(new Map(filtered.map((m) => [m.value, m])).values());
+  };
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>
+            <button onClick={() => requestSort("provider")}>
+              Provider {sortConfig?.key === "provider" ? (sortConfig.direction === "ascending" ? "▲" : "▼") : null}
+            </button>
+          </TableHead>
+          <TableHead>
+            <button onClick={() => requestSort("name")}>
+              Model {sortConfig?.key === "name" ? (sortConfig.direction === "ascending" ? "▲" : "▼") : null}
+            </button>
+          </TableHead>
+          <TableHead>
+            <button onClick={() => requestSort("inputPrice")}>
+              Input Price (million tokens) {sortConfig?.key === "inputPrice" ? (sortConfig.direction === "ascending" ? "▲" : "▼") : null}
+            </button>
+          </TableHead>
+          <TableHead>
+            <button onClick={() => requestSort("outputPrice")}>
+              Output Price (million tokens) {sortConfig?.key === "outputPrice" ? (sortConfig.direction === "ascending" ? "▲" : "▼") : null}
+            </button>
+          </TableHead>
+          <TableHead>Total Price (per {tokenCalculation} tokens)</TableHead>
+          {comparisonModels.map((model) => (
+            <TableHead key={model} colSpan={2}>
+              Compared to {model}
+            </TableHead>
+          ))}
+        </TableRow>
+        <TableRow>
+          <TableHead>
+            <MultiSelect
+              options={providers.map((p) => ({ label: p.provider, value: p.provider }))}
+              defaultValue={selectedProviders}
+              onValueChange={onProviderChange}
+            />
+          </TableHead>
+          <TableHead>
+            <MultiSelect
+              options={getModelsForSelectedProviders()}
+              defaultValue={selectedModels}
+              onValueChange={onModelChange}
+            />
+          </TableHead>
+          <TableHead />
+          <TableHead />
+          <TableHead />
+          {comparisonModels.flatMap((model) => [
+            <TableHead key={`${model}-input`}>Input</TableHead>,
+            <TableHead key={`${model}-output`}>Output</TableHead>,
+          ])}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((item) => (
+          <TableRow key={`${item.provider}-${item.name}`}>
+            <TableCell>
+              <a href={item.uri} className="underline">
+                {item.provider}
+              </a>
+            </TableCell>
+            <TableCell>{item.name}</TableCell>
+            <TableCell>{item.inputPrice.toFixed(2)}</TableCell>
+            <TableCell>{item.outputPrice.toFixed(2)}</TableCell>
+            <TableCell className="font-bold">
+              ${(
+                calculatePrice(item.inputPrice, inputTokens) +
+                calculatePrice(item.outputPrice, outputTokens)
+              ).toFixed(2)}
+            </TableCell>
+            {comparisonModels.flatMap((model) => {
+              const [comparisonProvider, comparisonModelName] = model.split(":");
+              const comparisonModel = providers
+                .find((p) => p.provider === comparisonProvider)
+                ?.models.find((m) => m.name === comparisonModelName);
+
+              if (!comparisonModel) return [<TableCell key="missing">–</TableCell>, <TableCell key="missing2">–</TableCell>];
+
+              const inputDelta = calculateComparison(item.inputPrice, comparisonModel.inputPrice);
+              const outputDelta = calculateComparison(item.outputPrice, comparisonModel.outputPrice);
+
+              return [
+                <TableCell key={`${model}-input`} className={parseFloat(inputDelta) < 0 ? "bg-green-100" : parseFloat(inputDelta) > 0 ? "bg-red-100" : ""}>
+                  {`${item.provider}:${item.name}` === model ? "0.00%" : `${inputDelta}%`}
+                </TableCell>,
+                <TableCell key={`${model}-output`} className={parseFloat(outputDelta) < 0 ? "bg-green-100" : parseFloat(outputDelta) > 0 ? "bg-red-100" : ""}>
+                  {`${item.provider}:${item.name}` === model ? "0.00%" : `${outputDelta}%`}
+                </TableCell>,
+              ];
+            })}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};

src/lib/benchmarks/ index.ts

@@ -0,0 +1,11 @@
+import { Benchmark } from "./types";
+import { xaiBenchmarks } from "./xai";
+import { googleBenchmarks } from "./google";
+// import other sources here as you add them
+// import { openaiBenchmarks } from "./openai";
+
+export const benchmarkData: Benchmark[] = [
+  ...xaiBenchmarks,
+  ...googleBenchmarks,
+  // ...openaiBenchmarks,
+];

src/lib/benchmarks/google.ts

@@ -0,0 +1,37 @@
+import { Benchmark } from "./types";
+
+
+export const googleBenchmarks: Benchmark[] = [
+  {
+    model: "Gemini Diffusion",
+    benchmark: {
+      livecodebench_v6: 30.9,
+      bigcodebench: 45.4,
+      lbpp_v2: 56.8,
+      swe_bench_verified: 22.9,
+      humaneval: 89.6,
+      mbpp: 76.0,
+      gpqa_diamond: 40.4,
+      aime_2025: 23.3,
+      bigbench_extra_hard: 15.0,
+      global_mmlu_lite: 69.1,
+    },
+    source: "Google Gemini site",
+  },
+  {
+    model: "Gemini 2.0 Flash-Lite",
+    benchmark: {
+      livecodebench_v6: 28.5,
+      bigcodebench: 45.8,
+      lbpp_v2: 56.0,
+      swe_bench_verified: 28.5,
+      humaneval: 90.2,
+      mbpp: 75.8,
+      gpqa_diamond: 56.5,
+      aime_2025: 20.0,
+      bigbench_extra_hard: 21.0,
+      global_mmlu_lite: 79.0,
+    },
+    source: "Google Gemini site",
+  },
+];

src/lib/benchmarks/xai.ts

@@ -0,0 +1,33 @@
+import { Benchmark } from "./types";
+
+
+export const xaiBenchmarks: Benchmark[] = [
+  {
+    model: "Grok 3 Beta",
+    benchmark: {
+      aime_24: 52.2,
+      gpqa: 75.4,
+      lcb: 57.0,
+      mmlu_pro: 79.9,
+      loft: 83.3,
+      simpleqa: 43.6,
+      mmmu: 73.2,
+      egoschema: 74.5,
+    },
+    source: "x.ai blog",
+  },
+    {
+    model: "Grok 3 mini Beta",
+    benchmark: {
+      aime_24: 39.7,
+      gpqa: 66.2,
+      lcb: 41.5,
+      mmlu_pro: 78.9,
+      loft: 83.1,
+      simpleqa: 21.7,
+      mmmu: 69.4,
+      egoschema: 74.3,
+    },
+    source: "x.ai blog",
+  },
+];