init

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Dockerfile

@@ -0,0 +1,33 @@
+# Stage 1: Build the React app
+FROM node:16-alpine AS build
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the React app
+RUN npm run build
+
+# Stage 2: Serve the built app with a lightweight web server
+FROM nginx:alpine
+
+# Copy the built files from the previous stage
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Expose port 7860
+EXPOSE 7860
+
+# Replace the default nginx.conf with our configuration
+RUN rm /etc/nginx/conf.d/default.conf
+COPY nginx.conf /etc/nginx/conf.d
+
+# Start Nginx server
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -8,4 +8,67 @@ pinned: false
 license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# LLM Comparison React App
+
+## Overview
+
+This React application, developed in collaboration with Anthropic Claude 3.5, is designed to compare hosted Large Language Models (LLMs) using Shadcn UI. The comparison data is based on a sheet that we have created. You can access the sheet [here]([pseudo-link](https://docs.google.com/spreadsheets/d/1NX8ZW9Jnfpy88PC2d6Bwla87JRiv3GTeqwXoB4mKU_s/edit?gid=0#gid=0)).
+
+## Features
+
+- **Compare LLM Providers**: Easily compare different LLM providers and their pricing.
+- **User-friendly Interface**: Built using Shadcn UI for a seamless and intuitive user experience.
+- **Dynamic Data**: Data is dynamically fetched and displayed, making it easy to update and compare new models and providers.
+
+## Getting Started
+
+1. **Clone the repository**:
+    ```bash
+    git clone https://huggingface.co/spaces/philschmid/llm-pricing
+    cd llm-comparison-react-app
+    ```
+
+2. **Install dependencies**:
+    ```bash
+    npm install
+    ```
+
+3. **Run the app**:
+    ```bash
+    npm start
+    ```
+
+4. **Open your browser**: Navigate to `http://localhost:5173` to see the app in action.
+
+## Contributing
+
+We welcome contributions! If you want to add a new provider, please follow these steps:
+
+1. **Navigate to the data file**: Open the file where `mockData` array is located.
+2. **Add your provider**: Add a new object to the `mockData` array with the provider details.
+
+Here is an example of how to add a new provider:
+
+```javascript
+export const mockData: Provider[] = [
+  {
+    provider: 'OpenAI',
+    uri: 'https://openai.com/api/pricing/',
+    models: [
+      { name: 'GPT-4', inputPrice: 5.0, outputPrice: 15.0 },
+      { name: 'GPT-4 (8K)', inputPrice: 30.0, outputPrice: 60.0 },
+      { name: 'GPT-4 Turbo', inputPrice: 10.0, outputPrice: 30.0 },
+      { name: 'GPT-3.5-turbo', inputPrice: 0.5, outputPrice: 1.5 },
+    ],
+  },
+  {
+    provider: 'NewProvider',
+    uri: 'https://newprovider.com/api/pricing/',
+    models: [
+      { name: 'Model-A', inputPrice: 4.0, outputPrice: 12.0 },
+      { name: 'Model-B', inputPrice: 25.0, outputPrice: 50.0 },
+    ],
+  },
+  // Add more providers here
+];
+```

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "src/components",
+    "utils": "src/lib/utils"
+  }
+}

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

nginx.conf

@@ -0,0 +1,11 @@
+server {
+    listen 7860;
+
+    server_name localhost;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+}

package.json

@@ -0,0 +1,39 @@
+{
+  "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",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "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"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

src/App.tsx

@@ -0,0 +1,188 @@
+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 { mockData } from './lib/data'
+
+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)
+
+  useEffect(() => {
+    setData(mockData)
+    // Set default comparison models
+    setComparisonModels(['GPT-4o', 'Claude 3.5 (Sonnet)', 'Gemini 1.5 Pro'])
+  }, [])
+
+  const calculatePrice = (price: number, tokens: number): number => {
+    return price * tokens
+  }
+
+  const calculateComparison = (modelPrice: number, comparisonPrice: number): string => {
+    return (((modelPrice - comparisonPrice) / comparisonPrice) * 100).toFixed(2)
+  }
+
+  return (
+    <Card className="w-full max-w-6xl mx-auto">
+      <CardHeader>
+        <CardTitle>LLM Pricing Comparison Tool</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="">
+          <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={model.name} className="flex items-center space-x-2">
+                      <Checkbox
+                        id={model.name}
+                        checked={comparisonModels.includes(model.name)}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            setComparisonModels((prev) => [...prev, model.name])
+                          } else {
+                            setComparisonModels((prev) => prev.filter((m) => m !== model.name))
+                          }
+                        }}
+                      />
+                      <label htmlFor={model.name} className="text-sm font-medium text-gray-700">
+                        {model.name}
+                      </label>
+                    </div>
+                  ))}
+              </div>
+            </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>
+              {data.flatMap((provider) =>
+                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 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 comparisonModelData = data.flatMap((p) => p.models).find((m) => m.name === comparisonModel)!
+                      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'
+                              : ''
+                          }`}
+                        >
+                          {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'
+                              : ''
+                          }`}
+                        >
+                          {model.name === comparisonModel
+                            ? '0.00%'
+                            : `${calculateComparison(model.outputPrice, comparisonModelData.outputPrice)}%`}
+                        </TableCell>,
+                      ]
+                    })}
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default App

src/components/ui/card.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)} {...props} />
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
+  )
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  )
+)
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/checkbox.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Check } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

src/components/ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

src/index.css

