Components / AI Dashboards

AI Model Performance Table

A comparison table showing AI model performance benchmarks with sortable columns for speed, accuracy, and cost.

Live Preview — ai-model-performance-01
Model NameInferenceAccuracyCost/1K
GPT-4o112ms98.4%$0.015
Claude 3.5 Sonnet145ms97.9%$0.012
Gemini 1.5 Pro92ms96.5%$0.008
Llama 3 70B84ms94.2%$0.005

Installation

Dependencies

Install the core libraries required for this component.

npm
npm install react

Source Code

ai-model-performance-01.tsx 
"use client";

import React from "react";

const models = [
    { name: "GPT-4o", speed: "112ms", accuracy: "98.4%", cost: "$0.015" },
    { name: "Claude 3.5 Sonnet", speed: "145ms", accuracy: "97.9%", cost: "$0.012" },
    { name: "Gemini 1.5 Pro", speed: "92ms", accuracy: "96.5%", cost: "$0.008" },
    { name: "Llama 3 70B", speed: "84ms", accuracy: "94.2%", cost: "$0.005" },
];

export default function AIModelPerformanceTable() {
    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 shadow-sm w-full max-w-2xl mx-auto overflow-hidden">
            <div className="overflow-x-auto">
                <table className="w-full text-left text-xs">
                    <thead className="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800">
                        <tr>
                            <th className="px-4 py-3 font-semibold text-zinc-900 dark:text-zinc-100">Model Name</th>
                            <th className="px-4 py-3 font-semibold text-zinc-900 dark:text-zinc-100">Inference</th>
                            <th className="px-4 py-3 font-semibold text-zinc-900 dark:text-zinc-100">Accuracy</th>
                            <th className="px-4 py-3 font-semibold text-zinc-900 dark:text-zinc-100">Cost/1K</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-zinc-200 dark:divide-zinc-800">
                        {models.map((model) => (
                            <tr key={model.name} className="hover:bg-zinc-50/50 dark:hover:bg-zinc-900/50 transition-colors">
                                <td className="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">{model.name}</td>
                                <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400 font-mono">{model.speed}</td>
                                <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400">{model.accuracy}</td>
                                <td className="px-4 py-3 text-zinc-600 dark:text-zinc-400 font-mono">{model.cost}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}

Functional Logic

Internal functions used to handle component logic.

Function Parameters
AIModelPerformanceTable() None

Variables

All variable declarations found in this component.

Name Kind Value
models const [

JSX Tags Usage

Every JSX/HTML tag used in this component, with usage count and source.

Tag Count Type Source
<div> 2× Native Native HTML
<table> 1× Native Native HTML
<tbody> 1× Native Native HTML
<td> 4× Native Native HTML
<th> 4× Native Native HTML
<thead> 1× Native Native HTML
<tr> 2× Native Native HTML

Related Components

  • AI Analytics Card — A dashboard analytics card showing AI model usage metrics with sparkline charts, percentage changes, and trend indicators.
  • AI Token Usage Meter — A circular progress meter showing AI token consumption with remaining quota and cost estimation.
  • AI Request Log — A real-time scrolling log of AI API requests with status indicators, response times, and token counts.
  • AI Cost Breakdown Chart — A visual cost breakdown showing AI spending by model with horizontal bar charts and total cost summary.
  • AI Service Status Badge — An AI service status indicator showing operational health with animated pulse dots and uptime percentages.
  • AI Activity Feed — A timestamped activity feed showing recent AI interactions, model changes, and system events with icon indicators.