fix type check

.github/workflows/lint-and-test.yml

@@ -31,9 +31,6 @@ jobs:
             ${{ runner.os }}-pnpm-store-
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
-      - name: "SvelteKit sync"
-        run: |
-          pnpm run sync
       - name: "Checking lint/format errors"
         run: |
           pnpm run lint

.prettierignore

@@ -2,3 +2,17 @@
 package-lock.json
 pnpm-lock.yaml
 yarn.lock
+.pnpm-store
+
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+yarn.lock

package.json

@@ -6,6 +6,7 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier . --check . && eslint --ext .js,.ts,.svelte src/",
@@ -36,10 +37,9 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@huggingface/hub": "^0.15.1",
-		"@huggingface/inference": "^2.7.0",
-		"@huggingface/tasks": "^0.10.22",
-		"@tailwindcss/container-queries": "^0.1.1",
-		"runed": "^0.23.4"
+		"@huggingface/hub": "^1.0.1",
+		"@huggingface/inference": "^3.5.1",
+		"@huggingface/tasks": "^0.17.1",
+		"@tailwindcss/container-queries": "^0.1.1"
 	}
 }

pnpm-lock.yaml

@@ -9,20 +9,17 @@ importers:
   .:
     dependencies:
       '@huggingface/hub':
-        specifier: ^0.15.1
-        version: 0.15.2
+        specifier: ^1.0.1
+        version: 1.0.1
       '@huggingface/inference':
-        specifier: ^2.7.0
-        version: 2.8.1
+        specifier: ^3.5.1
+        version: 3.5.1
       '@huggingface/tasks':
-        specifier: ^0.10.22
-        version: 0.10.22
+        specifier: ^0.17.1
+        version: 0.17.1
       '@tailwindcss/container-queries':
         specifier: ^0.1.1
         version: 0.1.1([email protected])
-      runed:
-        specifier: ^0.23.4
-        version: 0.23.4([email protected])
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.2.2
@@ -254,19 +251,19 @@ packages:
     resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@huggingface/hub@0.15.2':
-    resolution: {integrity: sha512-MKu7RTkEBp8tvn0ZhBIjQwC1CHA+q8rzTYXAVklOTJEo/SZwCewVL+IcEuj4CoA5DnJ1IhyjkBquxN2dFVnEHg==}
+  '@huggingface/hub@1.0.1':
+    resolution: {integrity: sha512-wogGVETaNUV/wYBkny0uQD48L0rK9cttVtbaA1Rw/pGCuSYoZ8YlvTV6zymsGJfXaxQU8zup0aOR2XLIf6HVfg==}
     engines: {node: '>=18'}
 
-  '@huggingface/inference@2.8.1':
-    resolution: {integrity: sha512-EfsNtY9OR6JCNaUa5bZu2mrs48iqeTz0Gutwf+fU0Kypx33xFQB4DKMhp8u4Ee6qVbLbNWvTHuWwlppLQl4p4Q==}
+  '@huggingface/inference@3.5.1':
+    resolution: {integrity: sha512-NwTj5MS1eb4HfSp/O1/PyH1bEhTXl/iFh/K+8yYkUTHtK4AHXi/NDsV2LblhACaTEIhpOpYswL9cZx7z3y1tlg==}
     engines: {node: '>=18'}
 
-  '@huggingface/tasks@0.10.22':
-    resolution: {integrity: sha512-sCtp+A6sq6NXoUU7NXuXWoVNNjKddk1GTQIh3cJ6illF8S4zmFoerCVRvFf19BdgICGvF+RVZiv9sGGK9KRDTg==}
+  '@huggingface/tasks@0.15.9':
+    resolution: {integrity: sha512-cbnZcpMHKdhURWIplVP4obHxAZcxjyRm0zI7peTPksZN4CtIOMmJC4ZqGEymo0lk+0VNkXD7ULwFJ3JjT/VpkQ==}
 
-  '@huggingface/tasks@0.12.30':
-    resolution: {integrity: sha512-A1ITdxbEzx9L8wKR8pF7swyrTLxWNDFIGDLUWInxvks2ruQ8PLRBZe8r0EcjC3CDdtlj9jV1V4cgV35K/iy3GQ==}
+  '@huggingface/tasks@0.17.1':
+    resolution: {integrity: sha512-kN5F/pzwxtmdZ0jORumNyegNKOX/ciU5G/DMZcqK3SJShod4C6yfvBRCMn5sEDzanxtU8VjX+7TaInQFmmU8Nw==}
 
   '@humanwhocodes/[email protected]':
     resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
