add fuzzy searching

src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte

@@ -7,6 +7,7 @@
 	import IconSearch from "../Icons/IconSearch.svelte";
 	import IconStar from "../Icons/IconStar.svelte";
 	import { getTrending } from "$lib/utils/model";
+	import fuzzysearch from "$lib/utils/search";
 
 	export let conversation: Conversation;
 
@@ -20,12 +21,8 @@
 
 	$: trendingModels = getTrending($models);
 
-	$: featuredModels = trendingModels.filter(m => {
-		return m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim());
-	});
-	$: otherModels = $models.filter(m => {
-		return m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim());
-	});
+	$: featuredModels = fuzzysearch({ needle: query, haystack: trendingModels, property: "id" });
+	$: otherModels = fuzzysearch({ needle: query, haystack: $models, property: "id" });
 
 	onMount(() => {
 		if (featuredModels.findIndex(model => model.id === conversation.model.id) !== -1) {

src/lib/components/InferencePlayground/InferencePlaygroundProviderSelect.svelte

@@ -4,7 +4,6 @@
 	import { randomPick } from "$lib/utils/array";
 	import { cn } from "$lib/utils/cn";
 	import { createSelect, createSync } from "@melt-ui/svelte";
-	import { onMount } from "svelte";
 	import IconCaret from "../Icons/IconCaret.svelte";
 	import IconProvider from "../Icons/IconProvider.svelte";
 

src/lib/components/InferencePlayground/inferencePlaygroundUtils.ts

@@ -1,9 +1,8 @@
-import { type ChatCompletionOutputMessage } from "@huggingface/tasks";
-import type { InferenceSnippet, ModelDataMinimal } from "@huggingface/tasks";
 import type { Conversation, ModelWithTokenizer } from "$lib/types";
+import type { InferenceSnippet } from "@huggingface/tasks";
+import { type ChatCompletionOutputMessage } from "@huggingface/tasks";
 
 import { HfInference, snippets, type InferenceProvider } from "@huggingface/inference";
-import { keys } from "$lib/utils/object";
 
 export async function handleStreamingResponse(
 	hf: HfInference,

src/lib/utils/model.ts

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

src/lib/utils/search.ts

@@ -0,0 +1,64 @@
+/**
+ * Generic fuzzy search function that searches through arrays and returns matching items
+ *
+ * @param options Configuration object for the fuzzy search
+ * @returns Array of items that match the search criteria
+ */
+export default function fuzzysearch<T>(options: {
+	needle: string;
+	haystack: T[];
+	property: keyof T | ((item: T) => string);
+}): T[] {
+	const { needle, haystack, property } = options;
+
+	if (!Array.isArray(haystack)) {
+		throw new Error("Haystack must be an array");
+	}
+
+	if (!property) {
+		throw new Error("Property selector is required");
+	}
+
+	// Convert needle to lowercase for case-insensitive matching
+	const lowerNeedle = needle.toLowerCase();
+
+	// Filter the haystack to find matching items
+	return haystack.filter(item => {
+		// Extract the string value from the item based on the property selector
+		const value = typeof property === "function" ? property(item) : String(item[property]);
+
+		// Convert to lowercase for case-insensitive matching
+		const lowerValue = value.toLowerCase();
+
+		// Perform the fuzzy search
+		return fuzzyMatchString(lowerNeedle, lowerValue);
+	});
+}
+
+/**
+ * Internal helper function that performs the actual fuzzy string matching
+ */
+function fuzzyMatchString(needle: string, haystack: string): boolean {
+	const hlen = haystack.length;
+	const nlen = needle.length;
+
+	if (nlen > hlen) {
+		return false;
+	}
+
+	if (nlen === hlen) {
+		return needle === haystack;
+	}
+
+	outer: for (let i = 0, j = 0; i < nlen; i++) {
+		const nch = needle.charCodeAt(i);
+		while (j < hlen) {
+			if (haystack.charCodeAt(j++) === nch) {
+				continue outer;
+			}
+		}
+		return false;
+	}
+
+	return true;
+}