global settings for each model

src/lib/chat/triggerAiCall.ts

@@ -5,7 +5,7 @@ export interface TriggerAiCallContext {
 	userId: string;
 	newNodes: Node[];
 	messages: ChatMessage[];
-	selectedModels: ChatModel[];
+	selectedModels: string[];
 	prompt: string;
 	nodeData: Record<string, unknown> | undefined;
 	authToken: string;
@@ -150,9 +150,7 @@ export async function triggerAiCall(ctx: TriggerAiCallContext): Promise<void> {
 				...nodeData,
 				messages: newNodes.length === failedNodeIds.size ? messages.slice(0, -1) : messages,
 				prompt: newNodes.length === failedNodeIds.size ? prompt : '',
-				selectedModels: selectedModels.map((m) =>
-					failedModelIds.has(m.id) ? { ...m, isError: true } : m
-				)
+				selectedModels: selectedModels.filter((m) => !failedModelIds.has(m))
 			} as Record<string, unknown>,
 			{ replace: true }
 		);
@@ -176,7 +174,7 @@ export async function triggerAiCall(ctx: TriggerAiCallContext): Promise<void> {
 		position: { x: 0, y: 0 },
 		data: {
 			role: 'user',
-			selectedModels: selectedModels.filter((m) => !m.isError),
+			selectedModels: selectedModels.filter((m) => !failedModelIds.has(m)),
 			messages: [...messages, assistantMessage]
 		}
 	};

src/lib/components/chat/User.svelte

@@ -35,8 +35,8 @@
 	const { update: updateEdges } = useEdges();
 	const { updateNodeData, deleteElements, getEdges, getNodes } = useSvelteFlow();
 
-	let selectedModels = $derived<ChatModel[]>(
-		(nodeData.current?.data.selectedModels as ChatModel[]) ?? []
+	let selectedModels = $derived<string[]>(
+		(nodeData.current?.data.selectedModels as string[]) ?? []
 	);
 	let messages = $derived((nodeData.current?.data.messages as ChatMessage[]) ?? []);
 	let isFirstNode = $derived((nodeData.current?.data.isFirstNode as boolean) ?? false);
@@ -52,30 +52,30 @@
 		MAX_SUGGESTIONS
 	);
 
