design

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -340,7 +340,7 @@
 					compatibleModels={models}
 					on:modelIdxChange={(e) => changeSelectedModel(e.detail)}
 				/>
-				<div
+				<!-- <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...
@@ -363,7 +363,7 @@
 							<option value={model.id}>{model.id}</option>
 						{/each}
 					</select>
-				</div>
+				</div> -->
 
 				<PlaygroundOptions bind:conversation={conversations[0]} />
 				<div class="mt-auto">
@@ -387,3 +387,284 @@
 		</div>
 	{/if}
 </div>
+
+<!-- only a html mockup -->
+<div class="fixed inset-0 flex h-screen items-start justify-center bg-black/85 pt-32">
+	<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 items-center border-b px-3">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="mr-2 text-sm"
+					width="1em"
+					height="1em"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<circle cx="11" cy="11" r="8"></circle>
+					<path d="m21 21-4.3-4.3"></path>
+				</svg>
+				<input
+					autofocus
+					class="flex h-10 w-full rounded-md bg-transparent py-3 text-sm placeholder-gray-400 outline-none"
+					placeholder="Search models..."
+					value=""
+				/>
+			</div>
+			<div class="max-h-[300px] overflow-y-auto overflow-x-hidden">
+				<div class="p-1">
+					<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Trending</div>
+					<div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="lucide lucide-star mr-2 h-4 w-4 text-yellow-400"
+								><polygon
+									points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+								></polygon></svg
+							>
+							<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
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="lucide lucide-star mr-2 h-4 w-4 text-yellow-400"
+								><polygon
+									points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+								></polygon></svg
+							>
+							<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
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="lucide lucide-star mr-2 h-4 w-4 text-yellow-400"
+								><polygon
+									points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+								></polygon></svg
+							>
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">google</span><span class="mx-1 text-black">/</span
+								><span class="text-black">gemma-1.1-7b-it</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="lucide lucide-star mr-2 h-4 w-4 text-yellow-400"
+								><polygon
+									points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+								></polygon></svg
+							>
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">01-ai</span><span class="mx-1 text-black">/</span><span
+									class="text-black">Yi-1.5-34B-Chat</span
+								></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="lucide lucide-star mr-2 h-4 w-4 text-yellow-400"
+								><polygon
+									points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+								></polygon></svg
+							>
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">microsoft</span><span class="mx-1 text-black">/</span
+								><span class="text-black">Phi-3-mini-4k-instruct</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="lucide lucide-star mr-2 h-4 w-4 text-yellow-400"
+								><polygon
+									points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+								></polygon></svg
+							>
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">TinyLlama</span><span class="mx-1 text-black">/</span
+								><span class="text-black">TinyLlama-1.1B-Chat-v1.0</span></span
+							>
+						</div>
+					</div>
+				</div>
+				<div class="mx-1 h-px bg-gray-200"></div>
+				<div class="p-1">
+					<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Other Models</div>
+					<div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">codellama</span><span class="mx-1 text-black">/</span
+								><span class="text-black">CodeLlama-34b-Instruct-hf</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">google</span><span class="mx-1 text-black">/</span
+								><span class="text-black">gemma-1.1-2b-it</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">google</span><span class="mx-1 text-black">/</span
+								><span class="text-black">gemma-2b-it</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">HuggingFaceH4</span><span class="mx-1 text-black"
+									>/</span
+								><span class="text-black">zephyr-7b-alpha</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">HuggingFaceH4</span><span class="mx-1 text-black"
+									>/</span
+								><span class="text-black">zephyr-7b-beta</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">HuggingFaceH4</span><span class="mx-1 text-black"
+									>/</span
+								><span class="text-black">zephyr-orpo-141b-A35b-v0.1</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">HuggingFaceTB</span><span class="mx-1 text-black"
+									>/</span
+								><span class="text-black">SmolLM-1.7B-Instruct</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<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">Llama-2-13b-chat-hf</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<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">Llama-2-70b-chat-hf</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<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">Llama-2-7b-chat-hf</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<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-8B-Instruct</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">microsoft</span><span class="mx-1 text-black">/</span
+								><span class="text-black">DialoGPT-large</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">mistralai</span><span class="mx-1 text-black">/</span
+								><span class="text-black">Mistral-7B-Instruct-v0.1</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">mistralai</span><span class="mx-1 text-black">/</span
+								><span class="text-black">Mistral-7B-Instruct-v0.2</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">mistralai</span><span class="mx-1 text-black">/</span
+								><span class="text-black">Mistral-7B-Instruct-v0.3</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">NousResearch</span><span class="mx-1 text-black"
+									>/</span
+								><span class="text-black">Nous-Hermes-2-Mixtral-8x7B-DPO</span></span
+							>
+						</div>
+						<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<span class="inline-flex items-center"
+								><span class="text-gray-500">Qwen</span><span class="mx-1 text-black">/</span><span
+									class="text-black">Qwen2-0.5B-Instruct</span
+								></span
+							>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

src/lib/components/InferencePlayground/InferencePlaygroundGenerationConfig.svelte

@@ -13,7 +13,7 @@
 	$: maxTokens = Math.min(modelMaxLength ?? GENERATION_CONFIG_SETTINGS['max_tokens'].max, 64_000);
 </script>
 
-<div class="flex flex-col gap-y-5 {classNames}">
+<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}

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -8,19 +8,36 @@
 	const dispatch = createEventDispatcher<{ modelIdxChange: number }>();
 </script>
 
-<div>
+<div class="flex flex-col gap-2">
 	<label
 		for="countries"
-		class="mb-2 flex items-baseline text-sm font-medium text-gray-900 dark:text-white"
+		class="flex items-baseline text-sm font-medium text-gray-900 dark:text-white"
 		>Models<span class="ml-4 font-normal text-gray-400">{compatibleModels.length}</span>
 	</label>
-	<select
-		{disabled}
-		class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-		on:change={(e) => dispatch('modelIdxChange', e.currentTarget.selectedIndex)}
+
+	<button
+		class="flex items-center 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"
 	>
-		{#each compatibleModels as model}
-			<option value={model.id}>{model.id}</option>
-		{/each}
-	</select>
+		<div class="flex flex-col items-start">
+			<div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
+				<img
+					class="size-3 flex-none rounded bg-gray-200 object-cover"
+					src="https://cdn-avatars.huggingface.co/v1/production/uploads/646cf8084eefb026fb8fd8bc/oCTqufkdTkjyGodsx1vo1.png"
+					alt=""
+				/>
+				meta-llama
+			</div>
+			<div>Meta-Llama-3-70B-Instruct</div>
+		</div>
+		<div class="rounded bg-gray-100">
+			<svg
+				class="text-xl"
+				xmlns="http://www.w3.org/2000/svg"
+				width="1em"
+				height="1em"
+				viewBox="0 0 24 24"
+				><path fill="currentColor" d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z" /></svg
+			>
+		</div>
+	</button>
 </div>