src/lib/components/InferencePlayground/InferencePlaygroundModelPickerModal.svelte

<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>