fix(models): address PR review feedback

Correct model structured-data price bounds, remove dead code in the models catalog helpers, and harden OG font loading with graceful fallbacks.

Made-with: Cursor

Author: waleedlatif1

apps/sim/app/(landing)/models/[provider]/[model]/page.tsx

@@ -19,6 +19,7 @@ import {
   formatTokenCount,
   formatUpdatedAt,
   getModelBySlug,
+  getPricingBounds,
   getProviderBySlug,
   getRelatedModels,
 } from '../../utils'
@@ -100,6 +101,7 @@ export default async function ModelPage({
 
   const faqs = buildModelFaqs(provider, model)
   const capabilityFacts = buildModelCapabilityFacts(model)
+  const pricingBounds = getPricingBounds(model.pricing)
   const relatedModels = getRelatedModels(model, 6)
 
   const breadcrumbJsonLd = {
@@ -129,8 +131,8 @@ export default async function ModelPage({
     offers: {
       '@type': 'AggregateOffer',
       priceCurrency: 'USD',
-      lowPrice: Math.min(model.pricing.input, model.pricing.output).toString(),
-      highPrice: Math.max(model.pricing.input, model.pricing.output).toString(),
+      lowPrice: pricingBounds.lowPrice.toString(),
+      highPrice: pricingBounds.highPrice.toString(),
     },
   }
 

apps/sim/app/(landing)/models/og-utils.tsx

@@ -19,19 +19,27 @@ function getTitleFontSize(title: string): number {
   return TITLE_FONT_SIZE.large
 }
 
-async function loadGoogleFont(font: string, weights: string, text: string): Promise<ArrayBuffer> {
-  const url = `https://fonts.googleapis.com/css2?family=${font}:wght@${weights}&text=${encodeURIComponent(text)}`
-  const css = await (await fetch(url)).text()
-  const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)
+async function loadGoogleFont(
+  font: string,
+  weights: string,
+  text: string
+): Promise<ArrayBuffer | null> {
+  try {
+    const url = `https://fonts.googleapis.com/css2?family=${font}:wght@${weights}&text=${encodeURIComponent(text)}`
+    const css = await (await fetch(url)).text()
+    const resource = css.match(/src: url\(([^)]+)\) format\('(opentype|truetype|woff2?)'\)/)
 
-  if (resource) {
-    const response = await fetch(resource[1])
-    if (response.status === 200) {
-      return await response.arrayBuffer()
+    if (resource) {
+      const response = await fetch(resource[1])
+      if (response.status === 200) {
+        return await response.arrayBuffer()
+      }
     }
+  } catch {
+    return null
   }
 
-  throw new Error('Failed to load font data')
+  return null
 }
 
 function SimLogoFull() {
@@ -71,7 +79,10 @@ export async function createModelsOgImage({
   domainLabel = 'sim.ai/models',
 }: ModelsOgImageProps) {
   const text = `${eyebrow}${title}${subtitle}${pills.join('')}${domainLabel}`
-  const fontData = await loadGoogleFont('Geist', '400;500;600', text)
+  const [regularFontData, mediumFontData] = await Promise.all([
+    loadGoogleFont('Geist', '400', text),
+    loadGoogleFont('Geist', '500', text),
+  ])
 
   return new ImageResponse(
     <div
@@ -170,11 +181,26 @@ export async function createModelsOgImage({
     {
       ...size,
       fonts: [
-        {
-          name: 'Geist',
-          data: fontData,
-          style: 'normal',
-        },
+        ...(regularFontData
+          ? [
+              {
+                name: 'Geist',
+                data: regularFontData,
+                style: 'normal' as const,
+                weight: 400,
+              },
+            ]
+          : []),
+        ...(mediumFontData
+          ? [
+              {
+                name: 'Geist',
+                data: mediumFontData,
+                style: 'normal' as const,
+                weight: 500,
+              },
+            ]
+          : []),
       ],
     }
   )

apps/sim/app/(landing)/models/page.tsx

@@ -5,6 +5,7 @@ import { LandingFAQ } from '@/app/(landing)/components/landing-faq'
 import { ModelDirectory } from './components/model-directory'
 import { ModelCard, ProviderCard } from './components/model-primitives'
 import {
+  getPricingBounds,
   MODEL_CATALOG_PROVIDERS,
   MODEL_PROVIDERS_WITH_CATALOGS,
   TOP_MODEL_PROVIDERS,
@@ -120,8 +121,8 @@ export default function ModelsPage() {
         offers: {
           '@type': 'AggregateOffer',
           priceCurrency: 'USD',
-          lowPrice: Math.min(model.pricing.input, model.pricing.output).toString(),
-          highPrice: Math.max(model.pricing.input, model.pricing.output).toString(),
+          lowPrice: getPricingBounds(model.pricing).lowPrice.toString(),
+          highPrice: getPricingBounds(model.pricing).highPrice.toString(),
         },
       },
     })),

apps/sim/app/(landing)/models/utils.ts

@@ -155,10 +155,12 @@ export function formatPrice(price?: number | null): string {
     return 'N/A'
   }
 
+  const maximumFractionDigits = price > 0 && price < 0.001 ? 4 : 3
+
   return `$${trimTrailingZeros(
     new Intl.NumberFormat('en-US', {
       minimumFractionDigits: 0,
-      maximumFractionDigits: 3,
+      maximumFractionDigits,
     }).format(price)
   )}`
 }
@@ -310,10 +312,7 @@ function formatModelDisplayName(providerId: string, modelId: string): string {
     )
     .join(' ')
 
-  return displayName
-    .replace(/^GPT (\d[\w.]*)/i, 'GPT-$1')
-    .replace(/^GPT (\d[\w.]*) (Mini|Nano|Pro|Chat)/i, 'GPT-$1 $2')
-    .replace(/\bGpt\b/g, 'GPT')
+  return displayName.replace(/^GPT (\d[\w.]*)/i, 'GPT-$1').replace(/\bGpt\b/g, 'GPT')
 }
 
 function buildCapabilityTags(capabilities: ModelCapabilities): string[] {
@@ -565,13 +564,21 @@ export const TOTAL_MODELS = ALL_CATALOG_MODELS.length
 export const MAX_CONTEXT_WINDOW = Math.max(
   ...ALL_CATALOG_MODELS.map((model) => model.contextWindow ?? 0)
 )
-export const MODELS_WITH_REASONING = ALL_CATALOG_MODELS.filter(
-  (model) => model.capabilities.reasoningEffort || model.capabilities.thinking
-).length
 export const TOP_MODEL_PROVIDERS = MODEL_PROVIDERS_WITH_CATALOGS.slice(0, 8).map(
   (provider) => provider.name
 )
 
+export function getPricingBounds(pricing: PricingInfo): { lowPrice: number; highPrice: number } {
+  return {
+    lowPrice: Math.min(
+      pricing.input,
+      pricing.output,
+      ...(pricing.cachedInput !== undefined ? [pricing.cachedInput] : [])
+    ),
+    highPrice: Math.max(pricing.input, pricing.output),
+  }
+}
+
 export function getProviderBySlug(providerSlug: string): CatalogProvider | null {
   return MODEL_CATALOG_PROVIDERS.find((provider) => provider.slug === providerSlug) ?? null
 }