same prettier as hub

.prettierrc

@@ -1,8 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}

.prettierrc.mjs

@@ -0,0 +1,11 @@
+export default {
+	arrowParens: "avoid",
+	quoteProps: "consistent",
+	trailingComma: "es5",
+	useTabs: true,
+	tabWidth: 2,
+	printWidth: 120,
+	overrides: [{ files: "*.svelte", options: { parser: "svelte" } }],
+	tailwindConfig: "./tailwind.config.ts",
+	plugins: [import("prettier-plugin-svelte"), import("prettier-plugin-tailwindcss")],
+};

postcss.config.js

@@ -1,6 +1,6 @@
 export default {
 	plugins: {
 		tailwindcss: {},
-		autoprefixer: {}
-	}
+		autoprefixer: {},
+	},
 };

src/app.css

@@ -1,4 +1,4 @@
-@import 'highlight.js/styles/atom-one-light';
+@import "highlight.js/styles/atom-one-light";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/lib/components/Icons/IconCaret.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let classNames = '';
+	export let classNames = "";
 </script>
 
 <svg
@@ -12,8 +12,5 @@
 	height="1em"
 	preserveAspectRatio="xMidYMid meet"
 	viewBox="0 0 24 24"
-	><path
-		d="M16.293 9.293L12 13.586L7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"
-		fill="currentColor"
-	/>
+	><path d="M16.293 9.293L12 13.586L7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z" fill="currentColor" />
 </svg>

src/lib/components/Icons/IconCode.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let classNames = '';
+	export let classNames = "";
 </script>
 
 <svg

src/lib/components/Icons/IconCopyCode.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let classNames = '';
+	export let classNames = "";
 </script>
 
 <svg

src/lib/components/Icons/IconCross.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let classNames = '';
+	export let classNames = "";
 </script>
 
 <svg

src/lib/components/Icons/IconDelete.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let classNames = '';
+	export let classNames = "";
 </script>
 
 <svg
@@ -14,10 +14,7 @@
 	preserveAspectRatio="xMidYMid meet"
 	viewBox="0 0 32 32"
 >
-	<path d="M12 12h2v12h-2z" fill="currentColor" /><path
-		d="M18 12h2v12h-2z"
-		fill="currentColor"
-	/><path
+	<path d="M12 12h2v12h-2z" fill="currentColor" /><path d="M18 12h2v12h-2z" fill="currentColor" /><path
 		d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z"
 		fill="currentColor"
 	/><path d="M12 2h8v2h-8z" fill="currentColor" />

src/lib/components/Icons/IconPlus.svelte

@@ -1,13 +1,8 @@
 <script lang="ts">
-	export let classNames = '';
+	export let classNames = "";
 </script>
 
-<svg
-	class={classNames}
-	xmlns="http://www.w3.org/2000/svg"
-	width="1em"
-	height="1em"
-	viewBox="0 0 32 32"
+<svg class={classNames} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
 	><path
 		fill="currentColor"
 		d="M16 2A14.172 14.172 0 0 0 2 16a14.172 14.172 0 0 0 14 14a14.172 14.172 0 0 0 14-14A14.172 14.172 0 0 0 16 2Zm8 15h-7v7h-2v-7H8v-2h7V8h2v7h7Z"

src/lib/components/Icons/IconSearch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let classNames = '';
+	export let classNames = "";
 </script>
 
 <svg
@@ -14,8 +14,5 @@
 	preserveAspectRatio="xMidYMid meet"
 	viewBox="0 0 32 32"
 >
-	<path
-		d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z"
-		fill="currentColor"
-	/>
+	<path d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z" fill="currentColor" />
 </svg>

src/lib/components/Icons/IconShare.svelte

@@ -1,15 +1,8 @@
 <script lang="ts">
-	export let classNames = '';
+	export let classNames = "";
 </script>
 
-<svg
-	class={classNames}
-	width="1em"
-	height="1em"
-	viewBox="0 0 24 25"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
->
+<svg class={classNames} width="1em" height="1em" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"

src/lib/components/Icons/IconStar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let classNames = '';
+	export let classNames = "";
 </script>
 
 <svg

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -3,32 +3,32 @@
 		createHfInference,
 		handleStreamingResponse,
 		handleNonStreamingResponse,
-		isSystemPromptSupported
-	} from './inferencePlaygroundUtils';
-	import GenerationConfig from './InferencePlaygroundGenerationConfig.svelte';
-	import HFTokenModal from './InferencePlaygroundHFTokenModal.svelte';
-	import ModelSelector from './InferencePlaygroundModelSelector.svelte';
-	import Conversation from './InferencePlaygroundConversation.svelte';
-	import { onDestroy } from 'svelte';
-	import { type ChatCompletionInputMessage } from '@huggingface/tasks';
-	import type { ModelEntryWithTokenizer } from '$lib/types';
-	import { defaultGenerationConfig } from './generationConfigSettings';
-	import IconShare from '../Icons/IconShare.svelte';
-	import IconDelete from '../Icons/IconDelete.svelte';
-	import IconCode from '../Icons/IconCode.svelte';
+		isSystemPromptSupported,
+	} from "./inferencePlaygroundUtils";
+	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
+	import HFTokenModal from "./InferencePlaygroundHFTokenModal.svelte";
+	import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
+	import Conversation from "./InferencePlaygroundConversation.svelte";
+	import { onDestroy } from "svelte";
+	import { type ChatCompletionInputMessage } from "@huggingface/tasks";
+	import type { ModelEntryWithTokenizer } from "$lib/types";
+	import { defaultGenerationConfig } from "./generationConfigSettings";
+	import IconShare from "../Icons/IconShare.svelte";
+	import IconDelete from "../Icons/IconDelete.svelte";
+	import IconCode from "../Icons/IconCode.svelte";
 
 	export let models: ModelEntryWithTokenizer[];
 
