Compare models

src/lib/components/Icons/IconCog.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg class={classNames} 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
+>

src/lib/components/Icons/IconThrashcan.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	style=""
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 24 24"
+	><path
+		fill="currentColor"
+		d="M2.131 13.63a10 10 0 0 1 .001-3.26c1.101.026 2.092-.502 2.477-1.431c.385-.93.058-2.003-.74-2.763a10 10 0 0 1 2.306-2.307c.76.798 1.834 1.125 2.763.74c.93-.385 1.458-1.376 1.431-2.477a10 10 0 0 1 3.261 0c-.026 1.102.502 2.092 1.431 2.477c.93.385 2.003.058 2.763-.74a10 10 0 0 1 2.307 2.306c-.798.76-1.125 1.834-.74 2.764s1.376 1.458 2.477 1.43a10 10 0 0 1 0 3.262c-1.102-.027-2.092.501-2.477 1.43c-.385.93-.058 2.004.74 2.764a10 10 0 0 1-2.306 2.306c-.76-.798-1.834-1.125-2.764-.74s-1.458 1.376-1.43 2.478a10 10 0 0 1-3.262-.001c.027-1.101-.502-2.092-1.43-2.477c-.93-.385-2.004-.058-2.764.74a10 10 0 0 1-2.306-2.306c.798-.76 1.125-1.834.74-2.763c-.385-.93-1.376-1.458-2.478-1.431M12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6"
+	/></svg
+>

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Conversation, ModelEntryWithTokenizer } from "./types";
+	import type { Conversation, ModelEntryWithTokenizer, Session } from "./types";
 	import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 
 	import { page } from "$app/stores";
@@ -17,42 +17,73 @@
 	import HFTokenModal from "./InferencePlaygroundHFTokenModal.svelte";
 	import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
 	import PlaygroundConversation from "./InferencePlaygroundConversation.svelte";
+	import PlaygroundConversationHeader from "./InferencePlaygroundConversationHeader.svelte";
 	import IconDelete from "../Icons/IconDelete.svelte";
 	import IconCode from "../Icons/IconCode.svelte";
 	import IconInfo from "../Icons/IconInfo.svelte";
+	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
+	import IconThrashcan from "../Icons/IconThrashcan.svelte";
+	import { goto } from "$app/navigation";
 
 	export let models: ModelEntryWithTokenizer[];
 
 	const startMessageUser: ChatCompletionInputMessage = { role: "user", content: "" };
 	const startMessageSystem: ChatCompletionInputMessage = { role: "system", content: "" };
 
-	const modelIdFromQueryParam = $page.url.searchParams.get("modelId");
-	const modelFromQueryParam = models.find(model => model.id === modelIdFromQueryParam);
+	const modelIdsFromQueryParam = $page.url.searchParams.get("modelId")?.split(",");
+	const modelsFromQueryParam = modelIdsFromQueryParam?.map(id => models.find(model => model.id === id));
 
