Merge pull request #15601 from headwAI-GmbH/streamline-resource-loading-url

chore: streamline the URL used for resources like favicon.png

src/lib/components/NotificationToast.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { WEBUI_BASE_URL } from '$lib/constants';
 	import { settings, playingNotificationSound, isLastActiveTab } from '$lib/stores';
 	import DOMPurify from 'dompurify';
 
@@ -38,7 +39,7 @@
 	}}
 >
 	<div class="shrink-0 self-top -translate-y-0.5">
-		<img src={'/static/favicon.png'} alt="favicon" class="size-7 rounded-full" />
+		<img src="{WEBUI_BASE_URL}/static/favicon.png" alt="favicon" class="size-7 rounded-full" />
 	</div>
 
 	<div>

src/lib/components/OnBoarding.svelte

@@ -19,10 +19,10 @@
 
 			if (isDarkMode) {
 				const darkImage = new Image();
-				darkImage.src = '/static/favicon-dark.png';
+				darkImage.src = `${WEBUI_BASE_URL}/static/favicon-dark.png`;
 
 				darkImage.onload = () => {
-					logo.src = '/static/favicon-dark.png';
+					logo.src = `${WEBUI_BASE_URL}/static/favicon-dark.png`;
 					logo.style.filter = ''; // Ensure no inversion is applied if splash-dark.png exists
 				};
 

src/lib/components/admin/Evaluations/Feedbacks.svelte

@@ -23,6 +23,7 @@
 
 	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	export let feedbacks = [];
 
@@ -313,7 +314,7 @@
 								<Tooltip content={feedback?.user?.name}>
 									<div class="shrink-0">
 										<img
-											src={feedback?.user?.profile_image_url ?? '/user.png'}
+											src={feedback?.user?.profile_image_url ?? `${WEBUI_BASE_URL}/user.png`}
 											alt={feedback?.user?.name}
 											class="size-5 rounded-full object-cover shrink-0"
 										/>

src/lib/components/admin/Evaluations/Leaderboard.svelte

@@ -15,6 +15,7 @@
 
 	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	const i18n = getContext('i18n');
 
@@ -516,7 +517,7 @@
 							<div class="flex items-center gap-2">
 								<div class="shrink-0">
 									<img
-										src={model?.info?.meta?.profile_image_url ?? '/favicon.png'}
+										src={model?.info?.meta?.profile_image_url ?? `${WEBUI_BASE_URL}/favicon.png`}
 										alt={model.name}
 										class="size-5 rounded-full object-cover shrink-0"
 									/>

src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte

@@ -13,6 +13,7 @@
 	import AccessControl from '$lib/components/workspace/common/AccessControl.svelte';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	export let show = false;
 	export let edit = false;
@@ -36,7 +37,7 @@
 		}
 	};
 
-	let profileImageUrl = '/favicon.png';
+	let profileImageUrl = `${WEBUI_BASE_URL}/favicon.png`;
 	let description = '';
 
 	let selectedModelId = '';
@@ -92,7 +93,7 @@
 
 		name = '';
 		id = '';
-		profileImageUrl = '/favicon.png';
+		profileImageUrl = `${WEBUI_BASE_URL}/favicon.png`;
 		description = '';
 		modelIds = [];
 		selectedModelId = '';

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

@@ -36,6 +36,7 @@
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 	import EyeSlash from '$lib/components/icons/EyeSlash.svelte';
 	import Eye from '$lib/components/icons/Eye.svelte';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	let shiftKey = false;
 
@@ -332,7 +333,7 @@
 										: 'opacity-50 dark:opacity-50'} "
 								>
 									<img
-										src={model?.meta?.profile_image_url ?? '/static/favicon.png'}
+										src={model?.meta?.profile_image_url ?? `${WEBUI_BASE_URL}/static/favicon.png`}
 										alt="modelfile profile"
 										class=" rounded-full w-full h-auto object-cover"
 									/>

