spb/llmindex Public

1/**2 * llmindex.io — live-updating efficiency (Pareto) frontier table3 * Author:  Simon-Pierre Boucher4 * Contact: contact@spboucher.ai5 * License: Proprietary — © Simon-Pierre Boucher, all rights reserved6 */7'use client';89import { useEffect, useState } from 'react';10import Link from 'next/link';11import { formatUsd } from '@llmindex/ui';12import { ProviderLogo } from './ProviderLogo';1314export interface EffPoint {15  model: string;16  name: string;17  score: number;18  cost_per_1k_items: number;19  on_frontier: boolean;20}2122const POLL_MS = 15000;2324export function EfficiencyLive({ initial }: { initial: EffPoint[] }) {25  const [points, setPoints] = useState<EffPoint[]>(initial);2627  useEffect(() => {28    let cancelled = false;29    async function tick() {30      try {31        const res = await fetch('/api/v1/efficiency', { cache: 'no-store' });32        if (!res.ok || cancelled) return;33        const body = (await res.json()) as { points: EffPoint[] };34        if (body.points) setPoints(body.points);35      } catch {36        /* keep last state */37      }38    }39    const id = setInterval(tick, POLL_MS);40    tick();41    return () => {42      cancelled = true;43      clearInterval(id);44    };45  }, []);4647  if (points.length === 0) return null;4849  return (50    <section className="space-y-3">51      <div className="flex flex-wrap items-baseline justify-between gap-2">52        <h2 className="text-lg font-semibold text-zinc-900 sm:text-xl">Efficiency frontier</h2>53        <Link54          href="/frontier"55          className="rounded-full border border-emerald-300 bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700 transition-colors hover:border-emerald-400"56        >57          Open the full interactive chart →58        </Link>59      </div>60      <p className="text-sm text-zinc-500">61        Score vs. measured cost per 1k items — refreshed live as models land. Frontier models are62        not dominated on both axes; never collapsed into a single blended number.63      </p>64      <div className="overflow-x-auto rounded-xl border border-zinc-200 bg-white">65        <table className="w-full min-w-[28rem] text-sm">66          <thead>67            <tr className="border-b border-zinc-200 text-left text-xs uppercase tracking-wide text-zinc-500">68              <th className="px-3 py-2">Model</th>69              <th className="px-3 py-2 text-right">Global Index</th>70              <th className="px-3 py-2 text-right">Cost / 1k items</th>71              <th className="px-3 py-2">Pareto</th>72            </tr>73          </thead>74          <tbody>75            {points.map((p) => (76              <tr key={p.model} className="border-b border-zinc-100 last:border-0">77                <td className="px-3 py-2">78                  <Link href={`/models/${p.model}`} className="flex items-center gap-2 hover:text-emerald-600">79                    <ProviderLogo provider={p.model.split('/')[0] ?? ''} size={16} />80                    {p.name}81                  </Link>82                </td>83                <td className="px-3 py-2 text-right tabular-nums">{p.score}</td>84                <td className="px-3 py-2 text-right tabular-nums">{formatUsd(p.cost_per_1k_items)}</td>85                <td className="px-3 py-2">86                  {p.on_frontier ? (87                    <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs text-emerald-700">88                      frontier89                    </span>90                  ) : (91                    <span className="text-xs text-zinc-400">dominated</span>92                  )}93                </td>94              </tr>95            ))}96          </tbody>97        </table>98      </div>99    </section>100  );101}102103export function HomeStats({104  initialCount,105  domains,106  version,107}: {108  initialCount: number;109  domains: number;110  version: string;111}) {112  const [count, setCount] = useState(initialCount);113114  useEffect(() => {115    let cancelled = false;116    async function tick() {117      try {118        const res = await fetch('/api/v1/leaderboard?limit=200', { cache: 'no-store' });119        if (!res.ok || cancelled) return;120        const body = (await res.json()) as { entries?: unknown[] };121        if (body.entries) setCount(body.entries.length);122      } catch {123        /* keep last state */124      }125    }126    const id = setInterval(tick, POLL_MS);127    return () => {128      cancelled = true;129      clearInterval(id);130    };131  }, []);132133  return (134    <div className="flex flex-wrap gap-x-6 gap-y-2 pt-2 text-sm">135      <span className="flex items-center gap-2 text-zinc-700">136        <span className="relative flex h-2 w-2">137          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60" />138          <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-400" />139        </span>140        updates live141      </span>142      <span className="text-zinc-600">143        <span className="font-semibold text-zinc-900 tabular-nums">{count}</span> models scored144      </span>145      <span className="text-zinc-600">146        <span className="font-semibold text-zinc-900 tabular-nums">{domains}</span> domains147      </span>148      <span className="text-zinc-600">IRT 2PL · 95% CI · v{version}</span>149    </div>150  );151}152