diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails.svelte index 8a9a0cc19d..8064a83426 100644 --- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails.svelte +++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails.svelte @@ -1,37 +1,19 @@ + +{#if bitDepthRows.length} +
+

+ + Download options +

+
+ {#each bitDepthRows as row (row.bitDepth)} +
+
+ {#if row.bitDepth === 99} + Other + {:else} + {row.bitDepth}-bit + {/if} +
+
+ {#each row.files as file (file.path)} + {@const meta = HuggingFaceService.extractQuantMeta(file.path)} + {@const basename = file.path.split('/').pop() ?? file.path} + {@const label = meta?.quant ?? basename.replace(/\.gguf$/i, '')} + {@const tagInput = meta?.quant + ? { quant: meta.quant, variant: meta.variant ?? null } + : null} + {@const hfRepoWithTag = ModelsService.buildDownloadTag(modelId, tagInput)} + {@const progress = modelsStore.status.getDownloadProgress(hfRepoWithTag)} + {@const isDownloading = modelsStore.status.isDownloadInProgress(hfRepoWithTag)} + {@const isDownloaded = meta?.variant + ? modelsStore.status.isDraftDownloaded(modelId, file.path) + : modelsStore.status.isModelDownloaded(hfRepoWithTag)} + {@const isFailed = modelsStore.status.hasFailedDownload(hfRepoWithTag)} + + {/each} +
+
+ {/each} +
+
+{/if} + +{#if pendingDownload} + pendingDownload !== null, + (v) => { + if (!v) pendingDownload = null; + } + } + repoId={modelId} + filePath={pendingDownload.filePath} + quant={pendingDownload.quant} + variant={pendingDownload.variant} + formattedSize={pendingDownload.sizeBytes != null + ? HuggingFaceService.formatFileSize(pendingDownload.sizeBytes) + : undefined} + onConfirm={() => (pendingDownload = null)} + onCancel={() => (pendingDownload = null)} + /> +{/if} diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetailsHeader.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetailsHeader.svelte new file mode 100644 index 0000000000..de2a8d4f10 --- /dev/null +++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetailsHeader.svelte @@ -0,0 +1,129 @@ + + +
+
+
+ + +
+ + + View on HF + +
+ +
+ {#if typeof details.downloads === 'number'} + + + {HuggingFaceService.formatDownloads(details.downloads)} + + {/if} + {#if typeof details.likes === 'number'} + + + {HuggingFaceService.formatLikes(details.likes)} + + {/if} + {#if details.lastModified} + Updated {HuggingFaceService.formatRelativeTime(details.lastModified)} + {/if} +
+ + {#if details.cardData?.description} +

{details.cardData.description}

+ {/if} + + +
+ {#if gguf?.total} + + {HuggingFaceService.formatFileSize(gguf.total).replace(' B', '')}B params + + {/if} + {#if gguf?.architecture} + + {gguf.architecture.replace(/_/g, ' ')} + + {/if} + {#if gguf?.context_length} + + {gguf.context_length.toLocaleString()} ctx + + {/if} + {#if licenseTag} + + {licenseTag} + + {/if} + {#if details.gated === true} + + gated + + {/if} +
+ + + {#if hasVision || hasTools || hasReasoning} +
+ {#if hasVision} + + + Vision + + {/if} + {#if hasTools} + + + Tool use + + {/if} + {#if hasReasoning} + + + Reasoning + + {/if} +
+ {/if} +
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetailsName.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetailsName.svelte new file mode 100644 index 0000000000..4e41721d0b --- /dev/null +++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetailsName.svelte @@ -0,0 +1,43 @@ + + +
+
+

{modelId}

+ +
+ + {#if baseModels.length} +
+ {baseModels.join(', ')} + + + +
+ {/if} +
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetailsReadme.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetailsReadme.svelte new file mode 100644 index 0000000000..705843e5d3 --- /dev/null +++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetailsReadme.svelte @@ -0,0 +1,18 @@ + + +{#if readme} +
+

README

+
+ +
+
+{/if} diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverInfo.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverInfo.svelte index 6548f103a5..970ababfdf 100644 --- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverInfo.svelte +++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverInfo.svelte @@ -15,6 +15,11 @@ let contextLength = $derived(model.gguf?.context_length); + // Reasoning support from the chat template, matching the details view. + let supportsThinking = $derived( + Boolean(model.gguf?.chat_template && /think|reasoning/i.test(model.gguf.chat_template)) + ); + // Modalities derived from HF metadata: vision from an mmproj sidecar or a // multimodal pipeline tag, audio/video from their pipeline tags. let modalities = $derived.by(() => { @@ -54,7 +59,15 @@ - + diff --git a/tools/ui/src/lib/components/app/models/discover/TerminalCommands.svelte b/tools/ui/src/lib/components/app/models/discover/TerminalCommands.svelte new file mode 100644 index 0000000000..d58bbc0c0a --- /dev/null +++ b/tools/ui/src/lib/components/app/models/discover/TerminalCommands.svelte @@ -0,0 +1,87 @@ + + +
+ {#each boxes as box (box.title)} +
+
+ + {box.title} +
+ +
+ {#each box.commands as cmd, i (cmd)} +
+ {cmd} + +
+ {/each} +
+
+ {/each} +
diff --git a/tools/ui/src/lib/components/app/models/discover/index.ts b/tools/ui/src/lib/components/app/models/discover/index.ts index 2419192ddd..181db3a729 100644 --- a/tools/ui/src/lib/components/app/models/discover/index.ts +++ b/tools/ui/src/lib/components/app/models/discover/index.ts @@ -46,6 +46,44 @@ export { default as ModelsDiscoverInfo } from './ModelsDiscoverInfo.svelte'; */ export { default as ModelsDiscoverDetails } from './ModelsDiscoverDetails.svelte'; +/** + * **ModelsDiscoverDetailsHeader** - Detail view header + * + * Shows the model avatar (base org + quant org corner badge), name, base model + * info, stats, metadata chips and capability badges. + */ +export { default as ModelsDiscoverDetailsHeader } from './ModelsDiscoverDetailsHeader.svelte'; + +/** + * **ModelsDiscoverDetailsName** - Model name block + * + * Shows the quant model name with a copy button, and the base model name with a + * smaller external-link icon on the line below. + */ +export { default as ModelsDiscoverDetailsName } from './ModelsDiscoverDetailsName.svelte'; + +/** + * **ModelsDiscoverDetailsDownloadOptions** - GGUF download options + * + * Groups GGUF files by bit depth and renders per-file download buttons with + * progress, owned by the download confirmation dialog. + */ +export { default as ModelsDiscoverDetailsDownloadOptions } from './ModelsDiscoverDetailsDownloadOptions.svelte'; + +/** + * **ModelsDiscoverDetailsReadme** - Detail view README + * + * Renders the model card README as markdown. + */ +export { default as ModelsDiscoverDetailsReadme } from './ModelsDiscoverDetailsReadme.svelte'; + +/** + * **TerminalCommands** - Terminal command block + * + * Shows the `llama serve` / `llama cli` commands for a model with copy buttons. + */ +export { default as TerminalCommands } from './TerminalCommands.svelte'; + /** * **DialogModelDownload** - Download confirmation / progress dialog *