diff options
Diffstat (limited to 'llama.cpp/tools/server/webui/src/lib/components/app/models')
| -rw-r--r-- | llama.cpp/tools/server/webui/src/lib/components/app/models/ModelBadge.svelte | 56 | ||||
| -rw-r--r-- | llama.cpp/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte | 555 |
2 files changed, 611 insertions, 0 deletions
diff --git a/llama.cpp/tools/server/webui/src/lib/components/app/models/ModelBadge.svelte b/llama.cpp/tools/server/webui/src/lib/components/app/models/ModelBadge.svelte new file mode 100644 index 0000000..bea1bf6 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/app/models/ModelBadge.svelte @@ -0,0 +1,56 @@ +<script lang="ts"> + import { Package } from '@lucide/svelte'; + import { BadgeInfo, CopyToClipboardIcon } from '$lib/components/app'; + import { modelsStore } from '$lib/stores/models.svelte'; + import { serverStore } from '$lib/stores/server.svelte'; + import * as Tooltip from '$lib/components/ui/tooltip'; + + interface Props { + class?: string; + model?: string; + onclick?: () => void; + showCopyIcon?: boolean; + showTooltip?: boolean; + } + + let { + class: className = '', + model: modelProp, + onclick, + showCopyIcon = false, + showTooltip = false + }: Props = $props(); + + let model = $derived(modelProp || modelsStore.singleModelName); + let isModelMode = $derived(serverStore.isModelMode); +</script> + +{#snippet badgeContent()} + <BadgeInfo class={className} {onclick}> + {#snippet icon()} + <Package class="h-3 w-3" /> + {/snippet} + + {model} + + {#if showCopyIcon} + <CopyToClipboardIcon text={model || ''} ariaLabel="Copy model name" /> + {/if} + </BadgeInfo> +{/snippet} + +{#if model && isModelMode} + {#if showTooltip} + <Tooltip.Root> + <Tooltip.Trigger> + {@render badgeContent()} + </Tooltip.Trigger> + + <Tooltip.Content> + {onclick ? 'Click for model details' : model} + </Tooltip.Content> + </Tooltip.Root> + {:else} + {@render badgeContent()} + {/if} +{/if} diff --git a/llama.cpp/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte b/llama.cpp/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte new file mode 100644 index 0000000..efc9cd4 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte @@ -0,0 +1,555 @@ +<script lang="ts"> + import { onMount, tick } from 'svelte'; + import { ChevronDown, EyeOff, Loader2, MicOff, Package, Power } from '@lucide/svelte'; + import * as Tooltip from '$lib/components/ui/tooltip'; + import * as Popover from '$lib/components/ui/popover'; + import { cn } from '$lib/components/ui/utils'; + import { + modelsStore, + modelOptions, + modelsLoading, + modelsUpdating, + selectedModelId, + routerModels, + propsCacheVersion, + singleModelName + } from '$lib/stores/models.svelte'; + import { usedModalities, conversationsStore } from '$lib/stores/conversations.svelte'; + import { ServerModelStatus } from '$lib/enums'; + import { isRouterMode } from '$lib/stores/server.svelte'; + import { DialogModelInformation, SearchInput } from '$lib/components/app'; + import type { ModelOption } from '$lib/types/models'; + + interface Props { + class?: string; + currentModel?: string | null; + /** Callback when model changes. Return false to keep menu open (e.g., for validation failures) */ + onModelChange?: (modelId: string, modelName: string) => Promise<boolean> | boolean | void; + disabled?: boolean; + forceForegroundText?: boolean; + /** When true, user's global selection takes priority over currentModel (for form selector) */ + useGlobalSelection?: boolean; + /** + * When provided, only consider modalities from messages BEFORE this message. + * Used for regeneration - allows selecting models that don't support modalities + * used in later messages. + */ + upToMessageId?: string; + } + + let { + class: className = '', + currentModel = null, + onModelChange, + disabled = false, + forceForegroundText = false, + useGlobalSelection = false, + upToMessageId + }: Props = $props(); + + let options = $derived(modelOptions()); + let loading = $derived(modelsLoading()); + let updating = $derived(modelsUpdating()); + let activeId = $derived(selectedModelId()); + let isRouter = $derived(isRouterMode()); + let serverModel = $derived(singleModelName()); + + // Reactive router models state - needed for proper reactivity of status checks + let currentRouterModels = $derived(routerModels()); + + let requiredModalities = $derived( + upToMessageId ? conversationsStore.getModalitiesUpToMessage(upToMessageId) : usedModalities() + ); + + function getModelStatus(modelId: string): ServerModelStatus | null { + const model = currentRouterModels.find((m) => m.id === modelId); + return (model?.status?.value as ServerModelStatus) ?? null; + } + + /** + * Checks if a model supports all modalities used in the conversation. + * Returns true if the model can be selected, false if it should be disabled. + */ + function isModelCompatible(option: ModelOption): boolean { + void propsCacheVersion(); + + const modelModalities = modelsStore.getModelModalities(option.model); + + if (!modelModalities) { + const status = getModelStatus(option.model); + + if (status === ServerModelStatus.LOADED) { + if (requiredModalities.vision || requiredModalities.audio) return false; + } + + return true; + } + + if (requiredModalities.vision && !modelModalities.vision) return false; + if (requiredModalities.audio && !modelModalities.audio) return false; + + return true; + } + + /** + * Gets missing modalities for a model. + * Returns object with vision/audio booleans indicating what's missing. + */ + function getMissingModalities(option: ModelOption): { vision: boolean; audio: boolean } | null { + void propsCacheVersion(); + + const modelModalities = modelsStore.getModelModalities(option.model); + + if (!modelModalities) { + const status = getModelStatus(option.model); + + if (status === ServerModelStatus.LOADED) { + const missing = { + vision: requiredModalities.vision, + audio: requiredModalities.audio + }; + + if (missing.vision || missing.audio) return missing; + } + + return null; + } + + const missing = { + vision: requiredModalities.vision && !modelModalities.vision, + audio: requiredModalities.audio && !modelModalities.audio + }; + + if (!missing.vision && !missing.audio) return null; + + return missing; + } + + let isHighlightedCurrentModelActive = $derived( + !isRouter || !currentModel + ? false + : (() => { + const currentOption = options.find((option) => option.model === currentModel); + + return currentOption ? currentOption.id === activeId : false; + })() + ); + + let isCurrentModelInCache = $derived(() => { + if (!isRouter || !currentModel) return true; + + return options.some((option) => option.model === currentModel); + }); + + let searchTerm = $state(''); + let searchInputRef = $state<HTMLInputElement | null>(null); + let highlightedIndex = $state<number>(-1); + + let filteredOptions: ModelOption[] = $derived( + (() => { + const term = searchTerm.trim().toLowerCase(); + if (!term) return options; + + return options.filter( + (option) => + option.model.toLowerCase().includes(term) || option.name?.toLowerCase().includes(term) + ); + })() + ); + + // Get indices of compatible options for keyboard navigation + let compatibleIndices = $derived( + filteredOptions + .map((option, index) => (isModelCompatible(option) ? index : -1)) + .filter((i) => i !== -1) + ); + + // Reset highlighted index when search term changes + $effect(() => { + void searchTerm; + highlightedIndex = -1; + }); + + let isOpen = $state(false); + let showModelDialog = $state(false); + + onMount(() => { + modelsStore.fetch().catch((error) => { + console.error('Unable to load models:', error); + }); + }); + + // Handle changes to the model selector pop-down or the model dialog, depending on if the server is in + // router mode or not. + function handleOpenChange(open: boolean) { + if (loading || updating) return; + + if (isRouter) { + if (open) { + isOpen = true; + searchTerm = ''; + highlightedIndex = -1; + + // Focus search input after popover opens + tick().then(() => { + requestAnimationFrame(() => searchInputRef?.focus()); + }); + + modelsStore.fetchRouterModels().then(() => { + modelsStore.fetchModalitiesForLoadedModels(); + }); + } else { + isOpen = false; + searchTerm = ''; + highlightedIndex = -1; + } + } else { + showModelDialog = open; + } + } + + export function open() { + handleOpenChange(true); + } + + function handleSearchKeyDown(event: KeyboardEvent) { + if (event.isComposing) return; + + if (event.key === 'ArrowDown') { + event.preventDefault(); + if (compatibleIndices.length === 0) return; + + const currentPos = compatibleIndices.indexOf(highlightedIndex); + if (currentPos === -1 || currentPos === compatibleIndices.length - 1) { + highlightedIndex = compatibleIndices[0]; + } else { + highlightedIndex = compatibleIndices[currentPos + 1]; + } + } else if (event.key === 'ArrowUp') { + event.preventDefault(); + if (compatibleIndices.length === 0) return; + + const currentPos = compatibleIndices.indexOf(highlightedIndex); + if (currentPos === -1 || currentPos === 0) { + highlightedIndex = compatibleIndices[compatibleIndices.length - 1]; + } else { + highlightedIndex = compatibleIndices[currentPos - 1]; + } + } else if (event.key === 'Enter') { + event.preventDefault(); + if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) { + const option = filteredOptions[highlightedIndex]; + if (isModelCompatible(option)) { + handleSelect(option.id); + } + } else if (compatibleIndices.length > 0) { + // No selection - highlight first compatible option + highlightedIndex = compatibleIndices[0]; + } + } + } + + async function handleSelect(modelId: string) { + const option = options.find((opt) => opt.id === modelId); + if (!option) return; + + let shouldCloseMenu = true; + + if (onModelChange) { + // If callback provided, use it (for regenerate functionality) + const result = await onModelChange(option.id, option.model); + + // If callback returns false, keep menu open (validation failed) + if (result === false) { + shouldCloseMenu = false; + } + } else { + // Update global selection + await modelsStore.selectModelById(option.id); + + // Load the model if not already loaded (router mode) + if (isRouter && getModelStatus(option.model) !== ServerModelStatus.LOADED) { + try { + await modelsStore.loadModel(option.model); + } catch (error) { + console.error('Failed to load model:', error); + } + } + } + + if (shouldCloseMenu) { + handleOpenChange(false); + + // Focus the chat textarea after model selection + requestAnimationFrame(() => { + const textarea = document.querySelector<HTMLTextAreaElement>( + '[data-slot="chat-form"] textarea' + ); + textarea?.focus(); + }); + } + } + + function getDisplayOption(): ModelOption | undefined { + if (!isRouter) { + if (serverModel) { + return { + id: 'current', + model: serverModel, + name: serverModel.split('/').pop() || serverModel, + capabilities: [] // Empty array for single model mode + }; + } + + return undefined; + } + + // When useGlobalSelection is true (form selector), prioritize user selection + // Otherwise (message display), prioritize currentModel + if (useGlobalSelection && activeId) { + const selected = options.find((option) => option.id === activeId); + if (selected) return selected; + } + + // Show currentModel (from message payload or conversation) + if (currentModel) { + if (!isCurrentModelInCache()) { + return { + id: 'not-in-cache', + model: currentModel, + name: currentModel.split('/').pop() || currentModel, + capabilities: [] + }; + } + + return options.find((option) => option.model === currentModel); + } + + // Fallback to user selection (for new chats before first message) + if (activeId) { + return options.find((option) => option.id === activeId); + } + + // No selection - return undefined to show "Select model" + return undefined; + } +</script> + +<div class={cn('relative inline-flex flex-col items-end gap-1', className)}> + {#if loading && options.length === 0 && isRouter} + <div class="flex items-center gap-2 text-xs text-muted-foreground"> + <Loader2 class="h-3.5 w-3.5 animate-spin" /> + Loading models… + </div> + {:else if options.length === 0 && isRouter} + <p class="text-xs text-muted-foreground">No models available.</p> + {:else} + {@const selectedOption = getDisplayOption()} + + {#if isRouter} + <Popover.Root bind:open={isOpen} onOpenChange={handleOpenChange}> + <Popover.Trigger + class={cn( + `inline-flex cursor-pointer items-center gap-1.5 rounded-sm bg-muted-foreground/10 px-1.5 py-1 text-xs transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60`, + !isCurrentModelInCache() + ? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400' + : forceForegroundText + ? 'text-foreground' + : isHighlightedCurrentModelActive + ? 'text-foreground' + : 'text-muted-foreground', + isOpen ? 'text-foreground' : '' + )} + style="max-width: min(calc(100cqw - 6.5rem), 32rem)" + disabled={disabled || updating} + > + <Package class="h-3.5 w-3.5" /> + + <span class="truncate font-medium"> + {selectedOption?.model || 'Select model'} + </span> + + {#if updating} + <Loader2 class="h-3 w-3.5 animate-spin" /> + {:else} + <ChevronDown class="h-3 w-3.5" /> + {/if} + </Popover.Trigger> + + <Popover.Content + class="group/popover-content w-96 max-w-[calc(100vw-2rem)] p-0" + align="end" + sideOffset={8} + collisionPadding={16} + > + <div class="flex max-h-[50dvh] flex-col overflow-hidden"> + <div + class="order-1 shrink-0 border-b p-4 group-data-[side=top]/popover-content:order-2 group-data-[side=top]/popover-content:border-t group-data-[side=top]/popover-content:border-b-0" + > + <SearchInput + id="model-search" + placeholder="Search models..." + bind:value={searchTerm} + bind:ref={searchInputRef} + onClose={() => handleOpenChange(false)} + onKeyDown={handleSearchKeyDown} + /> + </div> + <div + class="models-list order-2 min-h-0 flex-1 overflow-y-auto group-data-[side=top]/popover-content:order-1" + > + {#if !isCurrentModelInCache() && currentModel} + <!-- Show unavailable model as first option (disabled) --> + <button + type="button" + class="flex w-full cursor-not-allowed items-center bg-red-400/10 px-4 py-2 text-left text-sm text-red-400" + role="option" + aria-selected="true" + aria-disabled="true" + disabled + > + <span class="truncate">{selectedOption?.name || currentModel}</span> + <span class="ml-2 text-xs whitespace-nowrap opacity-70">(not available)</span> + </button> + <div class="my-1 h-px bg-border"></div> + {/if} + {#if filteredOptions.length === 0} + <p class="px-4 py-3 text-sm text-muted-foreground">No models found.</p> + {/if} + {#each filteredOptions as option, index (option.id)} + {@const status = getModelStatus(option.model)} + {@const isLoaded = status === ServerModelStatus.LOADED} + {@const isLoading = status === ServerModelStatus.LOADING} + {@const isSelected = currentModel === option.model || activeId === option.id} + {@const isCompatible = isModelCompatible(option)} + {@const isHighlighted = index === highlightedIndex} + {@const missingModalities = getMissingModalities(option)} + + <div + class={cn( + 'group flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition focus:outline-none', + isCompatible + ? 'cursor-pointer hover:bg-muted focus:bg-muted' + : 'cursor-not-allowed opacity-50', + isSelected || isHighlighted + ? 'bg-accent text-accent-foreground' + : isCompatible + ? 'hover:bg-accent hover:text-accent-foreground' + : '', + isLoaded ? 'text-popover-foreground' : 'text-muted-foreground' + )} + role="option" + aria-selected={isSelected || isHighlighted} + aria-disabled={!isCompatible} + tabindex={isCompatible ? 0 : -1} + onclick={() => isCompatible && handleSelect(option.id)} + onmouseenter={() => (highlightedIndex = index)} + onkeydown={(e) => { + if (isCompatible && (e.key === 'Enter' || e.key === ' ')) { + e.preventDefault(); + handleSelect(option.id); + } + }} + > + <span class="min-w-0 flex-1 truncate">{option.model}</span> + + {#if missingModalities} + <span class="flex shrink-0 items-center gap-1 text-muted-foreground/70"> + {#if missingModalities.vision} + <Tooltip.Root> + <Tooltip.Trigger> + <EyeOff class="h-3.5 w-3.5" /> + </Tooltip.Trigger> + <Tooltip.Content class="z-[9999]"> + <p>No vision support</p> + </Tooltip.Content> + </Tooltip.Root> + {/if} + {#if missingModalities.audio} + <Tooltip.Root> + <Tooltip.Trigger> + <MicOff class="h-3.5 w-3.5" /> + </Tooltip.Trigger> + <Tooltip.Content class="z-[9999]"> + <p>No audio support</p> + </Tooltip.Content> + </Tooltip.Root> + {/if} + </span> + {/if} + + {#if isLoading} + <Tooltip.Root> + <Tooltip.Trigger> + <Loader2 class="h-4 w-4 shrink-0 animate-spin text-muted-foreground" /> + </Tooltip.Trigger> + <Tooltip.Content class="z-[9999]"> + <p>Loading model...</p> + </Tooltip.Content> + </Tooltip.Root> + {:else if isLoaded} + <Tooltip.Root> + <Tooltip.Trigger> + <button + type="button" + class="relative ml-2 flex h-4 w-4 shrink-0 items-center justify-center" + onclick={(e) => { + e.stopPropagation(); + modelsStore.unloadModel(option.model); + }} + > + <span + class="mr-2 h-2 w-2 rounded-full bg-green-500 transition-opacity group-hover:opacity-0" + ></span> + <Power + class="absolute mr-2 h-4 w-4 text-red-500 opacity-0 transition-opacity group-hover:opacity-100 hover:text-red-600" + /> + </button> + </Tooltip.Trigger> + <Tooltip.Content class="z-[9999]"> + <p>Unload model</p> + </Tooltip.Content> + </Tooltip.Root> + {:else} + <span class="mx-2 h-2 w-2 rounded-full bg-muted-foreground/50"></span> + {/if} + </div> + {/each} + </div> + </div> + </Popover.Content> + </Popover.Root> + {:else} + <button + class={cn( + `inline-flex cursor-pointer items-center gap-1.5 rounded-sm bg-muted-foreground/10 px-1.5 py-1 text-xs transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60`, + !isCurrentModelInCache() + ? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400' + : forceForegroundText + ? 'text-foreground' + : isHighlightedCurrentModelActive + ? 'text-foreground' + : 'text-muted-foreground', + isOpen ? 'text-foreground' : '' + )} + style="max-width: min(calc(100cqw - 6.5rem), 32rem)" + onclick={() => handleOpenChange(true)} + disabled={disabled || updating} + > + <Package class="h-3.5 w-3.5" /> + + <span class="truncate font-medium"> + {selectedOption?.model} + </span> + + {#if updating} + <Loader2 class="h-3 w-3.5 animate-spin" /> + {/if} + </button> + {/if} + {/if} +</div> + +{#if showModelDialog && !isRouter} + <DialogModelInformation bind:open={showModelDialog} /> +{/if} |