x

src/App.tsx

@@ -1,13 +1,29 @@
-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'
+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
 
 interface FlattenedModel extends Model {
   provider: string;
@@ -15,105 +31,111 @@ interface FlattenedModel extends Model {
 }
 
 export interface Model {
-  name: string
-  inputPrice: number
-  outputPrice: number
+  name: string;
+  inputPrice: number;
+  outputPrice: number;
 }
 
 export interface Provider {
-  provider: string
-  uri: string
-  models: Model[]
+  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 [sortConfig, setSortConfig] = useState<{ key: string, direction: string } | null>(null)
+  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 [sortConfig, setSortConfig] = useState<{
+    key: keyof FlattenedModel;
+    direction: string;
+  } | null>(null);
 
   useEffect(() => {
-    setData(mockData)
-    // setComparisonModels(['OpenAI:GPT-4o-mini'])
-  }, [])
+    setData(mockData);
+  }, []);
 
   const calculatePrice = (price: number, tokens: number): number => {
-    return price * tokens
-  }
+    return price * tokens;
+  };
 
-  const calculateComparison = (modelPrice: number, comparisonPrice: number): string => {
-    return (((modelPrice - comparisonPrice) / comparisonPrice) * 100).toFixed(2)
-  }
+  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 => ({
+    return data.flatMap((provider) =>
+      provider.models.map((model) => ({
         provider: provider.provider,
         uri: provider.uri,
-        ...model
+        ...model,
       }))
     );
-  }
+  };
 
   const filteredData = data
-    .filter((provider) => selectedProviders.length === 0 || selectedProviders.includes(provider.provider))
+    .filter(
+      (provider) =>
+        selectedProviders.length === 0 ||
+        selectedProviders.includes(provider.provider)
+    )
     .map((provider) => ({
       ...provider,
-      models: provider.models.filter((model) => selectedModels.length === 0 || selectedModels.includes(model.name)),
+      models: provider.models.filter(
+        (model) =>
+          selectedModels.length === 0 || selectedModels.includes(model.name)
+      ),
     }))