-	let conversation: Conversation = {
-		model: modelFromQueryParam ?? models.find(m => FEATURED_MODELS_IDS.includes(m.id)) ?? models[0],
-		config: defaultGenerationConfig,
-		messages: [{ ...startMessageUser }],
-		systemMessage: startMessageSystem,
-		streaming: true,
+	let session: Session = {
+		conversations: [
+			{
+				model: models.find(m => FEATURED_MODELS_IDS.includes(m.id)) ?? models[0],
+				config: { ...defaultGenerationConfig },
+				messages: [{ ...startMessageUser }],
+				systemMessage: startMessageSystem,
+				streaming: true,
+			},
+		],
 	};
 
+	if (modelsFromQueryParam?.length) {
+		const conversations = modelsFromQueryParam.map(model => {
+			return {
+				model,
+				config: { ...defaultGenerationConfig },
+				messages: [{ ...startMessageUser }],
+				systemMessage: startMessageSystem,
+				streaming: true,
+			};
+		}) as [Conversation] | [Conversation, Conversation];
+		session.conversations = conversations;
+		session = session;
+	}
+
 	let hfToken = "";
 	let viewCode = false;
 	let viewSettings = false;
 	let showTokenModal = false;
 	let loading = false;
-	let latency = 0;
-	let generatedTokensCount = 0;
-	let abortController: AbortController | undefined = undefined;
+	let abortControllers: AbortController[] = [];
 	let waitForNonStreaming = true;
 	let storeLocallyHfToken = true;
+	let selectCompareModelOpen = false;
+
+	interface GenerationStatistics {
+		latency: number;
+		generatedTokensCount: number;
+	}
+	let generationStats: [GenerationStatistics] | [GenerationStatistics, GenerationStatistics] = [
+		{ latency: 0, generatedTokensCount: 0 },
+	]; // todo: support two models from the starts from the url daw
 
 	const hfTokenLocalStorageKey = "hf_token";
 
-	$: systemPromptSupported = isSystemPromptSupported(conversation.model);
+	$: systemPromptSupported = session.conversations.some(conversation => isSystemPromptSupported(conversation.model));
+	$: compareActive = session.conversations.length === 2;
 
-	function addMessage() {
+	function addMessage(conversationIdx: number) {
+		const conversation = session.conversations[conversationIdx];
 		conversation.messages = [
 			...conversation.messages,
 			{
@@ -60,21 +91,29 @@
 				content: "",
 			},
 		];
+		session = session;
 	}
 
-	function deleteMessage(idx: number) {
-		conversation.messages.splice(idx, 1)[0];
-		conversation = conversation;
+	function deleteMessage(conversationIdx: number, idx: number) {
+		session.conversations[conversationIdx].messages.splice(idx, 1)[0];
+		session = session;
 	}
 
 	function reset() {
-		conversation.systemMessage.content = "";
-		conversation.messages = [{ ...startMessageUser }];
+		session.conversations.map(conversation => {
+			conversation.systemMessage.content = "";
+			conversation.messages = [{ ...startMessageUser }];
+		});
+		session = session;
 	}
 
 	function abort() {
-		abortController?.abort();
-		abortController = undefined;
+		if (abortControllers.length) {
+			for (const abortController of abortControllers) {
+				abortController.abort();
+			}
+			abortControllers = [];
+		}
 		loading = false;
 		waitForNonStreaming = false;
 	}
@@ -85,59 +124,74 @@
 		showTokenModal = true;
 	}
 
+	async function runInference(conversation: Conversation, conversationIdx: number) {
+		const startTime = performance.now();
+		const hf = createHfInference(hfToken);
+
+		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;
+						session = session;
+						generationStats[conversationIdx].generatedTokensCount += 1;
+					}
+				},
+				abortController
+			);
+		} else {
+			waitForNonStreaming = true;
+			const { message: newMessage, completion_tokens: newTokensCount } = await handleNonStreamingResponse(
+				hf,
+				conversation
+			);
+			// check if the user did not abort the request
+			if (waitForNonStreaming) {
+				conversation.messages = [...conversation.messages, newMessage];
+				generationStats[conversationIdx].generatedTokensCount += newTokensCount;
+			}
+		}
+
+		const endTime = performance.now();
+		generationStats[conversationIdx].latency = Math.round(endTime - startTime);
+	}
+
 	async function submit() {
 		if (!hfToken) {
 			showTokenModal = true;
 			return;
 		}
 
-		if (conversation.messages.at(-1)?.role === "assistant") {
-			return alert("Messages must alternate between user/assistant roles.");
+		for (const [idx, conversation] of session.conversations.entries()) {
+			if (conversation.messages.at(-1)?.role === "assistant") {
+				let prefix = "";
+				if (session.conversations.length === 2) {
+					prefix = `Error on ${idx === 0 ? "left" : "right"} conversation. `;
+				}
+				return alert(`${prefix}Messages must alternate between user/assistant roles.`);
+			}
 		}
 
 		(document.activeElement as HTMLElement).blur();
 		loading = true;
 
 		try {
-			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];
-							generatedTokensCount += 1;
-						}
-					},
-					abortController
-				);
-			} else {
-				waitForNonStreaming = true;
-				const { message: newMessage, completion_tokens: newTokensCount } = await handleNonStreamingResponse(
-					hf,
-					conversation
-				);
-				// check if the user did not abort the request
-				if (waitForNonStreaming) {
-					conversation.messages = [...conversation.messages, newMessage];
-					generatedTokensCount += newTokensCount;
-				}
-			}
-
-			const endTime = performance.now();
-			latency = Math.round(endTime - startTime);
+			const promises = session.conversations.map((conversation, idx) => runInference(conversation, idx));
+			await Promise.all(promises);
 		} catch (error) {
-			if (conversation.messages.at(-1)?.role === "assistant" && !conversation.messages.at(-1)?.content?.trim()) {
-				conversation.messages.pop();
-				conversation.messages = [...conversation.messages];
+			for (const conversation of session.conversations) {
+				if (conversation.messages.at(-1)?.role === "assistant" && !conversation.messages.at(-1)?.content?.trim()) {
+					conversation.messages.pop();
+					conversation.messages = [...conversation.messages];
+				}
+				session = session;
 			}
 			if (error instanceof Error) {
 				if (error.message.includes("token seems invalid")) {
@@ -153,7 +207,7 @@
 			}
 		} finally {
 			loading = false;
-			abortController = undefined;
+			abortControllers = [];
 		}
 	}
 
@@ -180,6 +234,45 @@
 		}
 	}
 
