From 299daa2815a4c34d35ffef5167add59b1a3abdb3 Mon Sep 17 00:00:00 2001 From: Adam <2363879+adamdotdevin@users.noreply.github.com> Date: Thu, 2 Jul 2026 14:41:22 -0500 Subject: [PATCH] feat(stats): redesign model hero --- .../stats/app/src/routes/[lab]/[model].tsx | 287 +++++++++++------- 1 file changed, 175 insertions(+), 112 deletions(-) diff --git a/packages/stats/app/src/routes/[lab]/[model].tsx b/packages/stats/app/src/routes/[lab]/[model].tsx index f7e74c60b5b..57342ac3553 100644 --- a/packages/stats/app/src/routes/[lab]/[model].tsx +++ b/packages/stats/app/src/routes/[lab]/[model].tsx @@ -27,6 +27,7 @@ import { findModelCatalogEntry, formatCatalogLabName, getModelCatalog, + type ModelCatalog, type ModelCatalogCost, type ModelCatalogEntry, } from "../model-catalog" @@ -174,7 +175,12 @@ export default function StatsModel() { }> }> <> - + @@ -249,116 +255,170 @@ function ModelNotFound(props: { lab: string; model: string }) { ) } -function ModelHero(props: { data: StatsModelData | null; catalog: ModelCatalogEntry | null; labName: string }) { +function ModelHero(props: { + data: StatsModelData | null + catalog: ModelCatalogEntry | null + catalogData: ModelCatalog | null + labName: string +}) { const i18n = useI18n() const language = useLanguage() const labId = () => props.catalog?.lab ?? props.data?.provider ?? props.labName - const modelId = () => props.catalog?.id ?? props.data?.model ?? i18n.t("model.fallback") + const modelName = () => props.catalog?.name ?? props.data?.model ?? i18n.t("model.fallback") const weights = () => props.catalog?.weights[0] + const labs = () => props.catalogData?.labs ?? [] + const labModels = () => + props.catalogData?.labs.find((lab) => lab.id === providerSlug(labId()))?.models ?? (props.catalog ? [props.catalog] : []) return (
- - {i18n.t("footer.modelData")} - -
-
-
- -
-

- - {props.catalog?.name ?? props.data?.model ?? i18n.t("model.fallback")} - -

- {i18n.t("model.catalogFallback")}

}> - {(data) => ( -

- {data().rank === null ? i18n.t("model.unranked") : i18n.t("model.ranked", { rank: data().rank ?? "" })}{" "} - {i18n.t("model.observedVolume", { share: formatPercent(data().tokenShare) })} -

- )} - + + + } + > +
+ + {props.labName} + + +
+ + {(lab) => ( + + {lab.name} + + )} + +
+
+ + / + 0} + fallback={ + + {modelName()} + + + } + > +
+ + {modelName()} + + +
+ + {(model) => ( + + {model.name} + + )} + +
+
+ + +
+ + +

{modelName()}

+ - }> - {(data) => ( -
- {i18n.t("model.rank")} - {data().rank === null ? "—" : `#${data().rank}`} -

{formatModelRankMoveLabel(data(), i18n)}

-
- )} -
) } -function ModelCatalogCallout(props: { catalog: ModelCatalogEntry | null }) { - const i18n = useI18n() - const language = useLanguage() +function ModelHeroActionIcon(props: { kind: "weights" | "compare" }) { + if (props.kind === "weights") + return ( + + ) return ( -
- {i18n.t("model.profile")} - - {props.catalog?.releaseDate - ? formatCatalogDate(props.catalog.releaseDate, language.tag(language.locale()), i18n.t("home.unknown")) - : i18n.t("model.listed")} - -

{i18n.t("model.noCurrentUsage")}

-
+ ) } -function ModelCatalogPanel(props: { data: ModelCatalogEntry }) { - const i18n = useI18n() - const language = useLanguage() +function ModelHeroSparkline(props: { data: StatsModelData }) { + const values = () => props.data.usage.slice(-14).map((point) => point.tokens) return ( - + ) } -function CatalogDatum(props: { label: string; value: string }) { +function ChevronDownIcon() { return ( -
- {props.label} - {props.value} -
+ ) } @@ -938,6 +998,38 @@ function formatRankMove(change: number) { return `${change}` } +function formatHeroRank(rank: number | null) { + if (rank === null) return "--" + return String(rank).padStart(2, "0") +} + +function sparklineLinePath(values: number[]) { + return sparklinePoints(values) + .map((point, index) => `${index === 0 ? "M" : "L"}${formatSparklinePoint(point.x)} ${formatSparklinePoint(point.y)}`) + .join(" ") +} + +function sparklineAreaPath(values: number[]) { + const points = sparklinePoints(values) + return `M${formatSparklinePoint(points[0].x)} 18 ${points + .map((point) => `L${formatSparklinePoint(point.x)} ${formatSparklinePoint(point.y)}`) + .join(" ")} L${formatSparklinePoint(points[points.length - 1].x)} 18 Z` +} + +function sparklinePoints(values: number[]) { + const normalized = values.length > 1 ? values : [values[0] ?? 0, values[0] ?? 0] + const min = Math.min(...normalized) + const max = Math.max(...normalized) + return normalized.map((value, index) => ({ + x: 8 + (index / Math.max(1, normalized.length - 1)) * 20, + y: min === max ? 12 : 18 - ((value - min) / (max - min)) * 12, + })) +} + +function formatSparklinePoint(value: number) { + return Number(value.toFixed(2)).toString() +} + function formatModelRankMoveLabel(data: StatsModelData, i18n: ReturnType) { if (data.rank === null) return i18n.t("model.noUsageLastWeek") if (data.previousRank === null) return i18n.t("model.newThisWeek") @@ -993,35 +1085,6 @@ function formatChange(value: number) { return `${value}%` } -function formatCatalogLimit(value: number | undefined, unknown: string) { - return value === undefined ? unknown : formatTokens(value) -} - -function formatCatalogModalities(value: string[], i18n: ReturnType) { - if (value.length === 0) return i18n.t("home.unknown") - return value.map((item) => formatCatalogModality(item, i18n)).join(", ") -} - -function formatCatalogModality(value: string, i18n: ReturnType) { - if (value === "pdf") return i18n.t("model.pdf") - return value.charAt(0).toUpperCase() + value.slice(1) -} - -function formatCatalogDate(value: string | undefined, locale: string, unknown: string) { - if (!value) return unknown - const match = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?$/.exec(value) - if (!match) return value - const year = Number(match[1]) - const month = match[2] ? Number(match[2]) - 1 : 0 - const day = match[3] ? Number(match[3]) : 1 - return new Intl.DateTimeFormat(locale, { - month: match[2] ? "short" : undefined, - day: match[3] ? "numeric" : undefined, - year: "numeric", - timeZone: "UTC", - }).format(new Date(Date.UTC(year, month, day))) -} - function trimNumber(value: number, digits: number) { return Number(value.toFixed(digits)).toLocaleString("en") }