Refactor (#40)

.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,164 +3,73 @@
 		createHfInference,
 		handleStreamingResponse,
 		handleNonStreamingResponse,
-		isSystemPromptSupported
-	} from './inferencePlaygroundUtils';
-	import PlaygroundOptions from './InferencePlaygroundGenerationConfig.svelte';
-	import PlaygroundTokenModal from './InferencePlaygroundHFTokenModal.svelte';
-	import PlaygroundModelSelector from './InferencePlaygroundModelSelector.svelte';
-	import ModelPickerModal from './InferencePlaygroundModelPickerModal.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 conversations: Conversation[] = [
-		{
-			id: String(Math.random()),
-			model: models[0],
-			config: defaultGenerationConfig,
-			messages: startMessages,
-			streaming: true
-		}
-	];
-
-	$: if (conversations.length > 1) {
-		viewCode = false;
-	}
+	let conversation: Conversation = {
+		model: models[0],
+		config: defaultGenerationConfig,
+		messages: startMessages,
+		streaming: true,
+	};
 
-	let systemMessage: ChatCompletionInputMessage = { role: 'system', content: '' };
-	let hfToken: string | null = import.meta.env.VITE_HF_TOKEN;
+	let systemMessage: ChatCompletionInputMessage = { role: "system", content: "" };
+	let hfToken: string | undefined = import.meta.env.VITE_HF_TOKEN;
 	let viewCode = false;
 	let showTokenModal = false;
-	let showModelPickerModal = false;
 	let loading = false;
-	let tokens = 0;
 	let latency = 0;
-	let abortControllers: AbortController[] = [];
+	let abortController: AbortController | undefined = undefined;
 	let waitForNonStreaming = true;
 
-	$: systemPromptSupported = isSystemPromptSupported(conversations[0].model);
+	$: systemPromptSupported = isSystemPromptSupported(conversation.model);
 
 	onDestroy(() => {
-		for (const abortController of abortControllers) {
-			abortController.abort();
-		}
+		abortController?.abort();
 	});
 
 	function addMessage() {
-		conversations = conversations.map((conversation) => {
-			conversation.messages = [
-				...conversation.messages,
-				{
-					role: conversation.messages.at(-1)?.role === 'user' ? 'assistant' : 'user',
-					content: ''
-				}
-			];
-			return conversation;
-		});
-	}
-
-	function updateMessage(value: string, conversationIdx: number, messageIdx: number) {
-		const lastMsgIdx = conversations[0].messages.length - 1;
-		const msg = conversations[conversationIdx].messages[messageIdx];
-		msg.content = value;
-		const { role } = msg;
-		if (messageIdx === lastMsgIdx && role === 'user') {
-			conversations = conversations.map((conversation) => {
-				conversation.messages[messageIdx].content = value;
-				return conversation;
-			});
-		}
-		conversations = conversations;
-	}
-
-	function deleteAndGetItem<T>(array: T[], index: number) {
-		if (index >= 0 && index < array.length) {
-			return array.splice(index, 1)[0];
-		}
-		return undefined;
+		conversation.messages = [
+			...conversation.messages,
+			{
+				role: conversation.messages.at(-1)?.role === "user" ? "assistant" : "user",
+				content: "",
+			},
+		];
 	}
 
 	function deleteMessage(idx: number) {
-		conversations = conversations.map((conversation) => {
-			deleteAndGetItem<ChatCompletionInputMessage>(conversation.messages, idx);
-			return conversation;
-		});
-	}
-
-	function deleteConversation(idx: number) {
-		deleteAndGetItem(conversations, idx);
-		conversations = conversations;
+		conversation.messages.splice(idx, 1)[0];
+		conversation = conversation;
 	}
 
 	function reset() {
-		systemMessage.content = '';
-		conversations = conversations.map((conversation) => {
-			conversation.messages = [...startMessages];
-			return conversation;
-		});
+		systemMessage.content = "";
+		conversation.messages = [...startMessages];
 	}
 
 	function abort() {
-		if (abortControllers.length) {
-			for (const abortController of abortControllers) {
-				abortController.abort();
-			}
-			abortControllers = [];
-		}
+		abortController?.abort();
+		abortController = undefined;
 		loading = false;
 		waitForNonStreaming = false;
 	}
 
-	async function runInference(conversation: Conversation) {
-		const startTime = performance.now();
-		const hf = createHfInference(hfToken);
-		const requestMessages = [
-			...(systemPromptSupported && systemMessage?.content?.length ? [systemMessage] : []),
-			...conversation.messages
-		];
-
-		if (conversation.streaming) {
-			const streamingMessage = { role: 'assistant', content: '' };
-			conversation.messages = [...conversation.messages, streamingMessage];
-			const abortController = new AbortController();
-			abortControllers.push(abortController);
-
-			await handleStreamingResponse(
-				hf,
-				conversation,
-				(content) => {
-					if (streamingMessage) {
-						streamingMessage.content = content;
-						conversation.messages = [...conversation.messages];
-						conversations = conversations;
-					}
-				},
-				abortController,
-				systemMessage
-			);
-		} else {
-			waitForNonStreaming = true;
-			const newMessage = await handleNonStreamingResponse(hf, conversation, systemMessage);
-			// check if the user did not abort the request
-			if (waitForNonStreaming) {
-				conversation.messages = [...conversation.messages, newMessage];
-				conversations = conversations;
-			}
-		}
-
-		const endTime = performance.now();
-		latency = Math.round(endTime - startTime);
-	}
-
 	async function submit() {
 		// // last message has to be from user
 		// if (currentConversation.messages?.at(-1)?.role !== 'user') {
@@ -175,66 +84,71 @@
 		loading = true;
 
 		try {
-			const promises = conversations.map((conversation) => runInference(conversation));
-			await Promise.all(promises);
+			const startTime = performance.now();
+			const hf = createHfInference(hfToken);
+
+			if (conversation.streaming) {
+				const streamingMessage = { role: "assistant", content: "" };
+				conversation.messages = [...conversation.messages, streamingMessage];
+				abortController = new AbortController();
+
+				await handleStreamingResponse(
+					hf,
+					conversation,
+					content => {
+						if (streamingMessage) {
+							streamingMessage.content = content;
+							conversation.messages = [...conversation.messages];
+						}
+					},
+					abortController,
+					systemMessage
+				);
+			} else {
+				waitForNonStreaming = true;
+				const newMessage = await handleNonStreamingResponse(hf, conversation, systemMessage);
+				// check if the user did not abort the request
+				if (waitForNonStreaming) {
+					conversation.messages = [...conversation.messages, newMessage];
+				}
+			}
+
+			const endTime = performance.now();
+			latency = Math.round(endTime - startTime);
+
 			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;
-			abortControllers = [];
+			abortController = undefined;
 		}
 	}
 
 	function onKeydown(event: KeyboardEvent) {
-		if (!event.shiftKey && event.key === 'Enter') {
+		if (!event.shiftKey && event.key === "Enter") {
 			submit();
 		}
 	}
-
-	function changeSelectedModel(modelIdx: number) {
-		conversations[0] = { ...conversations[0], model: models[modelIdx] };
-	}
-
-	function changeModel(modelId: string) {
-		const model = models.find((m) => m.id === modelId);
-		if (!model) {
-			return;
-		}
-		conversations[0].model = model;
-	}
 </script>
 
 {#if showTokenModal}
-	<PlaygroundTokenModal
+	<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;
 		}}
 	/>
 {/if}
 
