EnterpriseAI/ClosedCode
1
0
Fork 0
Code Issues Pull Requests Actions 30 Packages Projects Releases Wiki Activity

feat(data): redesign model efficiency

Browse Source
This commit is contained in:
Adam
2026-07-07 06:53:36 -05:00
parent 516f0266b8
commit ea9fffce2e
20 changed files with 171 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stats/app/src/routes/[lab]/[model].tsx
+25 -34
View File
@@ -28,7 +28,6 @@ import {
formatCatalogLabName,
getModelCatalog,
type ModelCatalog,
type ModelCatalogCost,
type ModelCatalogEntry,
} from "../model-catalog"
import { SectionHeading } from "../section-heading"
@@ -881,35 +880,26 @@ function ModelEfficiencySection(props: { data: StatsModelData | null; catalog: M
}
>
{(data) => (
<div data-component="model-metric-grid" data-variant="dense">
<MetricCard
label={i18n.t("model.cost")}
value={formatMoney(data().totals.cost)}
detail={i18n.t("model.totalSpend")}
/>
<MetricCard
label={i18n.t("model.costPerMillion")}
value={
props.catalog?.cost ? formatCatalogPrice(props.catalog.cost) : formatMoney(data().totals.costPerMillion)
}
detail={props.catalog?.cost ? i18n.t("model.inputOutput") : i18n.t("model.observedTokens")}
/>
<MetricCard
label={i18n.t("model.costSession")}
value={formatSessionCost(data().totals.costPerSession)}
detail={i18n.t("model.average")}
/>
<MetricCard
label={i18n.t("model.tokensSession")}
value={formatTokens(data().totals.tokensPerSession)}
detail={i18n.t("model.average")}
/>
<MetricCard
label={i18n.t("model.cacheRatio")}
value={formatPercent(data().totals.cacheRatio)}
detail={i18n.t("model.inputTokens")}
/>
</div>
<>
<div data-slot="model-efficiency-pattern" aria-hidden="true" />
<div data-component="model-efficiency-grid">
<MetricCard label={i18n.t("model.totalSpendLabel")} value={formatMoney(data().totals.cost)} />
<MetricCard label={i18n.t("model.costInput")} value={formatCatalogUnitPrice(props.catalog?.cost?.input)} />
<MetricCard label={i18n.t("model.costOutput")} value={formatCatalogUnitPrice(props.catalog?.cost?.output)} />
<MetricCard
label={i18n.t("model.averageCostSession")}
value={formatSessionCost(data().totals.costPerSession)}
/>
<MetricCard
label={i18n.t("model.averageTokensSession")}
value={formatTokens(data().totals.tokensPerSession)}
/>
<MetricCard
label={i18n.t("model.cacheRatio")}
value={`${formatPercent(data().totals.cacheRatio)} ${i18n.t("model.inputTokens")}`}
/>
</div>
</>
)}
</Show>
</section>
@@ -1129,12 +1119,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 (
<article data-component="model-metric" data-state={props.state}>
<span>{props.label}</span>
<strong>{props.value}</strong>
<p>{props.detail}</p>
<Show when={props.detail}>{(detail) => <p>{detail()}</p>}</Show>
</article>
)
}
@@ -1517,8 +1507,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) {
packages/stats/app/src/routes/index.css
+55
View File
@@ -3913,6 +3913,50 @@
color: #b82d35;
}
[data-page="stats"] [data-slot="model-efficiency-pattern"] {
width: 100%;
height: 16px;
margin-bottom: 40px;
overflow: hidden;
background: color-mix(in srgb, var(--stats-text) 10%, transparent);
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
mask-position: center top;
mask-repeat: repeat;
mask-size: 6px 6px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-position: center top;
-webkit-mask-repeat: repeat;
-webkit-mask-size: 6px 6px;
}
[data-page="stats"] [data-component="model-efficiency-grid"] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
[data-page="stats"] [data-component="model-efficiency-grid"] [data-component="model-metric"] {
display: flex;
align-items: flex-start;
flex-direction: column;
box-sizing: border-box;
gap: 0;
height: 120px;
min-height: 120px;
padding: 16px;
background: var(--stats-layer);
}
[data-page="stats"] [data-component="model-efficiency-grid"] [data-component="model-metric"] span {
line-height: 14px;
}
[data-page="stats"] [data-component="model-efficiency-grid"] [data-component="model-metric"] strong {
margin-top: 32px;
font-size: 28px;
line-height: 42px;
}
[data-page="stats"] [data-section="model-panel"][data-variant="lab-models"] {
overflow: hidden;
}
@@ -5699,6 +5743,7 @@
[data-page="stats"] [data-component="model-metric-grid"],
[data-page="stats"] [data-component="model-metric-grid"][data-variant="dense"],
[data-page="stats"] [data-component="model-efficiency-grid"],
[data-page="stats"] [data-component="lab-model-grid"] {
grid-template-columns: 1fr 1fr;
}
@@ -6125,6 +6170,7 @@
[data-page="stats"] [data-component="model-metric-grid"],
[data-page="stats"] [data-component="model-metric-grid"][data-variant="dense"],
[data-page="stats"] [data-component="model-efficiency-grid"],
[data-page="stats"] [data-component="lab-model-grid"] {
grid-template-columns: 1fr;
}
@@ -6133,6 +6179,15 @@
min-height: 112px;
}
[data-page="stats"] [data-component="model-efficiency-grid"] [data-component="model-metric"] {
height: 112px;
min-height: 112px;
}
[data-page="stats"] [data-component="model-efficiency-grid"] [data-component="model-metric"] strong {
margin-top: 24px;
}
[data-page="stats"] [data-component="model-usage-chart"] {
--model-usage-mobile-bar-width: 16px;
--model-usage-mobile-edge-space: 48px;