Repository: ggerganov/llama.cpp
File: tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte (Svelte)

Code before:
		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().filter((option) => {
			// Exclude models that are marked as not for webui use
			const modelProps = modelsStore.getModelProps(option.model);
			return modelProps?.webui !== false;
		})
	);
	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 {

Review comment (suggestion):
Comment here is redundant, the code is self-explanatory.

```suggestion
			const modelProps = modelsStore.getModelProps(option.model);

			return modelProps?.webui !== false;
```

Code after:
		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;
	}

	let {
		class: className = '',
		currentModel = null,
		onModelChange,
		disabled = false,
		forceForegroundText = false,
		useGlobalSelection = false
	}: Props = $props();

	let options = $derived(
		modelOptions().filter((option) => {
			const modelProps = modelsStore.getModelProps(option.model);

			return modelProps?.webui !== false;
		})
	);
	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());

	function getModelStatus(modelId: string): ServerModelStatus | null {
		const model = currentRouterModels.find((m) => m.id === modelId);
		return (model?.status?.value as ServerModelStatus) ?? null;
	}

	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);