diff --git a/packages/stats/app/src/component/model-compare-detail.tsx b/packages/stats/app/src/component/model-compare-detail.tsx index 41261893ce9..68cfcfee688 100644 --- a/packages/stats/app/src/component/model-compare-detail.tsx +++ b/packages/stats/app/src/component/model-compare-detail.tsx @@ -95,12 +95,10 @@ type ComparisonDetailSection = { rows: ComparisonDetailRow[] usage?: ModelUsagePoint[][] } -type ComparisonModelSelection = { +type ComparisonModelRequest = { lab: string slug: string - catalog: ModelCatalogEntry | null | undefined } -type ComparisonModels = [ComparisonModel, ComparisonModel, ...ComparisonModel[]] export type ModelCompareDetailPageProps = { first?: { lab: string; slug: string } @@ -127,51 +125,41 @@ export default function ModelCompareDetailPage(props: ModelCompareDetailPageProp const catalog = createMemo(() => props.catalog ?? catalogData()) const firstCatalog = createMemo(() => resolvedCatalogEntry(catalog(), firstLabParam(), firstModelParam())) const secondCatalog = createMemo(() => resolvedCatalogEntry(catalog(), secondLabParam(), secondModelParam())) - const modelSelections = createMemo(() => { - const selected: ComparisonModelSelection[] = [ - { lab: firstLabParam(), slug: firstModelParam(), catalog: firstCatalog() }, - { lab: secondLabParam(), slug: secondModelParam(), catalog: secondCatalog() }, - ...parseAdditionalModels(searchParams.add).map((model) => ({ - ...model, - catalog: resolvedCatalogEntry(catalog(), model.lab, model.slug), - })), + const modelRequests = createMemo(() => { + const selected: ComparisonModelRequest[] = [ + { lab: firstLabParam(), slug: firstModelParam() }, + { lab: secondLabParam(), slug: secondModelParam() }, + ...parseAdditionalModels(searchParams.add), ] return selected .filter( (model, index) => index < 2 || selected.findIndex( - (candidate) => comparisonModelSelectionKey(candidate) === comparisonModelSelectionKey(model), + (candidate) => comparisonModelRequestKey(candidate) === comparisonModelRequestKey(model), ) === index, ) - .slice(0, comparisonModelLimit) as [ - ComparisonModelSelection, - ComparisonModelSelection, - ...ComparisonModelSelection[], - ] - }) - const stats = createAsync(() => { - const selected = modelSelections() - if (catalog() === undefined || selected.some((model) => model.catalog === undefined)) - return Promise.resolve(undefined) - return getComparisonData( - selected.map((model) => ({ - provider: model.catalog?.lab ?? model.lab, - model: model.catalog?.slug ?? model.slug, - })), - ) + .slice(0, comparisonModelLimit) }) + const modelSelections = createMemo(() => + modelRequests().map((model) => ({ + ...model, + catalog: resolvedCatalogEntry(catalog(), model.lab, model.slug), + })), + ) + const stats = createAsync(() => + getComparisonData(modelRequests().map((model) => ({ provider: model.lab, model: model.slug }))), + ) const githubStars = createAsync(() => getGitHubStars()) const [themePreference, setThemePreference] = createSignal("system") const [highlightBest, setHighlightBest] = createSignal(true) const [addingModel, setAddingModel] = createSignal(false) let comparisonHeadingScroll: HTMLDivElement | undefined let comparisonBodyScroll: HTMLDivElement | undefined - const models = createMemo( - () => - modelSelections().map((model, index) => - buildComparisonModel(model.lab, model.slug, model.catalog ?? null, stats()?.models[index] ?? null), - ) as ComparisonModels, + const models = createMemo(() => + modelSelections().map((model, index) => + buildComparisonModel(model.lab, model.slug, model.catalog ?? null, stats()?.models[index] ?? null), + ), ) const title = createMemo(() => { if (props.family) @@ -298,23 +286,11 @@ export default function ModelCompareDetailPage(props: ModelCompareDetailPageProp ref={(element) => (comparisonBodyScroll = element)} onScroll={(event) => syncComparisonScroll(event.currentTarget, comparisonHeadingScroll)} > - -
- Loading comparison -

Loading model stats.

-
- - } - > - -
+ [ + return uniqueComparisonPairs( + alternatives.slice(0, 3).flatMap((model, index) => [ { first: current[0], second: model, detail: index === 0 ? "Nearby alternative" : "Related comparison" }, { first: current[1], second: model, detail: index === 0 ? "Nearby alternative" : "Related comparison" }, ]), - ]).slice(0, 6) + ).slice(0, 6) } function comparisonRef(model: ComparisonModel): ComparisonModelRef { diff --git a/packages/stats/app/src/routes/compare-cards.tsx b/packages/stats/app/src/routes/compare-cards.tsx index 9a0ef5bccb3..3216c923b79 100644 --- a/packages/stats/app/src/routes/compare-cards.tsx +++ b/packages/stats/app/src/routes/compare-cards.tsx @@ -93,7 +93,7 @@ function FeaturedComparisonCard(props: { pair: ComparisonPair }) { {props.pair.detail} {props.pair.description ?? `${props.pair.first.name} vs ${props.pair.second.name}`} -