format

src/app.css

@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
 html {
-  font-size: 15px;
+	font-size: 15px;
 }

src/lib/components/CodeSnippets.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type ChatCompletionInputMessage } from "@huggingface/tasks";
+	import { type ChatCompletionInputMessage } from '@huggingface/tasks';
 
 	export let model: string;
 	export let streaming: Boolean;

src/lib/components/Conversation.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher } from 'svelte';
 	import PlaygroundCode from '$lib/components/CodeSnippets.svelte';
 	import PlaygroundMessage from '$lib/components/Message.svelte';
 
@@ -22,77 +22,78 @@
 		}
 	}
 
-	$:{
-		if(currentConversation.messages.at(-1)){
+	$: {
+		if (currentConversation.messages.at(-1)) {
 			scrollToBottom();
 		}
 	}
 </script>
+
 <div
-class="flex max-h-[calc(100dvh-5.8rem)] flex-col overflow-y-auto overflow-x-hidden @container"
-class:pointer-events-none={loading}
-class:animate-pulse={loading && !streamingMessage}
-bind:this={messageContainer}
+	class="flex max-h-[calc(100dvh-5.8rem)] flex-col overflow-y-auto overflow-x-hidden @container"
+	class:pointer-events-none={loading}
+	class:animate-pulse={loading && !streamingMessage}
+	bind:this={messageContainer}
 >
-{#if conversations.length > 1}
-	<div
-		class="sticky top-0 flex h-11 flex-none items-center gap-2 whitespace-nowrap rounded-lg border border-gray-200/80 bg-white pl-3 pr-2 text-sm leading-none shadow-sm *:flex-none dark:border-gray-800 dark:bg-gray-800/70 dark:hover:bg-gray-800"
-		class:mr-3={index === 0}
-		class:mx-3={index === 1}
-	>
-		<div class="size-3.5 rounded bg-black dark:bg-gray-400"></div>
-		<div>{conversation.model}</div>
-		<button
-			class="ml-auto flex size-6 items-center justify-center rounded bg-gray-50 text-xs hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
-			on:click={() => (conversations = conversations.filter((_, i) => i !== index))}
+	{#if conversations.length > 1}
+		<div
+			class="sticky top-0 flex h-11 flex-none items-center gap-2 whitespace-nowrap rounded-lg border border-gray-200/80 bg-white pl-3 pr-2 text-sm leading-none shadow-sm *:flex-none dark:border-gray-800 dark:bg-gray-800/70 dark:hover:bg-gray-800"
+			class:mr-3={index === 0}
+			class:mx-3={index === 1}
 		>
-			✕
-		</button>
+			<div class="size-3.5 rounded bg-black dark:bg-gray-400"></div>
+			<div>{conversation.model}</div>
+			<button
+				class="ml-auto flex size-6 items-center justify-center rounded bg-gray-50 text-xs hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
+				on:click={() => (conversations = conversations.filter((_, i) => i !== index))}
+			>
+				✕
+			</button>
+			<button
+				class=" flex size-6 items-center justify-center rounded bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
+			>
+				<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
+					><path
+						fill="currentColor"
+						d="M27 16.76v-1.53l1.92-1.68A2 2 0 0 0 29.3 11l-2.36-4a2 2 0 0 0-1.73-1a2 2 0 0 0-.64.1l-2.43.82a11.35 11.35 0 0 0-1.31-.75l-.51-2.52a2 2 0 0 0-2-1.61h-4.68a2 2 0 0 0-2 1.61l-.51 2.52a11.48 11.48 0 0 0-1.32.75l-2.38-.86A2 2 0 0 0 6.79 6a2 2 0 0 0-1.73 1L2.7 11a2 2 0 0 0 .41 2.51L5 15.24v1.53l-1.89 1.68A2 2 0 0 0 2.7 21l2.36 4a2 2 0 0 0 1.73 1a2 2 0 0 0 .64-.1l2.43-.82a11.35 11.35 0 0 0 1.31.75l.51 2.52a2 2 0 0 0 2 1.61h4.72a2 2 0 0 0 2-1.61l.51-2.52a11.48 11.48 0 0 0 1.32-.75l2.42.82a2 2 0 0 0 .64.1a2 2 0 0 0 1.73-1l2.28-4a2 2 0 0 0-.41-2.51ZM25.21 24l-3.43-1.16a8.86 8.86 0 0 1-2.71 1.57L18.36 28h-4.72l-.71-3.55a9.36 9.36 0 0 1-2.7-1.57L6.79 24l-2.36-4l2.72-2.4a8.9 8.9 0 0 1 0-3.13L4.43 12l2.36-4l3.43 1.16a8.86 8.86 0 0 1 2.71-1.57L13.64 4h4.72l.71 3.55a9.36 9.36 0 0 1 2.7 1.57L25.21 8l2.36 4l-2.72 2.4a8.9 8.9 0 0 1 0 3.13L27.57 20Z"
+					/><path
+						fill="currentColor"
+						d="M16 22a6 6 0 1 1 6-6a5.94 5.94 0 0 1-6 6Zm0-10a3.91 3.91 0 0 0-4 4a3.91 3.91 0 0 0 4 4a3.91 3.91 0 0 0 4-4a3.91 3.91 0 0 0-4-4Z"
+					/></svg
+				>
+			</button>
+		</div>
+	{/if}
+	{#if !viewCode}
+		{#each messages as message, i}
+			<PlaygroundMessage
+				class="border-b"
+				{message}
+				on:delete={() => dispatch('deleteMessage', i)}
+				autofocus={conversations.length === 1 && !loading && i === messages.length - 1}
+			/>
+		{/each}
+
 		<button
-			class=" flex size-6 items-center justify-center rounded bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
+			class="flex px-6 py-6 hover:bg-gray-50 dark:hover:bg-gray-800/50"
+			on:click={() => dispatch('addMessage')}
+			disabled={loading}
 		>
-			<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
-				><path
-					fill="currentColor"
-					d="M27 16.76v-1.53l1.92-1.68A2 2 0 0 0 29.3 11l-2.36-4a2 2 0 0 0-1.73-1a2 2 0 0 0-.64.1l-2.43.82a11.35 11.35 0 0 0-1.31-.75l-.51-2.52a2 2 0 0 0-2-1.61h-4.68a2 2 0 0 0-2 1.61l-.51 2.52a11.48 11.48 0 0 0-1.32.75l-2.38-.86A2 2 0 0 0 6.79 6a2 2 0 0 0-1.73 1L2.7 11a2 2 0 0 0 .41 2.51L5 15.24v1.53l-1.89 1.68A2 2 0 0 0 2.7 21l2.36 4a2 2 0 0 0 1.73 1a2 2 0 0 0 .64-.1l2.43-.82a11.35 11.35 0 0 0 1.31.75l.51 2.52a2 2 0 0 0 2 1.61h4.72a2 2 0 0 0 2-1.61l.51-2.52a11.48 11.48 0 0 0 1.32-.75l2.42.82a2 2 0 0 0 .64.1a2 2 0 0 0 1.73-1l2.28-4a2 2 0 0 0-.41-2.51ZM25.21 24l-3.43-1.16a8.86 8.86 0 0 1-2.71 1.57L18.36 28h-4.72l-.71-3.55a9.36 9.36 0 0 1-2.7-1.57L6.79 24l-2.36-4l2.72-2.4a8.9 8.9 0 0 1 0-3.13L4.43 12l2.36-4l3.43 1.16a8.86 8.86 0 0 1 2.71-1.57L13.64 4h4.72l.71 3.55a9.36 9.36 0 0 1 2.7 1.57L25.21 8l2.36 4l-2.72 2.4a8.9 8.9 0 0 1 0 3.13L27.57 20Z"
-				/><path
-					fill="currentColor"
-					d="M16 22a6 6 0 1 1 6-6a5.94 5.94 0 0 1-6 6Zm0-10a3.91 3.91 0 0 0-4 4a3.91 3.91 0 0 0 4 4a3.91 3.91 0 0 0 4-4a3.91 3.91 0 0 0-4-4Z"
-				/></svg
-			>
+			<div class="flex items-center gap-2 !p-0 text-sm font-semibold">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="1em"
+					height="1em"
+					viewBox="0 0 32 32"
+					class="text-lg"
+					><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"
+					/><path fill="none" d="M24 17h-7v7h-2v-7H8v-2h7V8h2v7h7v2z" /></svg
+				>Add message
+			</div>
 		</button>
-	</div>
-{/if}
-{#if !viewCode}
-	{#each messages as message, i}
-		<PlaygroundMessage
-			class="border-b"
-			{message}
-			on:delete={() => dispatch("deleteMessage", i)}
-			autofocus={conversations.length === 1 && !loading && i === 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")}
-		disabled={loading}
-	>
-		<div class="flex items-center gap-2 !p-0 text-sm font-semibold">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="1em"
-				height="1em"
-				viewBox="0 0 32 32"
-				class="text-lg"
-				><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"
-				/><path fill="none" d="M24 17h-7v7h-2v-7H8v-2h7V8h2v7h7v2z" /></svg
-			>Add message
-		</div>
-	</button>
-{:else}
-	<PlaygroundCode {...currentConversation} {...currentConversation.config} />
-{/if}
-</div>
+	{:else}
+		<PlaygroundCode {...currentConversation} {...currentConversation.config} />
+	{/if}
+</div>

src/lib/components/Message.svelte

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

src/lib/components/ModelSelector.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type ModelEntry } from "@huggingface/hub";
+	import { type ModelEntry } from '@huggingface/hub';
 
 	export let compatibleModels: ModelEntry[] = [];
 	export let currentModel = compatibleModels[0];

src/lib/components/playgroundUtils.ts

@@ -1,11 +1,14 @@
-import { type ChatCompletionInputMessage } from "@huggingface/tasks";
+import { type ChatCompletionInputMessage } from '@huggingface/tasks';
 import { HfInference } from '@huggingface/inference';
 
 export function createHfInference(token: string): HfInference {
 	return new HfInference(token);
 }
 
-export function prepareRequestMessages(systemMessage: ChatCompletionInputMessage, messages: ChatCompletionInputMessage[]): ChatCompletionInputMessage[] {
+export function prepareRequestMessages(
+	systemMessage: ChatCompletionInputMessage,
+	messages: ChatCompletionInputMessage[]
+): ChatCompletionInputMessage[] {
 	return [...(systemMessage.content.length ? [systemMessage] : []), ...messages];
 }
 
@@ -21,13 +24,16 @@ export async function handleStreamingResponse(
 ): Promise<void> {
 	let out = '';
 	try {
-		for await (const chunk of hf.chatCompletionStream({
-			model: model,
-			messages: messages,
-			temperature: temperature,
-			max_tokens: maxTokens,
-			json_mode: jsonMode
-		}, { signal: abortController.signal })) {
+		for await (const chunk of hf.chatCompletionStream(
+			{
+				model: model,
+				messages: messages,
+				temperature: temperature,
+				max_tokens: maxTokens,
+				json_mode: jsonMode
+			},
+			{ signal: abortController.signal }
+		)) {
 			if (chunk.choices && chunk.choices.length > 0 && chunk.choices[0]?.delta?.content) {
 				out += chunk.choices[0].delta.content;
 				onChunk(out);

src/lib/types/index.d.ts

@@ -1,5 +1,5 @@
-import type { ModelEntry } from "@huggingface/hub";
-import type { ChatCompletionInputMessage } from "@huggingface/tasks";
+import type { ModelEntry } from '@huggingface/hub';
+import type { ChatCompletionInputMessage } from '@huggingface/tasks';
 
 type Model = string;
 

src/routes/+page.svelte

@@ -11,9 +11,8 @@
 	import PlaygroundModelSelector from '$lib/components/ModelSelector.svelte';
 	import Conversation from '$lib/components/Conversation.svelte';
 	import { onDestroy, onMount } from 'svelte';
-	import { type ModelEntry } from "@huggingface/hub";
-	import { type ChatCompletionInputMessage } from "@huggingface/tasks";
-
+	import { type ModelEntry } from '@huggingface/hub';
+	import { type ChatCompletionInputMessage } from '@huggingface/tasks';
 
 	let compatibleModels: ModelEntry[] = [];
 
@@ -49,11 +48,13 @@
 	onMount(() => {
 		(async () => {
 			// TODO: use hfjs.hub listModels after https://github.com/huggingface/huggingface.js/pull/795
-			const res = await fetch("https://huggingface.co/api/models?pipeline_tag=text-generation&inferenceStatus=loaded&filter=conversational");
-			compatibleModels = await res.json() as ModelEntry[];
+			const res = await fetch(
+				'https://huggingface.co/api/models?pipeline_tag=text-generation&inferenceStatus=loaded&filter=conversational'
+			);
+			compatibleModels = (await res.json()) as ModelEntry[];
 			compatibleModels.sort((a, b) => a.id.toLowerCase().localeCompare(b.id.toLowerCase()));
 		})();
-	})
+	});
 
 	onDestroy(() => {
 		if (abortController) {
@@ -80,11 +81,14 @@
 	}
 
 	function deleteMessage(idx: number) {
-		const deletedMsg = deleteAndGetItem<ChatCompletionInputMessage>(currentConversation.messages, idx);
+		const deletedMsg = deleteAndGetItem<ChatCompletionInputMessage>(
+			currentConversation.messages,
+			idx
+		);
 		// delete messages in user/assistant pairs. otherwise, the chat template will be broken
-		if(deletedMsg){
+		if (deletedMsg) {
 			const { role } = deletedMsg;
-			const pairIdx = role === "user" ? idx : idx - 1;
+			const pairIdx = role === 'user' ? idx : idx - 1;
 			deleteAndGetItem<ChatCompletionInputMessage>(currentConversation.messages, pairIdx);
 		}
 		conversations = conversations;
@@ -96,7 +100,7 @@
 		conversations = conversations;
 	}
 
-	function abort(){
+	function abort() {
 		if (streamingMessage && abortController) {
 			abortController.abort();
 			abortController = null;
@@ -108,7 +112,7 @@
 
 	async function submit() {
 		// last message has to be from user
-		if(currentConversation.messages?.at(-1)?.role !== "user"){
+		if (currentConversation.messages?.at(-1)?.role !== 'user') {
 			addMessage();
 			return;
 		}
@@ -157,7 +161,7 @@
 					currentConversation.config.jsonMode
 				);
 				// check if the user did not abort the request
-				if(waitForNonStreaming){
+				if (waitForNonStreaming) {
 					currentConversation.messages = [...currentConversation.messages, newMessage];
 					conversations = conversations;
 				}
@@ -241,7 +245,6 @@
 					on:addMessage={addMessage}
 					on:deleteMessage={(e) => deleteMessage(e.detail)}
 				/>
-
 			{/each}
 		</div>
 		<div
@@ -311,7 +314,9 @@
 					loading ? abort() : submit();
 				}}
 				type="button"
-				class="flex h-[39px] w-24 items-center justify-center gap-2 rounded-lg px-5 py-2.5 text-sm font-medium text-white focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:focus:ring-gray-700 {loading ? 'bg-red-900 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700' : 'bg-black hover:bg-gray-900 dark:bg-blue-600 dark:hover:bg-blue-700'}"
+				class="flex h-[39px] w-24 items-center justify-center gap-2 rounded-lg px-5 py-2.5 text-sm font-medium text-white focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:focus:ring-gray-700 {loading
+					? 'bg-red-900 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700'
+					: 'bg-black hover:bg-gray-900 dark:bg-blue-600 dark:hover:bg-blue-700'}"
 			>
 				{#if loading}
 					<div class="flex flex-none items-center gap-[3px]">