Support DMR in the admin area

src/lib/apis/dmr/index.ts

@@ -0,0 +1,455 @@
+import { DMR_API_BASE_URL } from '$lib/constants';
+
+export const verifyDMRConnection = async (token: string = '', connection: object = {}) => {
+	let error = null;
+
+	const res = await fetch(`${DMR_API_BASE_URL}/verify`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			Authorization: `Bearer ${token}`,
+			'Content-Type': 'application/json'
+		},
+		body: JSON.stringify({
+			...connection
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			error = `DMR: ${err?.error?.message ?? 'Network Problem'}`;
+			return [];
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getDMRConfig = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${DMR_API_BASE_URL}/config`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.error(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+type DMRConfig = {
+	ENABLE_DMR_API: boolean;
+	DMR_BASE_URL: string;
+	DMR_API_CONFIG: object;
+};
+
+export const updateDMRConfig = async (token: string = '', config: DMRConfig) => {
+	let error = null;
+
+	const res = await fetch(`${DMR_API_BASE_URL}/config/update`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify({
+			...config
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.error(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getDMRUrl = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${DMR_API_BASE_URL}/url`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.error(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res.DMR_BASE_URL;
+};
+
+export const updateDMRUrl = async (token: string = '', url: string) => {
+	let error = null;
+
+	const res = await fetch(`${DMR_API_BASE_URL}/url/update`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify({
+			url: url
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.error(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res.DMR_BASE_URL;
+};
+
+export const getDMRVersion = async (token: string) => {
+	let error = null;
+
+	const res = await fetch(`${DMR_API_BASE_URL}/api/version`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.error(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res?.version ?? '';
+};
+
+export const getDMRModels = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${DMR_API_BASE_URL}/api/tags`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.error(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res?.models ?? [];
+};
+
+export const getDMRModelInfo = async (token: string, name: string) => {
+	let error = null;
+
+	const res = await fetch(`${DMR_API_BASE_URL}/api/show`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify({
+			name: name
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.error(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const generateTextCompletion = async (token: string = '', model: string, text: string) => {
+	let error = null;
+
+	const res = await fetch(`${DMR_API_BASE_URL}/api/generate`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify({
+			model: model,
+			prompt: text,
+			stream: false
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.error(err);
+			error = err;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const generateChatCompletion = async (token: string = '', body: object) => {
+	let error = null;
+
+	const res = await fetch(`${DMR_API_BASE_URL}/api/chat`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify(body)
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.error(err);
+			error = err;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const generateEmbeddings = async (token: string = '', model: string, text: string) => {
+	let error = null;
+
+	const res = await fetch(`${DMR_API_BASE_URL}/api/embeddings`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify({
+			model: model,
+			prompt: text
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.error(err);
+			error = err;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+// OpenAI-compatible endpoints
+export const generateOpenAIChatCompletion = async (token: string = '', body: object) => {
+	let error = null;
+
+	const res = await fetch(`${DMR_API_BASE_URL}/v1/chat/completions`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify(body)
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.error(err);
+			error = err;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const generateOpenAICompletion = async (token: string = '', body: object) => {
+	let error = null;
+
+	const res = await fetch(`${DMR_API_BASE_URL}/v1/completions`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify(body)
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.error(err);
+			error = err;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getOpenAIModels = async (token: string = '') => {
+	let error = null;
+
+	const res = await fetch(`${DMR_API_BASE_URL}/v1/models`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.error(err);
+			if ('detail' in err) {
+				error = err.detail;
+			} else {
+				error = 'Server connection failed';
+			}
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+}; 

src/lib/components/AddConnectionModal.svelte

@@ -6,6 +6,7 @@
 	import { models } from '$lib/stores';
 	import { verifyOpenAIConnection } from '$lib/apis/openai';
 	import { verifyOllamaConnection } from '$lib/apis/ollama';
+	import { verifyDMRConnection } from '$lib/apis/dmr';
 
 	import Modal from '$lib/components/common/Modal.svelte';
 	import Plus from '$lib/components/icons/Plus.svelte';
@@ -23,6 +24,7 @@
 	export let edit = false;
 
 	export let ollama = false;
+	export let dmr = false;
 	export let direct = false;
 
 	export let connection = null;
@@ -64,6 +66,22 @@
 		}
 	};
 
+	const verifyDMRHandler = async () => {
+		// remove trailing slash from url
+		url = url.replace(/\/$/, '');
+
+		const res = await verifyDMRConnection(localStorage.token, {
+			url,
+			key
+		}).catch((error) => {
+			toast.error(`${error}`);
+		});
+
+		if (res) {
+			toast.success($i18n.t('Server connection verified'));
+		}
+	};
+
 	const verifyOpenAIHandler = async () => {
 		// remove trailing slash from url
 		url = url.replace(/\/$/, '');
@@ -91,6 +109,8 @@
 	const verifyHandler = () => {
 		if (ollama) {
 			verifyOllamaHandler();
+		} else if (dmr) {
+			verifyDMRHandler();
 		} else {
 			verifyOpenAIHandler();
 		}
@@ -172,7 +192,7 @@
 			prefixId = connection.config?.prefix_id ?? '';
 			modelIds = connection.config?.model_ids ?? [];
 
-			if (ollama) {
+			if (ollama || dmr) {
 				connectionType = connection.config?.connection_type ?? 'local';
 			} else {
 				connectionType = connection.config?.connection_type ?? 'external';

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

@@ -6,6 +6,7 @@
 
 	import { getOllamaConfig, updateOllamaConfig } from '$lib/apis/ollama';
 	import { getOpenAIConfig, updateOpenAIConfig, getOpenAIModels } from '$lib/apis/openai';
+	import { getDMRConfig, updateDMRConfig } from '$lib/apis/dmr';
 	import { getModels as _getModels } from '$lib/apis';
 	import { getDirectConnectionsConfig, setDirectConnectionsConfig } from '$lib/apis/configs';
 
@@ -19,6 +20,7 @@
 	import OpenAIConnection from './Connections/OpenAIConnection.svelte';
 	import AddConnectionModal from '$lib/components/AddConnectionModal.svelte';
 	import OllamaConnection from './Connections/OllamaConnection.svelte';
+	import DMRConnection from './Connections/DMRConnection.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -38,14 +40,19 @@
 	let OPENAI_API_BASE_URLS = [''];
 	let OPENAI_API_CONFIGS = {};
 
+	let DMR_BASE_URL = '';
+	let DMR_API_CONFIG = {};
+
 	let ENABLE_OPENAI_API: null | boolean = null;
 	let ENABLE_OLLAMA_API: null | boolean = null;
+	let ENABLE_DMR_API: null | boolean = null;
 
 	let directConnectionsConfig = null;
 
 	let pipelineUrls = {};
 	let showAddOpenAIConnectionModal = false;
 	let showAddOllamaConnectionModal = false;
+	let showAddDMRConnectionModal = false;
 
 	const updateOpenAIHandler = async () => {
 		if (ENABLE_OPENAI_API !== null) {
@@ -104,6 +111,26 @@
 		}
 	};
 
+	const updateDMRHandler = async () => {
+		if (ENABLE_DMR_API !== null) {
+			// Remove trailing slash
+			DMR_BASE_URL = DMR_BASE_URL.replace(/\/$/, '');
+
+			const res = await updateDMRConfig(localStorage.token, {
+				ENABLE_DMR_API: ENABLE_DMR_API,
+				DMR_BASE_URL: DMR_BASE_URL,
+				DMR_API_CONFIG: DMR_API_CONFIG
+			}).catch((error) => {
+				toast.error(`${error}`);
+			});
+
+			if (res) {
+				toast.success($i18n.t('DMR API settings updated'));
+				await models.set(await getModels());
+			}
+		}
+	};
+
 	const updateDirectConnectionsHandler = async () => {
 		const res = await setDirectConnectionsConfig(localStorage.token, directConnectionsConfig).catch(
 			(error) => {
@@ -135,10 +162,21 @@
 		await updateOllamaHandler();
 	};
 
+	const addDMRConnectionHandler = async (connection) => {
+		DMR_BASE_URL = connection.url;
+		DMR_API_CONFIG = {
+			...connection.config,
+			key: connection.key
+		};
+
+		await updateDMRHandler();
+	};
+
 	onMount(async () => {
 		if ($user?.role === 'admin') {
 			let ollamaConfig = {};
 			let openaiConfig = {};
+			let dmrConfig = {};
 
 			await Promise.all([
 				(async () => {
@@ -147,6 +185,9 @@
 				(async () => {
 					openaiConfig = await getOpenAIConfig(localStorage.token);
 				})(),
+				(async () => {
+					dmrConfig = await getDMRConfig(localStorage.token);
+				})(),
 				(async () => {
 					directConnectionsConfig = await getDirectConnectionsConfig(localStorage.token);
 				})()
@@ -154,6 +195,7 @@
 
 			ENABLE_OPENAI_API = openaiConfig.ENABLE_OPENAI_API;
 			ENABLE_OLLAMA_API = ollamaConfig.ENABLE_OLLAMA_API;
+			ENABLE_DMR_API = dmrConfig.ENABLE_DMR_API;
 
 			OPENAI_API_BASE_URLS = openaiConfig.OPENAI_API_BASE_URLS;
 			OPENAI_API_KEYS = openaiConfig.OPENAI_API_KEYS;
@@ -162,6 +204,9 @@
 			OLLAMA_BASE_URLS = ollamaConfig.OLLAMA_BASE_URLS;
 			OLLAMA_API_CONFIGS = ollamaConfig.OLLAMA_API_CONFIGS;
 
+			DMR_BASE_URL = dmrConfig.DMR_BASE_URL;
+			DMR_API_CONFIG = dmrConfig.DMR_API_CONFIG;
+
 			if (ENABLE_OPENAI_API) {
 				// get url and idx
 				for (const [idx, url] of OPENAI_API_BASE_URLS.entries()) {
@@ -196,6 +241,7 @@
 	const submitHandler = async () => {
 		updateOpenAIHandler();
 		updateOllamaHandler();
+		updateDMRHandler();
 		updateDirectConnectionsHandler();
 
 		dispatch('save');
@@ -213,9 +259,15 @@
 	onSubmit={addOllamaConnectionHandler}
 />
 
+<AddConnectionModal
+	dmr
+	bind:show={showAddDMRConnectionModal}
+	onSubmit={addDMRConnectionHandler}
+/>
+
 <form class="flex flex-col h-full justify-between text-sm" on:submit|preventDefault={submitHandler}>
 	<div class=" overflow-y-scroll scrollbar-hidden h-full">
-		{#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null && directConnectionsConfig !== null}
+		{#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null && ENABLE_DMR_API !== null && directConnectionsConfig !== null}
 			<div class="my-2">
 				<div class="mt-2 space-y-2 pr-1.5">
 					<div class="flex justify-between items-center text-sm">
@@ -360,6 +412,50 @@
 
 			<hr class=" border-gray-100 dark:border-gray-850" />
 
+			<div class="pr-1.5 my-2">
+				<div class="flex justify-between items-center text-sm mb-2">
+					<div class="  font-medium">{$i18n.t('Docker Model Runner API')}</div>
+
+					<div class="mt-1">
+						<Switch
+							bind:state={ENABLE_DMR_API}
+							on:change={async () => {
+								updateDMRHandler();
+							}}
+						/>
+					</div>
+				</div>
+
+				{#if ENABLE_DMR_API}
+					<hr class=" border-gray-100 dark:border-gray-850 my-2" />
+
+					<div class="">
+						<div class="flex justify-between items-center">
+							<div class="font-medium">{$i18n.t('Docker Model Runner Connection')}</div>
+						</div>
+
+						<div class="flex w-full gap-1.5">
+							<div class="flex-1 flex flex-col gap-1.5 mt-1.5">
+								<DMRConnection
+									bind:url={DMR_BASE_URL}
+									bind:config={DMR_API_CONFIG}
+									onSubmit={() => {
+										updateDMRHandler();
+									}}
+									onDelete={() => {
+										DMR_BASE_URL = '';
+										DMR_API_CONFIG = {};
+										updateDMRHandler();
+									}}
+								/>
+							</div>
+						</div>
+					</div>
+				{/if}
+			</div>
+
+			<hr class=" border-gray-100 dark:border-gray-850" />
+
 			<div class="pr-1.5 my-2">
 				<div class="flex justify-between items-center text-sm">
 					<div class="  font-medium">{$i18n.t('Direct Connections')}</div>

src/lib/components/admin/Settings/Connections/DMRConnection.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import AddConnectionModal from '$lib/components/AddConnectionModal.svelte';
+	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+
+	import Cog6 from '$lib/components/icons/Cog6.svelte';
+	import ManageDMRModal from './ManageDMRModal.svelte';
+
+	export let onDelete = () => {};
+	export let onSubmit = () => {};
+
+	export let url = '';
+	export let config = {};
+
+	let showManageModal = false;
+	let showConfigModal = false;
+	let showDeleteConfirmDialog = false;
+</script>
+
+<AddConnectionModal
+	dmr
+	edit
+	bind:show={showConfigModal}
+	connection={{
+		url,
+		key: config?.key ?? '',
+		config: config
+	}}
+	onDelete={() => {
+		showDeleteConfirmDialog = true;
+	}}
+	onSubmit={(connection) => {
+		url = connection.url;
+		config = { ...connection.config, key: connection.key };
+		onSubmit(connection);
+	}}
+/>
+
+<ConfirmDialog
+	bind:show={showDeleteConfirmDialog}
+	on:confirm={() => {
+		onDelete();
+		showConfigModal = false;
+	}}
+/>
+
+<ManageDMRModal bind:show={showManageModal} />
+
+<div class="flex gap-1.5">
+	<Tooltip
+		className="w-full relative"
+		content={$i18n.t(`WebUI will make requests to "{{url}}/v1/chat/completions"`, {
+			url
+		})}
+		placement="top-start"
+	>
+		{#if !(config?.enable ?? true)}
+			<div
+				class="absolute top-0 bottom-0 left-0 right-0 opacity-60 bg-white dark:bg-gray-900 z-10"
+			></div>
+		{/if}
+
+		<input
+			class="w-full text-sm bg-transparent outline-hidden"
+			placeholder={$i18n.t('Enter URL (e.g. http://localhost:8000)')}
+			bind:value={url}
+		/>
+	</Tooltip>
+
+	<div class="flex gap-1">
+		<Tooltip content={$i18n.t('Configure')} className="self-start">
+			<button
+				class="self-center p-1 bg-transparent hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 rounded-lg transition"
+				on:click={() => {
+					showConfigModal = true;
+				}}
+				type="button"
+			>
+				<Cog6 />
+			</button>
+		</Tooltip>
+	</div>
+</div> 

src/lib/components/admin/Settings/Connections/ManageDMRModal.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import { getContext, onMount } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import Modal from '$lib/components/common/Modal.svelte';
+	import ManageDMR from '../Models/Manage/ManageDMR.svelte';
+
+	export let show = false;
+</script>
+
+<Modal size="sm" bind:show>
+	<div>
+		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
+			<div
+				class="flex w-full justify-between items-center text-lg font-medium self-center font-primary"
+			>
+				<div class=" shrink-0">
+					{$i18n.t('Manage DMR')}
+				</div>
+			</div>
+			<button
+				class="self-center"
+				on:click={() => {
+					show = false;
+				}}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="w-5 h-5"
+				>
+					<path
+						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+					/>
+				</svg>
+			</button>
+		</div>
+
+		<div class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 dark:text-gray-200">
+			<ManageDMR />
+		</div>
+	</div>
+</Modal> 

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

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import { getContext, onMount } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import { WEBUI_NAME, models, user, config, settings } from '$lib/stores';
+
+	import {
+		getDMRVersion,
+		getDMRModels
+	} from '$lib/apis/dmr';
+	import { getModels } from '$lib/apis';
+
+	import Spinner from '$lib/components/common/Spinner.svelte';
+
+	let loading = true;
+	let dmrModels = [];
+	let dmrVersion = '';
+
+	const getModelsAsync = async () => {
+		const models = await getModels(
+			localStorage.token,
+			$config?.features?.enable_direct_connections && ($settings?.directConnections ?? null)
+		);
+		return models;
+	};
+
+	const getDMRModelsAsync = async () => {
+		dmrModels = await getDMRModels(localStorage.token);
+	};
+
+	const getDMRVersionAsync = async () => {
+		dmrVersion = await getDMRVersion(localStorage.token);
+	};
+
+	onMount(async () => {
+		loading = true;
+		
+		await Promise.all([
+			getDMRModelsAsync(),
+			getDMRVersionAsync()
+		]);
+		
+		loading = false;
+	});
+</script>
+
+<div class="flex flex-col h-full justify-between text-sm">
+	<div class="space-y-3 pr-1.5 overflow-y-scroll scrollbar-hidden h-fit max-h-80">
+		{#if loading}
+			<div class="flex justify-center">
+				<div class="py-5">
+					<Spinner />
+				</div>
+			</div>
+		{:else}
+			<!-- DMR Version -->
+			<div class="space-y-2">
+				<div class="flex items-center space-x-2">
+					<div class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
+						{$i18n.t('Version')}
+					</div>
+				</div>
+				<div class="text-sm text-gray-700 dark:text-gray-300">
+					{dmrVersion || $i18n.t('Unknown')}
+				</div>
+			</div>
+
+			<!-- Available Models -->
+			<div class="space-y-2">
+				<div class="flex items-center space-x-2">
+					<div class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
+						{$i18n.t('Models')} ({dmrModels.length})
+					</div>
+				</div>
+
+				{#if dmrModels.length === 0}
+					<div class="text-sm text-gray-500 dark:text-gray-400">
+						{$i18n.t('No models found')}
+					</div>
+				{:else}
+					<div class="space-y-1">
+						{#each dmrModels as model}
+							<div class="flex items-center justify-between p-2 rounded-lg border border-gray-200 dark:border-gray-700">
+								<div class="flex flex-col">
+									<div class="text-sm font-medium text-gray-800 dark:text-gray-200">
+										{model.name || model.id}
+									</div>
+									{#if model.description}
+										<div class="text-xs text-gray-500 dark:text-gray-400">
+											{model.description}
+										</div>
+									{/if}
+								</div>
+								{#if model.size}
+									<div class="text-xs text-gray-500 dark:text-gray-400">
+										{model.size}
+									</div>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+
+			<!-- Info Note -->
+			<div class="text-xs text-gray-500 dark:text-gray-400 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3">
+				<div class="font-medium mb-1">{$i18n.t('Note')}</div>
+				<div>
+					{$i18n.t('DMR does not support model management operations. Models are managed by the Docker Model Runner service directly.')}
+				</div>
+			</div>
+		{/if}
+	</div>
+</div> 

src/lib/constants.ts

@@ -9,6 +9,7 @@ export const WEBUI_API_BASE_URL = `${WEBUI_BASE_URL}/api/v1`;
 
 export const OLLAMA_API_BASE_URL = `${WEBUI_BASE_URL}/ollama`;
 export const OPENAI_API_BASE_URL = `${WEBUI_BASE_URL}/openai`;
+export const DMR_API_BASE_URL = `${WEBUI_BASE_URL}/dmr`;
 export const AUDIO_API_BASE_URL = `${WEBUI_BASE_URL}/api/v1/audio`;
 export const IMAGES_API_BASE_URL = `${WEBUI_BASE_URL}/api/v1/images`;
 export const RETRIEVAL_API_BASE_URL = `${WEBUI_BASE_URL}/api/v1/retrieval`;