src/lib/components/admin/Users/Groups/Users.svelte

@@ -88,7 +88,7 @@
 										user.profile_image_url.startsWith('https://www.gravatar.com/avatar/') ||
 										user.profile_image_url.startsWith('data:')
 											? user.profile_image_url
-											: `/user.png`}
+											: `${WEBUI_BASE_URL}/user.png`}
 										alt="user"
 									/>
 

src/lib/components/admin/Users/UserList.svelte

@@ -396,7 +396,7 @@
 									user.profile_image_url.startsWith('https://www.gravatar.com/avatar/') ||
 									user.profile_image_url.startsWith('data:')
 										? user.profile_image_url
-										: `/user.png`}
+										: `${WEBUI_BASE_URL}/user.png`}
 									alt="user"
 								/>
 

src/lib/components/app/AppSidebar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Plus from '$lib/components/icons/Plus.svelte';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	let selected = '';
 </script>
@@ -25,7 +26,7 @@
 				}}
 			>
 				<img
-					src="/static/splash.png"
+					src="{WEBUI_BASE_URL}/static/splash.png"
 					class="size-11 dark:invert p-0.5"
 					alt="logo"
 					draggable="false"
@@ -49,7 +50,7 @@
 			}}
 		>
 			<img
-				src="/static/favicon.png"
+				src="{WEBUI_BASE_URL}/static/favicon.png"
 				class="size-10 {selected === '' ? 'rounded-2xl' : 'rounded-full'}"
 				alt="logo"
 				draggable="false"

src/lib/components/channel/Messages/Message.svelte

@@ -144,7 +144,9 @@
 					<ProfilePreview user={message.user}>
 						<ProfileImage
 							src={message.user?.profile_image_url ??
-								($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)}
+								($i18n.language === 'dg-DG'
+									? `${WEBUI_BASE_URL}/doge.png`
+									: `${WEBUI_BASE_URL}/static/favicon.png`)}
 							className={'size-8 translate-y-1 ml-0.5'}
 						/>
 					</ProfilePreview>
@@ -275,7 +277,7 @@
 										>
 											{#if $shortCodesToEmojis[reaction.name]}
 												<img
-													src="/assets/emojis/{$shortCodesToEmojis[
+													src="{WEBUI_BASE_URL}/assets/emojis/{$shortCodesToEmojis[
 														reaction.name
 													].toLowerCase()}.svg"
 													alt={reaction.name}

src/lib/components/channel/Messages/Message/ReactionPicker.svelte

@@ -5,6 +5,7 @@
 	import emojiShortCodes from '$lib/emoji-shortcodes.json';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import VirtualList from '@sveltejs/svelte-virtual-list';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	export let onClose = () => {};
 	export let onSubmit = (name) => {};
@@ -147,7 +148,7 @@
 												on:click={() => selectEmoji(emojiItem)}
 											>
 												<img
-													src="/assets/emojis/{emojiItem.name.toLowerCase()}.svg"
+													src="{WEBUI_BASE_URL}/assets/emojis/{emojiItem.name.toLowerCase()}.svg"
 													alt={emojiItem.name}
 													class="size-5"
 													loading="lazy"

src/lib/components/chat/ChatPlaceholder.svelte

@@ -56,7 +56,7 @@
 								crossorigin="anonymous"
 								src={model?.info?.meta?.profile_image_url ??
 									($i18n.language === 'dg-DG'
-										? `/doge.png`
+										? `${WEBUI_BASE_URL}/doge.png`
 										: `${WEBUI_BASE_URL}/static/favicon.png`)}
 								class=" size-[2.7rem] rounded-full border-[1px] border-gray-100 dark:border-none"
 								alt="logo"

src/lib/components/chat/MessageInput.svelte

@@ -835,7 +835,7 @@
 										src={$models.find((model) => model.id === atSelectedModel.id)?.info?.meta
 											?.profile_image_url ??
 											($i18n.language === 'dg-DG'
-												? `/doge.png`
+												? `${WEBUI_BASE_URL}/doge.png`
 												: `${WEBUI_BASE_URL}/static/favicon.png`)}
 									/>
 									<div class="translate-y-[0.5px]">

