-
{props.lab.name}
+
{i18n.t("lab.heroPrefix", { count: props.lab.models.length, lab: props.lab.name })}
@@ -235,10 +248,11 @@ function LabUsageSection(props: { lab: ModelCatalogLab; data: StatsLabData | nul
return (
-
- {i18n.t("lab.usageTitle", { lab: props.lab.name })}.{" "}
- {i18n.t("lab.usageDescription")}
-
+
item.tokens > 0)}
fallback={}
@@ -336,10 +350,11 @@ function LabModelsSection(props: { lab: ModelCatalogLab; usage: LabUsageModelEnt
const usageBySlug = createMemo(() => new Map(props.usage.map((item) => [item.slug, item])))
return (
-
- {i18n.t("lab.modelsTitle", { lab: props.lab.name })}.{" "}
- {i18n.t("lab.recentUsageAndLimits")}
-
+
{(model) => }
diff --git a/packages/stats/app/src/routes/index.css b/packages/stats/app/src/routes/index.css
index 409e452eee..f7f039c16c 100644
--- a/packages/stats/app/src/routes/index.css
+++ b/packages/stats/app/src/routes/index.css
@@ -87,6 +87,11 @@
display: none !important;
}
+[data-page="stats"] section[id],
+[data-page="stats"] [data-component="leaderboard"][id] {
+ scroll-margin-top: 88px;
+}
+
[data-page="stats"] [data-component="content"] {
color: var(--stats-text);
font-family:
@@ -1781,6 +1786,35 @@
font-weight: 400;
}
+[data-page="stats"] [data-slot="heading-link"] {
+ position: relative;
+ color: inherit;
+ text-decoration: none;
+}
+
+[data-page="stats"] [data-slot="heading-link"]:hover {
+ text-decoration: none;
+}
+
+[data-page="stats"] [data-slot="heading-link"]:focus-visible {
+ outline: 1px solid var(--stats-accent);
+ outline-offset: 4px;
+}
+
+[data-page="stats"] [data-slot="heading-anchor"] {
+ position: absolute;
+ top: -0.08em;
+ right: 100%;
+ margin-right: 0.48em;
+ color: var(--stats-accent);
+ opacity: 0;
+}
+
+[data-page="stats"] [data-slot="heading-link"]:hover [data-slot="heading-anchor"],
+[data-page="stats"] [data-slot="heading-link"]:focus-visible [data-slot="heading-anchor"] {
+ opacity: 1;
+}
+
[data-page="stats"] [data-component="leaderboard"],
[data-page="stats"] [data-slot="leaderboard-featured"],
[data-page="stats"] [data-slot="leaderboard-compact"],
diff --git a/packages/stats/app/src/routes/index.tsx b/packages/stats/app/src/routes/index.tsx
index 87235e988e..85f1360f06 100644
--- a/packages/stats/app/src/routes/index.tsx
+++ b/packages/stats/app/src/routes/index.tsx
@@ -32,6 +32,7 @@ import { useI18n } from "../context/i18n"
import { useLanguage } from "../context/language"
import { localizedUrl } from "../lib/language"
import { findModelCatalogEntry, getModelCatalog, type ModelCatalog } from "./model-catalog"
+import { SectionHeading } from "./section-heading"
import { setStatsPageCacheHeaders } from "./stats-cache"
import {
applyThemePreference,
@@ -273,7 +274,11 @@ function Hero(props: { updatedAt: string | null }) {
-
{i18n.t("footer.modelData")}
+
{i18n.t("home.heroCopy")}
@@ -296,7 +301,7 @@ function StatsLoading() {
return (
<>
-
+
>
@@ -314,7 +319,15 @@ function ChartSection(props: {
-
{props.title}
+
{props.description &&
{props.description}
}
{props.controls}
@@ -324,12 +337,8 @@ function ChartSection(props: {
)
}
-function SectionTitle(props: { title: string; description: string }) {
- return (
-
- {props.title}. {props.description}
-
- )
+function SectionTitle(props: { id: string; title: string; description: string }) {
+ return
}
function SectionBridge(props: { label: string; href: string }) {
@@ -405,9 +414,13 @@ function TopModelsSection(props: { data: StatsHomeData["usage"]; leaderboard: St
return (
-
- {i18n.t("nav.topModels")}. {i18n.t("home.topModelsDescription")}
-
+
usageTotal(item) > 0)}
fallback={}
@@ -802,7 +815,11 @@ function UniqueUsersSection(props: { data: StatsHomeData["users"] }) {
return (
-
+
usageTotal(item) > 0)}
fallback={
@@ -1073,7 +1090,11 @@ function MarketShareSection(props: { data: StatsHomeData["market"] }) {
}}
>
-
+
}
@@ -1298,7 +1319,7 @@ function GeoBreakdownSection(props: { data: StatsHomeData["country"] }) {
}}
>
-
+
0}
fallback={}
@@ -1583,7 +1604,11 @@ function TokenCostSection(props: { data: StatsHomeData["tokenCost"]; catalog: Mo
return (
-
+
0}
fallback={
@@ -1666,7 +1691,11 @@ function CacheRatioSection(props: { data: StatsHomeData["cacheRatio"] }) {
return (
-
+
0}
fallback={}
@@ -1792,7 +1821,11 @@ function SessionCostSection(props: { data: StatsHomeData["sessionCost"] }) {
return (
-
+
0}
fallback={
diff --git a/packages/stats/app/src/routes/section-heading.tsx b/packages/stats/app/src/routes/section-heading.tsx
new file mode 100644
index 0000000000..d41e742187
--- /dev/null
+++ b/packages/stats/app/src/routes/section-heading.tsx
@@ -0,0 +1,21 @@
+export function SectionHeading(props: {
+ href: string
+ title: string
+ description: string
+ as?: "h2" | "p"
+ slot?: string
+}) {
+ const content = (
+ <>
+
+
+ #{props.title}.
+
+ {" "}
+ {props.description}
+ >
+ )
+
+ if (props.as === "h2") return {content}
+ return {content}
+}