50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 52:T187f,'use client'; import { Check, GitCompare } from 'lucide-react'; import { cn } from '@/registry/localmode/lib/utils'; /** Recommended runtime device. */ export type RecommendedDevice = 'webgpu' | 'wasm' | 'cpu'; /** Speed tier. */ export type SpeedTier = 'fast' | 'medium' | 'slow'; /** Quality tier. */ export type QualityTier = 'low' | 'medium' | 'high'; /** A scored model recommendation (mirrors `useModelRecommendations` output). */ export interface ModelRecommendation { /** Stable model id. */ modelId: string; /** Display name. */ name: string; /** Provider (e.g. "transformers", "wllama"). */ provider?: string; /** Human-readable size. */ size?: string; /** Score in the 0–100 range. */ score: number; /** Recommended runtime device. */ recommendedDevice?: RecommendedDevice; /** Speed tier. */ speedTier?: SpeedTier; /** Quality tier. */ qualityTier?: QualityTier; /** One-line description. */ description?: string; /** Reasons the model was recommended. */ reasons?: string[]; } /** Props for {@link ModelRecommendationCard}. */ export interface ModelRecommendationCardProps { /** The recommendation to render. */ recommendation: ModelRecommendation; /** Whether this card is selected for comparison. */ comparing?: boolean; /** When provided, shows a compare toggle that calls back with the model id. */ onToggleCompare?: (modelId: string) => void; /** Additional class names merged onto the root element. */ className?: string; } /** Stable tier → text-color mapping. */ const TIER_COLOR: Record = { fast: 'text-emerald-700 dark:text-emerald-400', high: 'text-emerald-700 dark:text-emerald-400', medium: 'text-amber-700 dark:text-amber-400', slow: 'text-rose-700 dark:text-rose-400', low: 'text-rose-700 dark:text-rose-400', webgpu: 'text-violet-700 dark:text-violet-400', wasm: 'text-sky-700 dark:text-sky-400', cpu: 'text-muted-foreground', }; function scoreColor(score: number): string { if (score >= 75) return 'var(--color-emerald-500, #10b981)'; if (score >= 50) return 'var(--color-amber-500, #f59e0b)'; return 'var(--color-rose-500, #f43f5e)'; } /** * A single scored model recommendation: a radial score dial (0–100), the model * name, a monospace model id, a badge row (provider, size, speed/quality tiers, * recommended device with a stable tier→color mapping), a description, and * reason chips. When `onToggleCompare` is supplied, exposes a compare toggle. * Bind to `useModelRecommendations`. * * @example * ```tsx * * ``` */ export function ModelRecommendationCard({ recommendation: r, comparing = false, onToggleCompare, className, }: ModelRecommendationCardProps) { const score = Math.max(0, Math.min(100, Math.round(r.score))); const badges = [ r.provider, r.size, r.speedTier && `${r.speedTier} speed`, r.qualityTier && `${r.qualityTier} quality`, r.recommendedDevice, ] .map((label, i) => ({ label, tone: i === 2 ? TIER_COLOR[r.speedTier ?? ''] : i === 3 ? TIER_COLOR[r.qualityTier ?? ''] : i === 4 ? TIER_COLOR[r.recommendedDevice ?? ''] : undefined, })) .filter((b) => Boolean(b.label)); return (

{score}

{r.name}

{r.modelId}

{onToggleCompare && ( )}

{badges.length > 0 && (

{badges.map((b, i) => ( {b.label} ))}

)} {r.description && (

{r.description}

)} {r.reasons && r.reasons.length > 0 && (

{reason}

)}

); } export default ModelRecommendationCard; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@localmode","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/localmode/local-first/model-recommendation-card/model-recommendation-card.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]