improve search

src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import type { Conversation } from "$lib/types";
 
-	import { createEventDispatcher, tick } from "svelte";
+	import { createEventDispatcher, onMount, tick } from "svelte";
 
 	import { models } from "$lib/stores/models";
 	import IconSearch from "../Icons/IconSearch.svelte";
 	import IconStar from "../Icons/IconStar.svelte";
-	import { FEATURED_MODELS_IDS } from "./inferencePlaygroundUtils";
+	import { getTrending } from "$lib/utils/model";
 
 	export let conversation: Conversation;
 
@@ -14,17 +14,26 @@
 	let highlightIdx = 0;
 	let ignoreCursorHighlight = false;
 	let containerEl: HTMLDivElement;
+	let query = "";
 
 	const dispatch = createEventDispatcher<{ modelSelected: string; close: void }>();
 
-	let featuredModels = $models.filter(m => FEATURED_MODELS_IDS.includes(m.id));
-	let otherModels = $models.filter(m => !FEATURED_MODELS_IDS.includes(m.id));
+	$: trendingModels = getTrending($models);
 
-	if (featuredModels.findIndex(model => model.id === conversation.model.id) !== -1) {
-		highlightIdx = featuredModels.findIndex(model => model.id === conversation.model.id);
-	} else {
-		highlightIdx = featuredModels.length + otherModels.findIndex(model => model.id === conversation.model.id);
-	}
+	$: featuredModels = trendingModels.filter(m => {
+		return m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim());
+	});
+	$: otherModels = $models.filter(m => {
+		return m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim());
+	});
+
+	onMount(() => {
+		if (featuredModels.findIndex(model => model.id === conversation.model.id) !== -1) {
+			highlightIdx = featuredModels.findIndex(model => model.id === conversation.model.id);
+		} else {
+			highlightIdx = featuredModels.length + otherModels.findIndex(model => model.id === conversation.model.id);
+		}
+	});
 
 	function handleKeydown(event: KeyboardEvent) {
 		const { key } = event;
@@ -79,20 +88,6 @@
 			dispatch("close");
 		}
 	}
-
-	function filterModels(query: string) {
-		featuredModels = $models.filter(m =>
-			query
-				? FEATURED_MODELS_IDS.includes(m.id) && m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim())
-				: FEATURED_MODELS_IDS.includes(m.id)
-		);
-
-		otherModels = $models.filter(m =>
-			query
-				? !FEATURED_MODELS_IDS.includes(m.id) && m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim())
-				: !FEATURED_MODELS_IDS.includes(m.id)
-		);
-	}
 </script>
 
 <svelte:window on:keydown={handleKeydown} on:mousemove={() => (ignoreCursorHighlight = false)} />
@@ -115,7 +110,7 @@
 					autofocus
 					class="flex h-10 w-full rounded-md bg-transparent py-3 text-sm placeholder-gray-400 outline-hidden"
 					placeholder="Search models ..."
-					on:input={e => filterModels(e.currentTarget.value)}
+					bind:value={query}
 				/>
 			</div>
 			<div class="max-h-[300px] overflow-x-hidden overflow-y-auto">

src/lib/components/InferencePlayground/inferencePlaygroundUtils.ts

@@ -63,14 +63,6 @@ export function isSystemPromptSupported(model: ModelWithTokenizer) {
 	return model?.tokenizerConfig?.chat_template?.includes("system");
 }
 
-export const FEATURED_MODELS_IDS = [
-	"meta-llama/Llama-3.3-70B-Instruct",
-	"meta-llama/Llama-3.1-8B-Instruct",
-	"meta-llama/Llama-3.2-3B-Instruct",
-	"Qwen/Qwen2.5-72B-Instruct",
-	"Qwen/QwQ-32B-Preview",
-];
-
 export const defaultSystemMessage: { [key: string]: string } = {
 	"Qwen/QwQ-32B-Preview":
 		"You are a helpful and harmless assistant. You are Qwen developed by Alibaba. You should think step-by-step.",

src/lib/stores/session.ts

@@ -1,14 +1,12 @@
 import { browser } from "$app/environment";
 import { goto } from "$app/navigation";
 import { defaultGenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings";
-import {
-	defaultSystemMessage,
-	FEATURED_MODELS_IDS,
-} from "$lib/components/InferencePlayground/inferencePlaygroundUtils";
+import { defaultSystemMessage } from "$lib/components/InferencePlayground/inferencePlaygroundUtils";
 import { PipelineTag, type Conversation, type ConversationMessage, type Session } from "$lib/types";
 
 import { models } from "$lib/stores/models";
 import { get, writable } from "svelte/store";
+import { getTrending } from "$lib/utils/model";
 
 function createSessionStore() {
 	const store = writable<Session>(undefined, (set, update) => {
@@ -25,11 +23,14 @@ function createSessionStore() {
 			content: modelIdsFromSearchParam?.[0] ? (defaultSystemMessage?.[modelIdsFromSearchParam[0]] ?? "") : "",
 		};
 
+		const $models = get(models);
+		const featured = getTrending($models);
+
 		set({
 			conversations: [
 				{
-					model: get(models).find(m => FEATURED_MODELS_IDS.includes(m.id)) ??
-						get(models)[0] ?? {
+					model: featured[0] ??
+						$models[0] ?? {
 							_id: "",
 							inferenceProviderMapping: [],
 							pipeline_tag: PipelineTag.TextGeneration,

src/lib/utils/model.ts

@@ -0,0 +1,5 @@
+import type { Model, ModelWithTokenizer } from "$lib/types";
+
+export function getTrending(models: ModelWithTokenizer[], limit = 5) {
+	return models.toSorted((a, b) => b.trendingScore - a.trendingScore).slice(0, limit);
+}