@@ -421,7 +418,7 @@ function ModelHeroSparkline(props: { data: StatsModelData }) {
function ChevronDownIcon() {
return (
)
}
@@ -881,35 +878,32 @@ function ModelEfficiencySection(props: { data: StatsModelData | null; catalog: M
}
>
{(data) => (
-
-
-
-
-
-
-
+ <>
+
+
+
+
+
+
+
+
+
+
)}
@@ -1129,12 +1123,12 @@ function ModelPeersSection(props: { data: StatsModelData | null }) {
)
}
-function MetricCard(props: { label: string; value: string; detail: string; state?: "positive" | "negative" }) {
+function MetricCard(props: { label: string; value: string; detail?: string; state?: "positive" | "negative" }) {
return (
{props.label}
{props.value}
- {props.detail}
+ {(detail) => {detail()}
}
)
}
@@ -1147,10 +1141,16 @@ function PeerRow(props: { peer: ModelPeerEntry; active: boolean }) {
href={language.route(`${import.meta.env.BASE_URL}${providerSlug(props.peer.provider)}/${props.peer.slug}`)}
data-active={props.active ? "true" : undefined}
>
-
{String(props.peer.rank).padStart(2, "0")}
-
-
{props.peer.model}
-
{props.peer.author}
+
+ {String(props.peer.rank).padStart(2, "0")}
+
+
+
+
+
+ {props.peer.model}
+ {props.peer.author}
+
{formatTokens(props.peer.tokens)}
@@ -1170,6 +1170,55 @@ function ModelEmptyState(props: { title: string; description: string; compact?:
)
}
+function modelComparisonPairs(
+ catalog: ModelCatalog | undefined,
+ catalogEntry: ModelCatalogEntry | null,
+ data: StatsModelData | null,
+) {
+ const current = modelComparisonRef(catalogEntry, data)
+ if (!current) return []
+ const peerPairs = (data?.peers ?? [])
+ .filter((peer) => peer.model !== data?.model)
+ .slice(0, 3)
+ .map((peer) => ({
+ first: current,
+ second: {
+ name: peer.model,
+ lab: peer.provider,
+ slug: peer.slug,
+ labName: peer.author,
+ metric: `#${peer.rank} / ${formatTokens(peer.tokens)}`,
+ },
+ detail: "Usage peer",
+ }))
+ const catalogPairs = (
+ catalogEntry && catalog ? (catalog.labs.find((lab) => lab.id === catalogEntry.lab)?.models ?? []) : []
+ )
+ .filter((model) => model.id !== catalogEntry?.id)
+ .slice(0, 3)
+ .map((model) => ({
+ first: current,
+ second: modelRefFromCatalog(model),
+ detail: "Same lab pair",
+ }))
+ return uniqueComparisonPairs([...peerPairs, ...catalogPairs])
+}
+
+function modelComparisonRef(
+ catalogEntry: ModelCatalogEntry | null,
+ data: StatsModelData | null,
+): ComparisonModelRef | undefined {
+ if (catalogEntry) return modelRefFromCatalog(catalogEntry)
+ if (!data) return undefined
+ return {
+ name: data.model,
+ lab: data.provider,
+ slug: data.slug,
+ labName: data.author,
+ metric: `#${data.rank}`,
+ }
+}
+
function getProviderIconId(author: string) {
if (author === "MiniMax") return "minimax"
if (author === "Moonshot") return "moonshotai"
@@ -1517,8 +1566,9 @@ function formatMoney(value: number) {
return `$${value.toFixed(value >= 10 ? 0 : 2)}`
}
-function formatCatalogPrice(value: ModelCatalogCost) {
- return `${formatModelPrice(value.input)} / ${formatModelPrice(value.output)}`
+function formatCatalogUnitPrice(value: number | undefined) {
+ if (value === undefined) return "-"
+ return `${formatModelPrice(value)} / 1M`
}
function formatModelPrice(value: number) {
diff --git a/packages/stats/app/src/routes/[lab]/index.tsx b/packages/stats/app/src/routes/[lab]/index.tsx
index c3147b1c5770..1be2a82ca978 100644
--- a/packages/stats/app/src/routes/[lab]/index.tsx
+++ b/packages/stats/app/src/routes/[lab]/index.tsx
@@ -28,6 +28,8 @@ import {
import { SectionHeading } from "../section-heading"
import { runStatsEffect } from "../../stats-runtime"
import { setStatsPageCacheHeaders } from "../stats-cache"
+import { ComparisonCardsSection, modelRefFromCatalog, uniqueComparisonPairs } from "../compare-cards"
+import { BreadcrumbSelect } from "../breadcrumb-select"
import {
applyThemePreference,
Footer,
@@ -149,6 +151,11 @@ export default function StatsLab() {
labs={catalog()?.labs ?? []}
market={homeStats()?.market["2M"] ?? []}
/>
+
)}
@@ -158,6 +165,7 @@ export default function StatsLab() {
themePreference={themePreference()}
onThemePreferenceChange={updateThemePreference}
links={labFooterLinks()}
+ bridge={{ href: "#model-comparison", label: "MODEL COMPARISONS" }}
/>