add base_model filter

src/lib/components/fields/Input.svelte

@@ -2,6 +2,7 @@
   export let placeholder: string = "Search";
   export let value: string = "";
   export let prefix: string = "";
+  export let className: string = "";
   export let onChange: (value: string) => void = () => {};
 
   const handleChange = (event: any) => {
@@ -10,7 +11,7 @@
   }
 </script>
 
-<div class="bg-neutral-900 border border-neutral-800 rounded-lg text-neutral-200 text-base flex items-center justify-start overflow-hidden">
+<div class="bg-neutral-900 border border-neutral-800 rounded-lg text-neutral-200 text-base flex items-center justify-start overflow-hidden {className}">
   {#if prefix}
     <div class="flex items-center justify-between bg-neutral-800/50 px-3 border-r border-neutral-800 py-4">
       <p class="text-xs uppercase text-neutral-100 font-semibold">{prefix}</p>

src/routes/api/models/+server.ts

@@ -20,6 +20,7 @@ export async function GET(request : RequestEvent) {
   const filter = request.url.searchParams.get('filter') || 'hotest'
   const search = request.url.searchParams.get('search') || ''
   const limit = parseInt(request.url.searchParams.get('limit') || '20')
+  const base_model = request.url.searchParams.get('base_model') || undefined
 
   const orderBy: Record<string, string> = {}
   if (filter === 'hotest') {
@@ -30,6 +31,21 @@ export async function GET(request : RequestEvent) {
     orderBy['createdAt'] = 'desc'
   }
 
+  let base_model_mapped: string[] | undefined = undefined;
+  if (base_model) {
+    switch (base_model) {
+      case "sd3":
+        base_model_mapped = ['stabilityai/stable-diffusion-3-medium-diffusers']
+        break;
+      case "sdxl":
+        base_model_mapped = ['stabilityai/stabilityai/stable-diffusion-xl-base-1.0']
+        break;
+      case "sd1":
+        base_model_mapped = ['CompVis/stable-diffusion-v1-4', 'runwayml/stable-diffusion-v1-5']
+        break;
+    }
+  }
+
   const only_not_public = filter === 'staff_only';
 
   const cards = await prisma.model.findMany({
@@ -37,6 +53,7 @@ export async function GET(request : RequestEvent) {
       ...(
         !IS_ADMIN ? { isPublic: true } : only_not_public ? { isPublic: false } : {}
       ),
+      ...(base_model_mapped ? { base_model: { in: base_model_mapped } } : {}),
       OR: [
         { id: { contains: search } },
       ]

src/routes/models/+layout.svelte

@@ -26,6 +26,7 @@
 	let form: Record<string, string> = {
 		filter: $page.url.searchParams.get('filter') ?? "hotest",
 		search: $page.url.searchParams.get('search') ?? "",
+		base_model: $page.url.searchParams.get('base_model') ?? "",
 		page: "0"
 	}
 	let submitModelDialog = false;
@@ -47,6 +48,14 @@
 		await goto(`?${$page.url.searchParams.toString()}`);
 		refetch(false);
 	}
+	const handleChangeBaseModel = async (event: any) => {
+		const base_model = event.target.value
+		form.base_model = base_model;
+		$page.url.searchParams.set('base_model', base_model);
+		await goto(`?${$page.url.searchParams.toString()}`);
+		refetch(false);
+	}
+
 	let timeout: any;
 	const handleChangeSearch = async (search: string) => {
 		clearTimeout(timeout);
@@ -126,8 +135,27 @@
 				</Button>
 		</div>
 	</div>
-	<div class="mt-5 max-w-sm">
-		<Input value={form.search} placeholder="Filter by model name" onChange={handleChangeSearch} />
+	<div class="mt-5 max-w-sm flex items-center justify-start gap-5 w-full">
+		<Input value={form.search} className="lg:min-w-[300px]" placeholder="Filter by model name" onChange={handleChangeSearch} />
+		<div class="flex flex-col items-start justify-center gap-1.5">
+			<p class="text-xs text-white/60 whitespace-nowrap">
+				Filter by
+			</p>
+			<select value={form.base_model} class="text-white bg-transparent outline-none cursor-pointer" on:change={handleChangeBaseModel}>
+				<option value="">
+					All models
+				</option>
+				<option value="sd3">
+					Stable Diffusion 3
+				</option>
+				<option value="sdxl">
+					Stable Diffusion XL
+				</option>
+				<option value="sd1">
+					Stable Diffusion 1
+				</option>
+			</select>
+		</div>
 	</div>
 	<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-4 gap-5 mt-8 lg:mt-10">
 		{#each data.models as card}