wip: admin models setting

backend/open_webui/apps/webui/models/models.py

@@ -188,6 +188,13 @@ class ModelsTable:
                 for model in db.query(Model).filter(Model.base_model_id != None).all()
             ]
 
+    def get_base_models(self) -> list[ModelModel]:
+        with get_db() as db:
+            return [
+                ModelModel.model_validate(model)
+                for model in db.query(Model).filter(Model.base_model_id == None).all()
+            ]
+
     def get_models_by_user_id(
         self, user_id: str, permission: str = "write"
     ) -> list[ModelModel]:

backend/open_webui/apps/webui/routers/models.py

@@ -28,6 +28,16 @@ async def get_models(id: Optional[str] = None, user=Depends(get_verified_user)):
         return Models.get_models_by_user_id(user.id)
 
 
+###########################
+# GetBaseModels
+###########################
+
+
+@router.get("/base", response_model=list[ModelResponse])
+async def get_base_models(user=Depends(get_admin_user)):
+    return Models.get_base_models()
+
+
 ############################
 # CreateNewModel
 ############################

backend/open_webui/main.py

@@ -993,7 +993,7 @@ async def get_all_models():
 
             models.append(
                 {
-                    "id": f"open-webui-{custom_model.id}",
+                    "id": f"open-webui.{custom_model.id}",
                     "name": custom_model.name,
                     "object": "model",
                     "created": custom_model.created_at,
@@ -1154,8 +1154,8 @@ async def generate_chat_completions(
                 "selected_model_id": selected_model_id,
             }
 
-    if model_id.startswith("open-webui-"):
+    if model_id.startswith("open-webui."):
-        model_id = model_id[len("open-webui-") :]
+        model_id = model_id[len("open-webui.") :]
         form_data["model"] = model_id
 
     if model.get("pipe"):

src/lib/apis/index.ts

@@ -31,21 +31,6 @@ export const getModels = async (token: string = '') => {
 		.filter((models) => models)
 		// Sort the models
 		.sort((a, b) => {
-			// Check if models have position property
-			const aHasPosition = a.info?.meta?.position !== undefined;
-			const bHasPosition = b.info?.meta?.position !== undefined;
-
-			// If both a and b have the position property
-			if (aHasPosition && bHasPosition) {
-				return a.info.meta.position - b.info.meta.position;
-			}
-
-			// If only a has the position property, it should come first
-			if (aHasPosition) return -1;
-
-			// If only b has the position property, it should come first
-			if (bHasPosition) return 1;
-
 			// Compare case-insensitively by name for models without position property
 			const lowerA = a.name.toLowerCase();
 			const lowerB = b.name.toLowerCase();

src/lib/apis/models/index.ts

@@ -1,7 +1,7 @@
 import { WEBUI_API_BASE_URL } from '$lib/constants';
 
 
-export const getWorkspaceModels = async (token: string = '') => {
+export const getModels = async (token: string = '') => {
 	let error = null;
 
 	const res = await fetch(`${WEBUI_API_BASE_URL}/models`, {
@@ -34,6 +34,39 @@ export const getWorkspaceModels = async (token: string = '') => {
 
 
 
+export const getBaseModels = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/models/base`, {
+		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.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+
+
 export const createNewModel = async (token: string, model: object) => {
 	let error = null;
 

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

@@ -1,8 +1,259 @@
 <script lang="ts">
-	import { toast } from 'svelte-sonner';
+	import { marked } from 'marked';
-	import { onMount, getContext } from 'svelte';
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
+
+	import { onMount, getContext, tick } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import { WEBUI_NAME, config, mobile, models as _models, settings, user } from '$lib/stores';
+	import {
+		createNewModel,
+		getBaseModels,
+		toggleModelById,
+		updateModelById
+	} from '$lib/apis/models';
+
+	import { getModels } from '$lib/apis';
+	import Search from '$lib/components/icons/Search.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Switch from '$lib/components/common/Switch.svelte';
+
+	let importFiles;
+	let modelsImportInputElement: HTMLInputElement;
+
+	let models = [];
+	let filteredModels = [];
+
+	$: if (models) {
+		filteredModels = models.filter(
+			(m) => searchValue === '' || m.name.toLowerCase().includes(searchValue.toLowerCase())
+		);
+	}
+
+	let searchValue = '';
+
+	const downloadModels = async (models) => {
+		let blob = new Blob([JSON.stringify(models)], {
+			type: 'application/json'
+		});
+		saveAs(blob, `models-export-${Date.now()}.json`);
+	};
+
+	const init = async () => {
+		const workspaceModels = await getBaseModels(localStorage.token);
+		const allModels = await getModels(localStorage.token);
+
+		models = allModels
+			.filter((m) => !(m?.preset ?? false))
+			.map((m) => {
+				const workspaceModel = workspaceModels.find((wm) => wm.id === m.id);
+
+				if (workspaceModel) {
+					return workspaceModel;
+				} else {
+					return {
+						...m,
+						is_active: true
+					};
+				}
+			});
+	};
+
+	onMount(async () => {
+		init();
+	});
 </script>
 
-<div class="flex flex-col h-full justify-between text-sm">
+<div class="flex flex-col gap-1 mt-1.5 mb-2">
-	<div class=" space-y-3 overflow-y-scroll scrollbar-hidden h-full">Models</div>
+	<div class="flex justify-between items-center">
+		<div class="flex items-center md:self-center text-xl font-medium px-0.5">
+			{$i18n.t('Models')}
+			<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
+			<span class="text-lg font-medium text-gray-500 dark:text-gray-300"
+				>{filteredModels.length}</span
+			>
 		</div>
+	</div>
+
+	<div class=" flex flex-1 items-center w-full space-x-2">
+		<div class="flex flex-1 items-center">
+			<div class=" self-center ml-1 mr-3">
+				<Search className="size-3.5" />
+			</div>
+			<input
+				class=" w-full text-sm py-1 rounded-r-xl outline-none bg-transparent"
+				bind:value={searchValue}
+				placeholder={$i18n.t('Search Models')}
+			/>
+		</div>
+	</div>
+</div>
+
+<div class=" my-2 mb-5" id="model-list">
+	{#each filteredModels as model (model.id)}
+		<div
+			class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-lg transition"
+			id="model-item-{model.id}"
+		>
+			<a
+				class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
+				href={`/?models=open-webui.${encodeURIComponent(model.id)}`}
+			>
+				<div class=" self-center w-8">
+					<div
+						class=" rounded-full object-cover {(model?.is_active ?? true)
+							? ''
+							: 'opacity-50 dark:opacity-50'} "
+					>
+						<img
+							src={model?.meta?.profile_image_url ?? '/static/favicon.png'}
+							alt="modelfile profile"
+							class=" rounded-full w-full h-auto object-cover"
+						/>
+					</div>
+				</div>
+
+				<div class=" flex-1 self-center {(model?.is_active ?? true) ? '' : 'text-gray-500'}">
+					<Tooltip
+						content={marked.parse(model?.meta?.description ?? model.id)}
+						className=" w-fit"
+						placement="top-start"
+					>
+						<div class="  font-semibold line-clamp-1">{model.name}</div>
+					</Tooltip>
+					<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1 text-gray-500">
+						{model?.meta?.description ?? model.id}
+					</div>
+				</div>
+			</a>
+			<div class="flex flex-row gap-0.5 items-center self-center">
+				{#if $user?.role === 'admin' || model.user_id === $user?.id}
+					<a
+						class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+						type="button"
+						href={`/workspace/models/edit?id=${encodeURIComponent(model.id)}`}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
+							/>
+						</svg>
+					</a>
+				{/if}
+
+				<div class="ml-1">
+					<Tooltip content={(model?.is_active ?? true) ? $i18n.t('Enabled') : $i18n.t('Disabled')}>
+						<Switch
+							bind:state={model.is_active}
+							on:change={async (e) => {
+								toggleModelById(localStorage.token, model.id);
+								_models.set(await getModels(localStorage.token));
+							}}
+						/>
+					</Tooltip>
+				</div>
+			</div>
+		</div>
+	{/each}
+</div>
+
+{#if $user?.role === 'admin'}
+	<div class=" flex justify-end w-full mb-3">
+		<div class="flex space-x-1">
+			<input
+				id="models-import-input"
+				bind:this={modelsImportInputElement}
+				bind:files={importFiles}
+				type="file"
+				accept=".json"
+				hidden
+				on:change={() => {
+					console.log(importFiles);
+
+					let reader = new FileReader();
+					reader.onload = async (event) => {
+						let savedModels = JSON.parse(event.target.result);
+						console.log(savedModels);
+
+						for (const model of savedModels) {
+							if (model?.info ?? false) {
+								if ($_models.find((m) => m.id === model.id)) {
+									await updateModelById(localStorage.token, model.id, model.info).catch((error) => {
+										return null;
+									});
+								} else {
+									await createNewModel(localStorage.token, model.info).catch((error) => {
+										return null;
+									});
+								}
+							}
+						}
+
+						await _models.set(await getModels(localStorage.token));
+						init();
+					};
+
+					reader.readAsText(importFiles[0]);
+				}}
+			/>
+
+			<button
+				class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
+				on:click={() => {
+					modelsImportInputElement.click();
+				}}
+			>
+				<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Import Presets')}</div>
+
+				<div class=" self-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						class="w-3.5 h-3.5"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 9.5a.75.75 0 0 1-.75-.75V8.06l-.72.72a.75.75 0 0 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-.75.75Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</div>
+			</button>
+
+			<button
+				class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
+				on:click={async () => {
+					downloadModels($_models);
+				}}
+			>
+				<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Export Presets')}</div>
+
+				<div class=" self-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						class="w-3.5 h-3.5"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 3.5a.75.75 0 0 1 .75.75v2.69l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 0 1 1.06-1.06l.72.72V6.25A.75.75 0 0 1 8 5.5Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</div>
+			</button>
+		</div>
+	</div>
+{/if}

src/lib/components/workspace/Models.svelte

@@ -15,7 +15,7 @@
 	import {
 		createNewModel,
 		deleteModelById,
-		getWorkspaceModels,
+		getModels as getWorkspaceModels,
 		toggleModelById,
 		updateModelById
 	} from '$lib/apis/models';
@@ -29,7 +29,6 @@
 	import GarbageBin from '../icons/GarbageBin.svelte';
 	import Search from '../icons/Search.svelte';
 	import Plus from '../icons/Plus.svelte';
-	import { get } from 'svelte/store';
 	import ChevronRight from '../icons/ChevronRight.svelte';
 	import Switch from '../common/Switch.svelte';