|
|
|
@ -227,6 +227,16 @@ export function ModelSearchDialog({ |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// Get model page URL for the provider's website
|
|
|
|
const getModelUrl = (model: ProviderModel): string => { |
|
|
|
if (model.provider === "replicate") { |
|
|
|
return `https://replicate.com/${model.id}`; |
|
|
|
} else if (model.provider === "fal") { |
|
|
|
return `https://fal.ai/models/${model.id}`; |
|
|
|
} |
|
|
|
return "#"; |
|
|
|
}; |
|
|
|
|
|
|
|
// Get capability badges - show all capabilities to differentiate similar models
|
|
|
|
const getCapabilityBadges = (capabilities: ModelCapability[]) => { |
|
|
|
const badges: React.ReactNode[] = []; |
|
|
|
@ -478,9 +488,33 @@ export function ModelSearchDialog({ |
|
|
|
{model.name} |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* Model ID - helps differentiate similar models */} |
|
|
|
<div className="text-[10px] text-neutral-500 truncate mt-0.5 font-mono"> |
|
|
|
{model.id} |
|
|
|
{/* Model ID with link to provider page */} |
|
|
|
<div className="flex items-center gap-1.5 mt-0.5"> |
|
|
|
<span className="text-[10px] text-neutral-500 truncate font-mono"> |
|
|
|
{model.id} |
|
|
|
</span> |
|
|
|
<a |
|
|
|
href={getModelUrl(model)} |
|
|
|
target="_blank" |
|
|
|
rel="noopener noreferrer" |
|
|
|
onClick={(e) => e.stopPropagation()} |
|
|
|
className="text-neutral-500 hover:text-neutral-300 transition-colors flex-shrink-0" |
|
|
|
title={`View on ${model.provider === "fal" ? "fal.ai" : "Replicate"}`} |
|
|
|
> |
|
|
|
<svg |
|
|
|
className="w-3 h-3" |
|
|
|
fill="none" |
|
|
|
stroke="currentColor" |
|
|
|
viewBox="0 0 24 24" |
|
|
|
> |
|
|
|
<path |
|
|
|
strokeLinecap="round" |
|
|
|
strokeLinejoin="round" |
|
|
|
strokeWidth={2} |
|
|
|
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" |
|
|
|
/> |
|
|
|
</svg> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* Badges row */} |
|
|
|
|