happyz
/
llama.cpp
mirror of https://github.com/ggerganov/llama.cpp.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

webui: add "Available models" section header in model list

This commit is contained in:
Pascal 2026-03-15 18:52:14 +01:00
parent 1b3b6cbb14
commit eb5c80776a
2 changed files with 40 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
View File

@ -166,6 +166,13 @@
let showModelDialog = $state(false);
let infoModelId = $state<string | null>(null);
// key of the first "available" (non-loaded, non-favourite) group
// used to render the "Available models" separator exactly once
let firstAvailableOrgKey = $derived.by(() => {
const g = groupedFilteredOptions.find((g) => !g.isLoadedGroup && !g.isFavouritesGroup);
return g ? (g.orgName ?? '') : null;
});
function handleInfoClick(modelName: string) {
infoModelId = modelName;
showModelDialog = true;
@ -433,12 +440,19 @@
<p class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none">
Favourite models
</p>
{:else if group.orgName}
<p
class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none [&:not(:first-child)]:mt-2"
>
{group.orgName}
</p>
{:else}
{#if (group.orgName ?? '') === firstAvailableOrgKey}
<p class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none">
Available models
</p>
{/if}
{#if group.orgName}
<p
class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none [&:not(:first-child)]:mt-2"
>
{group.orgName}
</p>
{/if}
{/if}
{#each group.items as { option, flatIndex } (group.isLoadedGroup ? `loaded-${option.id}` : group.isFavouritesGroup ? `fav-${option.id}` : option.id)}

26
tools/server/webui/src/lib/components/app/models/ModelsSelectorSheet.svelte
View File

@ -154,6 +154,13 @@
let showModelDialog = $state(false);
let infoModelId = $state<string | null>(null);
// key of the first "available" (non-loaded, non-favourite) group
// used to render the "Available models" separator exactly once
let firstAvailableOrgKey = $derived.by(() => {
const g = groupedFilteredOptions.find((g) => !g.isLoadedGroup && !g.isFavouritesGroup);
return g ? (g.orgName ?? '') : null;
});
function handleInfoClick(modelName: string) {
infoModelId = modelName;
showModelDialog = true;
@ -354,12 +361,19 @@
<p class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none">
Favourite models
</p>
{:else if group.orgName}
<p
class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none [&:not(:first-child)]:mt-2"
>
{group.orgName}
</p>
{:else}
{#if (group.orgName ?? '') === firstAvailableOrgKey}
<p class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none">
Available models
</p>
{/if}
{#if group.orgName}
<p
class="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none [&:not(:first-child)]:mt-2"
>
{group.orgName}
</p>
{/if}
{/if}
{#each group.items as { option } (group.isLoadedGroup ? `loaded-${option.id}` : group.isFavouritesGroup ? `fav-${option.id}` : option.id)}