-	function addModel(model: ChatModel) {
-		if (!selectedModels.some((m) => m.id === model.id)) {
+	function addModel(modelId: string) {
+		if (!selectedModels.includes(modelId)) {
 			updateNodeData(
 				id,
 				{
 					...nodeData.current?.data,
-					selectedModels: [...selectedModels, model]
+					selectedModels: [...selectedModels, modelId]
 				},
 				{ replace: true }
 			);
 		}
 	}
-	function removeModel(model: ChatModel) {
+	function removeModel(modelId: string) {
 		updateNodeData(
 			id,
 			{
 				...nodeData.current?.data,
-				selectedModels: selectedModels.filter((m) => m.id !== model.id)
+				selectedModels: selectedModels.filter((m) => m !== modelId)
 			},
 			{ replace: true }
 		);
 	}
 
-	function handleTriggerAction(models: ChatModel[] = selectedModels) {
+	function handleTriggerAction(models: string[] = selectedModels) {
 		if (!authState.user) {
 			signinModalState.open = true;
 			return;
@@ -89,7 +89,7 @@
 			{
 				...nodeData.current?.data,
 				messages: newMessages,
-				selectedModels: models.map((m) => ({ ...m, isError: false }))
+				selectedModels: models
 			},
 			{ replace: true }
 		);
@@ -178,30 +178,26 @@
 					<SettingsModel
 						{model}
 						onSave={(model) => {
-							updateNodeData(
-								id,
-								{
-									...nodeData.current,
-									isFirstNode: nodeData.current?.data.isFirstNode ?? false,
-									selectedModels: selectedModels.map((m) => (m.id === model.id ? model : m))
-								},
-								{ replace: true }
-							);
-							selectedModels = selectedModels.map((m) => (m.id === model.id ? model : m));
+							// updateNodeData(
+							// 	id,
+							// 	{
+							// 		...nodeData.current,
+							// 		isFirstNode: nodeData.current?.data.isFirstNode ?? false,
+							// 		selectedModels: selectedModels.map((m) => (m.id === model.id ? model : m))
+							// 	},
+							// 	{ replace: true }
+							// );
+							// selectedModels = selectedModels.map((m) => (m.id === model.id ? model : m));
 						}}
 					>
-						<Button
-							variant={model.isError ? 'outline-destructive' : 'outline'}
-							size="sm"
-							class="group relative font-normal! shadow-none!"
-						>
+						<Button variant="outline" size="sm" class="group relative font-normal! shadow-none!">
 							<img
-								src={`https://huggingface.co/api/avatars/${model.owned_by}`}
-								alt={model.id}
+								src={`https://huggingface.co/api/avatars/${model.split('/')[0]}`}
+								alt={model.split('/')[0]}
 								class="size-3.5 rounded"
 							/>
-							{model.id.split('/').pop() ?? model.id}
-							{#if !lastMessage || model.isError || selectedModels.length > MAX_MODELS_PER_NODE}
+							{model.split('/').pop() ?? model}
+							{#if !lastMessage || selectedModels.length > MAX_MODELS_PER_NODE}
 								<Button
 									variant="default"
 									size="icon-3xs"
@@ -219,7 +215,7 @@
 					</SettingsModel>
 				{/each}
 				{#if !lastMessage && !loading}
-					<ComboBoxModels onSelect={addModel} excludeIds={selectedModels.map((m) => m.id)} />
+					<ComboBoxModels onSelect={addModel} excludeIds={selectedModels} />
 				{/if}
 			</div>
 		</header>

src/lib/components/model/ComboBoxModels.svelte

@@ -4,11 +4,10 @@
 	import * as Command from '$lib/components/ui/command/';
 	import { Button } from '$lib/components/ui/button/';
 	import { modelsState } from '$lib/state/models.svelte';
-	import type { ChatModel } from '$lib/helpers/types';
 	import { MAX_TRENDING_MODELS } from '$lib';
 
 	interface Props {
-		onSelect?: (model: ChatModel) => void;
+		onSelect?: (model: string) => void;
 		excludeIds?: string[];
 	}
 
@@ -64,7 +63,7 @@
 				{#each trendingModels as model (model.id)}
 					<Command.Item
 						onSelect={() => {
-							onSelect?.(model);
+							onSelect?.(model.id);
 							open = false;
 						}}
 					>
@@ -82,7 +81,7 @@
 				{#each otherModels as model (model.id)}
 					<Command.Item
 						onSelect={() => {
-							onSelect?.(model);
+							onSelect?.(model.id);
 							open = false;
 						}}
 					>

src/lib/components/model/SettingsModel.svelte

@@ -14,46 +14,56 @@
 	import Switch from '$lib/components/ui/switch/switch.svelte';
 	import { fade } from 'svelte/transition';
 	import Spinner from '../loading/Spinner.svelte';
+	import { modelsState, saveModelSettings } from '$lib/state/models.svelte';
 
 	let {
-		model,
+		model: modelId,
 		children,
 		onSave
 	}: {
-		model: ChatModel;
+		model: string;
 		children: Snippet;
 		onSave: (model: ChatModel) => void;
 	} = $props();
 
-	// svelte-ignore state_referenced_locally
-	let temperature = $state<number | undefined>(model.temperature ?? undefined);
-	// svelte-ignore state_referenced_locally
-	let max_tokens = $state<number | undefined>(model.max_tokens ?? undefined);
-	// svelte-ignore state_referenced_locally
-	let top_p = $state<number | undefined>(model.top_p ?? undefined);
+	let model = $derived(modelsState.models.find((m) => m.id === modelId) ?? null);
+
+	let temperature = $state<number | undefined>(undefined);
+	let max_tokens = $state<number | undefined>(undefined);
+	let top_p = $state<number | undefined>(undefined);
+	let provider = $state<string>('auto');
+
+	$effect(() => {
+		if (model) {
+			temperature = model.temperature ?? undefined;
+			max_tokens = model.max_tokens ?? undefined;
+			top_p = model.top_p ?? undefined;
+			provider = model.provider ?? 'auto';
+		}
+	});
+
 	let open = $state<boolean>(false);
 	// svelte-ignore state_referenced_locally
-	let provider = $state<string>(model.provider ?? 'auto');
 	let loading = $state<boolean>(false);
 
 	let maxContentLength = $derived(
 		provider === 'auto'
-			? model.providers[0]?.context_length
-			: model.providers.find((p) => p.provider === provider)?.context_length
+			? model?.providers[0]?.context_length
+			: model?.providers.find((p) => p.provider === provider)?.context_length
 	);
 
 	async function handleSave() {
 		if (loading) return;
 		loading = true;
 		await new Promise((resolve) => setTimeout(resolve, 1_000));
+		saveModelSettings(modelId, { temperature, top_p, max_tokens, provider });
+		if (model) onSave?.({ ...model, temperature, max_tokens, top_p, provider });
 		loading = false;
 	}
 </script>
 
-<Dialog.Root
-	bind:open
-	onOpenChange={(value) => !value && onSave({ ...model, temperature, max_tokens, top_p, provider })}
->
+<Dialog.Root bind:open>
+	<!-- onOpenChange={(value) => !value && onSave({ ...model, temperature, max_tokens, top_p, provider })} -->
 	<Dialog.Trigger>{@render children?.()}</Dialog.Trigger>
 	<Dialog.Content class="max-w-md! gap-0! p-0!">
 		<Dialog.Header class="mb-0 gap-1! rounded-none border-b p-5">
@@ -79,44 +89,17 @@
 					</Button>
 				</a>
 			</div>
-		{/if}
-		<main class="mt-0 space-y-5 px-3 pb-5">
-			<div class="rounded-lg border border-border p-3.5">
-				<h4 class="text-sm leading-none font-medium">Inference provider</h4>
-				<p class="mt-0.5 text-xs text-muted-foreground">
-					Choose which Inference Provider to use with this model
-				</p>
-				<Select.Root type="single" bind:value={provider}>
-					<Select.Trigger class="mt-3 flex w-full items-center justify-between gap-2 capitalize">
-						<div class="flex items-center gap-2">
-							{#if PROVIDER_SELECTION_MODES.find((m) => m.value === provider)}
-								{@const mode = PROVIDER_SELECTION_MODES.find((m) => m.value === provider)!}
-								<div class="flex size-5 items-center justify-center rounded {mode.class}">
-									<mode.icon class="size-3 {mode.iconClass}" />
-								</div>
-								<p>
-									{mode.label}
-									{#if mode.description}
-										<span class="text-xs text-muted-foreground lowercase italic"
-											>({mode.description})</span
-										>
-									{/if}
-								</p>
-							{:else}
-								<img
-									src={`https://huggingface.co/api/avatars/${provider}`}
-									alt={provider}
-									class="size-4 rounded"
-								/>
-								{provider}
-							{/if}
-						</div>
-					</Select.Trigger>
-					<Select.Content>
-						<Select.Group>
-							<Select.GroupHeading>Selection mode</Select.GroupHeading>
-							{#each PROVIDER_SELECTION_MODES as mode}
-								<Select.Item value={mode.value}>
+			<main class="mt-0 space-y-5 px-3 pb-5">
+				<div class="rounded-lg border border-border p-3.5">
+					<h4 class="text-sm leading-none font-medium">Inference provider</h4>
+					<p class="mt-0.5 text-xs text-muted-foreground">
+						Choose which Inference Provider to use with this model
+					</p>
+					<Select.Root type="single" bind:value={provider}>
+						<Select.Trigger class="mt-3 flex w-full items-center justify-between gap-2 capitalize">
+							<div class="flex items-center gap-2">
+								{#if PROVIDER_SELECTION_MODES.find((m) => m.value === provider)}
+									{@const mode = PROVIDER_SELECTION_MODES.find((m) => m.value === provider)!}
 									<div class="flex size-5 items-center justify-center rounded {mode.class}">
 										<mode.icon class="size-3 {mode.iconClass}" />
 									</div>
@@ -128,168 +111,195 @@
 											>
 										{/if}
 									</p>
-								</Select.Item>
-							{/each}
-						</Select.Group>
-						<Select.Separator />
-						<Select.Group>
-							<Select.GroupHeading>Specific provider</Select.GroupHeading>
-							{#each model.providers as provider}
-								<Select.Item value={provider.provider}>
-									<div class="flex items-center gap-2 capitalize">
-										<img
-											src={`https://huggingface.co/api/avatars/${provider.provider}`}
-											alt={provider.provider}
-											class="size-4 rounded"
-										/>
-										{provider.provider}
-									</div>
-									{#if formatPricingPerToken(provider.pricing)}
-										<span class="text-xs text-muted-foreground">
-											{formatPricingPerToken(provider.pricing)}
-										</span>
-									{/if}
-								</Select.Item>
-							{/each}
-						</Select.Group>
-					</Select.Content>
-				</Select.Root>
-			</div>
-			<div class="grid gap-3 rounded-lg border border-border p-3.5">
-				<div class="space-y-2">
-					<div class="flex items-center justify-between gap-2">
-						<div>
-							<h4 class="text-sm leading-none font-medium">Temperature</h4>
-							<p class="mt-0.5 text-xs text-muted-foreground">
-								Tunes the creativity vs. predictability trade-off.
-							</p>
-						</div>
-						<Switch
-							checked={temperature !== undefined}
-							onCheckedChange={(value) => {
-								if (value) {
-									temperature = 0.5;
-								} else {
-									temperature = undefined;
-								}
-							}}
-						/>
-					</div>
-					{#if temperature !== undefined}
-						<div class="flex items-center gap-2" transition:fade={{ duration: 100 }}>
-							<Slider
-								type="single"
-								bind:value={temperature}
-								min={0}
-								max={2}
-								step={0.01}
-								class="mt-2"
-							/>
-							<Input
-								type="number"
-								min={0}
-								max={2}
-								step={0.1}
-								bind:value={temperature}
-								class="h-7! w-24!"
-							/>
-						</div>
-					{/if}
+								{:else}
+									<img
+										src={`https://huggingface.co/api/avatars/${provider}`}
+										alt={provider}
+										class="size-4 rounded"
+									/>
+									{provider}
+								{/if}
+							</div>
+						</Select.Trigger>
+						<Select.Content>
+							<Select.Group>
+								<Select.GroupHeading>Selection mode</Select.GroupHeading>
+								{#each PROVIDER_SELECTION_MODES as mode}
+									<Select.Item value={mode.value}>
+										<div class="flex size-5 items-center justify-center rounded {mode.class}">
+											<mode.icon class="size-3 {mode.iconClass}" />
+										</div>
+										<p>
+											{mode.label}
+											{#if mode.description}
+												<span class="text-xs text-muted-foreground lowercase italic"
+													>({mode.description})</span
+												>
+											{/if}
+										</p>
+									</Select.Item>
+								{/each}
+							</Select.Group>
+							<Select.Separator />
+							<Select.Group>
+								<Select.GroupHeading>Specific provider</Select.GroupHeading>
+								{#each model.providers as provider}
+									<Select.Item value={provider.provider}>
+										<div class="flex items-center gap-2 capitalize">
+											<img
+												src={`https://huggingface.co/api/avatars/${provider.provider}`}
+												alt={provider.provider}
+												class="size-4 rounded"
+											/>
+											{provider.provider}
+										</div>
+										{#if formatPricingPerToken(provider.pricing)}
+											<span class="text-xs text-muted-foreground">
+												{formatPricingPerToken(provider.pricing)}
+											</span>
+										{/if}
+									</Select.Item>
+								{/each}
+							</Select.Group>
+						</Select.Content>
+					</Select.Root>
 				</div>
-				<Separator />
-				<div class="space-y-2">
-					<div class="flex items-center justify-between gap-2">
-						<div>
-							<h4 class="text-sm leading-none font-medium">Max Tokens</h4>
-							<p class="mt-0.5 text-xs text-muted-foreground">
-								Sets the absolute limit for generated content length.
-							</p>
+				<div class="grid gap-3 rounded-lg border border-border p-3.5">
+					<div class="space-y-2">
+						<div class="flex items-center justify-between gap-2">
+							<div>
+								<h4 class="text-sm leading-none font-medium">Temperature</h4>
+								<p class="mt-0.5 text-xs text-muted-foreground">
+									Tunes the creativity vs. predictability trade-off.
+								</p>
+							</div>
+							<Switch
+								checked={temperature !== undefined}
+								onCheckedChange={(value) => {
+									if (value) {
+										temperature = 0.5;
+									} else {
+										temperature = undefined;
+									}
+								}}
+							/>
 						</div>
-						<Switch
-							checked={max_tokens !== undefined}
-							onCheckedChange={(value) => {
-								if (value) {
-									max_tokens = (maxContentLength ?? 32_000) / 2;
-								} else {
-									max_tokens = undefined;
-								}
-							}}
-						/>
+						{#if temperature !== undefined}
+							<div class="flex items-center gap-2" transition:fade={{ duration: 100 }}>
+								<Slider
+									type="single"
+									bind:value={temperature}
+									min={0}
+									max={2}
+									step={0.01}
+									class="mt-2"
+								/>
+								<Input
+									type="number"
+									min={0}
+									max={2}
+									step={0.1}
+									bind:value={temperature}
+									class="h-7! w-24!"
+								/>
+							</div>
+						{/if}
 					</div>
-					{#if max_tokens !== undefined}
-						<div class="flex items-center gap-2" transition:fade={{ duration: 100 }}>
-							<Slider
-								type="single"
-								bind:value={max_tokens}
-								min={0}
-								max={maxContentLength ?? 32_000}
-								step={256}
-								class="mt-2"
-							/>
-							<Input
-								type="number"
-								min={0}
-								max={maxContentLength ?? 32_000}
-								step={256}
-								bind:value={max_tokens}
-								class="h-7! w-24!"
+					<Separator />
+					<div class="space-y-2">
+						<div class="flex items-center justify-between gap-2">
+							<div>
+								<h4 class="text-sm leading-none font-medium">Max Tokens</h4>
+								<p class="mt-0.5 text-xs text-muted-foreground">
+									Sets the absolute limit for generated content length.
+								</p>
+							</div>
+							<Switch
+								checked={max_tokens !== undefined}
+								onCheckedChange={(value) => {
+									if (value) {
+										max_tokens = (maxContentLength ?? 32_000) / 2;
+									} else {
+										max_tokens = undefined;
+									}
+								}}
 							/>
 						</div>
-					{/if}
-				</div>
-				<Separator />
-				<div class="space-y-2">
-					<div class="flex items-center justify-between gap-2">
-						<div>
-							<h4 class="text-sm leading-none font-medium">Top-P</h4>
-							<p class="mt-0.5 text-xs text-muted-foreground">
-								Dynamically filters token selection by probability mass.
-							</p>
-						</div>
-						<Switch
-							checked={top_p !== undefined}
-							onCheckedChange={(value) => {
-								if (value) {
-									top_p = 0.5;
-								} else {
-									top_p = undefined;
-								}
-							}}
-						/>
+						{#if max_tokens !== undefined}
+							<div class="flex items-center gap-2" transition:fade={{ duration: 100 }}>
+								<Slider
+									type="single"
+									bind:value={max_tokens}
+									min={0}
+									max={maxContentLength ?? 32_000}
+									step={256}
+									class="mt-2"
+								/>
+								<Input
+									type="number"
+									min={0}
+									max={maxContentLength ?? 32_000}
+									step={256}
+									bind:value={max_tokens}
+									class="h-7! w-24!"
+								/>
+							</div>
+						{/if}
 					</div>
-					{#if top_p !== undefined}
-						<div class="flex items-center gap-2" transition:fade={{ duration: 100 }}>
-							<Slider type="single" bind:value={top_p} min={0} max={2} step={0.01} class="mt-2" />
-							<Input
-								type="number"
-								min={0}
-								max={2}
-								step={0.1}
-								bind:value={top_p}
-								class="h-7! w-24!"
+					<Separator />
+					<div class="space-y-2">
+						<div class="flex items-center justify-between gap-2">
+							<div>
+								<h4 class="text-sm leading-none font-medium">Top-P</h4>
+								<p class="mt-0.5 text-xs text-muted-foreground">
+									Dynamically filters token selection by probability mass.
+								</p>
+							</div>
+							<Switch
+								checked={top_p !== undefined}
+								onCheckedChange={(value) => {
+									if (value) {
+										top_p = 0.5;
+									} else {
+										top_p = undefined;
+									}
+								}}
 							/>
 						</div>
-					{/if}
+						{#if top_p !== undefined}
+							<div class="flex items-center gap-2" transition:fade={{ duration: 100 }}>
+								<Slider type="single" bind:value={top_p} min={0} max={2} step={0.01} class="mt-2" />
+								<Input
+									type="number"
+									min={0}
+									max={2}
+									step={0.1}
+									bind:value={top_p}
+									class="h-7! w-24!"
+								/>
+							</div>
+						{/if}
+					</div>
 				</div>
-			</div>
-			<!-- <header class="border-t border-border">
-					<h4 class="text-sm leading-none font-medium text-muted-foreground">Provider</h4>
-				</header> -->
-			<!-- <main class="w-full">
-					
-				</main> -->
-			<div class="flex items-center justify-end gap-3 px-3">
-				<Button variant="outline">Reset</Button>
-				<Button class="flex-1" onclick={handleSave}>
-					{#if loading}
-						<Spinner className="text-lg" />
-						Saving...
-					{:else}
-						<Save />
-						Save settings
-					{/if}
-				</Button>
-			</div>
-		</main>
+				<!-- <header class="border-t border-border">
+						<h4 class="text-sm leading-none font-medium text-muted-foreground">Provider</h4>
+					</header> -->
+				<!-- <main class="w-full">
+						
+					</main> -->
+				<div class="flex items-center justify-end gap-3 px-3">
+					<Button variant="outline">Reset</Button>
+					<Button class="flex-1" onclick={handleSave}>
+						{#if loading}
+							<Spinner className="text-lg" />
+							Saving...
+						{:else}
+							<Save />
+							Save settings
+						{/if}
+					</Button>
+				</div>
+			</main>
+		{/if}
 	</Dialog.Content>
 </Dialog.Root>

src/lib/state/models.svelte.ts

@@ -1,21 +1,73 @@
 import type { ChatModel } from '$lib/helpers/types';
 
 const HF_API = 'https://router.huggingface.co/v1/models';
+const STORAGE_KEY = 'hf-playground-models-settings';
 
-// function mapHFModelToChatModel(hfModel: ChatModel): ChatModel {
-// 	const [author, modelName] = hfModel.modelId.split('/');
-// 	const isTextGen = hfModel.pipeline_tag === 'text-generation';
-// 	const isImageText = hfModel.pipeline_tag === 'image-text-to-text';
-// 	return {
-// 		id: hfModel.modelId,
-// 		modelName,
-// 		author,
-// 		modelId: hfModel.modelId,
-// 		avatarUrl: `https://huggingface.co/api/avatars/${author}`,
-// 		pipeline_tag: isTextGen ? 'text-generation' : isImageText ? 'image-text-to-text' : undefined,
-// 		provider: 'auto'
-// 	};
-// }
+export interface StoredModelSettings {
+	modelId: string;
+	temperature?: number;
+	top_p?: number;
+	max_tokens?: number;
+	provider?: string;
+}
+
+function loadStoredSettings(): Record<string, StoredModelSettings> {
+	if (typeof window === 'undefined') return {};
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (!raw) return {};
+		const parsed = JSON.parse(raw) as StoredModelSettings[];
+		return Object.fromEntries(parsed.map((s) => [s.modelId, s]));
+	} catch {
+		return {};
+	}
+}
+
+function saveStoredSettings(settings: StoredModelSettings[]) {
+	if (typeof window === 'undefined') return;
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+	} catch {
+		// ignore
+	}
+}
+
+function mergeModelsWithStoredSettings(models: ChatModel[]): ChatModel[] {
+	const stored = loadStoredSettings();
+	return models.map((m) => {
+		const custom = stored[m.id];
+		if (!custom) return m;
+		return {
+			...m,
+			temperature: custom.temperature ?? m.temperature,
+			top_p: custom.top_p ?? m.top_p,
+			max_tokens: custom.max_tokens ?? m.max_tokens,
+			provider: custom.provider ?? m.provider ?? 'auto'
+		};
+	});
+}
+
+export function saveModelSettings(
+	modelId: string,
+	settings: Pick<StoredModelSettings, 'temperature' | 'top_p' | 'max_tokens' | 'provider'>
+) {
+	modelsState.models = modelsState.models.map((m) =>
+		m.id === modelId ? { ...m, ...settings } : m
+	);
+
+	const stored = loadStoredSettings();
+	const existing = stored[modelId] ?? { modelId };
+	const toStore = { ...existing, modelId } as StoredModelSettings & Record<string, unknown>;
+	for (const [key, value] of Object.entries(settings)) {
+		if (value === undefined) {
+			delete toStore[key];
+		} else {
+			toStore[key] = value;
+		}
+	}
+	stored[modelId] = toStore as StoredModelSettings;
+	saveStoredSettings(Object.values(stored));
+}
 
 export const modelsState = $state({
 	models: [] as ChatModel[],
@@ -33,8 +85,7 @@ export async function fetchModels() {
 		if (!response.ok) throw new Error(response.statusText);
 
 		const { data: models } = (await response.json()) as { data: ChatModel[] };
-		console.log('models', models);
-		modelsState.models = models;
+		modelsState.models = mergeModelsWithStoredSettings(models);
 	} catch (e) {
 		modelsState.error = e instanceof Error ? e.message : 'Failed to fetch models';
 		modelsState.models = [];

src/routes/+page.svelte

@@ -40,7 +40,9 @@
 					isFirstNode: true,
 					showWelcome: true,
 					isParentNode: true,
-					selectedModels: modelsState.models.slice(0, MAX_DEFAULT_MODELS) as ChatModel[]
+					selectedModels: modelsState.models
+						.slice(0, MAX_DEFAULT_MODELS)
+						?.map((m) => m.id) as string[]
 				}
 			}
 		];