@@ -1395,11 +1392,6 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
-  [email protected]:
-    resolution: {integrity: sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA==}
-    peerDependencies:
-      svelte: ^5.7.0
-
   [email protected]:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -1775,17 +1767,17 @@ snapshots:
 
   '@eslint/[email protected]': {}
 
-  '@huggingface/hub@0.15.2':
+  '@huggingface/hub@1.0.1':
     dependencies:
-      '@huggingface/tasks': 0.12.30
+      '@huggingface/tasks': 0.15.9
 
-  '@huggingface/inference@2.8.1':
+  '@huggingface/inference@3.5.1':
     dependencies:
-      '@huggingface/tasks': 0.12.30
+      '@huggingface/tasks': 0.17.1
 
-  '@huggingface/tasks@0.10.22': {}
+  '@huggingface/tasks@0.15.9': {}
 
-  '@huggingface/tasks@0.12.30': {}
+  '@huggingface/tasks@0.17.1': {}
 
   '@humanwhocodes/[email protected]':
     dependencies:
@@ -2844,11 +2836,6 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
-  [email protected]([email protected]):
-    dependencies:
-      esm-env: 1.2.2
-      svelte: 4.2.19
-
   [email protected]:
     dependencies:
       mri: 1.2.0

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -1,37 +1,36 @@
 <script lang="ts">
-	import type { Conversation, ModelEntryWithTokenizer, Session } from "./types";
-	import type { ChatCompletionInputMessage } from "@huggingface/tasks";
+	import type { Conversation, ConversationMessage, ModelEntryWithTokenizer, Session } from "./types";
 
 	import { page } from "$app/stores";
 	import { defaultGenerationConfig } from "./generationConfigSettings";
 	import {
 		createHfInference,
-		handleStreamingResponse,
+		FEATURED_MODELS_IDS,
 		handleNonStreamingResponse,
+		handleStreamingResponse,
 		isSystemPromptSupported,
-		FEATURED_MODELS_IDS,
 	} from "./inferencePlaygroundUtils";
 
+	import { goto } from "$app/navigation";
 	import { onDestroy, onMount } from "svelte";
+	import IconCode from "../Icons/IconCode.svelte";
+	import IconCompare from "../Icons/IconCompare.svelte";
+	import IconDelete from "../Icons/IconDelete.svelte";
+	import IconInfo from "../Icons/IconInfo.svelte";
+	import IconThrashcan from "../Icons/IconThrashcan.svelte";
+	import PlaygroundConversation from "./InferencePlaygroundConversation.svelte";
+	import PlaygroundConversationHeader from "./InferencePlaygroundConversationHeader.svelte";
 	import GenerationConfig, { defaultSystemMessage } from "./InferencePlaygroundGenerationConfig.svelte";
 	import HFTokenModal from "./InferencePlaygroundHFTokenModal.svelte";
 	import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
-	import PlaygroundConversation from "./InferencePlaygroundConversation.svelte";
-	import PlaygroundConversationHeader from "./InferencePlaygroundConversationHeader.svelte";
-	import IconDelete from "../Icons/IconDelete.svelte";
-	import IconCode from "../Icons/IconCode.svelte";
-	import IconInfo from "../Icons/IconInfo.svelte";
-	import IconCompare from "../Icons/IconCompare.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-	import IconThrashcan from "../Icons/IconThrashcan.svelte";
-	import { goto } from "$app/navigation";
 
 	export let models: ModelEntryWithTokenizer[];
 
-	const startMessageUser: ChatCompletionInputMessage = { role: "user", content: "" };
+	const startMessageUser: ConversationMessage = { role: "user", content: "" };
 	const modelIdsFromQueryParam = $page.url.searchParams.get("modelId")?.split(",");
 	const modelsFromQueryParam = modelIdsFromQueryParam?.map(id => models.find(model => model.id === id));
-	const systemMessage: ChatCompletionInputMessage = {
+	const systemMessage: ConversationMessage = {
 		role: "system",
 		content: modelIdsFromQueryParam ? (defaultSystemMessage?.[modelIdsFromQueryParam[0]] ?? "") : "",
 	};

src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte

@@ -85,12 +85,13 @@
 			messages.unshift(systemMessage);
 		}
 
