New model selector (design only) (#39)

src/lib/components/Icons/IconSearch.svelte

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

src/lib/components/Icons/IconStar.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let classNames = '';
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	fill="none"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<path
+		d="M16 6.52l2.76 5.58l.46 1l1 .15l6.16.89l-4.38 4.3l-.75.73l.18 1l1.05 6.13l-5.51-2.89L16 23l-.93.49l-5.51 2.85l1-6.13l.18-1l-.74-.77l-4.42-4.35l6.16-.89l1-.15l.46-1L16 6.52M16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48z"
+		fill="currentColor"
+	/>
+</svg>

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -8,6 +8,7 @@
 	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';
@@ -16,7 +17,6 @@
 	import IconShare from '../Icons/IconShare.svelte';
 	import IconDelete from '../Icons/IconDelete.svelte';
 	import IconCode from '../Icons/IconCode.svelte';
-	import IconCaret from '../Icons/IconCaret.svelte';
 
 	export let models: ModelEntryWithTokenizer[];
 
@@ -40,6 +40,7 @@
 	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;
@@ -196,6 +197,14 @@
 	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}
@@ -210,6 +219,14 @@
 	/>
 {/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]
@@ -337,10 +354,11 @@
 				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
-					compatibleModels={models}
-					on:modelIdxChange={(e) => changeSelectedModel(e.detail)}
+					{models}
+					conversation={conversations[0]}
+					on:click={() => (showModelPickerModal = open)}
 				/>
-				<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 +381,7 @@
 							<option value={model.id}>{model.id}</option>
 						{/each}
 					</select>
-				</div>
+				</div> -->
 
 				<PlaygroundOptions bind:conversation={conversations[0]} />
 				<div class="mt-auto">

src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte

@@ -253,7 +253,7 @@ print(output.choices[0].message)`
 		<div class="flex items-center justify-between px-4 pb-4 pt-6">
 			<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 transition dark:bg-gray-950 text-sm"
+				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) => {
 					const el = e.currentTarget;
 					el.classList.add('text-green-500');

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/InferencePlaygroundModelPickerModal.svelte

@@ -0,0 +1,96 @@
+<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';
+
+	export let models: ModelEntryWithTokenizer[];
+
+	let backdropEl: HTMLDivElement;
+
+	const dispatch = createEventDispatcher<{ modelSelected: string; close: void }>();
+
+	function handleKeydown(event: KeyboardEvent) {
+		// close on ESC
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			dispatch('close');
+		}
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (window?.getSelection()?.toString()) {
+			return;
+		}
+		if (event.target === backdropEl) {
+			dispatch('close');
+		}
+	}
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<div
+	class="fixed inset-0 z-10 flex h-screen items-start justify-center bg-black/85 pt-32"
+	bind:this={backdropEl}
+	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 items-center border-b px-3">
+				<IconSearch classNames="mr-2 text-sm" />
+				<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">
+							<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
+							>
+						</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
+							>
+						</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>
+						{#each models as model}
+							{@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');
+								}}
+							>
+								<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
+								>
+							</button>
+						{/each}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -1,26 +1,50 @@
 <script lang="ts">
-	import { type ModelEntry } from '@huggingface/hub';
-	import { createEventDispatcher } from 'svelte';
+	import type { Conversation, ModelEntryWithTokenizer } from '$lib/types';
+	import IconCaret from '../Icons/IconCaret.svelte';
 
-	export let compatibleModels: ModelEntry[] = [];
+	export let models: ModelEntryWithTokenizer[] = [];
+	export let conversation: Conversation;
 	export let disabled = false;
 
-	const dispatch = createEventDispatcher<{ modelIdxChange: number }>();
+	async function getAvatarUrl(orgName: string) {
+		const url = `https://huggingface.co/api/organizations/${orgName}/avatar`;
+		const res = await fetch(url);
+		if (!res.ok) {
+			console.error(`Error getting avatar url for org: ${orgName}`, res.status, res.statusText);
+			return;
+		}
+		const json = await res.json();
+		const { avatarUrl } = json;
+		return avatarUrl;
+	}
+
+	$: [nameSpace, modelName] = conversation.model.id.split('/');
 </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"
-		>Models<span class="ml-4 font-normal text-gray-400">{compatibleModels.length}</span>
+		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>
-	<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 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
 	>
-		{#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">
+				{#await getAvatarUrl(nameSpace) then avatarUrl}
+					<img
+						class="size-3 flex-none rounded bg-gray-200 object-cover"
+						src={avatarUrl}
+						alt="{nameSpace} avatar"
+					/>
+				{/await}
+				{nameSpace}
+			</div>
+			<div>{modelName}</div>
+		</div>
+		<IconCaret classNames="text-xl bg-gray-100 dark:bg-gray-500 rounded" />
+	</button>
 </div>