x

src/App.tsx

@@ -7,8 +7,10 @@ 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";
+import { benchmarkData } from "./lib/benchmarks/ index";
+import { BenchmarkComparisonSelector } from "./components/BenchmarkComparisonSelector";
 
 
 export interface FlattenedModel extends Model {
@@ -41,33 +43,49 @@ 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 [benchmarkComparisonMetrics, setBenchmarkComparisonMetrics] = useState<string[]>([]);
+  const [selectedBenchmarkProviders, setSelectedBenchmarkProviders] = useState<string[]>([]);
+  const [selectedBenchmarkModels, setSelectedBenchmarkModels] = useState<string[]>([]);
+  const [linkBenchmarkProviderModel, setLinkBenchmarkProviderModel] = useState<boolean>(false);
+
 
   const [sortConfig, setSortConfig] = useState<{
     key: keyof FlattenedModel;
     direction: string;
   } | null>(null);
 
+  const [benchmarkSortConfig, setBenchmarkSortConfig] = useState<{
+    key: string;
+    direction: "ascending" | "descending";
+  } | null>(null);
+
+
   useEffect(() => {
     setData(mockData);
   }, []);
 
-  const normalize = (str: string) => str.toLowerCase().replace(/[^a-z0-9]/g, "");
-
-  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 flattenDataFromPricing = (data: Provider[]): FlattenedModel[] =>
+  data.flatMap((provider) =>
+    provider.models.map((model) => ({
+      provider: provider.provider,
+      uri: provider.uri,
+      ...model,
+      benchmark: {},
+    }))
+  );
+
+const flattenDataFromBenchmarks = (): FlattenedModel[] =>
+  benchmarkData.map((b) => ({
+    provider: b.provider ?? "Unknown",
+    uri: b.source, // placeholder or use an optional `b.link` if available
+    name: b.model,
+    inputPrice: b.inputPrice,
+    outputPrice: b.outputPrice,
+    benchmark: b.benchmark ?? {},
+  }));
+
+
 
   const filteredData = useMemo(() => {
     if (!selectedProviders.length && !selectedModels.length && !linkProviderModel) return data;
@@ -85,26 +103,82 @@ const App: React.FC = () => {
       .filter((p) => p.models.length > 0);
   }, [data, selectedProviders, selectedModels, linkProviderModel]);
 
-  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 benchmarkedModels = useMemo(() => {
+  return flattenDataFromBenchmarks();
+}, []);
 
-  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;
+
+const filteredBenchmarkedModels = useMemo(() => {
+  return benchmarkedModels.filter((model) => {
+    const providerMatch =
+      selectedBenchmarkProviders.length === 0 || selectedBenchmarkProviders.includes(model.provider);
+    const modelMatch =
+      selectedBenchmarkModels.length === 0 || selectedBenchmarkModels.includes(model.name);
+
+    if (linkBenchmarkProviderModel) {
+      return providerMatch && modelMatch;
+    }
+
+    // When not linking, allow filtering by either
+    if (selectedBenchmarkProviders.length > 0 && selectedBenchmarkModels.length > 0) {
+      return providerMatch || modelMatch;
+    }
+
+    return providerMatch && modelMatch; // this handles the case where one or both are empty
   });
-}, [benchmarkedModels, benchmarkSortKey]);
+}, [
+  benchmarkedModels,
+  selectedBenchmarkProviders,
+  selectedBenchmarkModels,
+  linkBenchmarkProviderModel,
+]);
+
+
+  const sortedBenchmarkedModels = useMemo(() => {
+    if (!benchmarkSortConfig) return filteredBenchmarkedModels;
+
+    return [...benchmarkedModels].sort((a, b) => {
+      const key = benchmarkSortConfig.key;
+      const aVal = key === "provider" || key === "name"
+        ? (a as any)[key]?.toLowerCase?.() ?? ""
+        : a.benchmark?.[key] ?? -Infinity;
+      const bVal = key === "provider" || key === "name"
+        ? (b as any)[key]?.toLowerCase?.() ?? ""
+        : b.benchmark?.[key] ?? -Infinity;
+
+      if (typeof aVal === "string" && typeof bVal === "string") {
+        return benchmarkSortConfig.direction === "ascending"
+          ? aVal.localeCompare(bVal)
+          : bVal.localeCompare(aVal);
+      }
+
+      return benchmarkSortConfig.direction === "ascending"
+        ? aVal - bVal
+        : bVal - aVal;
+    });
+  }, [filteredBenchmarkedModels, benchmarkSortConfig]);
+
+
+  const benchmarkProviders = useMemo(() => {
+    const modelsInBenchmark = new Set(
+      benchmarkedModels.map((m) => `${m.provider}:${m.name}`)
+    );
+
+    return data
+      .map((provider) => ({
+        ...provider,
+        models: provider.models.filter((model) =>
+          modelsInBenchmark.has(`${provider.provider}:${model.name}`)
+        ),
+      }))
+      .filter((p) => p.models.length > 0);
+  }, [data, benchmarkedModels]);
+
 
 
   const sortedFlattenedData = useMemo(() => {
-    const flattened = flattenData(filteredData);
+    const flattened = flattenDataFromPricing(filteredData);
     if (!sortConfig) return flattened;
 
     return [...flattened].sort((a, b) => {
@@ -131,21 +205,7 @@ const App: React.FC = () => {
     );
   };
 
-  const getModelsForSelectedProviders = () => {
-    const allModels = data.flatMap((provider) =>
-      provider.models.map((model) => ({
-        label: model.name,
-        value: model.name,
-        provider: provider.provider,
-      }))
-    );
-
-    const filtered = linkProviderModel
-      ? allModels.filter((m) => selectedProviders.includes(m.provider))
-      : allModels;
 
-    return Array.from(new Map(filtered.map((m) => [m.value, m])).values());
-  };
 
   return (
     <Card className="w-full max-w-6xl mx-auto">
@@ -210,11 +270,61 @@ const App: React.FC = () => {
 
         {/* Pricing Table */}
         <h2 className="text-lg font-semibold mb-2">Pricing Table</h2>
+         <PricingTable
+          data={sortedFlattenedData}
+          providers={data}
+          selectedProviders={selectedProviders}
+          selectedModels={selectedModels}
+          onProviderChange={setSelectedProviders}
+          onModelChange={setSelectedModels}
+          comparisonModels={comparisonModels}
+          inputTokens={inputTokens}
+          outputTokens={outputTokens}
+          tokenCalculation={tokenCalculation}
+          requestSort={requestSort}
+          sortConfig={sortConfig}
+          linkProviderModel={linkProviderModel}
+        />  
 
 
         {/* Benchmark Table */}
+        <h3 className="text-lg font-semibold mt-12 mb-2">Select Benchmark Metrics to Compare</h3>
+        <BenchmarkComparisonSelector
+          allMetrics={Array.from(new Set(benchmarkedModels.flatMap((m) => Object.keys(m.benchmark ?? {})))).sort()}
+          selected={benchmarkComparisonMetrics}
+          onChange={(metric, checked) =>
+            setBenchmarkComparisonMetrics((prev) =>
+              checked ? [...prev, metric] : prev.filter((m) => m !== metric)
+            )
+          }
+        />
+
+
+
+
+
         <h2 className="text-lg font-semibold mt-12 mb-2">Benchmark Table</h2>
-        <BenchmarkTable data={sortedBenchmarkedModels} />
+        <BenchmarkTable
+          data={sortedBenchmarkedModels}
+          comparisonMetrics={benchmarkComparisonMetrics}
+          requestSort={(key) => {
+            setBenchmarkSortConfig((prev) =>
+              prev?.key === key
+                ? { key, direction: prev.direction === "ascending" ? "descending" : "ascending" }
+                : { key, direction: "descending" }
+            );
+          }}
+          sortConfig={benchmarkSortConfig}
+          allProviders={benchmarkProviders}
+          selectedProviders={selectedBenchmarkProviders}
+          selectedModels={selectedBenchmarkModels}
+          onProviderChange={setSelectedBenchmarkProviders}
+          onModelChange={setSelectedBenchmarkModels}
+          linkProviderModel={linkBenchmarkProviderModel}
+          onLinkToggle={setLinkBenchmarkProviderModel}
+        />
+
+
       </CardContent>
     </Card>
   );

src/components/BenchmarkComparisonSelector.tsx

@@ -0,0 +1,32 @@
+// components/BenchmarkComparisonSelector.tsx
+import React from "react";
+import { Checkbox } from "@/components/ui/checkbox";
+
+interface Props {
+  allMetrics: string[];
+  selected: string[];
+  onChange: (metric: string, checked: boolean) => void;
+}
+
+export const BenchmarkComparisonSelector: React.FC<Props> = ({
+  allMetrics,
+  selected,
+  onChange,
+}) => {
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-4">
+      {allMetrics.map((metric) => (
+        <div key={metric} className="flex items-center space-x-2">
+          <Checkbox
+            id={metric}
+            checked={selected.includes(metric)}
+            onCheckedChange={(checked) => onChange(metric, !!checked)}
+          />
+          <label htmlFor={metric} className="text-sm">
+            {metric.replace(/_/g, " ").toUpperCase()}
+          </label>
+        </div>
+      ))}
+    </div>
+  );
+};

src/components/BenchmarkTable.tsx

@@ -1,93 +1,183 @@
 import * as React from "react";
 import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableRow,
-  TableHead,
-  TableCell,
+    Table,
+    TableHeader,
+    TableBody,
+    TableRow,
+    TableHead,
+    TableCell,
 } from "@/components/ui/table";
 import { MultiSelect } from "@/components/ui/multi-select";
-import { FlattenedModel } from "@/App";
+import { Switch } from "@/components/ui/switch";
+import { Provider, FlattenedModel } from "@/App";
 
 interface BenchmarkTableProps {
-  data: FlattenedModel[];
+    data: FlattenedModel[];
+    comparisonMetrics?: string[];
+    requestSort: (key: string) => void;
+    sortConfig: {
+        key: string;
+        direction: "ascending" | "descending";
+    } | null;
+    allProviders: Provider[];
+    selectedProviders: string[];
+    selectedModels: string[];
+    onProviderChange: (values: string[]) => void;
+    onModelChange: (values: string[]) => void;
+    linkProviderModel: boolean;
+    onLinkToggle: (checked: boolean) => void;
 }
 
-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]);
+export const BenchmarkTable: React.FC<BenchmarkTableProps> = ({
+    data,
+    comparisonMetrics,
+    requestSort,
+    sortConfig,
+    allProviders,
+    selectedProviders,
+    selectedModels,
+    onProviderChange,
+    onModelChange,
+    linkProviderModel,
+    onLinkToggle,
+}) => {
+    const benchmarkMetrics = React.useMemo(() => {
+        if (!comparisonMetrics || comparisonMetrics.length === 0) return [];
+        return comparisonMetrics;
+    }, [comparisonMetrics]);
+
+    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";
+    };
+
+    const renderSortIndicator = (key: string) => {
+        if (sortConfig?.key !== key) return null;
+        return sortConfig.direction === "ascending" ? " ▲" : " ▼";
+    };
 
