fix snippets

.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

@@ -34,8 +34,8 @@ importers:
         specifier: ^2.1.0
         version: 2.1.0
       '@huggingface/inference':
-        specifier: ^3.13.2
-        version: 3.13.2
+        specifier: ^4.4.0
+        version: 4.4.0
       '@huggingface/tasks':
         specifier: ^0.19.8
         version: 0.19.8
@@ -589,8 +589,8 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  '@huggingface/inference@3.13.2':
-    resolution: {integrity: sha512-s9grNTO33FeBIvKg4KjnG3sTQWppGDTdQxtpaVqKtn2Hl24yKwc59TfwNAKDzW12aZrc9njYBPwA/Y/mxX/kew==}
+  '@huggingface/inference@4.4.0':
+    resolution: {integrity: sha512-YpkegUf1Mnrhkh+Tv47yIsA0+OEP73ODdn8GjMOG7Jf86y6MxO8LNGDVUUreg+Y4VgVq//j9j/tmENa8tYR4Dg==}
     engines: {node: '>=18'}
 
   '@huggingface/[email protected]':
@@ -601,6 +601,9 @@ packages:
     resolution: {integrity: sha512-Ptc03/jGRiYRoi0bUYKZ14MkDslsBRT24oxmsvUlfYrvQMldrxCevhPnT+hfX8awKTT8/f/0ZBBWldoeAcMHdQ==}
     engines: {node: '>=18'}
 
+  '@huggingface/[email protected]':
+    resolution: {integrity: sha512-jtRXsJZTES01X4gJ5VOUnEm3ONyyfXUcWKObbWkr/SQmjaH/kxtWqc2zVWKaxL4QLoXqXJ+T+Pi5xupMStSudQ==}
+
   '@huggingface/[email protected]':
     resolution: {integrity: sha512-gR88OvYQQ2zu1Dt/tfFRVWJRfsKCdssxJBb8bz3tVd9fh3rneNE/pjkaGyG3oT1VlHv7wEmrqrnkmMcXy8O0rg==}
 
@@ -3545,15 +3548,17 @@ snapshots:
     dependencies:
       '@huggingface/tasks': 0.19.8
 
-  '@huggingface/inference@3.13.2':
+  '@huggingface/inference@4.4.0':
     dependencies:
       '@huggingface/jinja': 0.5.0
-      '@huggingface/tasks': 0.19.8
+      '@huggingface/tasks': 0.19.22
 
   '@huggingface/[email protected]': {}
 
   '@huggingface/[email protected]': {}
 
+  '@huggingface/[email protected]': {}
+
   '@huggingface/[email protected]': {}
 
   '@huggingface/[email protected]':

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

@@ -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/types.ts

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

src/lib/utils/business.svelte.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,11 +324,11 @@ 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)) {
@@ -337,14 +336,13 @@ export function getInferenceSnippet(
 	}
 
 	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