-		messages = messages.map(({ role, content }) => ({
+		const res = messages.map(({ role, content }) => ({
 			role,
 			content: JSON.stringify(content).slice(1, -1),
 		}));
+		messages = res;
 
-		return messages;
+		return res;
 	}
 
 	function highlight(code: string, language: Language) {
@@ -139,7 +140,7 @@ for await (const chunk of stream) {
 		const newContent = chunk.choices[0].delta.content;
 		out += newContent;
 		console.log(newContent);
-	}  
+	}
 }`,
 			});
 		} else {
@@ -210,7 +211,7 @@ for await (const chunk of stream) {
 		const newContent = chunk.choices[0].delta.content;
 		out += newContent;
 		console.log(newContent);
-	}  
+	}
 }`,
 			});
 		} else {
@@ -270,8 +271,8 @@ client = InferenceClient(api_key="${tokenStr}")
 messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
 
 stream = client.chat.completions.create(
-    model="${conversation.model.id}", 
-	messages=messages, 
+    model="${conversation.model.id}",
+	messages=messages,
 	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })},
 	stream=True
 )
@@ -291,8 +292,8 @@ client = InferenceClient(api_key="${tokenStr}")
 messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
 
 completion = client.chat.completions.create(
-    model="${conversation.model.id}", 
-	messages=messages, 
+    model="${conversation.model.id}",
+	messages=messages,
 	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })}
 )
 
@@ -338,8 +339,8 @@ client = OpenAI(
 messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
 
 stream = client.chat.completions.create(
-    model="${conversation.model.id}", 
-	messages=messages, 
+    model="${conversation.model.id}",
+	messages=messages,
 	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })},
 	stream=True
 )
@@ -362,8 +363,8 @@ client = OpenAI(
 messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
 
 completion = client.chat.completions.create(
-    model="${conversation.model.id}", 
-	messages=messages, 
+    model="${conversation.model.id}",
+	messages=messages,
 	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })}
 )
 

src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { type ChatCompletionInputMessage } from "@huggingface/tasks";
 	import { createEventDispatcher } from "svelte";
+	import type { ConversationMessage } from "./types";
 
-	export let message: ChatCompletionInputMessage;
+	export let message: ConversationMessage;
 	export let loading: boolean = false;
 	export let autofocus: boolean = false;
 

src/lib/components/InferencePlayground/inferencePlaygroundUtils.ts

@@ -1,4 +1,4 @@
-import { type ChatCompletionInputMessage } from "@huggingface/tasks";
+import { type ChatCompletionOutputMessage } from "@huggingface/tasks";
 import type { Conversation, ModelEntryWithTokenizer } from "./types";
 
 import { HfInference } from "@huggingface/inference";
@@ -25,7 +25,7 @@ export async function handleStreamingResponse(
 			messages,
 			...conversation.config,
 		},
-		{ signal: abortController.signal, use_cache: false }
+		{ signal: abortController.signal }
 	)) {
 		if (chunk.choices && chunk.choices.length > 0 && chunk.choices[0]?.delta?.content) {
 			out += chunk.choices[0].delta.content;
@@ -37,21 +37,18 @@ export async function handleStreamingResponse(
 export async function handleNonStreamingResponse(
 	hf: HfInference,
 	conversation: Conversation
-): Promise<{ message: ChatCompletionInputMessage; completion_tokens: number }> {
+): Promise<{ message: ChatCompletionOutputMessage; completion_tokens: number }> {
 	const { model, systemMessage } = conversation;
 	const messages = [
 		...(isSystemPromptSupported(model) && systemMessage.content?.length ? [systemMessage] : []),
 		...conversation.messages,
 	];
 
-	const response = await hf.chatCompletion(
-		{
-			model: model.id,
-			messages,
-			...conversation.config,
-		},
-		{ use_cache: false }
-	);
+	const response = await hf.chatCompletion({
+		model: model.id,
+		messages,
+		...conversation.config,
+	});
 
 	if (response.choices && response.choices.length > 0) {
 		const { message } = response.choices[0];

src/lib/components/InferencePlayground/types.ts

@@ -2,11 +2,13 @@ import type { GenerationConfig } from "$lib/components/InferencePlayground/gener
 import type { ModelEntry } from "@huggingface/hub";
 import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 
+export type ConversationMessage = Omit<ChatCompletionInputMessage, "content"> & { content?: string };
+
 export type Conversation = {
 	model: ModelEntryWithTokenizer;
 	config: GenerationConfig;
-	messages: ChatCompletionInputMessage[];
-	systemMessage: ChatCompletionInputMessage;
+	messages: ConversationMessage[];
+	systemMessage: ConversationMessage;
 	streaming: boolean;
 };