wip

components.json

@@ -11,7 +11,7 @@
     "prefix": ""
   },
   "aliases": {
-    "components": "src/components",
-    "utils": "src/lib/utils"
+    "components": "@/components",
+    "utils": "@/lib/utils"
   }
 }

package-lock.json

@@ -9,7 +9,9 @@
       "version": "0.0.0",
       "dependencies": {
         "@radix-ui/react-checkbox": "^1.1.1",
+        "@radix-ui/react-collapsible": "^1.1.0",
         "@radix-ui/react-select": "^2.1.1",
+        "@radix-ui/react-slot": "^1.1.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "lucide-react": "^0.399.0",
@@ -1159,6 +1161,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.0.tgz",
+      "integrity": "sha512-zQY7Epa8sTL0mq4ajSJpjgn2YmCgyrG7RsQgLp3C0LQVkG7+Tf6Pv1CeNWZLyqMjhdPkBa5Lx7wYBeSu7uCSTA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",

package.json

@@ -11,7 +11,9 @@
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.399.0",

src/App.tsx

@@ -4,6 +4,9 @@ import { Checkbox } from '@/components/ui/checkbox'
 import { Input } from '@/components/ui/input'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/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'
 
 export interface Model {
@@ -23,12 +26,12 @@ const App: React.FC = () => {
   const [comparisonModels, setComparisonModels] = useState<string[]>([])
   const [inputTokens, setInputTokens] = useState<number>(1)
   const [outputTokens, setOutputTokens] = useState<number>(1)
-  const [selectedProvider, setSelectedProvider] = useState<string>('All')
-  const [selectedModel, setSelectedModel] = useState<string>('All')
+  const [selectedProviders, setSelectedProviders] = useState<string[]>([])
+  const [selectedModels, setSelectedModels] = useState<string[]>([])
+  const [expandedProviders, setExpandedProviders] = useState<string[]>([])
 
   useEffect(() => {
     setData(mockData)
-    // Set default comparison models
     setComparisonModels(['OpenAI:GPT-4o', 'Anthropic:Claude 3.5 (Sonnet)', 'Google Vertex AI:Gemini 1.5 Pro'])
   }, [])
 
@@ -39,59 +42,48 @@ const App: React.FC = () => {
   const calculateComparison = (modelPrice: number, comparisonPrice: number): string => {
     return (((modelPrice - comparisonPrice) / comparisonPrice) * 100).toFixed(2)
   }
-
   const filteredData = data.filter((provider) => {
-    if (selectedProvider !== 'All' && provider.provider !== selectedProvider) {
+    if (selectedProviders.length > 0 && !selectedProviders.includes(provider.provider)) {
       return false
     }
-    if (selectedModel !== 'All') {
-      return provider.models.some((model) => model.name === selectedModel)
+    if (selectedModels.length > 0) {
+      return provider.models.some((model) => selectedModels.includes(model.name))
     }
     return true
   })
 
+  const toggleProviderExpansion = (provider: string) => {
+    setExpandedProviders((prev) => (prev.includes(provider) ? prev.filter((p) => p !== provider) : [...prev, provider]))
+  }
+
   return (
     <Card className="w-full max-w-6xl mx-auto">
       <CardHeader>
         <CardTitle>LLM Pricing Comparison Tool</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="">
+        <div className="mb-4">
           <h3 className="text-lg font-semibold mb-2">Select Comparison Models</h3>
-
-          <div className="flex gap-4 mb-4">
-            <div className="min-w-96 ">
-              <div className="flex-1">
-                <label htmlFor="inputTokens" className="block text-sm font-medium text-gray-700">
-                  Input Tokens (millions)
-                </label>
-                <Input
-                  id="inputTokens"
-                  type="number"
-                  value={inputTokens}
-                  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 (millions)
-                </label>
-                <Input
-                  id="outputTokens"
-                  type="number"
-                  value={outputTokens}
-                  onChange={(e) => setOutputTokens(Number(e.target.value))}
-                  className="mt-1"
-                />
-              </div>
-            </div>
-
-            <div>
-              <div className="flex flex-wrap gap-4">
-                {data.flatMap((provider) =>
-                  provider.models.map((model) => (
-                    <div key={`${provider.provider}:${model.name}`} className="flex items-center space-x-2">
+          <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}`)}
@@ -109,135 +101,156 @@ const App: React.FC = () => {
                         htmlFor={`${provider.provider}:${model.name}`}
                         className="text-sm font-medium text-gray-700"
                       >
-                        {provider.provider}: {model.name}
+                        {model.name}
                       </label>
                     </div>
-                  ))
-                )}
-              </div>
-            </div>
-          </div>
-
-          <div className="flex gap-4 mb-4">
-            <Select onValueChange={(value) => setSelectedProvider(value)} defaultValue="All">
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="Select Provider" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="All">All Providers</SelectItem>
-                {data.map((provider) => (
-                  <SelectItem key={provider.provider} value={provider.provider}>
-                    {provider.provider}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-
-            <Select onValueChange={(value) => setSelectedModel(value)} defaultValue="All">
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="Select Model" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="All">All Models</SelectItem>
-                {data
-                  .flatMap((provider) => provider.models)
-                  .map((model) => (
-                    <SelectItem key={model.name} value={model.name}>
-                      {model.name}
-                    </SelectItem>
                   ))}
-              </SelectContent>
-            </Select>
+                </CollapsibleContent>
+              </Collapsible>
+            ))}
           </div>
+        </div>
 
-          <p className="italic text-sm text-muted-foreground">
-            Note: If you use Amazon Bedrock or Azure prices for Anthropic, Cohere or OpenAI should be the same.
-          </p>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead rowSpan={2}>Provider</TableHead>
-                <TableHead rowSpan={2}>Model</TableHead>
-                <TableHead rowSpan={2}>Input Price (per 1M tokens)</TableHead>
-                <TableHead rowSpan={2}>Output Price (per 1M tokens)</TableHead>
-                <TableHead rowSpan={2}>Total Price</TableHead>
-                {comparisonModels.map((model) => (
-                  <TableHead key={model} colSpan={2}>
-                    Compared to {model}
-                  </TableHead>
-                ))}
-              </TableRow>
-              <TableRow>
-                {comparisonModels.flatMap((model) => [
-                  <TableHead key={`${model}-input`}>Input</TableHead>,
-                  <TableHead key={`${model}-output`}>Output</TableHead>,
-                ])}
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {filteredData.flatMap((provider) =>
-                provider.models
-                  .filter((model) => selectedModel === 'All' || model.name === selectedModel)
-                  .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 border border-r-1 border-r-slate-600 border-l-0">
-                        $
-                        {(
-                          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
-                                ? 'bg-green-100'
-                                : parseFloat(calculateComparison(model.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
-                                ? 'bg-green-100'
-                                : parseFloat(calculateComparison(model.outputPrice, comparisonModelData.outputPrice)) >
-                                  0
-                                ? 'bg-red-100'
-                                : ''
-                            }`}
-                          >
-                            {`${provider.provider}:${model.name}` === comparisonModel
-                              ? '0.00%'
-                              : `${calculateComparison(model.outputPrice, comparisonModelData.outputPrice)}%`}
-                          </TableCell>,
-                        ]
-                      })}
-                    </TableRow>
-                  ))
-              )}
-            </TableBody>
-          </Table>
+        <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 (millions)
+            </label>
+            <Input
+              id="inputTokens"
+              type="number"
+              value={inputTokens}
+              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 (millions)
+            </label>
+            <Input
+              id="outputTokens"
+              type="number"
+              value={outputTokens}
+              onChange={(e) => setOutputTokens(Number(e.target.value))}
+              className="mt-1"
+            />
+          </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>
+
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>
+                <Select onValueChange={(value) => setSelectedProviders(value as string[])} defaultValue={[]} multiple>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select Providers" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {data.map((provider) => (
+                      <SelectItem key={provider.provider} value={provider.provider}>
+                        {provider.provider}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </TableHead>
+              <TableHead>
+                <Select onValueChange={(value) => setSelectedModels(value as string[])} defaultValue={[]} multiple>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select Models" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {data
+                      .flatMap((provider) => provider.models)
+                      .map((model) => (
+                        <SelectItem key={model.name} value={model.name}>
+                          {model.name}
+                        </SelectItem>
+                      ))}
+                  </SelectContent>
+                </Select>
+              </TableHead>
+              <TableHead>Input Price (per 1M tokens)</TableHead>
+              <TableHead>Output Price (per 1M tokens)</TableHead>
+              <TableHead>Total Price</TableHead>
+              {comparisonModels.map((model) => (
+                <TableHead key={model} colSpan={2}>
+                  Compared to {model}
+                </TableHead>
+              ))}
+            </TableRow>
+            <TableRow>
+              <TableHead />
+              <TableHead />
+              <TableHead />
+              <TableHead />
+              <TableHead />
+              {comparisonModels.flatMap((model) => [
+                <TableHead key={`${model}-input`}>Input</TableHead>,
+                <TableHead key={`${model}-output`}>Output</TableHead>,
+              ])}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredData.flatMap((provider) =>
+              provider.models.map((model) => (
+                <TableRow key={`${provider.provider}-${model.name}`}>
+                  <TableCell>{provider.provider}</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
+                            ? 'bg-green-100'
+                            : parseFloat(calculateComparison(model.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
+                            ? 'bg-green-100'
+                            : parseFloat(calculateComparison(model.outputPrice, comparisonModelData.outputPrice)) > 0
+                            ? 'bg-red-100'
+                            : ''
+                        }`}
+                      >
+                        {`${provider.provider}:${model.name}` === comparisonModel
+                          ? '0.00%'
+                          : `${calculateComparison(model.outputPrice, comparisonModelData.outputPrice)}%`}
+                      </TableCell>,
+                    ]
+                  })}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
       </CardContent>
     </Card>
   )

src/components/ui/button.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+  }
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

src/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }