refac: models

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

@@ -12,7 +12,7 @@ from pydantic import BaseModel, ConfigDict
 
 from sqlalchemy import or_, and_, func
 from sqlalchemy.dialects import postgresql, sqlite
-from sqlalchemy import BigInteger, Column, Text, JSON
+from sqlalchemy import BigInteger, Column, Text, JSON, Boolean
 
 
 from open_webui.utils.utils import has_access
@@ -95,6 +95,8 @@ class Model(Base):
     #      }
     #   }
 
+    is_active = Column(Boolean, default=True)
+
     updated_at = Column(BigInteger)
     created_at = Column(BigInteger)
 
@@ -110,6 +112,7 @@ class ModelModel(BaseModel):
 
     access_control: Optional[dict] = None
 
+    is_active: bool
     updated_at: int  # timestamp in epoch
     created_at: int  # timestamp in epoch
 
@@ -131,6 +134,8 @@ class ModelResponse(BaseModel):
     meta: ModelMeta
 
     access_control: Optional[dict] = None
+
+    is_active: bool
     updated_at: int  # timestamp in epoch
     created_at: int  # timestamp in epoch
 
@@ -141,6 +146,8 @@ class ModelForm(BaseModel):
     name: str
     meta: ModelMeta
     params: ModelParams
+    access_control: Optional[dict] = None
+    is_active: bool = True
 
 
 class ModelsTable:
@@ -200,6 +207,23 @@ class ModelsTable:
         except Exception:
             return None
 
+    def toggle_model_by_id(self, id: str) -> Optional[ModelModel]:
+        with get_db() as db:
+            try:
+                is_active = db.query(Model).filter_by(id=id).first().is_active
+
+                db.query(Model).filter_by(id=id).update(
+                    {
+                        "is_active": not is_active,
+                        "updated_at": int(time.time()),
+                    }
+                )
+                db.commit()
+
+                return self.get_model_by_id(id)
+            except Exception:
+                return None
+
     def update_model_by_id(self, id: str, model: ModelForm) -> Optional[ModelModel]:
         try:
             with get_db() as db:

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

@@ -79,6 +79,41 @@ async def get_model_by_id(id: str, user=Depends(get_verified_user)):
         )
 
 
+############################
+# ToggelModelById
+############################
+
+
+@router.post("/id/{id}/toggle", response_model=Optional[ModelResponse])
+async def toggle_model_by_id(id: str, user=Depends(get_verified_user)):
+    model = Models.get_model_by_id(id)
+    if model:
+        if (
+            user.role == "admin"
+            or model.user_id == user.id
+            or has_access(user.id, "write", model.access_control)
+        ):
+            model = Models.toggle_model_by_id(id)
+
+            if model:
+                return model
+            else:
+                raise HTTPException(
+                    status_code=status.HTTP_400_BAD_REQUEST,
+                    detail=ERROR_MESSAGES.DEFAULT("Error updating function"),
+                )
+        else:
+            raise HTTPException(
+                status_code=status.HTTP_401_UNAUTHORIZED,
+                detail=ERROR_MESSAGES.UNAUTHORIZED,
+            )
+    else:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail=ERROR_MESSAGES.NOT_FOUND,
+        )
+
+
 ############################
 # UpdateModelById
 ############################

backend/open_webui/migrations/versions/922e7a387820_add_group_table.py

@@ -35,6 +35,17 @@ def upgrade():
         sa.Column("access_control", sa.JSON(), nullable=True),
     )
 
