fix snippets

Author: TGlide

.prettierrc.mjs

@@ -1,7 +1,7 @@
 export default {
 	arrowParens: "avoid",
 	quoteProps: "consistent",
-	trailingComma: "es5",
+	trailingComma: "all",
 	useTabs: true,
 	tabWidth: 2,
 	printWidth: 120,

package.json

@@ -22,7 +22,7 @@
 		"@eslint/js": "^9.22.0",
 		"@floating-ui/dom": "^1.6.13",
 		"@huggingface/hub": "^2.1.0",
-		"@huggingface/inference": "^3.13.2",
+		"@huggingface/inference": "^4.4.0",
 		"@huggingface/tasks": "^0.19.8",
 		"@huggingface/transformers": "^3.5.1",
 		"@iconify-json/carbon": "^1.2.8",

pnpm-lock.yaml

@@ -82,8 +82,8 @@
 		fromEntries(
 			keys(labelsByLanguage).map(lang => {
 				return [lang, 0];
-			})
-		)
+			}),
+		),
 	);
 
 	type InstallInstructions = {
@@ -147,7 +147,9 @@
 		class="border-b border-gray-200 text-center text-sm font-medium text-gray-500 dark:border-gray-700 dark:text-gray-400"
 	>
 		<ul class="-mb-px flex flex-wrap">
-			{#each entries(labelsByLanguage) as [language, label]}
+			{#each entries(labelsByLanguage).filter(([lang]) => {
+				return snippetsByLang[lang]?.length;
+			}) as [language, label]}
 				<li>
 					<button
 						onclick={() => (lang = language)}
@@ -218,7 +220,7 @@
 		<pre
 			class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-xs dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
 				installInstructions.content,
-				selectedSnippet?.language
+				selectedSnippet?.language,
 			)}</pre>
 	{/if}
 
@@ -253,6 +255,6 @@
 	<pre
 		class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-xs dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
 			selectedSnippet?.content,
-			selectedSnippet?.language
+			selectedSnippet?.language,
 		)}</pre>
 </div>

src/lib/components/inference-playground/code-snippets.svelte

@@ -161,6 +161,7 @@ export enum Provider {
 	Together = "together",
 	Cohere = "cohere",
 	Groq = "groq",
+	Auto = "auto",
 }
 
 export enum Status {

src/lib/types.ts

@@ -21,7 +21,6 @@ import {
 } from "$lib/types.js";
 import { safeParse } from "$lib/utils/json.js";
 import { omit, tryGet } from "$lib/utils/object.svelte.js";
-import { type InferenceProvider } from "@huggingface/inference";
 import type { ChatCompletionInputMessage, InferenceSnippet } from "@huggingface/tasks";
 import { type ChatCompletionOutputMessage } from "@huggingface/tasks";
 import { AutoTokenizer, PreTrainedTokenizer } from "@huggingface/transformers";
@@ -120,7 +119,7 @@ function getResponseFormatObj(conversation: ConversationClass | Conversation) {
 
 async function getCompletionMetadata(
 	conversation: ConversationClass | Conversation,
-	signal?: AbortSignal
+	signal?: AbortSignal,
 ): Promise<CompletionMetadata> {
 	const data = conversation instanceof ConversationClass ? conversation.data : conversation;
 	const model = conversation.model;
@@ -180,7 +179,7 @@ async function getCompletionMetadata(
 export async function handleStreamingResponse(
 	conversation: ConversationClass | Conversation,
 	onChunk: (content: string) => void,
-	abortController: AbortController
+	abortController: AbortController,
 ): Promise<void> {
 	const metadata = await getCompletionMetadata(conversation, abortController.signal);
 
@@ -211,7 +210,7 @@ export async function handleStreamingResponse(
 }
 
 export async function handleNonStreamingResponse(
-	conversation: ConversationClass | Conversation
+	conversation: ConversationClass | Conversation,
 ): Promise<{ message: ChatCompletionOutputMessage; completion_tokens: number }> {
 	const metadata = await getCompletionMetadata(conversation);
 
@@ -325,26 +324,25 @@ export function getInferenceSnippet(
 		temperature?: ConversationEntityMembers["config"]["temperature"];
 		top_p?: ConversationEntityMembers["config"]["top_p"];
 		structured_output?: ConversationEntityMembers["structuredOutput"];
-	}
+	},
 ): GetInferenceSnippetReturn {
 	const model = conversation.model;
 	const data = conversation.data;
-	const provider = (isCustomModel(model) ? "hf-inference" : data.provider) as InferenceProvider;
+	const provider = (isCustomModel(model) ? "hf-inference" : data.provider) as Provider;
 
 	// If it's a custom model, we don't generate inference snippets
 	if (isCustomModel(model)) {
 		return [];
 	}
 
 	const providerMapping = model.inferenceProviderMapping.find(p => p.provider === provider);
-	if (!providerMapping) return [];
+	if (!providerMapping && provider !== "auto") return [];
 	const allSnippets = snippets.getInferenceSnippets(
 		{ ...model, inference: "" },
-		accessToken,
 		provider,
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		{ ...providerMapping, hfModelId: model.id } as any,
-		opts
+		{ ...opts, accessToken },
 	);
 
 	return allSnippets