Link to provider (#1938)

* Upgrade dep

* link to provider's page on the Hub

* add rounding

* Update ChatMessage.svelte

* Update provider type to InferenceProvider

Replaces the provider type from string to InferenceProvider in endpoint and message update types for improved type safety and consistency with @huggingface/inference.

* Remove model author avatar from chat message link

Eliminated the model author avatar image from the chat message model link and adjusted the link's padding for consistency. Also fixed the Hugging Face organization link to use curly braces for variable interpolation.

* Switch provider logos to dynamic avatars from Hugging Face

Replaces static SVG provider logos with dynamic avatars fetched from Hugging Face organization API. Removes all local SVG assets for provider logos and updates the settings page to use the new avatar URLs, improving maintainability and ensuring up-to-date branding.

* Remove unused variable and fix type in settings page

Deleted an unused 'modelAuthor' constant in ChatMessage.svelte. Updated type assertion for 'hubOrg' in the settings page to ensure correct key usage with PROVIDERS_HUB_ORGS.

---------

Co-authored-by: Victor Muštar <[email protected]>

Author: julien-c

package-lock.json

@@ -68,7 +68,7 @@
 	"dependencies": {
 		"@elysiajs/swagger": "^1.3.0",
 		"@huggingface/hub": "^2.2.0",
-		"@huggingface/inference": "^3.12.1",
+		"@huggingface/inference": "^4.11.3",
 		"@iconify-json/bi": "^1.1.21",
 		"@resvg/resvg-js": "^2.6.2",
 		"autoprefixer": "^10.4.14",

package.json

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { Message } from "$lib/types/Message";
 	import { tick } from "svelte";
-	import { base } from "$app/paths";
 
 	import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
 	const publicConfig = usePublicConfig();
@@ -17,6 +16,7 @@
 	import OpenReasoningResults from "./OpenReasoningResults.svelte";
 	import Alternatives from "./Alternatives.svelte";
 	import MessageAvatar from "./MessageAvatar.svelte";
+	import { PROVIDERS_HUB_ORGS } from "@huggingface/inference";
 
 	interface Props {
 		message: Message;
@@ -177,7 +177,7 @@
 							{#if publicConfig.isHuggingChat}
 								<a
 									href="/chat/settings/{message.routerMetadata.model}"
-									class="truncate rounded bg-gray-100 px-1 font-mono hover:text-gray-500 dark:bg-gray-800 dark:hover:text-gray-300 sm:py-px"
+									class="flex items-center gap-1 truncate rounded bg-gray-100 px-1 font-mono hover:text-gray-500 dark:bg-gray-800 dark:hover:text-gray-300 sm:py-px"
 								>
 									{message.routerMetadata.model.split("/").pop()}
 								</a>
@@ -190,18 +190,21 @@
 							{/if}
 						{/if}
 						{#if message.routerMetadata.provider}
+							{@const hubOrg = PROVIDERS_HUB_ORGS[message.routerMetadata.provider]}
 							<span class="text-gray-500 max-sm:hidden">via</span>
-							<span
-								class="flex items-center gap-1 truncate rounded bg-gray-100 pl-1 pr-1.5 font-mono dark:bg-gray-800 max-sm:hidden sm:py-px"
+							<a
+								target="_blank"
+								href="https://huggingface.co/{hubOrg}"
+								class="flex items-center gap-1 truncate rounded bg-gray-100 px-1 font-mono hover:text-gray-500 dark:bg-gray-800 dark:hover:text-gray-300 max-sm:hidden sm:py-px"
 							>
 								<img
-									src={`${base}/huggingchat/providers/${message.routerMetadata.provider}.svg`}
+									src="https://huggingface.co/api/organizations/{hubOrg}/avatar"
 									alt="{message.routerMetadata.provider} logo"
-									class="size-2.5 flex-none"
+									class="size-2.5 flex-none rounded-sm"
 									onerror={(e) => ((e.currentTarget as HTMLImageElement).style.display = "none")}
 								/>
 								{message.routerMetadata.provider}
-							</span>
+							</a>
 						{/if}
 					</div>
 				{/if}

src/lib/components/chat/ChatMessage.svelte

@@ -1,6 +1,10 @@
 import type { Conversation } from "$lib/types/Conversation";
 import type { Message } from "$lib/types/Message";
-import type { TextGenerationStreamOutput, TextGenerationStreamToken } from "@huggingface/inference";
+import type {
+	TextGenerationStreamOutput,
+	TextGenerationStreamToken,
+	InferenceProvider,
+} from "@huggingface/inference";
 import { z } from "zod";
 import { endpointOAIParametersSchema, endpointOai } from "./openai/endpointOai";
 import type { Model } from "$lib/types/Model";
@@ -21,7 +25,7 @@ export interface EndpointParameters {
 
 export type TextGenerationStreamOutputSimplified = TextGenerationStreamOutput & {
 	token: TextGenerationStreamToken;
-	routerMetadata?: { route?: string; model?: string; provider?: string };
+	routerMetadata?: { route?: string; model?: string; provider?: InferenceProvider };
 };
 // type signature for the endpoint
 export type Endpoint = (

src/lib/server/endpoints/endpoints.ts

@@ -1,3 +1,4 @@
+import type { InferenceProvider } from "@huggingface/inference";
 import type { MessageUpdate } from "./MessageUpdate";
 import type { Timestamps } from "./Timestamps";
 import type { v4 } from "uuid";
@@ -20,7 +21,7 @@ export type Message = Partial<Timestamps> & {
 	routerMetadata?: {
 		route: string;
 		model: string;
-		provider?: string;
+		provider?: InferenceProvider;
 	};
 
 	// needed for conversation trees

src/lib/types/Message.ts

@@ -1,3 +1,5 @@
+import type { InferenceProvider } from "@huggingface/inference";
+
 export type MessageUpdate =
 	| MessageStatusUpdate
 	| MessageTitleUpdate
@@ -74,5 +76,5 @@ export interface MessageRouterMetadataUpdate {
 	type: MessageUpdateType.RouterMetadata;
 	route: string;
 	model: string;
-	provider?: string;
+	provider?: InferenceProvider;
 }

src/lib/types/MessageUpdate.ts

@@ -14,6 +14,7 @@
 	import { goto } from "$app/navigation";
 	import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
 	import Switch from "$lib/components/Switch.svelte";
+	import { PROVIDERS_HUB_ORGS } from "@huggingface/inference";
 
 	const publicConfig = usePublicConfig();
 	const settings = useSettingsStore();
@@ -231,15 +232,17 @@
 				</div>
 				<ul class="mb-0.5 flex flex-wrap gap-2">
 					{#each providerList as prov, i (prov.provider || i)}
+						{@const hubOrg = PROVIDERS_HUB_ORGS[prov.provider as keyof typeof PROVIDERS_HUB_ORGS]}
 						<li>
 							<span
 								class="flex items-center gap-1 rounded-md bg-gray-100 py-0.5 pl-1.5 pr-2 text-xs text-gray-700 dark:bg-gray-700/60 dark:text-gray-200"
 							>
-								{#if prov.provider}
+								{#if hubOrg}
 									<img
-										class="h-[14px] w-auto"
-										src={`${base}/huggingchat/providers/${prov.provider}.svg`}
+										src="https://huggingface.co/api/organizations/{hubOrg}/avatar"
 										alt="{prov.provider} logo"
+										class="size-2.5 flex-none rounded-sm"
+										onerror={(e) => ((e.currentTarget as HTMLImageElement).style.display = "none")}
 									/>
 								{/if}
 								{prov.provider}