lint

Author: waleedlatif1

apps/sim/app/(landing)/models/components/model-directory.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react'
 import Link from 'next/link'
 import { Input } from '@/components/emcn'
 import { SearchIcon } from '@/components/icons'
+import { cn } from '@/lib/core/utils/cn'
 import {
   CapabilityTags,
   DetailItem,
@@ -277,11 +278,12 @@ function FilterButton({
     <button
       type='button'
       onClick={onClick}
-      className={`rounded-full border px-3 py-1.5 text-[12px] transition-colors ${
+      className={cn(
+        'rounded-full border px-3 py-1.5 text-[12px] transition-colors',
         isActive
           ? 'border-[#555] bg-[#333] text-[var(--landing-text)]'
           : 'border-[var(--landing-border)] bg-transparent text-[var(--landing-text-muted)] hover:border-[var(--landing-border-strong)] hover:text-[var(--landing-text)]'
-      }`}
+      )}
     >
       {label}
     </button>

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

@@ -187,7 +187,7 @@ export async function createModelsOgImage({
                 name: 'Geist',
                 data: regularFontData,
                 style: 'normal' as const,
-                weight: 400,
+                weight: 400 as const,
               },
             ]
           : []),
@@ -197,7 +197,7 @@ export async function createModelsOgImage({
                 name: 'Geist',
                 data: mediumFontData,
                 style: 'normal' as const,
-                weight: 500,
+                weight: 500 as const,
               },
             ]
           : []),

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

@@ -84,7 +84,7 @@ export default function ModelsPage() {
   )
   const featuredProviders = MODEL_PROVIDERS_WITH_CATALOGS.slice(0, 6)
   const featuredModels = MODEL_PROVIDERS_WITH_CATALOGS.flatMap((provider) =>
-    provider.featuredModels.slice(0, 1)
+    provider.featuredModels[0] ? [{ provider, model: provider.featuredModels[0] }] : []
   ).slice(0, 6)
   const heroProviders = ['openai', 'anthropic', 'azure-openai', 'google', 'bedrock']
     .map((providerId) => MODEL_CATALOG_PROVIDERS.find((provider) => provider.id === providerId))
@@ -108,24 +108,27 @@ export default function ModelsPage() {
     description: `Directory of ${TOTAL_MODELS} AI models tracked in Sim across ${TOTAL_MODEL_PROVIDERS} providers.`,
     url: `${baseUrl}/models`,
     numberOfItems: TOTAL_MODELS,
-    itemListElement: flatModels.map(({ provider, model }, index) => ({
-      '@type': 'ListItem',
-      position: index + 1,
-      item: {
-        '@type': 'Product',
-        name: model.displayName,
-        url: `${baseUrl}${model.href}`,
-        description: model.summary,
-        brand: provider.name,
-        category: 'AI language model',
-        offers: {
-          '@type': 'AggregateOffer',
-          priceCurrency: 'USD',
-          lowPrice: getPricingBounds(model.pricing).lowPrice.toString(),
-          highPrice: getPricingBounds(model.pricing).highPrice.toString(),
+    itemListElement: flatModels.map(({ provider, model }, index) => {
+      const { lowPrice, highPrice } = getPricingBounds(model.pricing)
+      return {
+        '@type': 'ListItem',
+        position: index + 1,
+        item: {
+          '@type': 'Product',
+          name: model.displayName,
+          url: `${baseUrl}${model.href}`,
+          description: model.summary,
+          brand: provider.name,
+          category: 'AI language model',
+          offers: {
+            '@type': 'AggregateOffer',
+            priceCurrency: 'USD',
+            lowPrice: lowPrice.toString(),
+            highPrice: highPrice.toString(),
+          },
         },
-      },
-    })),
+      }
+    }),
   }
 
   const faqJsonLd = {
@@ -248,16 +251,9 @@ export default function ModelsPage() {
           </div>
 
           <div className='grid grid-cols-1 gap-4 xl:grid-cols-2'>
-            {featuredModels.map((model) => {
-              const provider = MODEL_PROVIDERS_WITH_CATALOGS.find(
-                (entry) => entry.id === model.providerId
-              )
-              if (!provider) {
-                return null
-              }
-
-              return <ModelCard key={model.id} provider={provider} model={model} showProvider />
-            })}
+            {featuredModels.map(({ provider, model }) => (
+              <ModelCard key={model.id} provider={provider} model={model} showProvider />
+            ))}
           </div>
         </section>
 

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

@@ -414,21 +414,18 @@ function getProviderDisplayName(providerId: string, providerName: string): strin
   return PROVIDER_NAME_OVERRIDES[providerId] ?? providerName
 }
 
+function computeModelRelevanceScore(model: CatalogModel): number {
+  return (
+    (model.capabilities.reasoningEffort ? 10 : 0) +
+    (model.capabilities.thinking ? 10 : 0) +
+    (model.capabilities.deepResearch ? 8 : 0) +
+    (model.capabilities.nativeStructuredOutputs ? 4 : 0) +
+    (model.contextWindow ?? 0) / 100000
+  )
+}
+
 function compareModelsByRelevance(a: CatalogModel, b: CatalogModel): number {
-  const aScore =
-    (a.capabilities.reasoningEffort ? 10 : 0) +
-    (a.capabilities.thinking ? 10 : 0) +
-    (a.capabilities.deepResearch ? 8 : 0) +
-    (a.capabilities.nativeStructuredOutputs ? 4 : 0) +
-    (a.contextWindow ?? 0) / 100000
-  const bScore =
-    (b.capabilities.reasoningEffort ? 10 : 0) +
-    (b.capabilities.thinking ? 10 : 0) +
-    (b.capabilities.deepResearch ? 8 : 0) +
-    (b.capabilities.nativeStructuredOutputs ? 4 : 0) +
-    (b.contextWindow ?? 0) / 100000
-
-  return bScore - aScore
+  return computeModelRelevanceScore(b) - computeModelRelevanceScore(a)
 }
 
 const rawProviders = Object.values(PROVIDER_DEFINITIONS).map((provider) => {
@@ -622,10 +619,8 @@ export function getRelatedModels(targetModel: CatalogModel, limit = 6): CatalogM
 }
 
 export function buildProviderFaqs(provider: CatalogProvider): CatalogFaq[] {
-  const cheapestModel = [...provider.models].sort((a, b) => a.pricing.input - b.pricing.input)[0]
-  const largestContextModel = [...provider.models].sort(
-    (a, b) => (b.contextWindow ?? 0) - (a.contextWindow ?? 0)
-  )[0]
+  const cheapestModel = getCheapestProviderModel(provider)
+  const largestContextModel = getLargestContextProviderModel(provider)
 
   return [
     {