open modal on click

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -40,7 +40,7 @@
 	let hfToken: string | null = import.meta.env.VITE_HF_TOKEN;
 	let viewCode = false;
 	let showTokenModal = false;
-	let showModelPickerModal = true;
+	let showModelPickerModal = false;
 	let loading = false;
 	let tokens = 0;
 	let latency = 0;
@@ -354,8 +354,9 @@
 				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
 					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"

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -1,22 +1,23 @@
 <script lang="ts">
-	import { type ModelEntry } from '@huggingface/hub';
-	import { createEventDispatcher } from 'svelte';
+	import type { Conversation, ModelEntryWithTokenizer } from '$lib/types';
 
-	export let compatibleModels: ModelEntry[] = [];
+	export let models: ModelEntryWithTokenizer[] = [];
+	export let conversation: Conversation;
 	export let disabled = false;
 
-	const dispatch = createEventDispatcher<{ modelIdxChange: number }>();
+	$: [nameSpace, modelName] = conversation.model.id.split('/');
 </script>
 
 <div class="flex flex-col gap-2">
 	<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">{compatibleModels.length}</span>
+		>Models<span class="ml-4 font-normal text-gray-400">{models.length}</span>
 	</label>
 
 	<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"
+		on:click
 	>
 		<div class="flex flex-col items-start">
 			<div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
@@ -25,9 +26,9 @@
 					src="https://cdn-avatars.huggingface.co/v1/production/uploads/646cf8084eefb026fb8fd8bc/oCTqufkdTkjyGodsx1vo1.png"
 					alt=""
 				/>
-				meta-llama
+				{nameSpace}
 			</div>
-			<div>Meta-Llama-3-70B-Instruct</div>
+			<div>{modelName}</div>
 		</div>
 		<div class="rounded bg-gray-100">
 			<svg