src/lib/components/chat/MessageInput/Commands/Models.svelte

@@ -5,6 +5,7 @@
 	import { tick, getContext } from 'svelte';
 
 	import { models } from '$lib/stores';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	const i18n = getContext('i18n');
 
@@ -117,7 +118,8 @@
 						>
 							<div class="flex font-medium text-black dark:text-gray-100 line-clamp-1">
 								<img
-									src={model?.info?.meta?.profile_image_url ?? '/static/favicon.png'}
+									src={model?.info?.meta?.profile_image_url ??
+										`${WEBUI_BASE_URL}/static/favicon.png`}
 									alt={model?.name ?? model.id}
 									class="rounded-full size-6 items-center mr-2"
 								/>

src/lib/components/chat/Messages/ProfileImage.svelte

@@ -14,7 +14,7 @@
 			  src.startsWith('data:') ||
 			  src.startsWith('/')
 			? src
-			: `/user.png`}
+			: `${WEBUI_BASE_URL}/user.png`}
 	class=" {className} object-cover rounded-full"
 	alt="profile"
 	draggable="false"

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -605,7 +605,9 @@
 		<div class={`shrink-0 ltr:mr-3 rtl:ml-3 hidden @lg:flex mt-1 `}>
 			<ProfileImage
 				src={model?.info?.meta?.profile_image_url ??
-					($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)}
+					($i18n.language === 'dg-DG'
+						? `${WEBUI_BASE_URL}/doge.png`
+						: `${WEBUI_BASE_URL}/favicon.png`)}
 				className={'size-8 assistant-message-profile-image'}
 			/>
 		</div>

src/lib/components/chat/Messages/UserMessage.svelte

@@ -6,6 +6,7 @@
 	import { models, settings } from '$lib/stores';
 	import { user as _user } from '$lib/stores';
 	import { copyToClipboard as _copyToClipboard, formatDate } from '$lib/utils';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
@@ -117,8 +118,8 @@
 			<ProfileImage
 				src={message.user
 					? ($models.find((m) => m.id === message.user)?.info?.meta?.profile_image_url ??
-						'/user.png')
+						`${WEBUI_BASE_URL}/user.png`)
-					: (user?.profile_image_url ?? '/user.png')}
+					: (user?.profile_image_url ?? `${WEBUI_BASE_URL}/user.png`)}
 				className={'size-8 user-message-profile-image'}
 			/>
 		</div>

src/lib/components/chat/ModelSelector/ModelItem.svelte

@@ -5,6 +5,7 @@
 	import dayjs from '$lib/dayjs';
 
 	import { mobile, settings, user } from '$lib/stores';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import { copyToClipboard, sanitizeResponseContent } from '$lib/utils';
@@ -73,7 +74,8 @@
 			<div class="flex items-center min-w-fit">
 				<Tooltip content={$user?.role === 'admin' ? (item?.value ?? '') : ''} placement="top-start">
 					<img
-						src={item.model?.info?.meta?.profile_image_url ?? '/static/favicon.png'}
+						src={item.model?.info?.meta?.profile_image_url ??
+							`${WEBUI_BASE_URL}/static/favicon.png`}
 						alt="Model"
 						class="rounded-full size-5 flex items-center"
 					/>

src/lib/components/chat/Overview/Node.svelte