-    .filter((provider) => provider.models.length > 0)
+    .filter((provider) => provider.models.length > 0);
 
   const sortedFlattenedData = React.useMemo(() => {
     let sortableData: FlattenedModel[] = flattenData(filteredData);
     if (sortConfig !== null) {
       sortableData.sort((a, b) => {
-        const key = sortConfig.key as keyof FlattenedModel;
-        if (a[key] < b[key]) {
-          return sortConfig.direction === 'ascending' ? -1 : 1;
-        }
-        if (a[key] > b[key]) {
-          return sortConfig.direction === 'ascending' ? 1 : -1;
+        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 0;
       });
     }
     return sortableData;
   }, [filteredData, sortConfig]);
 
-
-  const reassembleData = (sortedFlattenedData: FlattenedModel[]): Provider[] => {
-    const reassembledData = sortedFlattenedData.reduce((acc, item) => {
-      const providerIndex = acc.findIndex(provider => provider.provider === item.provider);
-      if (providerIndex === -1) {
-        acc.push({
-          provider: item.provider,
-          uri: item.uri,
-          models: [{ name: item.name, inputPrice: item.inputPrice, outputPrice: item.outputPrice }]
-        });
-      } else {
-        acc[providerIndex].models.push({ name: item.name, inputPrice: item.inputPrice, outputPrice: item.outputPrice });
-      }
-      return acc;
-    }, [] as Provider[]);
-    return reassembledData;
-  };
-
-  const sortedData = reassembleData(sortedFlattenedData);
-
-  const requestSort = (key: string) => {
+  const requestSort = (key: keyof FlattenedModel) => {
     let direction = 'ascending';
-    if (sortConfig && sortConfig.key === key && sortConfig.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]));
+    setExpandedProviders((prev) =>
+      prev.includes(provider)
+        ? prev.filter((p) => p !== provider)
+        : [...prev, provider]
+    );
   };
 
   return (
@@ -143,17 +165,27 @@ const App: React.FC = () => {
                 </CollapsibleTrigger>
                 <CollapsibleContent className="mt-2">
                   {provider.models.map((model) => (
-                    <div key={`${provider.provider}:${model.name}`} className="flex items-center space-x-2 mb-1">
+                    <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}`)}
+                        checked={comparisonModels.includes(
+                          `${provider.provider}:${model.name}`
+                        )}
                         onCheckedChange={(checked) => {
                           if (checked) {
-                            setComparisonModels((prev) => [...prev, `${provider.provider}:${model.name}`])
+                            setComparisonModels((prev) => [
+                              ...prev,
+                              `${provider.provider}:${model.name}`,
+                            ]);
                           } else {
                             setComparisonModels((prev) =>
-                              prev.filter((m) => m !== `${provider.provider}:${model.name}`)
-                            )
+                              prev.filter(
+                                (m) => m !== `${provider.provider}:${model.name}`
+                              )
+                            );
                           }
                         }}
                       />
@@ -173,7 +205,10 @@ const App: React.FC = () => {
 
         <div className="flex gap-4 mb-4">
           <div className="flex-1">
-            <label htmlFor="inputTokens" className="block text-sm font-medium text-gray-700">
+            <label
+              htmlFor="inputTokens"
+              className="block text-sm font-medium text-gray-700"
+            >
               Input Tokens (millions)
             </label>
             <Input
@@ -186,7 +221,10 @@ const App: React.FC = () => {
             />
           </div>
           <div className="flex-1">
-            <label htmlFor="outputTokens" className="block text-sm font-medium text-gray-700">
+            <label
+              htmlFor="outputTokens"
+              className="block text-sm font-medium text-gray-700"
+            >
               Output Tokens (millions)
             </label>
             <Input
@@ -201,7 +239,8 @@ const App: React.FC = () => {
         </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.
+          Note: If you use Amazon Bedrock or Azure prices for Anthropic, Cohere
+          or OpenAI should be the same.
         </p>
 
         <Table>
@@ -209,22 +248,50 @@ const App: React.FC = () => {
             <TableRow>
               <TableHead>
                 <button type="button" onClick={() => requestSort('provider')}>
-                  Provider {sortConfig?.key === 'provider' ? (sortConfig.direction === 'ascending' ? '▲' : '▼') : null}
+                  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}
+                  Model{' '}
+                  {sortConfig?.key === 'name' ? (
+                    sortConfig.direction === 'ascending' ? (
+                      '▲'
+                    ) : (
+                      '▼'
+                    )
+                  ) : null}
                 </button>
               </TableHead>
               <TableHead>
                 <button type="button" onClick={() => requestSort('inputPrice')}>
-                  Input Price (per 1M tokens) {sortConfig?.key === 'inputPrice' ? (sortConfig.direction === 'ascending' ? '▲' : '▼') : null}
+                  Input Price (per 1M tokens){' '}
+                  {sortConfig?.key === 'inputPrice' ? (
+                    sortConfig.direction === 'ascending' ? (
+                      '▲'
+                    ) : (
+                      '▼'
+                    )
+                  ) : null}
                 </button>
               </TableHead>
               <TableHead>
                 <button type="button" onClick={() => requestSort('outputPrice')}>
-                  Output Price (per 1M tokens) {sortConfig?.key === 'outputPrice' ? (sortConfig.direction === 'ascending' ? '▲' : '▼') : null}
+                  Output Price (per 1M tokens){' '}
+                  {sortConfig?.key === 'outputPrice' ? (
+                    sortConfig.direction === 'ascending' ? (
+                      '▲'
+                    ) : (
+                      '▼'
+                    )
+                  ) : null}
                 </button>
               </TableHead>
               <TableHead>Total Price</TableHead>
@@ -237,7 +304,12 @@ const App: React.FC = () => {
             <TableRow>
               <TableHead>
                 <MultiSelect
-                  options={data.map((provider) => ({ label: provider.provider, value: provider.provider })) || []}
+                  options={
+                    data.map((provider) => ({
+                      label: provider.provider,
+                      value: provider.provider,
+                    })) || []
+                  }
                   onValueChange={setSelectedProviders}
                   defaultValue={selectedProviders}
                 />
@@ -248,12 +320,18 @@ const App: React.FC = () => {
                     data
                       .flatMap((provider) => provider.models)
                       .map((model) => ({ label: model.name, value: model.name }))
-                      .reduce((acc: { label: string; value: string }[], curr: { label: string; value: string }) => {
-                        if (!acc.find((m) => m.value === curr.value)) {
-                          acc.push(curr)
-                        }
-                        return acc
-                      }, []) || []
+                      .reduce(
+                        (
+                          acc: { label: string; value: string }[],
+                          curr: { label: string; value: string }
+                        ) => {
+                          if (!acc.find((m) => m.value === curr.value)) {
+                            acc.push(curr);
+                          }
+                          return acc;
+                        },
+                        []
+                      ) || []
                   }
                   defaultValue={selectedModels}
                   onValueChange={setSelectedModels}
@@ -269,66 +347,92 @@ const App: React.FC = () => {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {sortedData.flatMap((provider: { models: any[]; provider: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined; uri: string | undefined }) =>
-              provider.models.map((model) => (
-                <TableRow key={`${provider.provider}-${model.name}`}>
-                  <TableCell>
-                    {' '}
-                    <a href={provider.uri} className="underline">
-                      {provider.provider}
-                    </a>
-                  </TableCell>
-                  <TableCell>{model.name}</TableCell>
-                  <TableCell>${model.inputPrice.toFixed(2)}</TableCell>
-                  <TableCell>${model.outputPrice.toFixed(2)}</TableCell>
-                  <TableCell className="font-bold">
-                    $
-                    {(
-                      calculatePrice(model.inputPrice, inputTokens) + calculatePrice(model.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(model.inputPrice, comparisonModelData.inputPrice)) < 0
+            {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(model.inputPrice, comparisonModelData.inputPrice)) > 0
+                          : parseFloat(
+                            calculateComparison(
+                              item.inputPrice,
+                              comparisonModelData.inputPrice
+                            )
+                          ) > 0
                             ? 'bg-red-100'
                             : ''
-                          }`}
-                      >
-                        {`${provider.provider}:${model.name}` === comparisonModel
-                          ? '0.00%'
-                          : `${calculateComparison(model.inputPrice, comparisonModelData.inputPrice)}%`}
-                      </TableCell>,
-                      <TableCell
-                        key={`${comparisonModel}-output`}
-                        className={`${parseFloat(calculateComparison(model.outputPrice, comparisonModelData.outputPrice)) < 0
+                        }`}
+                    >
+                      {`${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(model.outputPrice, comparisonModelData.outputPrice)) > 0
+                          : parseFloat(
+                            calculateComparison(
+                              item.outputPrice,
+                              comparisonModelData.outputPrice
+                            )
+                          ) > 0
                             ? 'bg-red-100'
                             : ''
-                          }`}
-                      >
-                        {`${provider.provider}:${model.name}` === comparisonModel
-                          ? '0.00%'
-                          : `${calculateComparison(model.outputPrice, comparisonModelData.outputPrice)}%`}
-                      </TableCell>,
-                    ]
-                  })}
-                </TableRow>
-              ))
-            )}
+                        }`}
+                    >
+                      {`${item.provider}:${item.name}` === comparisonModel
+                        ? '0.00%'
+                        : `${calculateComparison(
+                          item.outputPrice,
+                          comparisonModelData.outputPrice
+                        )}%`}
+                    </TableCell>,
+                  ];
+                })}
+              </TableRow>
+            ))}
           </TableBody>
         </Table>
       </CardContent>
     </Card>
-  )
-}
+  );
+};
 
-export default App
+export default App;

src/lib/data.ts

@@ -43,12 +43,12 @@ export const mockData: Provider[] = [
     provider: 'Mistral',
     uri: 'https://docs.mistral.ai/platform/pricing',
     models: [
-      { name: "Mistral Large 2402", inputPrice: 4.0, outputPrice: 12.0 },
-      { name: "Codestral 2405", inputPrice: 1.0, outputPrice: 3.0 },
-      { name: "Mixtral 8x22B", inputPrice: 2.0, outputPrice: 6.0 },
-      { name: "Mixtral 8x7B", inputPrice: 0.7, outputPrice: 0.7 },
-      { name: "Codestral Mamba", inputPrice: 0.25, outputPrice: 0.25 },
-      { name: "Mistral Nemo 2407", inputPrice: 0.3, outputPrice: 0.3 }
+      { name: 'Mistral Large 2402', inputPrice: 4.0, outputPrice: 12.0 },
+      { name: 'Codestral 2405', inputPrice: 1.0, outputPrice: 3.0 },
+      { name: 'Mixtral 8x22B', inputPrice: 2.0, outputPrice: 6.0 },
+      { name: 'Mixtral 8x7B', inputPrice: 0.7, outputPrice: 0.7 },
+      { name: 'Codestral Mamba', inputPrice: 0.25, outputPrice: 0.25 },
+      { name: 'Mistral Nemo 2407', inputPrice: 0.3, outputPrice: 0.3 }
     ],
   },
   {
@@ -88,12 +88,12 @@ export const mockData: Provider[] = [
       { name: 'Meta Llama 3 8B Reference', inputPrice: 0.20, outputPrice: 0.20 },
       { name: 'Gemma-2 Instruct (27B)', inputPrice: 0.80, outputPrice: 0.80 },
       { name: 'Gemma-2 Instruct (9B)', inputPrice: 0.30, outputPrice: 0.30 },
-      { name: "Mixtral 8x22B", inputPrice: 1.20, outputPrice: 1.20 },
-      { name: "Mixtral 8x7B", inputPrice: 0.60, outputPrice: 0.60 },
-      { name: "Mistral 7B", inputPrice: 0.20, outputPrice: 0.20 },
+      { name: 'Mixtral 8x22B', inputPrice: 1.20, outputPrice: 1.20 },
+      { name: 'Mixtral 8x7B', inputPrice: 0.60, outputPrice: 0.60 },
+      { name: 'Mistral 7B', inputPrice: 0.20, outputPrice: 0.20 },
       { name: 'Qwen 2 Instruct (72B)', inputPrice: 0.90, outputPrice: 0.90 },
       { name: 'Snowflake Arctic Instruct', inputPrice: 2.40, outputPrice: 2.40 },
-      { name: "DBRX", inputPrice: 1.20, outputPrice: 1.20 }
+      { name: 'DBRX', inputPrice: 1.20, outputPrice: 1.20 }
     ],
   },
   {
@@ -108,13 +108,13 @@ export const mockData: Provider[] = [
     provider: "Groq",
     uri: "https://wow.groq.com/",
     models: [
-      { name: "Llama 3 8B 8K", inputPrice: 0.05, outputPrice: 0.08 },
-      { name: "Llama 3 70B 8K", inputPrice: 0.59, outputPrice: 0.79 },
-      { name: "Llama 3 8B 8192 Tool Use", inputPrice: 0.19, outputPrice: 0.19 },
-      { name: "Llama 3 70B 8192 Tool Use", inputPrice: 0.89, outputPrice: 0.89 },
-      { name: "Mixtral 8x7B 32k Instruct", inputPrice: 0.24, outputPrice: 0.24 },
-      { name: "Gemma 7B Instruct", inputPrice: 0.07, outputPrice: 0.07 },
-      { name: "Gemma 2 9B Instruct", inputPrice: 0.20, outputPrice: 0.20 }
+      { name: 'Llama 3 8B 8K', inputPrice: 0.05, outputPrice: 0.08 },
+      { name: 'Llama 3 70B 8K', inputPrice: 0.59, outputPrice: 0.79 },
+      { name: 'Llama 3 8B 8192 Tool Use', inputPrice: 0.19, outputPrice: 0.19 },
+      { name: 'Llama 3 70B 8192 Tool Use', inputPrice: 0.89, outputPrice: 0.89 },
+      { name: 'Mixtral 8x7B 32k Instruct', inputPrice: 0.24, outputPrice: 0.24 },
+      { name: 'Gemma 7B Instruct', inputPrice: 0.07, outputPrice: 0.07 },
+      { name: 'Gemma 2 9B Instruct', inputPrice: 0.20, outputPrice: 0.20 }
     ]
   },
   {