diff --git a/tools/server/webui/src/lib/components/app/dialogs/DialogModelInformation.svelte b/tools/server/webui/src/lib/components/app/dialogs/DialogModelInformation.svelte index eac83f234d..fe8bb0b91e 100644 --- a/tools/server/webui/src/lib/components/app/dialogs/DialogModelInformation.svelte +++ b/tools/server/webui/src/lib/components/app/dialogs/DialogModelInformation.svelte @@ -5,21 +5,38 @@ import { serverStore } from '$lib/stores/server.svelte'; import { modelsStore, modelOptions, modelsLoading } from '$lib/stores/models.svelte'; import { formatFileSize, formatParameters, formatNumber } from '$lib/utils'; + import type { ApiLlamaCppServerProps } from '$lib/types'; interface Props { open?: boolean; onOpenChange?: (open: boolean) => void; + // when set, fetch props from the child process (router mode) + modelId?: string | null; } - let { open = $bindable(), onOpenChange }: Props = $props(); + let { open = $bindable(), onOpenChange, modelId = null }: Props = $props(); - let serverProps = $derived(serverStore.props); - let modelName = $derived(modelsStore.singleModelName); + let isRouter = $derived(serverStore.isRouterMode); + + // per-model props fetched from the child process + let routerModelProps = $state(null); + let isLoadingRouterProps = $state(false); + + // in router mode use per-model props, otherwise use global props + let serverProps = $derived(isRouter && modelId ? routerModelProps : serverStore.props); + + let modelName = $derived(isRouter && modelId ? modelId : modelsStore.singleModelName); let models = $derived(modelOptions()); let isLoadingModels = $derived(modelsLoading()); - // Get the first model for single-model mode display - let firstModel = $derived(models[0] ?? null); + // in router mode, find the model option matching modelId + // in single mode, use the first model as before + let firstModel = $derived.by(() => { + if (isRouter && modelId) { + return models.find((m) => m.model === modelId) ?? null; + } + return models[0] ?? null; + }); // Get modalities from modelStore using the model ID from the first model let modalities = $derived.by(() => { @@ -33,6 +50,27 @@ modelsStore.fetch(); } }); + + // fetch per-model props from child process when dialog opens in router mode + $effect(() => { + if (open && isRouter && modelId) { + isLoadingRouterProps = true; + modelsStore + .fetchModelProps(modelId) + .then((props) => { + routerModelProps = props; + }) + .catch(() => { + routerModelProps = null; + }) + .finally(() => { + isLoadingRouterProps = false; + }); + } + if (!open) { + routerModelProps = null; + } + }); @@ -52,7 +90,7 @@
- {#if isLoadingModels} + {#if isLoadingModels || isLoadingRouterProps}
Loading model information...
diff --git a/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte b/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte index a40501e2cc..6c05fee9df 100644 --- a/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte +++ b/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte @@ -164,6 +164,12 @@ let isOpen = $state(false); let showModelDialog = $state(false); + let infoModelId = $state(null); + + function handleInfoClick(modelName: string) { + infoModelId = modelName; + showModelDialog = true; + } onMount(() => { modelsStore.fetch().catch((error) => { @@ -447,6 +453,7 @@ {isFav} showOrgName={group.isFavouritesGroup || group.isLoadedGroup} onSelect={handleSelect} + onInfoClick={handleInfoClick} onMouseEnter={() => (highlightedIndex = flatIndex)} onKeyDown={(e) => { if (e.key === KeyboardKey.ENTER || e.key === KeyboardKey.SPACE) { @@ -500,6 +507,6 @@ {/if}
-{#if showModelDialog && !isRouter} - +{#if showModelDialog} + {/if} diff --git a/tools/server/webui/src/lib/components/app/models/ModelsSelectorOption.svelte b/tools/server/webui/src/lib/components/app/models/ModelsSelectorOption.svelte index d4239fb1a1..da41de39ab 100644 --- a/tools/server/webui/src/lib/components/app/models/ModelsSelectorOption.svelte +++ b/tools/server/webui/src/lib/components/app/models/ModelsSelectorOption.svelte @@ -1,5 +1,14 @@