+	function addCompareModel(modelId: ModelEntryWithTokenizer["id"]) {
+		const model = models.find(m => m.id === modelId);
+		if (!model || session.conversations.length === 2) {
+			return;
+		}
+		const newConversation = { ...JSON.parse(JSON.stringify(session.conversations[0])), model };
+		session.conversations = [...session.conversations, newConversation];
+		generationStats = [generationStats[0], { latency: 0, generatedTokensCount: 0 }];
+
+		// update query param
+		const url = new URL($page.url);
+		const queryParamValue = `${session.conversations[0].model.id},${modelId}`;
+		url.searchParams.set("modelId", queryParamValue);
+
+		const parentOrigin = "https://huggingface.co";
+		window.parent.postMessage({ queryString: `modelId=${queryParamValue}` }, parentOrigin);
+		goto(url.toString(), { replaceState: true });
+	}
+
+	function removeCompareModal(conversationIdx: number) {
+		session.conversations.splice(conversationIdx, 1)[0];
+		session = session;
+		generationStats.splice(conversationIdx, 1)[0];
+		generationStats = generationStats;
+
+		// update query param
+		const url = new URL($page.url);
+		const queryParamValue = url.searchParams.get("modelId");
+		if (queryParamValue) {
+			const modelIds = queryParamValue.split(",") as [string, string];
+			const newQueryParamValue = conversationIdx === 1 ? modelIds[0] : modelIds[1];
+			url.searchParams.set("modelId", newQueryParamValue);
+
+			const parentOrigin = "https://huggingface.co";
+			window.parent.postMessage({ queryString: `modelId=${newQueryParamValue}` }, parentOrigin);
+			goto(url.toString(), { replaceState: true });
+		}
+	}
+
 	onMount(() => {
 		const storedHfToken = localStorage.getItem(hfTokenLocalStorageKey);
 		if (storedHfToken !== null) {
@@ -188,7 +281,9 @@
 	});
 
 	onDestroy(() => {
-		abortController?.abort();
+		for (const abortController of abortControllers) {
+			abortController.abort();
+		}
 	});
 </script>
 
@@ -198,7 +293,9 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class="w-dvh grid h-dvh divide-gray-200 overflow-hidden bg-gray-100/50 max-md:grid-rows-[120px,1fr] max-md:divide-y 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]"
+	class="w-dvh grid h-dvh divide-gray-200 overflow-hidden bg-gray-100/50 max-md:grid-rows-[120px,1fr] max-md:divide-y dark:divide-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:[color-scheme:dark] {compareActive
+		? 'md:grid-cols-[clamp(220px,20%,350px),minmax(0,1fr)]'
+		: 'md:grid-cols-[clamp(220px,20%,350px),minmax(0,1fr),clamp(270px,25%,300px)]'}"
 >
 	<div class="flex flex-col overflow-y-auto py-3 pr-3 max-md:pl-3">
 		<div
@@ -213,8 +310,13 @@
 				placeholder={systemPromptSupported
 					? "Enter a custom prompt"
 					: "System prompt is not supported with the chosen model."}
-				value={systemPromptSupported ? conversation.systemMessage.content : ""}
-				on:input={e => (conversation.systemMessage.content = e.currentTarget.value)}
+				value={systemPromptSupported ? session.conversations[0].systemMessage.content : ""}
+				on:input={e => {
+					for (const conversation of session.conversations) {
+						conversation.systemMessage.content = e.currentTarget.value;
+					}
+					session = session;
+				}}
 				class="absolute inset-x-0 bottom-0 h-full resize-none bg-transparent px-3 pt-10 text-sm outline-none"
 			></textarea>
 		</div>
@@ -223,153 +325,175 @@
 		<div
 			class="flex h-[calc(100dvh-5rem-120px)] divide-x divide-gray-200 *:w-full md:h-[calc(100dvh-5rem)] md:pt-3 dark:divide-gray-800"
 		>
