use v1 router models hf + fixes

src/lib/components/chat/Assistant.svelte

@@ -16,6 +16,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import Message from './Message.svelte';
 	import Spinner from '$lib/components/loading/Spinner.svelte';
+	import { formatUsageCost } from '$lib';
 
 	let { id }: NodeProps = $props();
 
@@ -121,11 +122,11 @@
 						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"
 					>
 						<img
-							src={selectedModel.avatarUrl}
-							alt={selectedModel.modelName}
+							src={`https://huggingface.co/api/avatars/${selectedModel.owned_by}`}
+							alt={selectedModel.id}
 							class="size-3.5 rounded-full"
 						/>
-						{selectedModel.modelName}
+						{selectedModel.id.split('/').pop() ?? selectedModel.id}
 					</div>
 				</div>
 			</header>
@@ -143,29 +144,43 @@
 			{/if}
 		</div>
 		{#if usage && !loading && message}
-			{@const provider = selectedModel.provider}
-			<p class="mt-3 border-t border-border pt-3 text-xs text-muted-foreground">
-				{usage.total_tokens} tokens
-				{#if message.timestamp}
-					<span class="mx-0.5">&middot;</span> Latency {message.timestamp}ms
-				{/if}
-				<span class="inline-flex items-center gap-0.5">
-					<span>&middot;</span> Using
-					<span class="inline-flex items-center gap-1 rounded-full bg-muted py-0.5 pr-2 pl-1">
-						{#if provider === 'auto'}
-							<Star class="size-3.5 fill-yellow-500 text-yellow-500" />
-						{:else}
-							<img
-								src={`https://huggingface.co/api/avatars/${provider}`}
-								alt={provider}
-								class="size-4 rounded-full"
-							/>
-						{/if}
-						{provider}
+			{@const provider = selectedModel.provider ?? 'auto'}
+			<div class="mt-3 flex items-center justify-between gap-2 border-t border-border pt-3">
+				<p class="text-xs text-muted-foreground">
+					{usage.total_tokens} tokens
+					{#if formatUsageCost(
+						selectedModel.providers.find((p) => p.provider === provider)?.pricing,
+						usage
+					)}
+						<span class="mx-0.5">&middot;</span>
+						{formatUsageCost(
+							selectedModel.providers.find((p) => p.provider === provider)?.pricing,
+							usage
+						)}
+					{/if}
+					{#if message.timestamp}
+						<span class="mx-0.5">&middot;</span> Latency {message.timestamp}ms
+					{/if}
+				</p>
+				<p class="text-xs text-muted-foreground">
+					<span class="inline-flex items-center gap-0.5">
+						Using
+						<span class="inline-flex items-center gap-1 rounded-full bg-muted py-0.5 pr-2 pl-1">
+							{#if provider === 'auto'}
+								<Star class="size-3.5 fill-yellow-500 text-yellow-500" />
+							{:else}
+								<img
+									src={`https://huggingface.co/api/avatars/${provider}`}
+									alt={provider}
+									class="size-4 rounded-full"
+								/>
+							{/if}
+							{provider}
+						</span>
+						provider
 					</span>
-					provider
-				</span>
-			</p>
+				</p>
+			</div>
 		{/if}
 	</div>
 	<Button

src/lib/components/chat/User.svelte

@@ -319,6 +319,7 @@
 								id,
 								{
 									...nodeData.current,
+									isFirstNode: nodeData.current?.data.isFirstNode ?? false,
 									selectedModels: selectedModels.map((m) => (m.id === model.id ? model : m))
 								},
 								{ replace: true }
@@ -331,8 +332,12 @@
 							size="sm"
 							class="group relative font-normal! shadow-none!"
 						>
-							<img src={model.avatarUrl} alt={model.modelName} class="size-3.5 rounded-full" />
-							{model.modelName}
+							<img
+								src={`https://huggingface.co/api/avatars/${model.owned_by}`}
+								alt={model.id}
+								class="size-3.5 rounded-full"
+							/>
+							{model.id.split('/').pop() ?? model.id}
 							{#if !lastMessage || model.isError || selectedModels.length > MAX_MODELS_PER_NODE}
 								<Button
 									variant="default"

src/lib/components/model/ComboBoxModels.svelte

@@ -18,7 +18,7 @@
 
 	const filteredModels = $derived(
 		modelsState.models.filter((m) => {
-			const matchesSearch = !search || m.modelId.toLowerCase().includes(search.toLowerCase());
+			const matchesSearch = !search || m.id.toLowerCase().includes(search.toLowerCase());
 			const notExcluded = !excludeIds.includes(m.id);
 			return matchesSearch && notExcluded;
 		})
@@ -68,8 +68,12 @@
 							open = false;
 						}}
 					>
-						<img src={model.avatarUrl} alt="" class="size-4 rounded-full" />
-						<span>{model.modelName}</span>
+						<img
+							src={`https://huggingface.co/api/avatars/${model.owned_by}`}
+							alt=""
+							class="size-4 rounded-full"
+						/>
+						<span>{model.id.split('/').pop() ?? model.id}</span>
 					</Command.Item>
 				{/each}
 				<Command.Separator />
@@ -82,9 +86,12 @@
 							open = false;
 						}}
 					>
-						<span>
-							<span class="font-medium">{model.author}</span>/{model.modelName}
-						</span>
+						<img
+							src={`https://huggingface.co/api/avatars/${model.owned_by}`}
+							alt=""
+							class="size-4 rounded-full"
+						/>
+						<span>{model.id.split('/').pop() ?? model.id}</span>
 					</Command.Item>
 				{/each}
 			</Command.Group>

src/lib/components/model/SettingsModel.svelte

@@ -4,11 +4,11 @@
 
 	import * as Popover from '$lib/components/ui/popover/index.js';
 	import type { ChatModel } from '$lib/helpers/types';
+	import { formatPricingPerToken } 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';
 	import * as Select from '$lib/components/ui/select/index.js';
-	import { modeStorageKey } from 'mode-watcher';
 
 	let {
 		model,
@@ -29,20 +29,12 @@
 	let open = $state<boolean>(false);
 	// svelte-ignore state_referenced_locally
 	let provider = $state<string>(model.provider ?? 'auto');
-	let availableProviders = $state<string[]>([]);
 
-	async function getProviders() {
-		const response = await fetch(`https://router.huggingface.co/v1/models/${model.id}`);
-		const { data } = await response.json();
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		return data.providers.map((provider: any) => provider.provider);
-	}
-
-	$effect(() => {
-		getProviders().then((providers) => {
-			availableProviders = providers;
-		});
-	});
+	let maxContentLength = $derived(
+		provider === 'auto'
+			? model.providers[0]?.context_length
+			: model.providers.find((p) => p.provider === provider)?.context_length
+	);
 </script>
 
 <Popover.Root
@@ -96,14 +88,16 @@
 						<h4 class="text-sm leading-none font-medium">Max Tokens</h4>
 						<div class="flex items-center gap-1">
 							{#if max_tokens === undefined}
-								<Button variant="outline-blue" size="2xs" onclick={() => (max_tokens = 32000)}
-									>Set</Button
+								<Button
+									variant="outline-blue"
+									size="2xs"
+									onclick={() => (max_tokens = (maxContentLength ?? 32_000) / 2)}>Set</Button
 								>
 							{:else}
 								<Input
 									type="number"
 									min={0}
-									max={204800}
+									max={maxContentLength}
 									step={256}
 									placeholder="—"
 									class="h-7! w-24!"
@@ -120,7 +114,7 @@
 							type="single"
 							bind:value={max_tokens}
 							min={0}
-							max={204800}
+							max={maxContentLength}
 							step={256}
 							class="mt-2"
 						/>
@@ -176,16 +170,21 @@
 						<Select.Item value="auto"
 							><Star class="size-4 fill-yellow-500 text-yellow-500" /> Auto</Select.Item
 						>
-						{#each availableProviders as provider}
-							<Select.Item value={provider}>
+						{#each model.providers as provider}
+							<Select.Item value={provider.provider}>
 								<div class="flex items-center gap-2">
 									<img
-										src={`https://huggingface.co/api/avatars/${provider}`}
-										alt={provider}
+										src={`https://huggingface.co/api/avatars/${provider.provider}`}
+										alt={provider.provider}
 										class="size-4"
 									/>
-									{provider}
+									{provider.provider}
 								</div>
+								{#if formatPricingPerToken(provider.pricing)}
+									<span class="text-xs text-muted-foreground"
+										>{formatPricingPerToken(provider.pricing)}</span
+									>
+								{/if}
 							</Select.Item>
 						{/each}
 					</Select.Content>

src/lib/helpers/types.ts

@@ -1,17 +1,34 @@
 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;
-	modelId: string;
-	modelName: string;
-	author: string;
-	avatarUrl: string;
-	pipeline_tag?: 'text-generation' | 'image-text-to-text';
-	likes?: number;
-	downloads?: number;
+	owned_by: string;
+	providers: ChatModelProvider[];
+	provider: string;
+	isError?: boolean;
 	temperature?: number;
 	max_tokens?: number;
 	top_p?: number;
+}
+
+export interface ChatModelProvider {
 	provider: string;
-	isError?: boolean;
+	context_length?: number;
+	pricing?: {
+		input: number;
+		output: number;
+	};
 }
 
 export interface ChatMessage {

src/lib/index.ts

@@ -1,4 +1,27 @@
+import type { ChatModelProvider, TokenUsage } from './helpers/types';
+
 export const MAX_MODELS_PER_NODE = 5;
-export const MAX_TRENDING_MODELS = 6;
+export const MAX_TRENDING_MODELS = 10;
 export const MAX_SUGGESTIONS = 2;
 export const MAX_DEFAULT_MODELS = 2;
+
+export function formatPricingCost(pricing: ChatModelProvider['pricing'], amount: number) {
+	if (!pricing) return null;
+	return `$${pricing.input * amount} for input, $${pricing.output * amount} for output`;
+}
+
+export function formatPricingPerToken(pricing: ChatModelProvider['pricing']) {
+	if (!pricing) return null;
+	const inPrice = pricing.input.toFixed(2);
+	const outPrice = pricing.output.toFixed(2);
+	return `In: $${inPrice}/1M • Out: $${outPrice}/1M`;
+}
+
+export function formatUsageCost(pricing: ChatModelProvider['pricing'], usage: TokenUsage) {
+	if (!pricing || !usage) return null;
+	const inputCost = (pricing.input / 1_000_000) * (usage.prompt_tokens ?? 0);
+	const outputCost = (pricing.output / 1_000_000) * (usage.completion_tokens ?? 0);
+	const total = inputCost + outputCost;
+	if (total === 0) return null;
+	return `$${total.toFixed(6)}`;
+}

src/lib/state/models.svelte.ts

@@ -1,21 +1,21 @@
 import type { ChatModel } from '$lib/helpers/types';
 
-const HF_API = 'https://huggingface.co/api/models';
-
-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'
-	};
-}
+const HF_API = 'https://router.huggingface.co/v1/models';
+
+// 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 const modelsState = $state({
 	models: [] as ChatModel[],
@@ -28,18 +28,12 @@ export async function fetchModels() {
 	modelsState.error = null;
 
 	try {
-		const responses = await Promise.all([
-			fetch(`${HF_API}?pipeline_tag=text-generation&limit=100&inference_provider=all`),
-			fetch(`${HF_API}?pipeline_tag=image-text-to-text&limit=100&inference_provider=all`)
-		]);
-
-		for (const res of responses) {
-			if (!res.ok) throw new Error(res.statusText);
-		}
+		const response = await fetch(HF_API);
 
-		const modelsArrays = (await Promise.all(responses.map((r) => r.json()))) as ChatModel[][];
+		if (!response.ok) throw new Error(response.statusText);
 
-		modelsState.models = modelsArrays.flatMap((models) => models.map(mapHFModelToChatModel));
+		const { data: models } = (await response.json()) as { data: ChatModel[] };
+		modelsState.models = models;
 	} catch (e) {
 		modelsState.error = e instanceof Error ? e.message : 'Failed to fetch models';
 		modelsState.models = [];

src/lib/state/view.svelte.ts

@@ -1,3 +1,3 @@
 export const viewState = $state({
-	draggable: localStorage.getItem('hf-playground-draggable-option') ?? true
+	draggable: Boolean(localStorage.getItem('hf-playground-draggable-option') ?? true)
 });