@@ -21,7 +21,7 @@
 		{#if data.message.role === 'user'}
 			<div class="flex w-full">
 				<ProfileImage
-					src={data.user?.profile_image_url ?? '/user.png'}
+					src={data.user?.profile_image_url ?? `${WEBUI_BASE_URL}/user.png`}
 					className={'size-5 -translate-y-[1px]'}
 				/>
 				<div class="ml-2">

src/lib/components/chat/Placeholder.svelte

@@ -100,7 +100,7 @@
 										crossorigin="anonymous"
 										src={model?.info?.meta?.profile_image_url ??
 											($i18n.language === 'dg-DG'
-												? `/doge.png`
+												? `${WEBUI_BASE_URL}/doge.png`
 												: `${WEBUI_BASE_URL}/static/favicon.png`)}
 										class=" size-9 @sm:size-10 rounded-full border-[1px] border-gray-100 dark:border-none"
 										aria-hidden="true"

src/lib/components/chat/Settings/Account.svelte

@@ -4,6 +4,7 @@
 
 	import { user, config, settings } from '$lib/stores';
 	import { updateUserProfile, createAPIKey, getAPIKey, getSessionUser } from '$lib/apis/auths';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	import UpdatePassword from './Account/UpdatePassword.svelte';
 	import { getGravatarUrl } from '$lib/apis/utils';
@@ -223,7 +224,7 @@
 						<button
 							class=" text-xs text-center text-gray-800 dark:text-gray-400 rounded-lg px-2 py-1"
 							on:click={async () => {
-								profileImageUrl = '/user.png';
+								profileImageUrl = `${WEBUI_BASE_URL}/user.png`;
 							}}>{$i18n.t('Remove')}</button
 						>
 					</div>

src/lib/components/common/Banner.svelte

@@ -4,6 +4,7 @@
 	import { fade } from 'svelte/transition';
 	import DOMPurify from 'dompurify';
 	import { marked } from 'marked';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	const dispatch = createEventDispatcher();
 
@@ -60,7 +61,7 @@
 						<div class="flex md:hidden group w-fit md:items-center">
 							<a
 								class="text-gray-700 dark:text-white text-xs font-semibold underline"
-								href="/assets/files/whitepaper.pdf"
+								href="{WEBUI_BASE_URL}/assets/files/whitepaper.pdf"
 								target="_blank">Learn More</a
 							>
 

src/lib/components/common/SlideShow.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
+	import { WEBUI_BASE_URL } from '$lib/constants';
 	import { onMount } from 'svelte';
 
 	export let imageUrls = [
-		'/assets/images/adam.jpg',
+		`${WEBUI_BASE_URL}/assets/images/adam.jpg`,
-		'/assets/images/galaxy.jpg',
+		`${WEBUI_BASE_URL}/assets/images/galaxy.jpg`,
-		'/assets/images/earth.jpg',
+		`${WEBUI_BASE_URL}/assets/images/earth.jpg`,
-		'/assets/images/space.jpg'
+		`${WEBUI_BASE_URL}/assets/images/space.jpg`
 	];
 	export let duration = 5000;
 	let selectedImageIdx = 0;

src/lib/components/layout/Sidebar.svelte

@@ -676,7 +676,8 @@
 									<div class="self-center shrink-0">
 										<img
 											crossorigin="anonymous"
-											src={model?.info?.meta?.profile_image_url ?? '/static/favicon.png'}
+											src={model?.info?.meta?.profile_image_url ??
+												`${WEBUI_BASE_URL}/static/favicon.png`}
 											class=" size-5 rounded-full -translate-x-[0.5px]"
 											alt="logo"
 										/>

src/lib/components/workspace/Models.svelte

@@ -12,6 +12,7 @@
 	const i18n = getContext('i18n');
 
 	import { WEBUI_NAME, config, mobile, models as _models, settings, user } from '$lib/stores';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 	import {
 		createNewModel,
 		deleteModelById,
@@ -332,7 +333,7 @@
 								: 'opacity-50 dark:opacity-50'} "
 						>
 							<img
-								src={model?.meta?.profile_image_url ?? '/static/favicon.png'}
+								src={model?.meta?.profile_image_url ?? `${WEBUI_BASE_URL}/static/favicon.png`}
 								alt="modelfile profile"
 								class=" rounded-full w-full h-auto object-cover"
 							/>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount, getContext, tick } from 'svelte';
 	import { models, tools, functions, knowledge as knowledgeCollections, user } from '$lib/stores';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	import AdvancedParams from '$lib/components/chat/Settings/Advanced/AdvancedParams.svelte';
 	import Tags from '$lib/components/common/Tags.svelte';