-	const startMessages: ChatCompletionInputMessage[] = [{ role: 'user', content: '' }];
+	const startMessages: ChatCompletionInputMessage[] = [{ role: "user", content: "" }];
 
 	let conversation: Conversation = {
 		model: models[0],
 		config: defaultGenerationConfig,
 		messages: startMessages,
-		streaming: true
+		streaming: true,
 	};
 
-	let systemMessage: ChatCompletionInputMessage = { role: 'system', content: '' };
+	let systemMessage: ChatCompletionInputMessage = { role: "system", content: "" };
 	let hfToken: string | undefined = import.meta.env.VITE_HF_TOKEN;
 	let viewCode = false;
 	let showTokenModal = false;
@@ -47,9 +47,9 @@
 		conversation.messages = [
 			...conversation.messages,
 			{
-				role: conversation.messages.at(-1)?.role === 'user' ? 'assistant' : 'user',
-				content: ''
-			}
+				role: conversation.messages.at(-1)?.role === "user" ? "assistant" : "user",
+				content: "",
+			},
 		];
 	}
 
@@ -59,7 +59,7 @@
 	}
 
 	function reset() {
-		systemMessage.content = '';
+		systemMessage.content = "";
 		conversation.messages = [...startMessages];
 	}
 
@@ -88,14 +88,14 @@
 			const hf = createHfInference(hfToken);
 
 			if (conversation.streaming) {
-				const streamingMessage = { role: 'assistant', content: '' };
+				const streamingMessage = { role: "assistant", content: "" };
 				conversation.messages = [...conversation.messages, streamingMessage];
 				abortController = new AbortController();
 
 				await handleStreamingResponse(
 					hf,
 					conversation,
-					(content) => {
+					content => {
 						if (streamingMessage) {
 							streamingMessage.content = content;
 							conversation.messages = [...conversation.messages];
@@ -118,8 +118,8 @@
 
 			addMessage();
 		} catch (error) {
-			if (error.name !== 'AbortError') {
-				alert('error: ' + (error as Error).message);
+			if (error.name !== "AbortError") {
+				alert("error: " + (error as Error).message);
 			}
 		} finally {
 			loading = false;
@@ -128,7 +128,7 @@
 	}
 
 	function onKeydown(event: KeyboardEvent) {
-		if (!event.shiftKey && event.key === 'Enter') {
+		if (!event.shiftKey && event.key === "Enter") {
 			submit();
 		}
 	}
@@ -137,9 +137,9 @@
 {#if showTokenModal}
 	<HFTokenModal
 		on:close={() => (showTokenModal = false)}
-		on:submit={(e) => {
+		on:submit={e => {
 			const formData = new FormData(e.target);
-			hfToken = formData.get('hf-token');
+			hfToken = formData.get("hf-token");
 			submit();
 			showTokenModal = false;
 		}}
@@ -161,8 +161,8 @@
 				name=""
 				id=""
 				placeholder={systemPromptSupported
-					? 'Enter a custom prompt'
-					: 'System prompt is not supported with the chosen model.'}
+					? "Enter a custom prompt"
+					: "System prompt is not supported with the chosen model."}
 				bind:value={systemMessage.content}
 				class="absolute inset-x-0 bottom-0 h-full resize-none bg-transparent px-3 pt-10 text-sm outline-none"
 			></textarea>
@@ -176,7 +176,7 @@
 				index={0}
 				{viewCode}
 				on:addMessage={addMessage}
-				on:deleteMessage={(e) => deleteMessage(e.detail)}
+				on:deleteMessage={e => deleteMessage(e.detail)}
 			/>
 		</div>
 		<div
@@ -186,9 +186,7 @@
 				type="button"
 				class="flex h-[39px] flex-none gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
 			>
-				<div
-					class="flex size-5 items-center justify-center rounded border border-black/5 bg-black/5 text-xs"
-				>
+				<div class="flex size-5 items-center justify-center rounded border border-black/5 bg-black/5 text-xs">
 					<IconShare />
 				</div>
 
@@ -211,7 +209,7 @@
 				class="flex h-[39px] items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
 			>
 				<IconCode />
-				{!viewCode ? 'View Code' : 'Hide Code'}</button
+				{!viewCode ? "View Code" : "Hide Code"}</button
 			>
 			<button
 				on:click={() => {
@@ -240,8 +238,7 @@
 						/>
 					</div>
 				{:else}
-					Run <span
-						class="inline-flex gap-0.5 rounded border border-white/20 bg-white/10 px-0.5 text-xs text-white/70"
+					Run <span class="inline-flex gap-0.5 rounded border border-white/20 bg-white/10 px-0.5 text-xs text-white/70"
 						>↵</span
 					>
 				{/if}
@@ -257,9 +254,7 @@
 			<GenerationConfig bind:conversation />
 			<div class="mt-auto">
 				<div class="mb-3 flex items-center justify-between gap-2">
-					<label for="default-range" class="block text-sm font-medium text-gray-900 dark:text-white"
-						>API Quota</label
-					>
+					<label for="default-range" class="block text-sm font-medium text-gray-900 dark:text-white">API Quota</label>
 					<span
 						class="rounded bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
 						>Free</span

src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
-	import hljs from 'highlight.js/lib/core';
-	import javascript from 'highlight.js/lib/languages/javascript';
-	import python from 'highlight.js/lib/languages/python';
-	import http from 'highlight.js/lib/languages/http';
-	import type { Conversation } from '$lib/types';
-	import IconCopyCode from '../Icons/IconCopyCode.svelte';
-	import { onDestroy } from 'svelte';
-
-	hljs.registerLanguage('javascript', javascript);
-	hljs.registerLanguage('python', python);
-	hljs.registerLanguage('http', http);
+	import hljs from "highlight.js/lib/core";
+	import javascript from "highlight.js/lib/languages/javascript";
+	import python from "highlight.js/lib/languages/python";
+	import http from "highlight.js/lib/languages/http";
+	import type { Conversation } from "$lib/types";
+	import IconCopyCode from "../Icons/IconCopyCode.svelte";
+	import { onDestroy } from "svelte";
+
+	hljs.registerLanguage("javascript", javascript);
+	hljs.registerLanguage("python", python);
+	hljs.registerLanguage("http", http);
 
 	export let conversation: Conversation;
 
-	const lanuages = ['javascript', 'python', 'http'];
+	const lanuages = ["javascript", "python", "http"];
 	type Language = (typeof lanuages)[number];
 	const labelsByLanguage: Record<Language, string> = {
-		javascript: 'JavaScript',
-		python: 'Python',
-		http: 'Curl'
+		javascript: "JavaScript",
+		python: "Python",
+		http: "Curl",
 	};
 
 	interface Snippet {
@@ -30,16 +30,16 @@
 	$: snippetsByLanguage = {
 		javascript: getJavascriptSnippets(conversation),
 		python: getPythonSnippets(conversation),
-		http: getHttpSnippets(conversation)
+		http: getHttpSnippets(conversation),
 	};
 
-	let selectedLanguage: Language = 'javascript';
+	let selectedLanguage: Language = "javascript";
 	let timeout: ReturnType<typeof setTimeout>;
 
 	function getMessages() {
-		const placeholder = [{ role: 'user', content: 'Tell me a story' }];
+		const placeholder = [{ role: "user", content: "Tell me a story" }];
 		let messages = conversation.messages;
-		if (messages.length === 1 && messages[0].role === 'user' && !messages[0].content) {
+		if (messages.length === 1 && messages[0].role === "user" && !messages[0].content) {
 			messages = placeholder;
 		}
 		return messages;
@@ -66,13 +66,13 @@
 
 		const snippets: Snippet[] = [];
 		snippets.push({
-			label: 'Install @huggingface/inference',
-			language: 'http',
-			code: `npm install --save @huggingface/inference`
+			label: "Install @huggingface/inference",
+			language: "http",
+			code: `npm install --save @huggingface/inference`,
 		});
 		if (conversation.streaming) {
 			snippets.push({
-				label: 'Streaming API',
+				label: "Streaming API",
 				code: `import { HfInference } from "@huggingface/inference"
 
 const inference = new HfInference("your HF token")
@@ -81,8 +81,8 @@ let out = "";
 
 for await (const chunk of inference.chatCompletionStream({
   model: "${conversation.model.id}",
-  messages: ${formattedMessages({ sep: ',\n    ', start: '[\n    ', end: '\n  ]' })},
-  ${formattedConfig({ sep: ',\n  ', start: '', end: '' })},
+  messages: ${formattedMessages({ sep: ",\n    ", start: "[\n    ", end: "\n  ]" })},
+  ${formattedConfig({ sep: ",\n  ", start: "", end: "" })},
   seed: 0,
 })) {
   if (chunk.choices && chunk.choices.length > 0) {
@@ -91,24 +91,24 @@ for await (const chunk of inference.chatCompletionStream({
 	console.clear();
 	console.log(out);
   }  
-}`
+}`,
 			});
 		} else {
 			// non-streaming
 			snippets.push({
-				label: 'Non-Streaming API',
+				label: "Non-Streaming API",
 				code: `import { HfInference } from '@huggingface/inference'
 
 const inference = new HfInference("your access token")
 
 const out = await inference.chatCompletion({
     model: "${conversation.model.id}",
-    messages: ${formattedMessages({ sep: ',\n        ', start: '[\n        ', end: '\n    ]' })},
-	${formattedConfig({ sep: ',\n    ', start: '', end: '' })},
+    messages: ${formattedMessages({ sep: ",\n        ", start: "[\n        ", end: "\n    ]" })},
+	${formattedConfig({ sep: ",\n    ", start: "", end: "" })},
     seed: 0,
 });
 
-console.log(out.choices[0].message);`
+console.log(out.choices[0].message);`,
 			});
 		}
 
@@ -132,13 +132,13 @@ console.log(out.choices[0].message);`
 
 		const snippets: Snippet[] = [];
 		snippets.push({
-			label: 'Install huggingface_hub',
-			language: 'http',
-			code: `pip install huggingface_hub`
+			label: "Install huggingface_hub",
+			language: "http",
+			code: `pip install huggingface_hub`,
 		});
 		if (conversation.streaming) {
 			snippets.push({
-				label: 'Streaming API',
+				label: "Streaming API",
 				code: `from huggingface_hub import InferenceClient
 
 model_id="${conversation.model.id}"
@@ -147,28 +147,28 @@ inference_client = InferenceClient(model_id, token=hf_token)
 
 output = ""
 
-messages = ${formattedMessages({ sep: ',\n    ', start: `[\n    `, end: `\n]` })}
+messages = ${formattedMessages({ sep: ",\n    ", start: `[\n    `, end: `\n]` })}
 
-for token in client.chat_completion(messages, stream=True, ${formattedConfig({ sep: ', ', start: '', end: '' })}):
+for token in client.chat_completion(messages, stream=True, ${formattedConfig({ sep: ", ", start: "", end: "" })}):
     new_content = token.choices[0].delta.content
     print(new_content, end="")
-    output += new_content`
+    output += new_content`,
 			});
 		} else {
 			// non-streaming
 			snippets.push({
-				label: 'Non-Streaming API',
+				label: "Non-Streaming API",
 				code: `from huggingface_hub import InferenceClient
 
 model_id="${conversation.model.id}"
 hf_token = "your HF token"
 inference_client = InferenceClient(model_id, token=hf_token)
 
-messages = ${formattedMessages({ sep: ',\n    ', start: `[\n    `, end: `\n]` })}
+messages = ${formattedMessages({ sep: ",\n    ", start: `[\n    `, end: `\n]` })}
 
-output = inference_client.chat_completion(messages, ${formattedConfig({ sep: ', ', start: '', end: '' })})
+output = inference_client.chat_completion(messages, ${formattedConfig({ sep: ", ", start: "", end: "" })})
 
-print(output.choices[0].message)`
+print(output.choices[0].message)`,
 			});
 		}
 
@@ -194,29 +194,29 @@ print(output.choices[0].message)`
 
 		if (conversation.streaming) {
 			snippets.push({
-				label: 'Streaming API',
+				label: "Streaming API",
 				code: `curl 'https://api-inference.huggingface.co/models/${conversation.model.id}/v1/chat/completions' \\
 --header "Authorization: Bearer {YOUR_HF_TOKEN}" \\
 --header 'Content-Type: application/json' \\
 --data '{
     "model": "${conversation.model.id}",
-    "messages": ${formattedMessages({ sep: ',\n    ', start: `[\n    `, end: `\n]` })},
-    ${formattedConfig({ sep: ',\n    ', start: '', end: '' })},
+    "messages": ${formattedMessages({ sep: ",\n    ", start: `[\n    `, end: `\n]` })},
+    ${formattedConfig({ sep: ",\n    ", start: "", end: "" })},
     "stream": true
-}'`
+}'`,
 			});
 		} else {
 			// non-streaming
 			snippets.push({
-				label: 'Non-Streaming API',
+				label: "Non-Streaming API",
 				code: `curl 'https://api-inference.huggingface.co/models/${conversation.model.id}/v1/chat/completions' \\
 --header "Authorization: Bearer {YOUR_HF_TOKEN}" \\
 --header 'Content-Type: application/json' \\
 --data '{
     "model": "${conversation.model.id}",
-    "messages": ${formattedMessages({ sep: ',\n    ', start: `[\n    `, end: `\n]` })},
-    ${formattedConfig({ sep: ',\n    ', start: '', end: '' })}
-}'`
+    "messages": ${formattedMessages({ sep: ",\n    ", start: `[\n    `, end: `\n]` })},
+    ${formattedConfig({ sep: ",\n    ", start: "", end: "" })}
+}'`,
 			});
 		}
 
@@ -254,15 +254,15 @@ print(output.choices[0].message)`
 			<h2 class="font-semibold">{label}</h2>
 			<button
 				class="flex items-center gap-x-1.5 rounded-md bg-gray-200 px-1.5 py-0.5 text-sm transition dark:bg-gray-950"
-				on:click={(e) => {
+				on:click={e => {
 					const el = e.currentTarget;
-					el.classList.add('text-green-500');
+					el.classList.add("text-green-500");
 					navigator.clipboard.writeText(code);
 					if (timeout) {
 						clearTimeout(timeout);
 					}
 					timeout = setTimeout(() => {
-						el.classList.remove('text-green-500');
+						el.classList.remove("text-green-500");
 					}, 1000);
 				}}
 			>

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import CodeSnippets from './InferencePlaygroundCodeSnippets.svelte';
-	import Message from './InferencePlaygroundMessage.svelte';
-	import IconPlus from '../Icons/IconPlus.svelte';
-	import type { Conversation } from '$lib/types';
+	import { createEventDispatcher } from "svelte";
+	import CodeSnippets from "./InferencePlaygroundCodeSnippets.svelte";
+	import Message from "./InferencePlaygroundMessage.svelte";
+	import IconPlus from "../Icons/IconPlus.svelte";
+	import type { Conversation } from "$lib/types";
 
 	export let loading;
 	export let conversation: Conversation;
@@ -40,14 +40,14 @@
 			<Message
 				class="border-b"
 				{message}
-				on:delete={() => dispatch('deleteMessage', messageIdx)}
+				on:delete={() => dispatch("deleteMessage", messageIdx)}
 				autofocus={!loading && messageIdx === conversation.messages.length - 1}
 			/>
 		{/each}
 
 		<button
 			class="flex px-6 py-6 hover:bg-gray-50 dark:hover:bg-gray-800/50"
-			on:click={() => dispatch('addMessage')}
+			on:click={() => dispatch("addMessage")}
 			disabled={loading}
 		>
 			<div class="flex items-center gap-2 !p-0 text-sm font-semibold">

src/lib/components/InferencePlayground/InferencePlaygroundGenerationConfig.svelte

@@ -1,27 +1,26 @@
 <script lang="ts">
-	import type { Conversation } from '$lib/types';
+	import type { Conversation } from "$lib/types";
 	import {
 		GENERATION_CONFIG_KEYS,
 		GENERATION_CONFIG_KEYS_ADVANCED,
-		GENERATION_CONFIG_SETTINGS
-	} from './generationConfigSettings';
+		GENERATION_CONFIG_SETTINGS,
+	} from "./generationConfigSettings";
 
 	export let conversation: Conversation;
-	export let classNames = '';
+	export let classNames = "";
 
 	$: modelMaxLength = conversation.model.tokenizerConfig.model_max_length;
-	$: maxTokens = Math.min(modelMaxLength ?? GENERATION_CONFIG_SETTINGS['max_tokens'].max, 64_000);
+	$: maxTokens = Math.min(modelMaxLength ?? GENERATION_CONFIG_SETTINGS["max_tokens"].max, 64_000);
 </script>
 
 <div class="flex flex-col gap-y-7 {classNames}">
 	{#each GENERATION_CONFIG_KEYS as key}
 		{@const { label, min, step } = GENERATION_CONFIG_SETTINGS[key]}
-		{@const max = key === 'max_tokens' ? maxTokens : GENERATION_CONFIG_SETTINGS[key].max}
+		{@const max = key === "max_tokens" ? maxTokens : GENERATION_CONFIG_SETTINGS[key].max}
 		<div>
 			<div class="flex items-center justify-between">
-				<label
-					for="temperature-range"
-					class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">{label}</label
+				<label for="temperature-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
+					>{label}</label
 				>
 				<input
 					type="number"
@@ -51,9 +50,7 @@
 				{@const settings = GENERATION_CONFIG_SETTINGS[key]}
 				<div>
 					<div class="flex items-center justify-between">
-						<label
-							for="temperature-range"
-							class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
+						<label for="temperature-range" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
 							>{settings.label}</label
 						>
 						<input
@@ -63,7 +60,7 @@
 							max={settings.max}
 							step={settings.step}
 							value={conversation.config[key] ?? settings.default}
-							on:input={(e) => (conversation.config[key] = Number(e.currentTarget.value))}
+							on:input={e => (conversation.config[key] = Number(e.currentTarget.value))}
 						/>
 					</div>
 					<input
@@ -73,7 +70,7 @@
 						max={settings.max}
 						step={settings.step}
 						value={conversation.config[key] ?? settings.default}
-						on:input={(e) => (conversation.config[key] = Number(e.currentTarget.value))}
+						on:input={e => (conversation.config[key] = Number(e.currentTarget.value))}
 						class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 accent-black dark:bg-gray-700 dark:accent-blue-500"
 					/>
 				</div>

src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte

@@ -1,8 +1,8 @@
 <!-- Main modal -->
 <script lang="ts">
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-	import { browser } from '$app/environment';
-	import IconCross from '../Icons/IconCross.svelte';
+	import { createEventDispatcher, onDestroy, onMount } from "svelte";
+	import { browser } from "$app/environment";
+	import IconCross from "../Icons/IconCross.svelte";
 
 	let backdropEl: HTMLDivElement;
 	let modalEl: HTMLDivElement;
@@ -11,9 +11,9 @@
 
 	function handleKeydown(event: KeyboardEvent) {
 		// close on ESC
-		if (event.key === 'Escape') {
+		if (event.key === "Escape") {
 			event.preventDefault();
-			dispatch('close');
+			dispatch("close");
 		}
 	}
 
@@ -22,12 +22,12 @@
 			return;
 		}
 		if (event.target === backdropEl) {
-			dispatch('close');
+			dispatch("close");
 		}
 	}
 
 	onMount(() => {
-		document.getElementById('app')?.setAttribute('inert', 'true');
+		document.getElementById("app")?.setAttribute("inert", "true");
 		modalEl.focus();
 	});
 
@@ -35,7 +35,7 @@
 		if (!browser) return;
 		// remove inert attribute if this is the last modal
 		if (document.querySelectorAll('[role="dialog"]:not(#app *)').length === 1) {
-			document.getElementById('app')?.removeAttribute('inert');
+			document.getElementById("app")?.removeAttribute("inert");
 		}
 	});
 </script>
@@ -56,9 +56,7 @@
 		on:keydown={handleKeydown}
 	>
 		<form on:submit|preventDefault class="relative rounded-lg bg-white shadow dark:bg-gray-900">
-			<div
-				class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-600"
-			>
+			<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-600">
 				<h3 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">
 					<img
 						alt="Hugging Face's logo"
@@ -68,7 +66,7 @@
 				</h3>
 				<button
 					type="button"
-					on:click={() => dispatch('close')}
+					on:click={() => dispatch("close")}
 					class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
 				>
 					<IconCross classNames="text-xl" />
@@ -98,9 +96,7 @@
 			</div>
 
 			<!-- Modal footer -->
-			<div
-				class="flex items-center justify-between rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-600"
-			>
+			<div class="flex items-center justify-between rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-600">
 				<a
 					href="https://huggingface.co/settings/tokens?new_token=true"
 					tabindex="-1"

src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import { type ChatCompletionInputMessage } from '@huggingface/tasks';
+	import { createEventDispatcher } from "svelte";
+	import { type ChatCompletionInputMessage } from "@huggingface/tasks";
 
 	export let message: ChatCompletionInputMessage;
 	export let autofocus: boolean = false;
@@ -24,7 +24,7 @@
 	<button
 		tabindex="1"
 		on:click={() => {
-			dispatch('delete');
+			dispatch("delete");
 		}}
 		type="button"
 		class="mt-1.5 hidden size-8 rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 group-hover/message:block dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { Conversation, ModelEntryWithTokenizer } from '$lib/types';
-	import IconCaret from '../Icons/IconCaret.svelte';
-	import ModelSelectorModal from './InferencePlaygroundModelSelectorModal.svelte';
+	import type { Conversation, ModelEntryWithTokenizer } from "$lib/types";
+	import IconCaret from "../Icons/IconCaret.svelte";
+	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
 
 	export let models: ModelEntryWithTokenizer[] = [];
 	export let conversation: Conversation;
@@ -21,28 +21,26 @@
 	}
 
 	function changeModel(modelId: string) {
-		const model = models.find((m) => m.id === modelId);
+		const model = models.find(m => m.id === modelId);
 		if (!model) {
 			return;
 		}
 		conversation.model = model;
 	}
 
-	$: [nameSpace, modelName] = conversation.model.id.split('/');
+	$: [nameSpace, modelName] = conversation.model.id.split("/");
 </script>
 
 {#if showModelPickerModal}
 	<ModelSelectorModal
 		{models}
-		on:modelSelected={(e) => changeModel(e.detail)}
-		on:close={(e) => (showModelPickerModal = false)}
+		on:modelSelected={e => changeModel(e.detail)}
+		on:close={e => (showModelPickerModal = false)}
 	/>
 {/if}
 
 <div class="flex flex-col gap-2">
-	<label
-		for="countries"
-		class="flex items-baseline text-sm font-medium text-gray-900 dark:text-white"
+	<label for="countries" class="flex items-baseline text-sm font-medium text-gray-900 dark:text-white"
 		>Models<span class="ml-4 font-normal text-gray-400">{models.length}</span>
 	</label>
 
@@ -53,11 +51,7 @@
 		<div class="flex flex-col items-start">
 			<div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
 				{#await getAvatarUrl(nameSpace) then avatarUrl}
-					<img
-						class="size-3 flex-none rounded bg-gray-200 object-cover"
-						src={avatarUrl}
-						alt="{nameSpace} avatar"
-					/>
+					<img class="size-3 flex-none rounded bg-gray-200 object-cover" src={avatarUrl} alt="{nameSpace} avatar" />
 				{/await}
 				{nameSpace}
 			</div>

src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { ModelEntryWithTokenizer } from '$lib/types';
-	import { createEventDispatcher } from 'svelte';
-	import IconSearch from '../Icons/IconSearch.svelte';
-	import IconStar from '../Icons/IconStar.svelte';
+	import type { ModelEntryWithTokenizer } from "$lib/types";
+	import { createEventDispatcher } from "svelte";
+	import IconSearch from "../Icons/IconSearch.svelte";
+	import IconStar from "../Icons/IconStar.svelte";
 
 	export let models: ModelEntryWithTokenizer[];
 
@@ -12,9 +12,9 @@
 
 	function handleKeydown(event: KeyboardEvent) {
 		// close on ESC
-		if (event.key === 'Escape') {
+		if (event.key === "Escape") {
 			event.preventDefault();
-			dispatch('close');
+			dispatch("close");
 		}
 	}
 
@@ -23,7 +23,7 @@
 			return;
 		}
 		if (event.target === backdropEl) {
-			dispatch('close');
+			dispatch("close");
 		}
 	}
 </script>
@@ -36,9 +36,7 @@
 	on:click|stopPropagation={handleBackdropClick}
 >
 	<div class="flex w-full max-w-[600px] items-start justify-center p-10">
-		<div
-			class="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-md"
-		>
+		<div class="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-md">
 			<div class="flex items-center border-b px-3">
 				<IconSearch classNames="mr-2 text-sm" />
 				<input
@@ -55,15 +53,17 @@
 						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
 							<IconStar classNames="lucide lucide-star mr-2 h-4 w-4 text-yellow-400" />
 							<span class="inline-flex items-center"
-								><span class="text-gray-500">meta-llama</span><span class="mx-1 text-black">/</span
-								><span class="text-black">Meta-Llama-3-70B-Instruct</span></span
+								><span class="text-gray-500">meta-llama</span><span class="mx-1 text-black">/</span><span
+									class="text-black">Meta-Llama-3-70B-Instruct</span
+								></span
 							>
 						</div>
 						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
 							<IconStar classNames="lucide lucide-star mr-2 h-4 w-4 text-yellow-400" />
 							<span class="inline-flex items-center"
-								><span class="text-gray-500">mistralai</span><span class="mx-1 text-black">/</span
-								><span class="text-black">Mixtral-8x7B-Instruct-v0.1</span></span
+								><span class="text-gray-500">mistralai</span><span class="mx-1 text-black">/</span><span
+									class="text-black">Mixtral-8x7B-Instruct-v0.1</span
+								></span
 							>
 						</div>
 					</div>
@@ -73,18 +73,18 @@
 					<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Other Models</div>
 					<div>
 						{#each models as model}
-							{@const [nameSpace, modelName] = model.id.split('/')}
+							{@const [nameSpace, modelName] = model.id.split("/")}
 							<button
 								class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100"
 								on:click={() => {
-									dispatch('modelSelected', model.id);
-									dispatch('close');
+									dispatch("modelSelected", model.id);
+									dispatch("close");
 								}}
 							>
 								<span class="inline-flex items-center"
-									><span class="text-gray-500">{nameSpace}</span><span class="mx-1 text-black"
-										>/</span
-									><span class="text-black">{modelName}</span></span
+									><span class="text-gray-500">{nameSpace}</span><span class="mx-1 text-black">/</span><span
+										class="text-black">{modelName}</span
+									></span
 								>
 							</button>
 						{/each}

src/lib/components/InferencePlayground/generationConfigSettings.ts

@@ -12,47 +12,43 @@ export const GENERATION_CONFIG_SETTINGS: Record<string, GenerationKeySettings> =
 		step: 0.01,
 		min: 0,
 		max: 2,
-		label: 'Temperature'
+		label: "Temperature",
 	},
 	max_tokens: {
 		default: 512,
 		step: 1,
 		min: 1,
 		max: 8192, // changed dynamically based on model
-		label: 'Max Tokens'
+		label: "Max Tokens",
 	},
 	top_p: {
 		default: 0.7,
 		step: 0.01,
 		min: 0,
 		max: 1,
-		label: 'Top-P'
+		label: "Top-P",
 	},
 	top_k: {
 		default: 50,
 		step: 1,
 		min: 1,
 		max: 100,
-		label: 'Top-K'
+		label: "Top-K",
 	},
 	repetition_penalty: {
 		default: 1,
 		step: 0.01,
 		min: 1,
 		max: 2,
-		label: 'Repetition Penalty'
-	}
+		label: "Repetition Penalty",
+	},
 };
 
 export type GenerationConfigKey = keyof typeof GENERATION_CONFIG_SETTINGS;
 
-export const GENERATION_CONFIG_KEYS: GenerationConfigKey[] = ['temperature', 'max_tokens'];
+export const GENERATION_CONFIG_KEYS: GenerationConfigKey[] = ["temperature", "max_tokens"];
 
-export const GENERATION_CONFIG_KEYS_ADVANCED: GenerationConfigKey[] = [
-	'top_p',
-	'top_k',
-	'repetition_penalty'
-];
+export const GENERATION_CONFIG_KEYS_ADVANCED: GenerationConfigKey[] = ["top_p", "top_k", "repetition_penalty"];
 
 export type GenerationConfig = Record<GenerationConfigKey, number>;
 

src/lib/components/InferencePlayground/inferencePlaygroundUtils.ts

@@ -1,6 +1,6 @@
-import { type ChatCompletionInputMessage } from '@huggingface/tasks';
-import { HfInference } from '@huggingface/inference';
-import type { Conversation, ModelEntryWithTokenizer } from '$lib/types';
+import { type ChatCompletionInputMessage } from "@huggingface/tasks";
+import { HfInference } from "@huggingface/inference";
+import type { Conversation, ModelEntryWithTokenizer } from "$lib/types";
 
 export function createHfInference(token: string): HfInference {
 	return new HfInference(token);
@@ -14,18 +14,16 @@ export async function handleStreamingResponse(
 	systemMessage?: ChatCompletionInputMessage
 ): Promise<void> {
 	const messages = [
-		...(isSystemPromptSupported(conversation.model) && systemMessage?.content?.length
-			? [systemMessage]
-			: []),
-		...conversation.messages
+		...(isSystemPromptSupported(conversation.model) && systemMessage?.content?.length ? [systemMessage] : []),
+		...conversation.messages,
 	];
-	let out = '';
+	let out = "";
 	for await (const chunk of hf.chatCompletionStream(
 		{
 			model: conversation.model.id,
 			messages,
 			temperature: conversation.config.temperature,
-			max_tokens: conversation.config.maxTokens
+			max_tokens: conversation.config.maxTokens,
 		},
 		{ signal: abortController.signal }
 	)) {
@@ -42,25 +40,23 @@ export async function handleNonStreamingResponse(
 	systemMessage?: ChatCompletionInputMessage
 ): Promise<ChatCompletionInputMessage> {
 	const messages = [
-		...(isSystemPromptSupported(conversation.model) && systemMessage?.content?.length
-			? [systemMessage]
-			: []),
-		...conversation.messages
+		...(isSystemPromptSupported(conversation.model) && systemMessage?.content?.length ? [systemMessage] : []),
+		...conversation.messages,
 	];
 
 	const response = await hf.chatCompletion({
 		model: conversation.model,
 		messages,
 		temperature: conversation.config.temperature,
-		max_tokens: conversation.config.maxTokens
+		max_tokens: conversation.config.maxTokens,
 	});
 
 	if (response.choices && response.choices.length > 0) {
 		return response.choices[0].message;
 	}
-	throw new Error('No response from the model');
+	throw new Error("No response from the model");
 }
 
 export function isSystemPromptSupported(model: ModelEntryWithTokenizer) {
-	return model.tokenizerConfig?.chat_template?.includes('system');
+	return model.tokenizerConfig?.chat_template?.includes("system");
 }

src/lib/types/index.d.ts

@@ -1,6 +1,6 @@
-import type { GenerationConfig } from '$lib/components/InferencePlayground/generationConfigSettings';
-import type { ModelEntry } from '@huggingface/hub';
-import type { ChatCompletionInputMessage } from '@huggingface/tasks';
+import type { GenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings";
+import type { ModelEntry } from "@huggingface/hub";
+import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 
 type Conversation = {
 	model: ModelEntryWithTokenizer;

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-	import '../app.css';
+	import "../app.css";
 </script>
 
 <slot></slot>

src/routes/+page.server.ts

@@ -1,22 +1,21 @@
-import type { ModelEntryWithTokenizer } from '$lib/types';
-import type { ModelEntry } from '@huggingface/hub';
-import type { PageServerLoad } from './$types';
-import { env } from '$env/dynamic/private';
+import type { ModelEntryWithTokenizer } from "$lib/types";
+import type { ModelEntry } from "@huggingface/hub";
+import type { PageServerLoad } from "./$types";
+import { env } from "$env/dynamic/private";
 
 export const load: PageServerLoad = async ({ fetch }) => {
-	const apiUrl =
-		'https://huggingface.co/api/models?pipeline_tag=text-generation&inference=Warm&filter=conversational';
+	const apiUrl = "https://huggingface.co/api/models?pipeline_tag=text-generation&inference=Warm&filter=conversational";
 	const HF_TOKEN = env.HF_TOKEN;
 
 	const res = await fetch(apiUrl, {
 		headers: {
-			Authorization: `Bearer ${HF_TOKEN}`
-		}
+			Authorization: `Bearer ${HF_TOKEN}`,
+		},
 	});
 	const compatibleModels: ModelEntry[] = await res.json();
 	compatibleModels.sort((a, b) => a.id.toLowerCase().localeCompare(b.id.toLowerCase()));
 
-	const promises = compatibleModels.map(async (model) => {
+	const promises = compatibleModels.map(async model => {
 		const configUrl = `https://huggingface.co/${model.modelId}/raw/main/tokenizer_config.json`;
 		const res = await fetch(configUrl);
 		if (!res.ok) {
@@ -26,9 +25,7 @@ export const load: PageServerLoad = async ({ fetch }) => {
 		return { ...model, tokenizerConfig } satisfies ModelEntryWithTokenizer;
 	});
 
-	const models: ModelEntryWithTokenizer[] = (await Promise.all(promises)).filter(
-		(model) => model !== null
-	);
+	const models: ModelEntryWithTokenizer[] = (await Promise.all(promises)).filter(model => model !== null);
 
 	return { models };
 };

src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	export let data;
-	import InferencePlayground from '$lib/components/InferencePlayground/InferencePlayground.svelte';
+	import InferencePlayground from "$lib/components/InferencePlayground/InferencePlayground.svelte";
 </script>
 
 <InferencePlayground models={data.models} />

svelte.config.js

@@ -1,5 +1,5 @@
-import adapter from '@sveltejs/adapter-node';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import adapter from "@sveltejs/adapter-node";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -11,8 +11,8 @@ const config = {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
-	}
+		adapter: adapter(),
+	},
 };
 
 export default config;

tailwind.config.ts

@@ -1,12 +1,12 @@
-import type { Config } from 'tailwindcss';
-import containerQueries from '@tailwindcss/container-queries';
+import type { Config } from "tailwindcss";
+import containerQueries from "@tailwindcss/container-queries";
 
 export default {
-	content: ['./src/**/*.{html,js,svelte,ts}'],
+	content: ["./src/**/*.{html,js,svelte,ts}"],
 
 	theme: {
-		extend: {}
+		extend: {},
 	},
 
-	plugins: [containerQueries]
+	plugins: [containerQueries],
 } as Config;

vite.config.ts

@@ -1,6 +1,6 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
 });