x

package.json

@@ -1,46 +1,47 @@
-{
-  "name": "llm-pricing",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@radix-ui/react-checkbox": "^1.1.1",
-    "@radix-ui/react-collapsible": "^1.1.0",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@radix-ui/react-popover": "^1.1.1",
-    "@radix-ui/react-select": "^2.1.1",
-    "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slot": "^1.1.0",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
-    "lucide-react": "^0.399.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "recharts": "^2.12.7",
-    "tailwind-merge": "^2.3.0",
-    "tailwindcss-animate": "^1.0.7"
-  },
-  "devDependencies": {
-    "@types/node": "^20.14.9",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
-    "@vitejs/plugin-react": "^4.3.1",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "postcss": "^8.4.39",
-    "tailwindcss": "^3.4.4",
-    "typescript": "^5.2.2",
-    "vite": "^5.3.1"
-  }
-}
+{
+  "name": "llm-pricing",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
+    "lucide-react": "^0.399.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "recharts": "^2.12.7",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.9",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1"
+  }
+}

src/App.tsx

@@ -1,541 +1,541 @@
-import React, { useState, useEffect } 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 {
-  provider: string;
-  uri: string;
-}
-
-export interface Model {
-  name: string;
-  inputPrice: number;
-  outputPrice: number;
-}
-
-export interface Provider {
-  provider: string;
-  uri: string;
-  models: Model[];
-}
-
-const App: React.FC = () => {
-  const [data, setData] = useState<Provider[]>([]);
-  const [comparisonModels, setComparisonModels] = useState<string[]>([]);
-  const [inputTokens, setInputTokens] = useState<number>(1);
-  const [outputTokens, setOutputTokens] = useState<number>(1);
-  const [selectedProviders, setSelectedProviders] = useState<string[]>([]);
-  const [selectedModels, setSelectedModels] = useState<string[]>([]);
-  const [expandedProviders, setExpandedProviders] = useState<string[]>([]);
-  const [tokenCalculation, setTokenCalculation] = useState<string>("million");
-  const [linkProviderModel, setLinkProviderModel] = useState<boolean>(false);
-
-  const [sortConfig, setSortConfig] = useState<{
-    key: keyof FlattenedModel;
-    direction: string;
-  } | null>(null);
-
-  useEffect(() => {
-    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 calculateComparison = (
-    modelPrice: number,
-    comparisonPrice: number
-  ): string => {
-    return (((modelPrice - comparisonPrice) / comparisonPrice) * 100).toFixed(
-      2
-    );
-  };
-
-  const flattenData = (data: Provider[]) => {
-    return data.flatMap((provider) =>
-      provider.models.map((model) => ({
-        provider: provider.provider,
-        uri: provider.uri,
-        ...model,
-      }))
-    );
-  };
-
-  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;
-  }, [filteredData, sortConfig]);
-
-  const requestSort = (key: keyof FlattenedModel) => {
-    let direction = "ascending";
-    if (
-      sortConfig &&
-      sortConfig.key === key &&
-      sortConfig.direction === "ascending"
-    ) {
-      direction = "descending";
-    }
-    setSortConfig({ key, direction });
-  };
-
-  const toggleProviderExpansion = (provider: string) => {
-    setExpandedProviders((prev) =>
-      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;
-          },
-          []
-        );
-    }
-
-    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;
-        },
-        []
-      );
-  };
-
-  return (
-    <Card className="w-full max-w-6xl mx-auto">
-      <CardHeader>
-        <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>
-
-        <div className="flex gap-4 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"
-            />
-          </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"
-            />
-          </div>
-          <div className="flex-1">
-            <label
-              htmlFor="tokenCalculation"
-              className="block text-sm font-medium text-gray-700"
-            >
-              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"
-            >
-              <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>
-
-        <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>
-        </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>
-      </CardContent>
-    </Card>
-  );
-};
-
-export default App;
+import React, { useState, useEffect } 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 {
+  provider: string;
+  uri: string;
+}
+
+export interface Model {
+  name: string;
+  inputPrice: number;
+  outputPrice: number;
+}
+
+export interface Provider {
+  provider: string;
+  uri: string;
+  models: Model[];
+}
+
+const App: React.FC = () => {
+  const [data, setData] = useState<Provider[]>([]);
+  const [comparisonModels, setComparisonModels] = useState<string[]>([]);
+  const [inputTokens, setInputTokens] = useState<number>(1);
+  const [outputTokens, setOutputTokens] = useState<number>(1);
+  const [selectedProviders, setSelectedProviders] = useState<string[]>([]);
+  const [selectedModels, setSelectedModels] = useState<string[]>([]);
+  const [expandedProviders, setExpandedProviders] = useState<string[]>([]);
+  const [tokenCalculation, setTokenCalculation] = useState<string>("million");
+  const [linkProviderModel, setLinkProviderModel] = useState<boolean>(false);
+
+  const [sortConfig, setSortConfig] = useState<{
+    key: keyof FlattenedModel;
+    direction: string;
+  } | null>(null);
+
+  useEffect(() => {
+    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 calculateComparison = (
+    modelPrice: number,
+    comparisonPrice: number
+  ): string => {
+    return (((modelPrice - comparisonPrice) / comparisonPrice) * 100).toFixed(
+      2
+    );
+  };
+
+  const flattenData = (data: Provider[]) => {
+    return data.flatMap((provider) =>
+      provider.models.map((model) => ({
+        provider: provider.provider,
+        uri: provider.uri,
+        ...model,
+      }))
+    );
+  };
+
+  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;
+  }, [filteredData, sortConfig]);
+
+  const requestSort = (key: keyof FlattenedModel) => {
+    let direction = "ascending";
+    if (
+      sortConfig &&
+      sortConfig.key === key &&
+      sortConfig.direction === "ascending"
+    ) {
+      direction = "descending";
+    }
+    setSortConfig({ key, direction });
+  };
+
+  const toggleProviderExpansion = (provider: string) => {
+    setExpandedProviders((prev) =>
+      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;
+          },
+          []
+        );
+    }
+
+    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;
+        },
+        []
+      );
+  };
+
+  return (
+    <Card className="w-full max-w-6xl mx-auto">
+      <CardHeader>
+        <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>
+
+        <div className="flex gap-4 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"
+            />
+          </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"
+            />
+          </div>
+          <div className="flex-1">
+            <label
+              htmlFor="tokenCalculation"
+              className="block text-sm font-medium text-gray-700"
+            >
+              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"
+            >
+              <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>
+
+        <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>
+        </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>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default App;

src/components/ui/switch.tsx

@@ -1,27 +1,27 @@
-import { forwardRef } from "react";
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-
-import { cn } from "@/lib/utils";
-
-const Switch = forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };
+import { forwardRef } from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "@/lib/utils";
+
+const Switch = forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };