refac

src/lib/apis/models/index.ts

@@ -90,6 +90,37 @@ export const getModelTags = async (token: string = '') => {
 	return res;
 };
 
+export const getBaseModelTags = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/models/base/tags`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err;
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
 export const importModels = async (token: string, models: object[]) => {
 	let error = null;
 
@@ -118,10 +149,15 @@ export const importModels = async (token: string, models: object[]) => {
 	return res;
 };
 
-export const getBaseModels = async (token: string = '') => {
+export const getBaseModels = async (token: string = '', tag: string = '') => {
 	let error = null;
 
-	const res = await fetch(`${WEBUI_API_BASE_URL}/models/base`, {
+	const searchParams = new URLSearchParams();
+	if (tag) {
+		searchParams.append('tag', tag);
+	}
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/models/base?${searchParams.toString()}`, {
 		method: 'GET',
 		headers: {
 			Accept: 'application/json',

src/lib/components/admin/Settings/Models.svelte

@@ -10,6 +10,7 @@
 	import {
 		createNewModel,
 		deleteAllModels,
+		getBaseModelTags,
 		getBaseModels,
 		toggleModelById,
 		updateModelById,
@@ -46,8 +47,11 @@
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
 	import AdminViewSelector from './Models/AdminViewSelector.svelte';
+	import TagSelector from '$lib/components/workspace/common/TagSelector.svelte';
 	import Pagination from '$lib/components/common/Pagination.svelte';
 
+	type ModelListItem = { id: string; name?: string };
+
 	let shiftKey = false;
 
 	let modelsImportInProgress = false;
@@ -56,8 +60,8 @@
 
 	let models = null;
 
-	let workspaceModels = null;
-	let baseModels = null;
+	let workspaceModels: ModelListItem[] = [];
+	let baseModels: ModelListItem[] = [];
 
 	let filteredModels = [];
 	let selectedModelId = null;
@@ -66,6 +70,8 @@
 	let showManageModal = false;
 
 	let viewOption = ''; // '' = All, 'enabled', 'disabled', 'visible', 'hidden'
+	let tags: string[] = [];
+	let selectedTag = '';
 
 	const perPage = 30;
 	let currentPage = 1;
@@ -175,27 +181,35 @@
 	const init = async () => {
 		models = null;
 
-		workspaceModels = await getBaseModels(localStorage.token);
+		tags = await getBaseModelTags(localStorage.token);
+		if (selectedTag && !tags.includes(selectedTag)) {
+			selectedTag = '';
+		}
+
+		workspaceModels = await getBaseModels(localStorage.token, selectedTag);
 		baseModels = await getModels(localStorage.token, null, true);
+		const workspaceModelIds = new Set<string>(workspaceModels.map((wm: ModelListItem) => wm.id));
 
-		models = baseModels.map((m) => {
-			const workspaceModel = workspaceModels.find((wm) => wm.id === m.id);
+		models = baseModels
+			.filter((m: ModelListItem) => !selectedTag || workspaceModelIds.has(m.id))
+			.map((m: ModelListItem) => {
+				const workspaceModel = workspaceModels.find((wm: ModelListItem) => wm.id === m.id);
 
-			if (workspaceModel) {
-				return {
-					...m,
-					...workspaceModel
-				};
-			} else {
-				return {
-					...m,
-					id: m.id,
-					name: m.name,
+				if (workspaceModel) {
+					return {
+						...m,
+						...workspaceModel
+					};
+				} else {
+					return {
+						...m,
+						id: m.id,
+						name: m.name,
 
-					is_active: true
-				};
-			}
-		});
+						is_active: true
+					};
+				}
+			});
 
 		_models.set(
 			await getModels(
@@ -501,6 +515,16 @@
 					class="flex gap-0.5 w-fit text-center text-sm rounded-full bg-transparent whitespace-nowrap"
 				>
 					<AdminViewSelector bind:value={viewOption} />
+					{#if (tags ?? []).length > 0}
+						<TagSelector
+							bind:value={selectedTag}
+							items={tags.map((tag) => ({ value: tag, label: tag }))}
+							onChange={async () => {
+								currentPage = 1;
+								await init();
+							}}
+						/>
+					{/if}
 				</div>
 
 				<div class="flex-1"></div>