@@ -64,7 +65,7 @@
 		base_model_id: null,
 		name: '',
 		meta: {
-			profile_image_url: '/static/favicon.png',
+			profile_image_url: `${WEBUI_BASE_URL}/static/favicon.png`,
 			description: '',
 			suggestion_prompts: null,
 			tags: []
@@ -379,7 +380,7 @@
 					<div class="self-center">
 						<button
 							class="rounded-xl flex shrink-0 items-center {info.meta.profile_image_url !==
-							'/static/favicon.png'
+							`${WEBUI_BASE_URL}/static/favicon.png`
 								? 'bg-transparent'
 								: 'bg-white'} shadow-xl group relative"
 							type="button"
@@ -395,7 +396,7 @@
 								/>
 							{:else}
 								<img
-									src="/static/favicon.png"
+									src="{WEBUI_BASE_URL}/static/favicon.png"
 									alt="model profile"
 									class=" rounded-xl size-72 md:size-60 object-cover shrink-0"
 								/>
@@ -431,7 +432,7 @@
 							<button
 								class="px-2 py-1 text-gray-500 rounded-lg text-xs"
 								on:click={() => {
-									info.meta.profile_image_url = '/static/favicon.png';
+									info.meta.profile_image_url = `${WEBUI_BASE_URL}/static/favicon.png`;
 								}}
 								type="button"
 							>

src/lib/utils/index.ts

@@ -1,5 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
 import sha256 from 'js-sha256';
+import { WEBUI_BASE_URL } from '$lib/constants';
 
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -12,7 +13,6 @@ dayjs.extend(isToday);
 dayjs.extend(isYesterday);
 dayjs.extend(localizedFormat);
 
-import { WEBUI_BASE_URL } from '$lib/constants';
 import { TTS_RESPONSE_SPLIT } from '$lib/types';
 
 import { marked } from 'marked';
@@ -346,7 +346,7 @@ export const generateInitialsImage = (name) => {
 		console.log(
 			'generateInitialsImage: failed pixel test, fingerprint evasion is likely. Using default image.'
 		);
-		return '/user.png';
+		return `${WEBUI_BASE_URL}/user.png`;
 	}
 
 	ctx.fillStyle = '#F39C12';

src/routes/(app)/workspace/models/create/+page.svelte

@@ -3,6 +3,7 @@
 	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
 	import { config, models, settings } from '$lib/stores';
+	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	import { onMount, tick, getContext } from 'svelte';
 	import { createNewModel, getModelById } from '$lib/apis/models';
@@ -30,7 +31,8 @@
 				...modelInfo,
 				meta: {
 					...modelInfo.meta,
-					profile_image_url: modelInfo.meta.profile_image_url ?? '/static/favicon.png',
+					profile_image_url:
+						modelInfo.meta.profile_image_url ?? `${WEBUI_BASE_URL}/static/favicon.png`,
 					suggestion_prompts: modelInfo.meta.suggestion_prompts
 						? modelInfo.meta.suggestion_prompts.filter((prompt) => prompt.content !== '')
 						: null

src/routes/auth/+page.svelte

@@ -123,10 +123,10 @@
 
 			if (isDarkMode) {
 				const darkImage = new Image();
-				darkImage.src = '/static/favicon-dark.png';
+				darkImage.src = `${WEBUI_BASE_URL}/static/favicon-dark.png`;
 
 				darkImage.onload = () => {
-					logo.src = '/static/favicon-dark.png';
+					logo.src = `${WEBUI_BASE_URL}/static/favicon-dark.png`;
 					logo.style.filter = ''; // Ensure no inversion is applied if favicon-dark.png exists
 				};