x

src/App.tsx

@@ -43,6 +43,7 @@ const App: React.FC = () => {
   const [benchmarkComparisonMetrics, setBenchmarkComparisonMetrics] = useState<string[]>([]);
   const [selectedBenchmarkProviders, setSelectedBenchmarkProviders] = useState<string[]>([]);
   const [selectedBenchmarkModels, setSelectedBenchmarkModels] = useState<string[]>([]);
+  const [viewMode, setViewMode] = useState<"pricing" | "benchmark">("pricing");
 
   const [sortConfig, setSortConfig] = useState<{
     key: keyof FlattenedModel;
@@ -54,12 +55,10 @@ const App: React.FC = () => {
     direction: "ascending" | "descending";
   } | null>(null);
 
-
   useEffect(() => {
     setData(mockData);
   }, []);
 
-
   const flattenDataFromPricing = (data: Provider[]): FlattenedModel[] =>
     data.flatMap((provider) =>
       provider.models.map((model) => ({
@@ -73,15 +72,13 @@ const App: React.FC = () => {
   const flattenDataFromBenchmarks = (): FlattenedModel[] =>
     benchmarkData.map((b) => ({
       provider: b.provider ?? "Unknown",
-      uri: b.source, // placeholder or use an optional `b.link` if available
+      uri: b.source,
       name: b.model,
       inputPrice: b.inputPrice,
       outputPrice: b.outputPrice,
       benchmark: b.benchmark ?? {},
     }));
 
-
-
   const filteredData = useMemo(() => {
     if (!selectedProviders.length && !selectedModels.length) return data;
 
@@ -91,49 +88,33 @@ const App: React.FC = () => {
         ...p,
         models: p.models.filter((m) => {
           if (!selectedModels.length) return selectedProviders.includes(p.provider);
-          if (!selectedModels.length) return !selectedProviders.length || selectedProviders.includes(p.provider);
           return selectedModels.includes(m.name);
         }),
       }))
       .filter((p) => p.models.length > 0);
   }, [data, selectedProviders, selectedModels]);
 
-  const benchmarkedModels = useMemo(() => {
-    return flattenDataFromBenchmarks();
-  }, []);
-
+  const benchmarkedModels = useMemo(() => flattenDataFromBenchmarks(), []);
 
+  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);
 
-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);
-
-    return providerMatch && modelMatch;
-  });
-}, [
-  benchmarkedModels,
-  selectedBenchmarkProviders,
-  selectedBenchmarkModels,
-]);
-
+      return providerMatch && modelMatch;
+    });
+  }, [benchmarkedModels, selectedBenchmarkProviders, selectedBenchmarkModels]);
 
   const sortedBenchmarkedModels = useMemo(() => {
     if (!benchmarkSortConfig) return filteredBenchmarkedModels;
 
     return [...filteredBenchmarkedModels].sort((a, b) => {
       const key = benchmarkSortConfig.key;
-
       const isTopLevelKey = ["provider", "name", "inputPrice", "outputPrice"].includes(key);
-
-      const aVal = isTopLevelKey
-        ? (a as any)[key]
-        : a.benchmark?.[key] ?? -Infinity;
-      const bVal = isTopLevelKey
-        ? (b as any)[key]
-        : b.benchmark?.[key] ?? -Infinity;
+      const aVal = isTopLevelKey ? (a as any)[key] : a.benchmark?.[key] ?? -Infinity;
+      const bVal = isTopLevelKey ? (b as any)[key] : b.benchmark?.[key] ?? -Infinity;
 
       if (typeof aVal === "string" && typeof bVal === "string") {
         return benchmarkSortConfig.direction === "ascending"
@@ -147,7 +128,6 @@ const filteredBenchmarkedModels = useMemo(() => {
     });
   }, [filteredBenchmarkedModels, benchmarkSortConfig]);
 
-
   const pricingProviders = useMemo(() => {
     const grouped: Record<string, FlattenedModel[]> = {};
 
@@ -168,7 +148,6 @@ const filteredBenchmarkedModels = useMemo(() => {
     }));
   }, [data]);
 
-
   const benchmarkProviders = useMemo(() => {
     const grouped: Record<string, FlattenedModel[]> = {};
 
@@ -189,11 +168,6 @@ const filteredBenchmarkedModels = useMemo(() => {
     }));
   }, [benchmarkedModels]);
 
-
-
-
-
-
   const sortedFlattenedData = useMemo(() => {
     const flattened = flattenDataFromPricing(filteredData);
     if (!sortConfig) return flattened;
@@ -222,15 +196,12 @@ const filteredBenchmarkedModels = useMemo(() => {
     );
   };
 
-
-
   return (
     <Card className="w-full max-w-6xl mx-auto">
       <CardHeader>
-        <CardTitle>LLM Pricing Calculator</CardTitle>
+        <CardTitle>LLM Pricing & Benchmark Comparison Tool</CardTitle>
       </CardHeader>
       <CardContent>
-        {/* Source Link */}
         <p className="italic text-sm text-muted-foreground mb-4">
           <a
             href="https://huggingface.co/spaces/philschmid/llm-pricing"
@@ -240,97 +211,122 @@ const filteredBenchmarkedModels = useMemo(() => {
           </a>
         </p>
 
-        {/* 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 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 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 className="block text-sm font-medium">Token Calculation</label>
-            <select
-              value={tokenCalculation}
-              onChange={(e) => setTokenCalculation(e.target.value)}
-              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>
-              <option value="thousand">Thousand Tokens</option>
-              <option value="unit">Unit Tokens</option>
-            </select>
-          </div>
+        {/* View Toggle */}
+        <div className="flex justify-center gap-6 mb-6">
+          <label className="flex items-center space-x-2">
+            <input
+              type="radio"
+              name="view"
+              value="pricing"
+              checked={viewMode === "pricing"}
+              onChange={() => setViewMode("pricing")}
+            />
+            <span>Pricing</span>
+          </label>
+          <label className="flex items-center space-x-2">
+            <input
+              type="radio"
+              name="view"
+              value="benchmark"
+              checked={viewMode === "benchmark"}
+              onChange={() => setViewMode("benchmark")}
+            />
+            <span>Benchmark</span>
+          </label>
         </div>
 
-        {/* Pricing Table */}
-        <h2 className="text-lg font-semibold mb-2">Pricing Table</h2>
-        <PricingTable
-          data={sortedFlattenedData}
-          providers={pricingProviders}
-          selectedProviders={selectedProviders}
-          selectedModels={selectedModels}
-          onProviderChange={setSelectedProviders}
-          onModelChange={setSelectedModels}
-          comparisonModels={comparisonModels}
-          inputTokens={inputTokens}
-          outputTokens={outputTokens}
-          tokenCalculation={tokenCalculation}
-          requestSort={requestSort}
-          sortConfig={sortConfig}
-        />
-
-
-        {/* Benchmark Table */}
-        <h3 className="text-lg font-semibold mt-12 mb-2">Select Benchmark Metrics to Compare</h3>
-        <BenchmarkComparisonSelector
-          allMetrics={benchmarkMetricOrder.filter(
-            (metric) => benchmarkedModels.some((m) => m.benchmark?.[metric] !== undefined)
-          )}
-          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}
-          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}
-        />
-
-
+        {viewMode === "pricing" && (
+          <>
+            <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)
+                )
+              }
+            />
+
+            <div className="flex gap-4 mt-6 mb-4">
+              <div className="flex-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 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 className="block text-sm font-medium">Token Calculation</label>
+                <select
+                  value={tokenCalculation}
+                  onChange={(e) => setTokenCalculation(e.target.value)}
+                  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>
+                  <option value="thousand">Thousand Tokens</option>
+                  <option value="unit">Unit Tokens</option>
+                </select>
+              </div>
+            </div>
+
+            <h2 className="text-lg font-semibold mb-2">Pricing Table</h2>
+            <PricingTable
+              data={sortedFlattenedData}
+              providers={pricingProviders}
+              selectedProviders={selectedProviders}
+              selectedModels={selectedModels}
+              onProviderChange={setSelectedProviders}
+              onModelChange={setSelectedModels}
+              comparisonModels={comparisonModels}
+              inputTokens={inputTokens}
+              outputTokens={outputTokens}
+              tokenCalculation={tokenCalculation}
+              requestSort={requestSort}
+              sortConfig={sortConfig}
+            />
+          </>
+        )}
+
+        {viewMode === "benchmark" && (
+          <>
+            <h3 className="text-lg font-semibold mb-2">Select Benchmark Metrics to Compare</h3>
+            <BenchmarkComparisonSelector
+              allMetrics={benchmarkMetricOrder.filter(
+                (metric) => benchmarkedModels.some((m) => m.benchmark?.[metric] !== undefined)
+              )}
+              selected={benchmarkComparisonMetrics}
+              onChange={(metric, checked) =>
+                setBenchmarkComparisonMetrics((prev) =>
+                  checked ? [...prev, metric] : prev.filter((m) => m !== metric)
+                )
+              }
+            />
+
+            <h2 className="text-lg font-semibold mb-2">Benchmark Table</h2>
+            <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}
+            />
+          </>
+        )}
       </CardContent>
     </Card>
   );