@@ -0,0 +1,76 @@
+@tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  @layer base {
+    :root {
+      --background: 0 0% 100%;
+      --foreground: 222.2 84% 4.9%;
+
+      --card: 0 0% 100%;
+      --card-foreground: 222.2 84% 4.9%;
+
+      --popover: 0 0% 100%;
+      --popover-foreground: 222.2 84% 4.9%;
+
+      --primary: 222.2 47.4% 11.2%;
+      --primary-foreground: 210 40% 98%;
+
+      --secondary: 210 40% 96.1%;
+      --secondary-foreground: 222.2 47.4% 11.2%;
+
+      --muted: 210 40% 96.1%;
+      --muted-foreground: 215.4 16.3% 46.9%;
+
+      --accent: 210 40% 96.1%;
+      --accent-foreground: 222.2 47.4% 11.2%;
+
+      --destructive: 0 84.2% 60.2%;
+      --destructive-foreground: 210 40% 98%;
+
+      --border: 214.3 31.8% 91.4%;
+      --input: 214.3 31.8% 91.4%;
+      --ring: 222.2 84% 4.9%;
+
+      --radius: 0.5rem;
+    }
+
+    .dark {
+      --background: 222.2 84% 4.9%;
+      --foreground: 210 40% 98%;
+
+      --card: 222.2 84% 4.9%;
+      --card-foreground: 210 40% 98%;
+
+      --popover: 222.2 84% 4.9%;
+      --popover-foreground: 210 40% 98%;
+
+      --primary: 210 40% 98%;
+      --primary-foreground: 222.2 47.4% 11.2%;
+
+      --secondary: 217.2 32.6% 17.5%;
+      --secondary-foreground: 210 40% 98%;
+
+      --muted: 217.2 32.6% 17.5%;
+      --muted-foreground: 215 20.2% 65.1%;
+
+      --accent: 217.2 32.6% 17.5%;
+      --accent-foreground: 210 40% 98%;
+
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 210 40% 98%;
+
+      --border: 217.2 32.6% 17.5%;
+      --input: 217.2 32.6% 17.5%;
+      --ring: 212.7 26.8% 83.9%;
+    }
+  }
+
+  @layer base {
+    * {
+      @apply border-border;
+    }
+    body {
+      @apply bg-background text-foreground;
+    }
+  }

src/lib/data.ts

@@ -0,0 +1,74 @@
+import { Provider } from "@/App";
+
+export const mockData: Provider[] = [
+  {
+    provider: 'OpenAI',
+    uri: 'https://openai.com/api/pricing/',
+    models: [
+      { name: 'GPT-4o', inputPrice: 5.0, outputPrice: 15.0 },
+      { name: 'GPT-4 (8K)', inputPrice: 30.0, outputPrice: 60.0 },
+      { name: 'GPT-4 Turbo', inputPrice: 10.0, outputPrice: 30.0 },
+      { name: 'GPT-3.5-turbo', inputPrice: 0.5, outputPrice: 1.5 },
+    ],
+  },
+  {
+    provider: 'Anthropic',
+    uri: 'https://www.anthropic.com/pricing',
+    models: [
+      { name: 'Claude 3 (Opus)', inputPrice: 15.0, outputPrice: 75.0 },
+      { name: 'Claude 3.5 (Sonnet)', inputPrice: 3.0, outputPrice: 15.0 },
+      { name: 'Claude 3 (Haiku)', inputPrice: 0.25, outputPrice: 1.25 },
+    ],
+  },
+  {
+    provider: 'Google Vertex AI',
+    uri: 'https://ai.google.dev/pricing?hl=en',
+    models: [
+      { name: 'Gemini 1.5 Pro', inputPrice: 3.5, outputPrice: 7.0 },
+      { name: 'Gemini 1.5 Flash', inputPrice: 0.35, outputPrice: 0.7 },
+    ],
+  },
+  {
+    provider: 'Cohere',
+    uri: 'https://cohere.com/pricing',
+    models: [
+      { name: 'Command R+', inputPrice: 3.0, outputPrice: 15.0 },
+      { name: 'Command R', inputPrice: 0.5, outputPrice: 1.5 },
+    ],
+  },
+  {
+    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: 'open-mixtral-8x22b', inputPrice: 2.0, outputPrice: 6.0 },
+      { name: 'open-mixtral-8x7b', inputPrice: 0.7, outputPrice: 0.7 },
+    ],
+  },
+  {
+    provider: 'Deepspeek',
+    uri: 'https://platform.deepseek.com/api-docs/pricing/',
+    models: [
+      { name: 'deepseek-chat', inputPrice: 0.14, outputPrice: 0.28 },
+      { name: 'deepseek-coder', inputPrice: 0.14, outputPrice: 0.28 },
+    ],
+  },
+  {
+    provider: 'Anyscale',
+    uri: 'https://www.anyscale.com/pricing-detail',
+    models: [
+      { name: 'Mistral-small (8x7B)', inputPrice: 0.5, outputPrice: 0.5 },
+      { name: 'Llama 3 70b', inputPrice: 1.0, outputPrice: 1.0 },
+    ],
+  },
+
+  {
+    provider: 'Together.AI',
+    uri: 'https://www.together.ai/pricing',
+    models: [
+      { name: 'Mistral-small (8x7B)', inputPrice: 0.6, outputPrice: 0.6 },
+      { name: 'Llama 3 70b', inputPrice: 0.9, outputPrice: 0.9 },
+    ],
+  },
+]

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tailwind.config.js

@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}

tsconfig.app.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,12 @@
+import path from "path"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+})