+    # Add 'is_active' column to 'model' table
+    op.add_column(
+        "model",
+        sa.Column(
+            "is_active",
+            sa.Boolean(),
+            nullable=False,
+            server_default=sa.sql.expression.true(),
+        ),
+    )
+
     # Add 'access_control' column to 'knowledge' table
     op.add_column(
         "knowledge",
@@ -60,6 +71,9 @@ def downgrade():
     # Drop 'access_control' column from 'model' table
     op.drop_column("model", "access_control")
 
+    # Drop 'is_active' column from 'model' table
+    op.drop_column("model", "is_active")
+
     # Drop 'access_control' column from 'knowledge' table
     op.drop_column("knowledge", "access_control")
 

src/lib/apis/models/index.ts

@@ -100,6 +100,43 @@ export const getModelById = async (token: string, id: string) => {
 	return res;
 };
 
+
+export const toggleModelById = async (token: string, id: string) => {
+	let error = null;
+
+	const searchParams = new URLSearchParams();
+	searchParams.append('id', id);
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/models/id/${id}/toggle`, {
+		method: 'POST',
+		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 updateModelById = async (token: string, id: string, model: object) => {
 	let error = null;
 

src/lib/components/workspace/Knowledge/Collection.svelte

@@ -39,6 +39,7 @@
 	import Drawer from '$lib/components/common/Drawer.svelte';
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
 	import MenuLines from '$lib/components/icons/MenuLines.svelte';
+	import AccessControl from '../common/AccessControl.svelte';
 
 	let largeScreen = true;
 
@@ -687,7 +688,17 @@
 										/>
 									</div>
 								{:else}
-									<div class="m-auto text-gray-500 text-xs">{$i18n.t('No content found')}</div>
+									<div
+										class="m-auto flex flex-col justify-center text-center text-gray-500 text-xs"
+									>
+										<div>
+											{$i18n.t('No content found')}
+										</div>
+
+										<div class="mx-12 mt-2 text-center text-gray-200 dark:text-gray-700">
+											{$i18n.t('Drag and drop a file to upload or select a file to view')}
+										</div>
+									</div>
 								{/if}
 							</div>
 						</div>
@@ -753,7 +764,7 @@
 									</div>
 								</div>
 							{:else}
-								<div class="m-auto pb-32">
+								<div class="m-auto pb-20">
 									<div>
 										<div class=" flex w-full mt-1 mb-3.5">
 											<div class="flex-1">
@@ -784,8 +795,8 @@
 										</div>
 									</div>
 
-									<div class=" mt-2 text-center text-sm text-gray-200 dark:text-gray-700 w-full">
+									<div class="mt-2">
-										{$i18n.t('Select a file to view or drag and drop a file to upload')}
+										<AccessControl />
 									</div>
 								</div>
 							{/if}

src/lib/components/workspace/Knowledge/CreateCollection.svelte

@@ -6,6 +6,7 @@
 	import { createNewKnowledge, getKnowledgeItems } from '$lib/apis/knowledge';
 	import { toast } from 'svelte-sonner';
 	import { knowledge } from '$lib/stores';
+	import AccessControl from '../common/AccessControl.svelte';
 
 	let loading = false;
 
@@ -103,6 +104,10 @@
 			</div>
 		</div>
 
+		<div class="mt-2">
+			<AccessControl />
+		</div>
+
 		<div class="flex justify-end mt-2">
 			<div>
 				<button

src/lib/components/workspace/Models.svelte

@@ -16,6 +16,7 @@
 		createNewModel,
 		deleteModelById,
 		getWorkspaceModels,
+		toggleModelById,
 		updateModelById
 	} from '$lib/apis/models';
 
@@ -30,10 +31,10 @@
 	import Plus from '../icons/Plus.svelte';
 	import { get } from 'svelte/store';
 	import ChevronRight from '../icons/ChevronRight.svelte';
+	import Switch from '../common/Switch.svelte';
 
 	let shiftKey = false;
 
-	let localModelfiles = [];
 	let importFiles;
 	let modelsImportInputElement: HTMLInputElement;
 
@@ -255,13 +256,13 @@
 		>
 			<a
 				class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
-				href={`/?models=${encodeURIComponent(model.id)}`}
+				href={`/?models=open-webui.${encodeURIComponent(model.id)}`}
 			>
-				<div class=" self-start w-8 pt-0.5">
+				<div class=" self-center w-8">
 					<div
-						class=" rounded-full object-cover {(model?.meta?.hidden ?? false)
+						class=" rounded-full object-cover {model.is_active
-							? 'brightness-90 dark:brightness-50'
+							? ''
-							: ''} "
+							: 'opacity-50 dark:opacity-50'} "
 					>
 						<img
 							src={model?.meta?.profile_image_url ?? '/static/favicon.png'}
@@ -271,7 +272,7 @@
 					</div>
 				</div>
 
-				<div class=" flex-1 self-center {(model?.meta?.hidden ?? false) ? 'text-gray-500' : ''}">
+				<div class=" flex-1 self-center {model.is_active ? '' : 'text-gray-500'}">
 					<Tooltip
 						content={marked.parse(model?.meta?.description ?? model.id)}
 						className=" w-fit"
@@ -284,57 +285,8 @@
 					</div>
 				</div>
 			</a>
-			<div class="flex flex-row gap-0.5 self-center">
+			<div class="flex flex-row gap-0.5 items-center self-center">
-				{#if $user?.role === 'admin' && shiftKey}
+				{#if shiftKey}
-					<Tooltip
-						content={(model?.meta?.hidden ?? false) ? $i18n.t('Show Model') : $i18n.t('Hide Model')}
-					>
-						<button
-							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"
-							on:click={() => {
-								hideModelHandler(model);
-							}}
-						>
-							{#if model?.meta?.hidden ?? false}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="1.5"
-									stroke="currentColor"
-									class="size-4"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
-									/>
-								</svg>
-							{:else}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="1.5"
-									stroke="currentColor"
-									class="size-4"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
-									/>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-									/>
-								</svg>
-							{/if}
-						</button>
-					</Tooltip>
-
 					<Tooltip content={$i18n.t('Delete')}>
 						<button
 							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"
@@ -398,6 +350,18 @@
 							<EllipsisHorizontal className="size-5" />
 						</button>
 					</ModelMenu>
+
+					<div class="ml-1">
+						<Tooltip content={model.is_active ? $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>
 				{/if}
 			</div>
 		</div>
@@ -492,43 +456,6 @@
 				</div>
 			</button>
 		</div>
-
-		{#if localModelfiles.length > 0}
-			<div class="flex">
-				<div class=" self-center text-sm font-medium mr-4">
-					{localModelfiles.length} Local Modelfiles Detected
-				</div>
-
-				<div class="flex space-x-1">
-					<button
-						class="self-center w-fit text-sm p-1.5 border dark:border-gray-600 rounded-xl flex"
-						on:click={async () => {
-							downloadModels(localModelfiles);
-
-							localStorage.removeItem('modelfiles');
-							localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
-						}}
-					>
-						<div class=" self-center">
-							<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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-								/>
-							</svg>
-						</div>
-					</button>
-				</div>
-			</div>
-		{/if}
 	</div>
 {/if}
 

src/lib/components/workspace/Models/ModelEditor.svelte

@@ -17,7 +17,7 @@
 	import { getTools } from '$lib/apis/tools';
 	import { getFunctions } from '$lib/apis/functions';
 	import { getKnowledgeItems } from '$lib/apis/knowledge';
-	import AccessPermissions from '../common/AccessPermissionsModal.svelte';
+	import AccessControl from '../common/AccessControl.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -79,6 +79,8 @@
 	let filterIds = [];
 	let actionIds = [];
 
+	let accessControl = null;
+
 	const addUsage = (base_model_id) => {
 		const baseModel = $models.find((m) => m.id === base_model_id);
 
@@ -208,6 +210,8 @@
 				capabilities.usage = false;
 			}
 
+			accessControl = model?.access_control ?? null;
+
 			info = {
 				...info,
 				...JSON.parse(
@@ -641,7 +645,7 @@
 					</div>
 
 					<div class="my-2">
-						<AccessPermissions />
+						<AccessControl bind:accessControl />
 					</div>
 
 					<div class="my-2 text-gray-300 dark:text-gray-700">

src/lib/components/workspace/Prompts/PromptEditor.svelte

@@ -4,6 +4,7 @@
 	import Textarea from '$lib/components/common/Textarea.svelte';
 	import { toast } from 'svelte-sonner';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import AccessControl from '../common/AccessControl.svelte';
 
 	export let onSubmit: Function;
 	export let edit = false;
@@ -135,6 +136,10 @@
 			</div>
 		</div>
 
+		<div class="mt-2">
+			<AccessControl />
+		</div>
+
 		<div class="my-4 flex justify-end pb-20">
 			<button
 				class=" text-sm w-full lg:w-fit px-4 py-2 transition rounded-lg {loading

src/lib/components/workspace/Tools/ToolkitEditor.svelte

@@ -203,11 +203,11 @@ class Tools:
 						</div>
 
 						<div class="flex-1">
-							<Tooltip content={$i18n.t('e.g. My ToolKit')} placement="top-start">
+							<Tooltip content={$i18n.t('e.g. My Tools')} placement="top-start">
 								<input
 									class="w-full text-2xl font-medium bg-transparent outline-none"
 									type="text"
-									placeholder={$i18n.t('Toolkit Name')}
+									placeholder={$i18n.t('Tool Name')}
 									bind:value={name}
 									required
 								/>
@@ -225,15 +225,11 @@ class Tools:
 								{id}
 							</div>
 						{:else}
-							<Tooltip
+							<Tooltip className="w-full" content={$i18n.t('e.g. my_tools')} placement="top-start">
-								className="w-full"
-								content={$i18n.t('e.g. my_toolkit')}
-								placement="top-start"
-							>
 								<input
 									class="w-full text-sm disabled:text-gray-500 bg-transparent outline-none"
 									type="text"
-									placeholder={$i18n.t('Toolkit ID')}
+									placeholder={$i18n.t('Tool ID')}
 									bind:value={id}
 									required
 									disabled={edit}
@@ -243,13 +239,13 @@ class Tools:
 
 						<Tooltip
 							className="w-full self-center items-center flex"
-							content={$i18n.t('e.g. A toolkit for performing various operations')}
+							content={$i18n.t('e.g. Tools for performing various operations')}
 							placement="top-start"
 						>
 							<input
 								class="w-full text-sm bg-transparent outline-none"
 								type="text"
-								placeholder={$i18n.t('Toolkit Description')}
+								placeholder={$i18n.t('Tool Description')}
 								bind:value={meta.description}
 								required
 							/>

src/lib/components/workspace/common/AccessControl.svelte

@@ -1,10 +1,19 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
+	import { getContext, onMount } from 'svelte';
 	const i18n = getContext('i18n');
 
-	export let type = 'private';
+	export let accessControl = null;
+	let access = 'private';
 
 	let query = '';
+
+	onMount(() => {
+		if (accessControl === null) {
+			access = 'public';
+		} else {
+			access = 'private';
+		}
+	});
 </script>
 
 <div class=" rounded-lg flex flex-col gap-3">
@@ -14,7 +23,7 @@
 		<div class="flex gap-2.5 items-center">
 			<div>
 				<div class=" p-2 bg-gray-50 dark:bg-gray-850 rounded-full">
-					{#if type === 'private'}
+					{#if access === 'private'}
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							fill="none"
@@ -52,16 +61,16 @@
 				<select
 					id="models"
 					class="outline-none bg-transparent text-sm font-medium rounded-lg block w-fit pr-10 max-w-full placeholder-gray-400"
-					bind:value={type}
+					bind:value={access}
 				>
 					<option class=" text-gray-700" value="private" selected>Private</option>
 					<option class=" text-gray-700" value="public" selected>Public</option>
 				</select>
 
 				<div class=" text-xs text-gray-400 font-medium">
-					{#if type === 'private'}
+					{#if access === 'private'}
 						{$i18n.t('Only select users and groups with permission can access')}
-					{:else if type === 'public'}
+					{:else if access === 'public'}
 						{$i18n.t('Accessible to all users')}
 					{/if}
 				</div>
@@ -69,7 +78,7 @@
 		</div>
 	</div>
 
-	{#if type === 'private'}
+	{#if access === 'private'}
 		<div>
 			<div class=" text-sm font-semibold mb-0.5">{$i18n.t('People with access')}</div>