Skip to content

Commit 8846916

Browse files
ericyangpanclaude
ericyangpan
and
claude
committed
refactor(ui): update model pages to use new schema fields
Update all model-related UI components to use the new numeric schema fields. - Use contextWindow instead of totalContext - Use formatTokenCount() for consistent number formatting - Update model detail page to always show context/maxOutput (no longer conditional) - Update model list and comparison pages - Update metadata generators for proper SEO - Update VendorModels component - Update ProductDetailTemplate for model display 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1 parent 1e57ceb commit 8846916

File tree

6 files changed

+45
-45
lines changed

6 files changed

+45
-45
lines changed

‎src/app/[locale]/models/[slug]/page.tsx‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { ProductHero } from '@/components/product'
99
import type { Locale } from '@/i18n/config'
1010
import { BENCHMARK_KEYS, formatBenchmarkValue, hasBenchmarks } from '@/lib/benchmarks'
1111
import { getModel } from '@/lib/data/fetchers'
12+
import { formatTokenCount } from '@/lib/format'
1213
import { modelsData as models } from '@/lib/generated'
1314
import { generateModelDetailMetadata } from '@/lib/metadata'
1415

@@ -40,16 +41,8 @@ export async function generateMetadata({
4041
description: model.description || '',
4142
vendor: model.vendor,
4243
size: model.size ?? undefined,
43-
totalContext:
44-
typeof model.totalContext === 'string'
45-
? parseInt(model.totalContext.replace(/[KM]/g, ''), 10) *
46-
(model.totalContext.includes('K') ? 1000 : 1)
47-
: (model.totalContext ?? undefined),
48-
maxOutput:
49-
typeof model.maxOutput === 'string'
50-
? parseInt(model.maxOutput.replace(/[KM]/g, ''), 10) *
51-
(model.maxOutput.includes('K') ? 1000 : 1)
52-
: (model.maxOutput ?? undefined),
44+
contextWindow: model.contextWindow,
45+
maxOutput: model.maxOutput,
5346
tokenPricing: model.tokenPricing
5447
? {
5548
input: model.tokenPricing.input ?? undefined,
@@ -124,8 +117,14 @@ export default async function ModelPage({
124117
additionalInfo={
125118
[
126119
model.size && { label: t('labels.size'), value: model.size },
127-
model.totalContext && { label: t('labels.context'), value: model.totalContext },
128-
model.maxOutput && { label: t('labels.maxOutput'), value: model.maxOutput },
120+
{
121+
label: t('labels.context'),
122+
value: formatTokenCount(model.contextWindow),
123+
},
124+
{
125+
label: t('labels.maxOutput'),
126+
value: formatTokenCount(model.maxOutput),
127+
},
129128
].filter(Boolean) as { label: string; value: string }[]
130129
}
131130
pricing={
@@ -185,23 +184,23 @@ export default async function ModelPage({
185184
</div>
186185
)}
187186

188-
{model.totalContext && (
189-
<div className="border border-[var(--color-border)] p-[var(--spacing-md)]">
190-
<h3 className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider font-medium mb-[var(--spacing-xs)]">
191-
{t('totalContext')}
192-
</h3>
193-
<p className="text-lg font-semibold tracking-tight">{model.totalContext}</p>
194-
</div>
195-
)}
187+
<div className="border border-[var(--color-border)] p-[var(--spacing-md)]">
188+
<h3 className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider font-medium mb-[var(--spacing-xs)]">
189+
{t('contextWindow')}
190+
</h3>
191+
<p className="text-lg font-semibold tracking-tight">
192+
{formatTokenCount(model.contextWindow)}
193+
</p>
194+
</div>
196195

197-
{model.maxOutput && (
198-
<div className="border border-[var(--color-border)] p-[var(--spacing-md)]">
199-
<h3 className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider font-medium mb-[var(--spacing-xs)]">
200-
{t('maxOutput')}
201-
</h3>
202-
<p className="text-lg font-semibold tracking-tight">{model.maxOutput}</p>
203-
</div>
204-
)}
196+
<div className="border border-[var(--color-border)] p-[var(--spacing-md)]">
197+
<h3 className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider font-medium mb-[var(--spacing-xs)]">
198+
{t('maxOutput')}
199+
</h3>
200+
<p className="text-lg font-semibold tracking-tight">
201+
{formatTokenCount(model.maxOutput)}
202+
</p>
203+
</div>
205204

206205
{model.tokenPricing && (
207206
<div className="border border-[var(--color-border)] p-[var(--spacing-md)]">

‎src/app/[locale]/models/comparison/page.client.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default function ModelComparisonPageClient({ locale: _locale }: Props) {
2828
label: t('columns.modelSize'),
2929
},
3030
{
31-
key: 'totalContext',
31+
key: 'contextWindow',
3232
label: t('columns.contextLength'),
3333
},
3434
{

‎src/app/[locale]/models/page.client.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import PageHeader from '@/components/PageHeader'
99
import { VerifiedBadge } from '@/components/VerifiedBadge'
1010
import type { Locale } from '@/i18n/config'
1111
import { Link } from '@/i18n/navigation'
12+
import { formatTokenCount } from '@/lib/format'
1213
import { modelsData } from '@/lib/generated'
1314
import { localizeManifestItems } from '@/lib/manifest-i18n'
1415
import type { ManifestModel } from '@/types/manifests'
@@ -113,7 +114,9 @@ export default function ModelsPageClient({ locale }: Props) {
113114
</div>
114115
<div className="flex items-center gap-[var(--spacing-sm)] text-xs">
115116
<span className="text-[var(--color-text-muted)]">{t('context')}</span>
116-
<span className="text-[var(--color-text-secondary)]">{model.totalContext}</span>
117+
<span className="text-[var(--color-text-secondary)]">
118+
{formatTokenCount(model.contextWindow)}
119+
</span>
117120
</div>
118121
<div className="flex items-center gap-[var(--spacing-sm)] text-xs">
119122
<span className="text-[var(--color-text-muted)]">{t('pricing')}</span>

‎src/components/vendor/VendorModels.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Link } from '@/i18n/navigation'
2+
import { formatTokenCount } from '@/lib/format'
23
import type { ManifestModel } from '@/types/manifests'
34

45
type Props = {
@@ -39,16 +40,12 @@ export function VendorModels({ models, locale: _locale, title }: Props) {
3940
{model.size}
4041
</span>
4142
)}
42-
{model.totalContext && (
43-
<span className="px-2 py-0.5 bg-[var(--color-background-muted)] text-[var(--color-text-secondary)] border border-[var(--color-border)]">
44-
{model.totalContext} context
45-
</span>
46-
)}
47-
{model.maxOutput && (
48-
<span className="px-2 py-0.5 bg-[var(--color-background-muted)] text-[var(--color-text-secondary)] border border-[var(--color-border)]">
49-
{model.maxOutput} output
50-
</span>
51-
)}
43+
<span className="px-2 py-0.5 bg-[var(--color-background-muted)] text-[var(--color-text-secondary)] border border-[var(--color-border)]">
44+
{formatTokenCount(model.contextWindow)} context
45+
</span>
46+
<span className="px-2 py-0.5 bg-[var(--color-background-muted)] text-[var(--color-text-secondary)] border border-[var(--color-border)]">
47+
{formatTokenCount(model.maxOutput)} output
48+
</span>
5249
</div>
5350
</div>
5451
<span className="text-lg text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-1 transition-all ml-[var(--spacing-xs)]">

‎src/lib/metadata/generators.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import type { Metadata } from 'next'
77
import { getTranslations } from 'next-intl/server'
88
import { defaultLocale } from '@/i18n/config'
9+
import { formatTokenCount } from '@/lib/format'
910
import {
1011
CATEGORY_DISPLAY_NAMES,
1112
CATEGORY_EXAMPLES,
@@ -190,7 +191,7 @@ export async function generateModelDetailMetadata(options: {
190191
description: string
191192
vendor: string
192193
size?: string
193-
totalContext?: number
194+
contextWindow?: number
194195
maxOutput?: number
195196
tokenPricing?: {
196197
input?: number
@@ -209,9 +210,9 @@ export async function generateModelDetailMetadata(options: {
209210
// Build description with model specs
210211
const specs: string[] = []
211212
if (model.size) specs.push(`${t('modelSize')}: ${model.size}`)
212-
if (model.totalContext)
213-
specs.push(`${t('totalContext')}: ${model.totalContext.toLocaleString()} tokens`)
214-
if (model.maxOutput) specs.push(`${t('maxOutput')}: ${model.maxOutput.toLocaleString()} tokens`)
213+
if (model.contextWindow)
214+
specs.push(`${t('contextWindow')}: ${formatTokenCount(model.contextWindow)} tokens`)
215+
if (model.maxOutput) specs.push(`${t('maxOutput')}: ${formatTokenCount(model.maxOutput)} tokens`)
215216

216217
const pricingDisplay = model.tokenPricing?.input
217218
? `$${model.tokenPricing.input}/M tokens`

‎src/templates/ProductDetailTemplate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export async function ProductDetailTemplate({
6464
const tGlobal = await getTranslations({ locale })
6565

6666
// Transform URLs (null → undefined)
67-
const websiteUrl = product.resourceUrls?.download || product.websiteUrl
67+
const websiteUrl = product.websiteUrl || product.resourceUrls?.download || undefined
6868
const docsUrl = product.docsUrl || undefined
6969
const downloadUrl = product.resourceUrls?.download || undefined
7070

0 commit comments

Comments
 (0)