show model that supports image input

src/lib/components/model/ListModels.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { X } from '@lucide/svelte';
+	import { Image, X } from '@lucide/svelte';
 
 	import { Button } from '$lib/components/ui/button';
 	import SettingsModel from './SettingsModel.svelte';
+	import { modelsState } from '$lib/state/models.svelte';
+	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
 
 	let {
 		selectedModels,
@@ -15,7 +17,8 @@
 	} = $props();
 </script>
 
-{#each selectedModels as model}
+{#each selectedModels as model (model)}
+	{@const modelData = modelsState.models.find((m) => m.id === model)}
 	{#if !showSelector}
 		<div
 			class="group relative inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-md border bg-background px-3 text-sm font-normal! text-gray-600 has-[>svg]:px-2.5 dark:border-input dark:bg-input/30 dark:text-gray-400"
@@ -36,6 +39,20 @@
 					class="size-3.5 rounded"
 				/>
 				{model.split('/').pop() ?? model}
+				{#if modelData?.architecture?.input_modalities?.includes('image')}
+					<Tooltip.Root delayDuration={0}>
+						<Tooltip.Trigger>
+							<span
+								class="flex size-4 items-center justify-center rounded bg-gray-500/10 text-xs text-gray-500"
+							>
+								<Image class="size-2.5" />
+							</span>
+						</Tooltip.Trigger>
+						<Tooltip.Content>
+							<p>This model supports image input.</p>
+						</Tooltip.Content>
+					</Tooltip.Root>
+				{/if}
 				<Button
 					variant="default"
 					size="icon-3xs"

src/lib/components/model/SettingsModel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { Check, ExternalLink, Frown, MessageCircle, Plus, Save, X } from '@lucide/svelte';
+	import { Check, ExternalLink, Frown, MessageCircle, Save, X, Image } from '@lucide/svelte';
 
 	import type { ChatModel } from '$lib/helpers/types';
 	import { formatPricingPerToken, getProviderName } from '$lib/index.js';
@@ -65,7 +65,8 @@
 		if (loading) return;
 		loading = true;
 		await new Promise((resolve) => setTimeout(resolve, 600));
-		saveModelSettings(model?.id!, { temperature, top_p, max_tokens, provider });
+		if (!model) return;
+		saveModelSettings(model.id, { temperature, top_p, max_tokens, provider });
 		loading = false;
 		open = false;
 	}
@@ -123,7 +124,7 @@
 								>
 							</div>
 						{/if}
-						{#each modelsFiltered as mdl, index}
+						{#each modelsFiltered as mdl (mdl.id)}
 							<button
 								class="{mdl.id === model?.id
 									? 'from-blue-500/20! to-blue-500/5! dark:from-blue-500/50! dark:to-blue-500/20!'
@@ -143,22 +144,40 @@
 										</span>
 									</span>
 								</span>
-								{#if selectedModels.includes(mdl.id)}
-									<Tooltip.Root delayDuration={0}>
-										<Tooltip.Trigger>
-											<span
-												class="flex size-[18px] items-center justify-center rounded bg-indigo-500/10 text-indigo-500"
-											>
-												<MessageCircle class="size-2.5 fill-indigo-500" />
-											</span>
-										</Tooltip.Trigger>
-										<Tooltip.Content>
-											<p class="flex items-center gap-1">
-												<Check class="size-3.5" /> This model will be used in the chat
-											</p>
-										</Tooltip.Content>
-									</Tooltip.Root>
-								{/if}
+								<div class="flex items-center gap-1">
+									{#if mdl.architecture?.input_modalities?.includes('image')}
+										<Tooltip.Root delayDuration={0}>
+											<Tooltip.Trigger>
+												<span
+													class="flex size-[18px] items-center justify-center rounded bg-gray-500/10 text-gray-500"
+												>
+													<Image class="size-2.5" />
+												</span>
+											</Tooltip.Trigger>
+											<Tooltip.Content>
+												<p class="flex items-center gap-1">
+													<Check class="size-3.5" /> This model supports image input
+												</p>
+											</Tooltip.Content>
+										</Tooltip.Root>
+									{/if}
+									{#if selectedModels.includes(mdl.id)}
+										<Tooltip.Root delayDuration={0}>
+											<Tooltip.Trigger>
+												<span
+													class="flex size-[18px] items-center justify-center rounded bg-indigo-500/10 text-indigo-500"
+												>
+													<MessageCircle class="size-2.5 fill-indigo-500" />
+												</span>
+											</Tooltip.Trigger>
+											<Tooltip.Content>
+												<p class="flex items-center gap-1">
+													<Check class="size-3.5" /> This model will be used in the flow
+												</p>
+											</Tooltip.Content>
+										</Tooltip.Root>
+									{/if}
+								</div>
 							</button>
 						{/each}
 					</div>
@@ -224,7 +243,7 @@
 								<Select.Content>
 									<Select.Group>
 										<Select.GroupHeading>Selection mode</Select.GroupHeading>
-										{#each PROVIDER_SELECTION_MODES as mode}
+										{#each PROVIDER_SELECTION_MODES as mode (mode.value)}
 											<Select.Item value={mode.value}>
 												<div class="flex size-5 items-center justify-center rounded {mode.class}">
 													<mode.icon class="size-3 {mode.iconClass}" />
@@ -243,7 +262,7 @@
 									<Select.Separator />
 									<Select.Group>
 										<Select.GroupHeading>Specific provider</Select.GroupHeading>
-										{#each model.providers as provider}
+										{#each model.providers as provider (provider.provider)}
 											{@const providerName = getProviderName(provider.provider)}
 											<Select.Item value={provider.provider}>
 												<div class="flex items-center gap-2 capitalize">
@@ -390,9 +409,13 @@
 							</div>
 						</div>
 						<div class="flex items-center justify-end gap-3">
-							<Button variant="outline" class="flex-1" onclick={() => onToggleModel?.(model?.id!)}>
+							<Button
+								variant="outline"
+								class="flex-1"
+								onclick={() => model && onToggleModel?.(model.id)}
+							>
 								<MessageCircle class="size-4" />
-								{#if selectedModels.includes(model?.id!)}
+								{#if model && selectedModels.includes(model.id)}
 									Remove from chat
 								{:else}
 									Use this model

src/lib/helpers/types.ts

@@ -1,17 +1,4 @@
 export interface ChatModel {
-	// id: string;
-	// modelId: string;
-	// modelName: string;
-	// author: string;
-	// avatarUrl: string;
-	// pipeline_tag?: 'text-generation' | 'image-text-to-text';
-	// likes?: number;
-	// downloads?: number;
-	// temperature?: number;
-	// max_tokens?: number;
-	// top_p?: number;
-	// provider: string;
-	// isError?: boolean;
 	id: string;
 	owned_by: string;
 	providers: ChatModelProvider[];
@@ -20,6 +7,9 @@ export interface ChatModel {
 	temperature?: number;
 	max_tokens?: number;
 	top_p?: number;
+	architecture?: {
+		input_modalities?: string[];
+	};
 }
 
 export interface ChatModelProvider {