wip

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -8,7 +8,6 @@
 	import GenerationConfig from './InferencePlaygroundGenerationConfig.svelte';
 	import HFTokenModal from './InferencePlaygroundHFTokenModal.svelte';
 	import ModelSelector from './InferencePlaygroundModelSelector.svelte';
-	import ModelPickerModal from './InferencePlaygroundModelPickerModal.svelte';
 	import Conversation from './InferencePlaygroundConversation.svelte';
 	import { onDestroy } from 'svelte';
 	import { type ChatCompletionInputMessage } from '@huggingface/tasks';
@@ -33,7 +32,6 @@
 	let hfToken: string | undefined = import.meta.env.VITE_HF_TOKEN;
 	let viewCode = false;
 	let showTokenModal = false;
-	let showModelPickerModal = false;
 	let loading = false;
 	let latency = 0;
 	let abortController: AbortController | undefined = undefined;
@@ -134,14 +132,6 @@
 			submit();
 		}
 	}
-
-	function changeModel(modelId: string) {
-		const model = models.find((m) => m.id === modelId);
-		if (!model) {
-			return;
-		}
-		conversation.model = model;
-	}
 </script>
 
 {#if showTokenModal}
@@ -156,14 +146,6 @@
 	/>
 {/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 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]"
@@ -270,7 +252,7 @@
 		<div
 			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"
 		>
-			<ModelSelector {models} bind:conversation on:click={() => (showModelPickerModal = open)} />
+			<ModelSelector {models} bind:conversation />
 
 			<GenerationConfig bind:conversation />
 			<div class="mt-auto">

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
 	import type { Conversation, ModelEntryWithTokenizer } from '$lib/types';
 	import IconCaret from '../Icons/IconCaret.svelte';
+	import ModelPickerModal from './InferencePlaygroundModelPickerModal.svelte';
 
 	export let models: ModelEntryWithTokenizer[] = [];
 	export let conversation: Conversation;
 
+	let showModelPickerModal = false;
+
 	async function getAvatarUrl(orgName: string) {
 		const url = `https://huggingface.co/api/organizations/${orgName}/avatar`;
 		const res = await fetch(url);
@@ -17,9 +20,25 @@
 		return avatarUrl;
 	}
 
+	function changeModel(modelId: string) {
+		const model = models.find((m) => m.id === modelId);
+		if (!model) {
+			return;
+		}
+		conversation.model = model;
+	}
+
 	$: [nameSpace, modelName] = conversation.model.id.split('/');
 </script>
 
+{#if showModelPickerModal}
+	<ModelPickerModal
+		{models}
+		on:modelSelected={(e) => changeModel(e.detail)}
+		on:close={(e) => (showModelPickerModal = false)}
+	/>
+{/if}
+
 <div class="flex flex-col gap-2">
 	<label
 		for="countries"
@@ -29,7 +48,7 @@
 
 	<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
+		on:click={() => (showModelPickerModal = true)}
 	>
 		<div class="flex flex-col items-start">
 			<div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">