wip

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -32,17 +32,12 @@
 		}
 	];
 
-	$: if (conversations.length > 1) {
-		viewCode = false;
-	}
-
 	let systemMessage: ChatCompletionInputMessage = { role: 'system', content: '' };
 	let hfToken: string | null = 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 waitForNonStreaming = true;
@@ -96,11 +91,6 @@
 		});
 	}
 
-	function deleteConversation(idx: number) {
-		deleteAndGetItem(conversations, idx);
-		conversations = conversations;
-	}
-
 	function reset() {
 		systemMessage.content = '';
 		conversations = conversations.map((conversation) => {
@@ -123,10 +113,6 @@
 	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: '' };
@@ -262,22 +248,18 @@
 					? '*: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}
+			<Conversation
+				{loading}
+				conversation={conversations[0]}
+				index={0}
+				{viewCode}
+				on:addMessage={addMessage}
+				on:messageValueChanged={(e) => {
+					const { conversationIdx, messageIdx, value } = e.detail;
+					updateMessage(value, conversationIdx, messageIdx);
+				}}
+				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"

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -2,20 +2,16 @@
 	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';
 
 	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,49 +35,15 @@
 	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}
+				autofocus={!loading && messageIdx === conversation.messages.length - 1}
 			/>
 		{/each}
 

src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte

@@ -3,13 +3,12 @@
 	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 };
+		messageValueChanged: { messageIdx: number; value: string };
 	}>();
 </script>
 
@@ -22,8 +21,7 @@
 	<textarea
 		{autofocus}
 		value={message.content}
-		on:input={(e) =>
-			dispatch('messageValueChanged', { conversationIdx, messageIdx, value: e.target.value })}
+		on:input={(e) => dispatch('messageValueChanged', { messageIdx, value: e.target.value })}
 		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"