-{#if showModelPickerModal}
-	<ModelPickerModal
-		{models}
-		on:modelSelected={(e) => changeModel(e.detail)}
-		on:close={(e) => (showModelPickerModal = false)}
-	/>
-{/if}
-
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class="w-dvh grid divide-gray-200 overflow-hidden bg-gray-100/50 max-md:divide-y md:h-dvh dark:[color-scheme:dark]
-	{conversations.length === 1
-		? 'md:grid-cols-[clamp(220px,20%,350px),minmax(0,1fr),clamp(270px,25%,300px)]'
-		: 'md:grid-cols-[clamp(220px,20%,350px),minmax(0,1fr),0]'}
-	
-	 dark:divide-gray-800 dark:bg-gray-900 dark:text-gray-300"
+	class="w-dvh grid divide-gray-200 overflow-hidden bg-gray-100/50 max-md:divide-y md:h-dvh md:grid-cols-[clamp(220px,20%,350px),minmax(0,1fr),clamp(270px,25%,300px)] dark:divide-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:[color-scheme:dark]"
 >
 	<div class=" flex flex-col overflow-y-auto py-3 pr-3">
 		<div
@@ -247,37 +161,23 @@
 				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>
 		</div>
 	</div>
 	<div class="relative divide-y divide-gray-200 pt-3 dark:divide-gray-800" on:keydown={onKeydown}>
-		<div
-			class="flex h-[calc(100dvh-5rem)] divide-x divide-gray-200 {conversations.length === 2
-				? '*:w-1/2'
-				: conversations.length == 3
-					? '*:w-1/3'
-					: '*:w-full'} dark:divide-gray-800"
-		>
-			{#each conversations as conversation, index}
-				<Conversation
-					{loading}
-					{conversation}
-					{index}
-					{viewCode}
-					sideBySide={conversations.length > 1}
-					on:addMessage={addMessage}
-					on:messageValueChanged={(e) => {
-						const { conversationIdx, messageIdx, value } = e.detail;
-						updateMessage(value, conversationIdx, messageIdx);
-					}}
-					on:deleteMessage={(e) => deleteMessage(e.detail)}
-					on:deleteConversation={(e) => deleteConversation(e.detail)}
-				/>
-			{/each}
+		<div class="flex h-[calc(100dvh-5rem)] divide-x divide-gray-200 *:w-full dark:divide-gray-800">
+			<Conversation
+				{loading}
+				{conversation}
+				index={0}
+				{viewCode}
+				on:addMessage={addMessage}
+				on:deleteMessage={e => deleteMessage(e.detail)}
+			/>
 		</div>
 		<div
 			class="fixed inset-x-0 bottom-0 flex h-20 items-center gap-2 overflow-hidden whitespace-nowrap px-3 md:absolute"
@@ -286,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>
 
@@ -311,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={() => {
@@ -340,68 +238,34 @@
 						/>
 					</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}
 			</button>
 		</div>
 	</div>
-	{#if conversations.length === 1}
-		<div class="flex flex-col p-3">
-			<div
-				class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-gradient-to-b from-white via-white p-3 shadow-sm dark:border-white/5 dark:from-gray-800/40 dark:via-gray-800/40"
-			>
-				<PlaygroundModelSelector
-					{models}
-					conversation={conversations[0]}
-					on:click={() => (showModelPickerModal = open)}
-				/>
-				<!-- <div
-					class="group relative -mt-4 flex h-[26px] w-full items-center justify-center gap-2 rounded-lg bg-black px-5 text-sm text-white hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-gray-700"
-				>
-					Compare with...
-					<IconCaret classNames="opacity-70" />
-					<select
-						class="absolute inset-0 border-none bg-white text-base opacity-0 outline-none"
-						on:change|preventDefault={(e) => {
-							conversations = [
-								...conversations,
-								{
-									id: String(Math.random()),
-									model: e.target.value,
-									config: { temperature: 0.5, maxTokens: 2048, streaming: true },
-									messages: [...conversations[0].messages]
-								}
-							];
-						}}
-					>
-						{#each models as model}
-							<option value={model.id}>{model.id}</option>
-						{/each}
-					</select>
-				</div> -->
+	<div class="flex flex-col p-3">
+		<div
+			class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-gradient-to-b from-white via-white p-3 shadow-sm dark:border-white/5 dark:from-gray-800/40 dark:via-gray-800/40"
+		>
+			<ModelSelector {models} bind:conversation />
 
-				<PlaygroundOptions bind:conversation={conversations[0]} />
-				<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
-						>
-						<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
-						>
+			<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>
+					<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
+					>
 
-						<div class="ml-auto w-12 text-right text-sm">76%</div>
-					</div>
-					<div class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
-						<div class="h-2 rounded-full bg-black dark:bg-gray-400" style="width: 75%"></div>
-					</div>
+					<div class="ml-auto w-12 text-right text-sm">76%</div>
+				</div>
+				<div class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+					<div class="h-2 rounded-full bg-black dark:bg-gray-400" style="width: 75%"></div>
 				</div>
 			</div>
 		</div>
-	{/if}
+	</div>
 </div>

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": "meta-llama/Meta-Llama-3-8B-Instruct",
-    "messages": ${formattedMessages({ sep: ',\n    ', start: `[\n    `, end: `\n]` })},
-    ${formattedConfig({ sep: ',\n    ', start: '', end: '' })},
+    "model": "${conversation.model.id}",
+    "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": "meta-llama/Meta-Llama-3-8B-Instruct",
-    "messages": ${formattedMessages({ sep: ',\n    ', start: `[\n    `, end: `\n]` })},
-    ${formattedConfig({ sep: ',\n    ', start: '', end: '' })}
-}'`
+    "model": "${conversation.model.id}",
+    "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,21 +1,17 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import CodeSnippets from './InferencePlaygroundCodeSnippets.svelte';
-	import Message from './InferencePlaygroundMessage.svelte';
-	import PlaygroundOptions from './InferencePlaygroundGenerationConfig.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;
-	export let index;
 	export let viewCode;
-	export let sideBySide = false;
 
 	const dispatch = createEventDispatcher<{
 		addMessage: void;
 		deleteMessage: number;
-		deleteConversation: number;
 	}>();
 
 	let messageContainer: HTMLDivElement | null = null;
@@ -39,55 +35,19 @@
 	class:animate-pulse={loading && !conversation.streaming}
 	bind:this={messageContainer}
 >
-	{#if sideBySide}
-		<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={() => dispatch('deleteConversation', index)}
-			>
-				✕
-			</button>
-			<button
-				class="group relative 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
-				>
-				<PlaygroundOptions
-					bind:conversation
-					classNames="absolute top-8 right-0 w-56 invisible group-focus:visible hover:visible border border-gray-200/80 bg-white z-10 px-4 py-6 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-800 rounded-xl"
-				/>
-			</button>
-		</div>
-	{/if}
 	{#if !viewCode}
 		{#each conversation.messages as message, messageIdx}
 			<Message
 				class="border-b"
 				{message}
-				conversationIdx={index}
-				{messageIdx}
-				on:messageValueChanged
-				on:delete={() => dispatch('deleteMessage', messageIdx)}
-				autofocus={!sideBySide && !loading && messageIdx === conversation.messages.length - 1}
+				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,16 +1,11 @@
 <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 conversationIdx: number;
-	export let messageIdx: number;
 	export let autofocus: boolean = false;
 
-	const dispatch = createEventDispatcher<{
-		delete: void;
-		messageValueChanged: { conversationIdx: number; messageIdx: number; value: string };
-	}>();
+	const dispatch = createEventDispatcher<{ delete: void }>();
 </script>
 
 <div
@@ -21,9 +16,7 @@
 	</div>
 	<textarea
 		{autofocus}
-		value={message.content}
-		on:input={(e) =>
-			dispatch('messageValueChanged', { conversationIdx, messageIdx, value: e.target.value })}
+		bind:value={message.content}
 		placeholder="Enter {message.role} message"
 		class="resize-none rounded bg-transparent px-2 py-2.5 ring-gray-100 [field-sizing:content] hover:resize-y hover:bg-white focus:resize-y focus:bg-white focus:ring group-hover/message:ring @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
 		rows="1"
@@ -31,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,10 +1,12 @@
 <script lang="ts">
-	import type { Conversation, ModelEntryWithTokenizer } from '$lib/types';
-	import IconCaret from '../Icons/IconCaret.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;
-	export let disabled = false;
+
+	let showModelPickerModal = false;
 
 	async function getAvatarUrl(orgName: string) {
 		const url = `https://huggingface.co/api/organizations/${orgName}/avatar`;
@@ -18,28 +20,38 @@
 		return avatarUrl;
 	}
 
-	$: [nameSpace, modelName] = conversation.model.id.split('/');
+	function changeModel(modelId: string) {
+		const model = models.find(m => m.id === modelId);
+		if (!model) {
+			return;
+		}
+		conversation.model = model;
+	}
+
+	$: [nameSpace, modelName] = conversation.model.id.split("/");
 </script>
 
+{#if showModelPickerModal}
+	<ModelSelectorModal
+		{models}
+		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>
 
 	<button
 		class="flex items-center justify-between gap-6 overflow-hidden whitespace-nowrap rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight shadow dark:bg-gray-700"
-		on:click
+		on:click={() => (showModelPickerModal = true)}
 	>
 		<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/{InferencePlaygroundModelPickerModal.svelte → 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,9 +1,8 @@
-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 = {
-	id: string;
 	model: ModelEntryWithTokenizer;
 	config: GenerationConfig;
 	messages: ChatCompletionInputMessage[];

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()],
 });