README.md

metadata

title: Llm Pricing
emoji: 📊
colorFrom: green
colorTo: green
sdk: docker
pinned: true
license: apache-2.0

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.

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:

   git clone https://huggingface.co/spaces/philschmid/llm-pricing
   cd llm-comparison-react-app
   

2. Install dependencies:

   npm install
   

3. Run the app:

   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:

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
];