add FORCED_IMAGE_COMPRESSION_WIDTH and _HEIGHT to override (and hide) corresponding user settings for image compression

backend/open_webui/config.py

@@ -18,6 +18,8 @@ from open_webui.env import (
     DATA_DIR,
     DATABASE_URL,
     ENV,
+    FORCED_IMAGE_COMPRESSION_WIDTH,
+    FORCED_IMAGE_COMPRESSION_HEIGHT,
     REDIS_URL,
     REDIS_SENTINEL_HOSTS,
     REDIS_SENTINEL_PORT,

backend/open_webui/env.py

@@ -460,3 +460,9 @@ OTEL_TRACES_SAMPLER = os.environ.get(
 
 PIP_OPTIONS = os.getenv("PIP_OPTIONS", "").split()
 PIP_PACKAGE_INDEX_OPTIONS = os.getenv("PIP_PACKAGE_INDEX_OPTIONS", "").split()
+
+####################################
+# FORCED IMAGE COMPRESSION
+####################################
+FORCED_IMAGE_COMPRESSION_WIDTH = os.environ.get("FORCED_IMAGE_COMPRESSION_WIDTH", "")
+FORCED_IMAGE_COMPRESSION_HEIGHT = os.environ.get("FORCED_IMAGE_COMPRESSION_HEIGHT", "")

backend/open_webui/main.py

@@ -293,6 +293,8 @@ from open_webui.config import (
     DEFAULT_LOCALE,
     OAUTH_PROVIDERS,
     WEBUI_URL,
+    FORCED_IMAGE_COMPRESSION_WIDTH,
+    FORCED_IMAGE_COMPRESSION_HEIGHT,
     # Admin
     ENABLE_ADMIN_CHAT_ACCESS,
     ENABLE_ADMIN_EXPORT,
@@ -1265,6 +1267,10 @@ async def get_app_config(request: Request):
                     "max_size": app.state.config.FILE_MAX_SIZE,
                     "max_count": app.state.config.FILE_MAX_COUNT,
                 },
+                "forced_image_compression_size": {
+                    "width": FORCED_IMAGE_COMPRESSION_WIDTH,
+                    "height": FORCED_IMAGE_COMPRESSION_HEIGHT,
+                },
                 "permissions": {**app.state.config.USER_PERMISSIONS},
                 "google_drive": {
                     "client_id": GOOGLE_DRIVE_CLIENT_ID.value,

src/lib/components/channel/MessageInput.svelte

@@ -6,6 +6,10 @@
 
 	const i18n = getContext('i18n');
 
+	const forcedImageCompressionWidth = $config?.forced_image_compression_size.width ?? null;
+	const forcedImageCompressionHeight = $config?.forced_image_compression_size.height ?? null;
+	const forcedImageCompression = Boolean(forcedImageCompressionWidth) || Boolean(forcedImageCompressionHeight);
+
 	import { config, mobile, settings, socket } from '$lib/stores';
 	import { blobToFile, compressImage } from '$lib/utils';
 
@@ -111,7 +115,10 @@
 				reader.onload = async (event) => {
 					let imageUrl = event.target.result;
 
-					if ($settings?.imageCompression ?? false) {
+					if (forcedImageCompression) {
+						imageUrl = await compressImage(imageUrl, forcedImageCompressionWidth, forcedImageCompressionHeight);
+					}
+					else if ($settings?.imageCompression ?? false) {
 						const width = $settings?.imageCompressionSize?.width ?? null;
 						const height = $settings?.imageCompressionSize?.height ?? null;
 

src/lib/components/chat/MessageInput.svelte

@@ -50,6 +50,10 @@
 
 	const i18n = getContext('i18n');
 
+	const forcedImageCompressionWidth = $config?.forced_image_compression_size.width ?? null;
+	const forcedImageCompressionHeight = $config?.forced_image_compression_size.height ?? null;
+	const forcedImageCompression = Boolean(forcedImageCompressionWidth) || Boolean(forcedImageCompressionHeight);
+
 	export let transparentBackground = false;
 
 	export let onChange: Function = () => {};
@@ -252,7 +256,10 @@
 				reader.onload = async (event) => {
 					let imageUrl = event.target.result;
 
-					if ($settings?.imageCompression ?? false) {
+					if (forcedImageCompression) {
+						imageUrl = await compressImage(imageUrl, forcedImageCompressionWidth, forcedImageCompressionHeight);
+					}
+					else if ($settings?.imageCompression ?? false) {
 						const width = $settings?.imageCompressionSize?.width ?? null;
 						const height = $settings?.imageCompressionSize?.height ?? null;
 

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

@@ -50,6 +50,9 @@
 		width: '',
 		height: ''
 	};
+	const forcedImageCompressionWidth = $config?.forced_image_compression_size.width ?? null;
+	const forcedImageCompressionHeight = $config?.forced_image_compression_size.height ?? null;
+	const forcedImageCompression = Boolean(forcedImageCompressionWidth) || Boolean(forcedImageCompressionHeight);
 
 	// Admin - Show Update Available Toast
 	let showUpdateToast = true;
@@ -860,23 +863,29 @@
 				<div class=" py-0.5 flex w-full justify-between">
 					<div class=" self-center text-xs">{$i18n.t('Image Compression')}</div>
 
-					<button
+					{#if forcedImageCompression}
-						class="p-1 px-3 text-xs flex rounded-sm transition"
+						<div class="p-1 px-3 text-xs flex rounded-sm transition">
-						on:click={() => {
-							toggleImageCompression();
-						}}
-						type="button"
-					>
-						{#if imageCompression === true}
 							<span class="ml-2 self-center">{$i18n.t('On')}</span>
-						{:else}
+						</div>
-							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
+					{:else}
-						{/if}
+						<button
-					</button>
+							class="p-1 px-3 text-xs flex rounded-sm transition"
+							on:click={() => {
+								toggleImageCompression();
+							}}
+							type="button"
+						>
+							{#if imageCompression || forcedImageCompression}
+								<span class="ml-2 self-center">{$i18n.t('On')}</span>
+							{:else}
+								<span class="ml-2 self-center">{$i18n.t('Off')}</span>
+							{/if}
+						</button>
+					{/if}
 				</div>
 			</div>
 
-			{#if imageCompression}
+			{#if imageCompression && !forcedImageCompression}
 				<div>
 					<div class=" py-0.5 flex w-full justify-between text-xs">
 						<div class=" self-center text-xs">{$i18n.t('Image Max Compression Size')}</div>

src/lib/stores/index.ts

@@ -199,6 +199,10 @@ type Config = {
 	default_locale: string;
 	default_models: string;
 	default_prompt_suggestions: PromptSuggestion[];
+	forced_image_compression_size: {
+		width: number;
+		height: number;
+	};
 	features: {
 		auth: boolean;
 		auth_trusted_header: boolean;