-			<PlaygroundConversation
-				{loading}
-				{conversation}
-				{viewCode}
-				{hfToken}
-				on:addMessage={addMessage}
-				on:deleteMessage={e => deleteMessage(e.detail)}
-			/>
+			{#each session.conversations as conversation, conversationIdx}
+				<div>
+					{#if compareActive}
+						<PlaygroundConversationHeader
+							{models}
+							{conversationIdx}
+							bind:conversation
+							on:close={() => removeCompareModal(conversationIdx)}
+						/>
+					{/if}
+					<PlaygroundConversation
+						{loading}
+						{conversation}
+						{viewCode}
+						{hfToken}
+						on:addMessage={() => addMessage(conversationIdx)}
+						on:deleteMessage={e => deleteMessage(conversationIdx, e.detail)}
+					/>
+				</div>
+			{/each}
 		</div>
 		<div
-			class="fixed inset-x-0 bottom-0 flex h-20 items-center gap-2 overflow-hidden whitespace-nowrap px-3 md:absolute"
+			class="fixed inset-x-0 bottom-0 flex h-20 items-center justify-center gap-2 overflow-hidden whitespace-nowrap px-3 md:absolute"
 		>
-			<button
-				type="button"
-				on:click={() => (viewSettings = !viewSettings)}
-				class="flex h-[39px] items-center gap-1 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 md:hidden 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"
-			>
-				<svg
-					class="text-black dark:text-white"
-					style=""
-					xmlns="http://www.w3.org/2000/svg"
-					xmlns:xlink="http://www.w3.org/1999/xlink"
-					aria-hidden="true"
-					focusable="false"
-					role="img"
-					width="1em"
-					height="1em"
-					preserveAspectRatio="xMidYMid meet"
-					viewBox="0 0 24 24"
-					><path
-						fill="currentColor"
-						d="M2.131 13.63a10 10 0 0 1 .001-3.26c1.101.026 2.092-.502 2.477-1.431c.385-.93.058-2.003-.74-2.763a10 10 0 0 1 2.306-2.307c.76.798 1.834 1.125 2.763.74c.93-.385 1.458-1.376 1.431-2.477a10 10 0 0 1 3.261 0c-.026 1.102.502 2.092 1.431 2.477c.93.385 2.003.058 2.763-.74a10 10 0 0 1 2.307 2.306c-.798.76-1.125 1.834-.74 2.764s1.376 1.458 2.477 1.43a10 10 0 0 1 0 3.262c-1.102-.027-2.092.501-2.477 1.43c-.385.93-.058 2.004.74 2.764a10 10 0 0 1-2.306 2.306c-.76-.798-1.834-1.125-2.764-.74s-1.458 1.376-1.43 2.478a10 10 0 0 1-3.262-.001c.027-1.101-.502-2.092-1.43-2.477c-.93-.385-2.004-.058-2.764.74a10 10 0 0 1-2.306-2.306c.798-.76 1.125-1.834.74-2.763c-.385-.93-1.376-1.458-2.478-1.431M12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6"
-					/></svg
-				>
-				{!viewSettings ? "Settings" : "Hide Settings"}
-			</button>
-			<button
-				type="button"
-				on:click={reset}
-				class="flex size-[39px] flex-none items-center justify-center rounded-lg border border-gray-200 bg-white 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"
-			>
-				<IconDelete />
-			</button>
-			<div class="flex-1 items-center justify-center text-center text-sm text-gray-500">
-				<span class="max-xl:hidden">{generatedTokensCount} tokens · Latency {latency}ms</span>
-			</div>
-			<button
-				type="button"
-				on:click={() => (viewCode = !viewCode)}
-				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
-			>
-			<button
-				on:click={() => {
-					viewCode = false;
-					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'}"
-			>
-				{#if loading}
-					<div class="flex flex-none items-center gap-[3px]">
-						<span class="mr-2">
-							{#if conversation.streaming}
-								Stop
-							{:else}
-								Cancel
-							{/if}
-						</span>
-						<div
-							class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
-							style="animation-delay: 0.25s;"
-						/>
-						<div
-							class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
-							style="animation-delay: 0.5s;"
-						/>
-						<div
-							class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
-							style="animation-delay: 0.75s;"
-						/>
-					</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"
-						>⌘<span class="translate-y-px">↵</span></span
+			<div class="flex flex-1 justify-start gap-x-2">
+				{#if !compareActive}
+					<button
+						type="button"
+						on:click={() => (viewSettings = !viewSettings)}
+						class="flex h-[39px] items-center gap-1 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 md:hidden 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"
 					>
+						<IconThrashcan classNames="text-black dark:text-white" />
+						{!viewSettings ? "Settings" : "Hide Settings"}
+					</button>
 				{/if}
-			</button>
+				<button
+					type="button"
+					on:click={reset}
+					class="flex size-[39px] flex-none items-center justify-center rounded-lg border border-gray-200 bg-white 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"
+				>
+					<IconDelete />
+				</button>
+			</div>
+			<div class="flex flex-1 flex-shrink-0 items-center justify-center gap-x-8 text-center text-sm text-gray-500">
+				{#each generationStats as { latency, generatedTokensCount }}
+					<span class="max-xl:hidden">{generatedTokensCount} tokens · Latency {latency}ms</span>
+				{/each}
+			</div>
+			<div class="flex flex-1 justify-end gap-x-2">
+				<button
+					type="button"
+					on:click={() => (viewCode = !viewCode)}
+					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
+				>
+				<button
+					on:click={() => {
+						viewCode = false;
+						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'}"
+				>
+					{#if loading}
+						<div class="flex flex-none items-center gap-[3px]">
+							<span class="mr-2">
+								{#if session.conversations[0].streaming || session.conversations[1]?.streaming}
+									Stop
+								{:else}
+									Cancel
+								{/if}
+							</span>
+							<div
+								class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
+								style="animation-delay: 0.25s;"
+							/>
+							<div
+								class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
+								style="animation-delay: 0.5s;"
+							/>
+							<div
+								class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
+								style="animation-delay: 0.75s;"
+							/>
+						</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"
+							>⌘<span class="translate-y-px">↵</span></span
+						>
+					{/if}
+				</button>
+			</div>
 		</div>
 	</div>
-	<div class="flex flex-col p-3 {viewSettings ? 'max-md:fixed' : 'max-md:hidden'} max-md:inset-x-0 max-md:bottom-20">
-		<div
-			class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-white bg-gradient-to-b from-white via-white p-3 shadow-sm dark:border-white/5 dark:bg-gray-900 dark:from-gray-800/40 dark:via-gray-800/40"
-		>
-			<div class="flex flex-col gap-2">
-				<ModelSelector {models} bind:conversation />
-				<div class="self-end text-xs">
-					<a
-						href="https://huggingface.co/{conversation.model.id}"
-						target="_blank"
-						class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:hover:text-gray-400"
-					>
-						<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
-							><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z" /></svg
+	{#if !compareActive}
+		<div class="flex flex-col p-3 {viewSettings ? 'max-md:fixed' : 'max-md:hidden'} max-md:inset-x-0 max-md:bottom-20">
+			<div
+				class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-white bg-gradient-to-b from-white via-white p-3 shadow-sm dark:border-white/5 dark:bg-gray-900 dark:from-gray-800/40 dark:via-gray-800/40"
+			>
+				<div class="flex flex-col gap-2">
+					<ModelSelector {models} bind:conversation={session.conversations[0]} />
+					<div class="self-end text-xs">
+						<a
+							href="https://huggingface.co/{session.conversations[0].model.id}"
+							target="_blank"
+							class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:hover:text-gray-400"
 						>
-						Model page
-					</a>
+							<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
+								><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z" /></svg
+							>
+							Model page
+						</a>
+					</div>
 				</div>
-			</div>
 
-			<GenerationConfig bind:conversation />
-			{#if hfToken}
 				<button
-					on:click={resetToken}
-					class="mt-auto flex items-center gap-1 self-end text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
-					><svg xmlns="http://www.w3.org/2000/svg" class="text-xs" width="1em" height="1em" viewBox="0 0 32 32"
-						><path
-							fill="currentColor"
-							d="M23.216 4H26V2h-7v6h2V5.096A11.96 11.96 0 0 1 28 16c0 6.617-5.383 12-12 12v2c7.72 0 14-6.28 14-14c0-5.009-2.632-9.512-6.784-12"
-						/><path fill="currentColor" d="M16 20a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M15 9h2v9h-2z" /><path
-							fill="currentColor"
-							d="M16 4V2C8.28 2 2 8.28 2 16c0 4.977 2.607 9.494 6.784 12H6v2h7v-6h-2v2.903A11.97 11.97 0 0 1 4 16C4 9.383 9.383 4 16 4"
-						/></svg
-					>
-					Reset token</button
+					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"
+					on:click={() => (selectCompareModelOpen = true)}
 				>
-			{/if}
-			<div class="mt-auto hidden">
-				<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
+					Compare with...
+					{#if selectCompareModelOpen}
+						<ModelSelectorModal
+							{models}
+							conversation={session.conversations[0]}
+							on:modelSelected={e => addCompareModel(e.detail)}
+							on:close={() => (selectCompareModelOpen = false)}
+						/>
+					{/if}
+				</button>
+
+				<GenerationConfig bind:conversation={session.conversations[0]} />
+				{#if hfToken}
+					<button
+						on:click={resetToken}
+						class="mt-auto flex items-center gap-1 self-end text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
+						><svg xmlns="http://www.w3.org/2000/svg" class="text-xs" width="1em" height="1em" viewBox="0 0 32 32"
+							><path
+								fill="currentColor"
+								d="M23.216 4H26V2h-7v6h2V5.096A11.96 11.96 0 0 1 28 16c0 6.617-5.383 12-12 12v2c7.72 0 14-6.28 14-14c0-5.009-2.632-9.512-6.784-12"
+							/><path fill="currentColor" d="M16 20a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M15 9h2v9h-2z" /><path
+								fill="currentColor"
+								d="M16 4V2C8.28 2 2 8.28 2 16c0 4.977 2.607 9.494 6.784 12H6v2h7v-6h-2v2.903A11.97 11.97 0 0 1 4 16C4 9.383 9.383 4 16 4"
+							/></svg
+						>
+						Reset token</button
 					>
+				{/if}
+				<div class="mt-auto hidden">
+					<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 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>
 		</div>
-	</div>
+	{/if}
 </div>
 
 <a

src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { Conversation, ModelEntryWithTokenizer } from "$lib/components/InferencePlayground/types";
+
+	import { createEventDispatcher } from "svelte";
+
+	import { page } from "$app/stores";
+	import IconCog from "../Icons/IconCog.svelte";
+	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
+	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
+	import { goto } from "$app/navigation";
+
+	export let models: ModelEntryWithTokenizer[];
+	export let conversation: Conversation;
+	export let conversationIdx: number;
+
+	const dispatch = createEventDispatcher<{ close: string }>();
+
+	let modelSelectorOpen = false;
+
+	function changeModel(newModelId: ModelEntryWithTokenizer["id"]) {
+		const model = models.find(m => m.id === newModelId);
+		if (!model) {
+			return;
+		}
+		conversation.model = model;
+
+		const url = new URL($page.url);
+		const queryParamValue = url.searchParams.get("modelId");
+		if (queryParamValue) {
+			const modelIds = queryParamValue.split(",") as [string, string];
+			modelIds[conversationIdx] = newModelId;
+
+			const newQueryParamValue = modelIds.join(",");
+			url.searchParams.set("modelId", newQueryParamValue);
+
+			const parentOrigin = "https://huggingface.co";
+			window.parent.postMessage({ queryString: `modelId=${newQueryParamValue}` }, parentOrigin);
+
+			goto(url.toString(), { replaceState: true });
+		}
+	}
+</script>
+
+{#if modelSelectorOpen}
+	<ModelSelectorModal
+		{models}
+		{conversation}
+		on:modelSelected={e => changeModel(e.detail)}
+		on:close={() => (modelSelectorOpen = false)}
+	/>
+{/if}
+
+<div
+	class="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"
+>
+	<div class="size-3.5 rounded bg-black dark:bg-gray-400"></div>
+	<button on:click={() => (modelSelectorOpen = true)}>{conversation.model.id}</button>
+	<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("close", conversation.model.id)}
+	>
+		✕
+	</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"
+	>
+		<IconCog />
+		<GenerationConfig
+			bind:conversation
+			classNames="absolute top-7 min-w-[200px] right-3 bg-white dark:bg-gray-900 p-4 rounded-xl border border-gray-200 dark:border-gray-600 hidden group-focus:flex hover:flex"
+		/>
+	</button>
+</div>

src/lib/components/InferencePlayground/types.ts

@@ -10,6 +10,10 @@ export type Conversation = {
 	streaming: boolean;
 };
 
+export type Session = {
+	conversations: [Conversation] | [Conversation, Conversation];
+};
+
 interface TokenizerConfig {
 	chat_template?: string;
 	model_max_length?: number;