maek it sep component

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[];
 
@@ -388,283 +388,4 @@
 	{/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>
+<ModelPickerModal/>

src/lib/components/InferencePlayground/InferencePlaygroundModelPickerModal.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+
+</script>
+
+<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>
+				</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>