Imrpove models selector (#44)

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -8,6 +8,7 @@
 		handleStreamingResponse,
 		handleNonStreamingResponse,
 		isSystemPromptSupported,
+		FEATUED_MODELS_IDS,
 	} from "./inferencePlaygroundUtils";
 
 	import { onDestroy } from "svelte";
@@ -24,7 +25,7 @@
 	const startMessageSystem: ChatCompletionInputMessage = { role: "system", content: "" };
 
 	let conversation: Conversation = {
-		model: models[0],
+		model: models.find(m => FEATUED_MODELS_IDS.includes(m.id)) ?? models[0],
 		config: defaultGenerationConfig,
 		messages: [{ ...startMessageUser }],
 		systemMessage: startMessageSystem,

src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte

@@ -3,12 +3,14 @@
 
 	import { createEventDispatcher } from "svelte";
 
+	import { FEATUED_MODELS_IDS } from "./inferencePlaygroundUtils";
 	import IconSearch from "../Icons/IconSearch.svelte";
 	import IconStar from "../Icons/IconStar.svelte";
 
 	export let models: ModelEntryWithTokenizer[];
 
 	let backdropEl: HTMLDivElement;
+	let query = "";
 
 	const dispatch = createEventDispatcher<{ modelSelected: string; close: void }>();
 
@@ -28,6 +30,17 @@
 			dispatch("close");
 		}
 	}
+
+	$: featuredModels = models.filter(m =>
+		query
+			? FEATUED_MODELS_IDS.includes(m.id) && m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim())
+			: FEATUED_MODELS_IDS.includes(m.id)
+	);
+	$: otherModels = models.filter(m =>
+		query
+			? !FEATUED_MODELS_IDS.includes(m.id) && m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim())
+			: !FEATUED_MODELS_IDS.includes(m.id)
+	);
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
@@ -45,36 +58,37 @@
 					autofocus
 					class="flex h-10 w-full rounded-md bg-transparent py-3 text-sm placeholder-gray-400 outline-none"
 					placeholder="Search models ..."
-					value=""
+					bind:value={query}
 				/>
 			</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
+						{#each featuredModels 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");
+								}}
 							>
-						</div>
+								<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">{nameSpace}</span><span class="mx-1 text-black">/</span><span
+										class="text-black">{modelName}</span
+									></span
+								>
+							</button>
+						{/each}
 					</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}
+						{#each otherModels 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"

src/lib/components/InferencePlayground/inferencePlaygroundUtils.ts

@@ -61,3 +61,9 @@ export async function handleNonStreamingResponse(
 export function isSystemPromptSupported(model: ModelEntryWithTokenizer) {
 	return model.tokenizerConfig?.chat_template?.includes("system");
 }
+
+export const FEATUED_MODELS_IDS = [
+	"meta-llama/Meta-Llama-3-70B-Instruct",
+	"google/gemma-1.1-7b-it",
+	"mistralai/Mixtral-8x7B-Instruct-v0.1",
+];

src/routes/+page.server.ts

@@ -17,8 +17,13 @@ export const load: PageServerLoad = async ({ fetch }) => {
 
 	const promises = compatibleModels.map(async model => {
 		const configUrl = `https://huggingface.co/${model.id}/raw/main/tokenizer_config.json`;
-		const res = await fetch(configUrl);
+		const res = await fetch(configUrl, {
+			headers: {
+				Authorization: `Bearer ${HF_TOKEN}`,
+			},
+		});
 		if (!res.ok) {
+			console.error("Error fetching tokenizer file", res.status, res.statusText);
 			return null; // Ignore failed requests by returning null
 		}
 		const tokenizerConfig = await res.json();