-  // State: visible metrics
-  const [visibleMetrics, setVisibleMetrics] = React.useState<string[]>([]);
+    const modelOptions = React.useMemo(() => {
+        const flat = allProviders.flatMap((provider) =>
+            provider.models.map((model) => ({
+                label: model.name,
+                value: model.name,
+                provider: provider.provider,
+            }))
+        );
 
-  // Set default to all if empty on first render
-  React.useEffect(() => {
-    if (benchmarkMetrics.length && visibleMetrics.length === 0) {
-      setVisibleMetrics(benchmarkMetrics);
-    }
-  }, [benchmarkMetrics]);
+        const filtered = linkProviderModel
+            ? flat.filter((m) => selectedProviders.includes(m.provider))
+            : flat;
 
-  // 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 Array.from(new Map(filtered.map((m) => [m.value, m])).values());
+    }, [allProviders, selectedProviders, linkProviderModel]);
 
-  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>
+    return (
+        <>
+            <div className="flex items-center space-x-4 mb-4">
+                <div className="flex-1">
+                    <label className="text-sm font-medium block mb-1">Providers</label>
+                    <MultiSelect
+                        options={allProviders.map((p) => ({ label: p.provider, value: p.provider }))}
+                        defaultValue={selectedProviders}
+                        onValueChange={onProviderChange}
+                    />
+                </div>
+                <div className="flex-1">
+                    <label className="text-sm font-medium block mb-1">Models</label>
+                    <MultiSelect
+                        options={modelOptions.map(({ label, value }) => ({ label, value }))}
+                        defaultValue={selectedModels}
+                        onValueChange={onModelChange}
+                    />
+                </div>
+                <div className="flex items-center pt-6 space-x-2">
+                    <Switch
+                        id="linkBenchmarkProviderModel"
+                        checked={linkProviderModel}
+                        onCheckedChange={onLinkToggle}
+                    />
+                    <label htmlFor="linkBenchmarkProviderModel" className="text-sm">
+                        Link Provider and Model
+                    </label>
+                </div>
+            </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>
-    </>
-  );
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>
+                            <button
+                                onClick={() => requestSort("provider")}
+                                className="font-medium underline underline-offset-2"
+                            >
+                                Provider{renderSortIndicator("provider")}
+                            </button>
+                        </TableHead>
+                        <TableHead>
+                            <button
+                                onClick={() => requestSort("name")}
+                                className="font-medium underline underline-offset-2"
+                            >
+                                Model{renderSortIndicator("name")}
+                            </button>
+                        </TableHead>
+                        <TableHead>
+                            <button
+                                onClick={() => requestSort("inputPrice")}
+                                className="font-medium underline underline-offset-2"
+                            >
+                                Input Price (USD){renderSortIndicator("inputPrice")}
+                            </button>
+                        </TableHead>
+                        <TableHead>
+                            <button
+                                onClick={() => requestSort("outputPrice")}
+                                className="font-medium underline underline-offset-2"
+                            >
+                                Output Price (USD){renderSortIndicator("outputPrice")}
+                            </button>
+                        </TableHead>
+
+                        {benchmarkMetrics.map((metric) => (
+                            <TableHead key={metric}>
+                                <button
+                                    onClick={() => requestSort(metric)}
+                                    className="font-medium underline underline-offset-2"
+                                >
+                                    {metric.replace(/_/g, " ").toUpperCase()}
+                                    {renderSortIndicator(metric)}
+                                </button>
+                            </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>
+                            <TableCell>${model.inputPrice.toFixed(2)}</TableCell>
+                            <TableCell>${model.outputPrice.toFixed(2)}</TableCell>
+
+                            {benchmarkMetrics.map((metric) => {
+                                const score = model.benchmark?.[metric];
+                                return (
+                                    <TableCell key={metric} className={getCellStyle(score)}>
+                                        {score !== undefined ? `${score.toFixed(1)}%` : "-"}
+                                    </TableCell>
+                                );
+                            })}
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </>
+    );
 };

src/lib/benchmarks/google.ts

@@ -2,36 +2,42 @@ 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,
+    {
+        model: "Gemini Diffusion",
+        provider: "Google",
+        inputPrice: 0,
+        outputPrice: 0,
+        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: "https://deepmind.google/models/gemini-diffusion/",
     },
-    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,
+    {
+        model: "Gemini 2.0 Flash-Lite",
+        provider: "Google",
+        inputPrice: 0.10,
+        outputPrice: 0.40,
+        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: "https://deepmind.google/models/gemini-diffusion/",
     },
-    source: "Google Gemini site",
-  },
 ];

src/lib/benchmarks/types.ts

@@ -20,7 +20,10 @@ export type BenchmarkMetric =
 
 export interface Benchmark {
   model: string;
+  provider: string;
   benchmark: Partial<Record<BenchmarkMetric, number>>;
-  source?: string;
+ inputPrice: number;
+  outputPrice: number;
+  source: string;
   version?: string;
 }

src/lib/benchmarks/xai.ts

@@ -2,32 +2,38 @@ 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,
+    {
+        model: "Grok 3 Beta",
+        provider: "Xai",
+        inputPrice: 3.00,
+        outputPrice: 15.00,
+        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: "https://x.ai/news/grok-3",
     },
-    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,
+        model: "Grok 3 mini Beta",
+        provider: "Xai",
+        inputPrice: 0.30,
+        outputPrice: 0.50,
+        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: "https://x.ai/news/grok-3",
     },
-    source: "x.ai blog",
-  },
 ];