map providers name

src/lib/components/model/SettingsModel.svelte

@@ -3,7 +3,7 @@
 	import { ExternalLink, Frown, Plus, Save, X } from '@lucide/svelte';
 
 	import type { ChatModel } from '$lib/helpers/types';
-	import { formatPricingPerToken } from '$lib/index.js';
+	import { formatPricingPerToken, getProviderName } from '$lib/index.js';
 	import { Button } from '$lib/components/ui/button';
 	import { Slider } from '$lib/components/ui/slider';
 	import Input from '$lib/components/ui/input/input.svelte';
@@ -198,14 +198,15 @@
 									<Select.Group>
 										<Select.GroupHeading>Specific provider</Select.GroupHeading>
 										{#each model.providers as provider}
+											{@const providerName = getProviderName(provider.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}
+														src={`https://huggingface.co/api/avatars/${providerName}`}
+														alt={providerName}
 														class="size-4 rounded"
 													/>
-													{provider.provider}
+													{providerName}
 												</div>
 												{#if formatPricingPerToken(provider.pricing)}
 													<span class="text-xs text-muted-foreground">

src/lib/index.ts

@@ -25,3 +25,10 @@ export function formatUsageCost(pricing: ChatModelProvider['pricing'], usage: To
 	if (total === 0) return null;
 	return `$${total.toFixed(6)}`;
 }
+
+export function getProviderName(provider: string) {
+	const providersMap = {
+		together: 'togethercomputer'
+	};
+	return providersMap[provider as keyof typeof providersMap] ?? provider;
+}