@gradio/core 0.16.0 → 0.17.0

package/dist/src/lang/ta.json

@@ -97,7 +97,8 @@
 		"runtime_error": "இயக்க நேர பிழை உள்ளது",
 		"space_not_working": "\"Space செயல்படவில்லை ஏனெனில்\" {0}",
 		"space_paused": "Space இடைநிறுத்தப்பட்டுள்ளது",
-		"use_via_api": "API மூலம் பயன்படுத்தவும்"
+		"use_via_api": "API மூலம் பயன்படுத்தவும்",
+		"use_via_api_or_mcp": "API அல்லது MCP மூலம் பயன்படுத்தவும்"
 	},
 	"file": {
 		"uploading": "பதிவேற்றுகிறது..."

package/dist/src/lang/th.json

@@ -87,7 +87,8 @@
 		"runtime_error": "เกิดข้อผิดพลาดขณะทำงาน",
 		"space_not_working": "\"Space ใช้งานไม่ได้เนื่องจาก\" {0}",
 		"space_paused": "Space ถูกหยุดชั่วคราว",
-		"use_via_api": "ใช้งานผ่าน API"
+		"use_via_api": "ใช้งานผ่าน API",
+		"use_via_api_or_mcp": "ใช้งานผ่าน API หรือ MCP"
 	},
 	"file": {
 		"uploading": "กำลังอัปโหลด..."

package/dist/src/lang/tr.json

@@ -97,7 +97,8 @@
 		"runtime_error": "Bir çalışma zamanı hatası var",
 		"space_not_working": "\"Space çalışmıyor çünkü\" {0}",
 		"space_paused": "Space duraklatıldı",
-		"use_via_api": "API üzerinden kullan"
+		"use_via_api": "API üzerinden kullan",
+		"use_via_api_or_mcp": "API veya MCP üzerinden kullan"
 	},
 	"file": {
 		"uploading": "Yükleniyor..."

package/dist/src/lang/uk.json

@@ -97,7 +97,8 @@
 		"runtime_error": "Є помилка виконання",
 		"space_not_working": "\"Space не працює, оскільки\" {0}",
 		"space_paused": "Space призупинено",
-		"use_via_api": "Використовувати через API"
+		"use_via_api": "Використовувати через API",
+		"use_via_api_or_mcp": "Використовувати через API або MCP"
 	},
 	"file": {
 		"uploading": "Завантаження..."

package/dist/src/lang/ur.json

@@ -97,7 +97,8 @@
 		"runtime_error": "رن ٹائم میں خطا ہے",
 		"space_not_working": "\"Space کام نہیں کر رہا ہے کیونکہ\" {0}",
 		"space_paused": "Space موقوف ہے",
-		"use_via_api": "API کے ذریعے استعمال کریں"
+		"use_via_api": "API کے ذریعے استعمال کریں",
+		"use_via_api_or_mcp": "API یا MCP کے ذریعے استعمال کریں"
 	},
 	"file": {
 		"uploading": "اپلوڈ ہو رہا ہے..."

package/dist/src/lang/uz.json

@@ -97,7 +97,8 @@
 		"runtime_error": "Bajarilish vaqti xatosi mavjud",
 		"space_not_working": "\"Space ishlamayapti, chunki\" {0}",
 		"space_paused": "Space to'xtatilgan",
-		"use_via_api": "API orqali foydalaning"
+		"use_via_api": "API orqali foydalaning",
+		"use_via_api_or_mcp": "API yoki MCP orqali foydalaning"
 	},
 	"file": {
 		"uploading": "Yuklanmoqda..."

package/dist/src/lang/zh-CN.json

@@ -87,7 +87,8 @@
 		"runtime_error": "存在运行时错误",
 		"space_not_working": "\"Space 无法工作，原因：\" {0}",
 		"space_paused": "Space 已暂停",
-		"use_via_api": "通过 API 使用"
+		"use_via_api": "通过 API 使用",
+		"use_via_api_or_mcp": "通过 API 或 MCP 使用"
 	},
 	"file": {
 		"uploading": "正在上传..."

package/dist/src/lang/zh-TW.json

@@ -97,7 +97,8 @@
 		"runtime_error": "有執行時錯誤",
 		"space_not_working": "\"Space 無法運作，因為\" {0}",
 		"space_paused": "Space 已暫停",
-		"use_via_api": "透過 API 使用"
+		"use_via_api": "透過 API 使用",
+		"use_via_api_or_mcp": "透過 API 或 MCP 使用"
 	},
 	"file": {
 		"uploading": "上傳中..."

package/package.json

@@ -1,68 +1,68 @@
 {
   "name": "@gradio/core",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.14",
-    "@gradio/atoms": "^0.16.0",
-    "@gradio/audio": "^0.17.12",
-    "@gradio/annotatedimage": "^0.9.17",
-    "@gradio/box": "^0.2.18",
-    "@gradio/button": "^0.4.17",
-    "@gradio/chatbot": "^0.26.4",
-    "@gradio/checkboxgroup": "^0.6.20",
-    "@gradio/checkbox": "^0.4.20",
-    "@gradio/code": "^0.14.2",
-    "@gradio/client": "^1.14.2",
-    "@gradio/colorpicker": "^0.4.20",
+    "@gradio/accordion": "^0.5.15",
+    "@gradio/annotatedimage": "^0.9.19",
+    "@gradio/atoms": "^0.16.1",
+    "@gradio/audio": "^0.17.14",
+    "@gradio/box": "^0.2.19",
+    "@gradio/chatbot": "^0.26.7",
+    "@gradio/button": "^0.5.0",
+    "@gradio/checkboxgroup": "^0.6.21",
+    "@gradio/client": "^1.15.0",
+    "@gradio/checkbox": "^0.4.21",
+    "@gradio/code": "^0.14.4",
+    "@gradio/colorpicker": "^0.4.21",
     "@gradio/column": "^0.2.0",
-    "@gradio/dataframe": "^0.17.10",
-    "@gradio/dataset": "^0.4.16",
-    "@gradio/datetime": "^0.3.12",
-    "@gradio/dropdown": "^0.9.20",
-    "@gradio/downloadbutton": "^0.3.17",
-    "@gradio/fallback": "^0.4.20",
-    "@gradio/file": "^0.12.16",
-    "@gradio/form": "^0.2.18",
-    "@gradio/fileexplorer": "^0.5.27",
-    "@gradio/gallery": "^0.15.17",
-    "@gradio/highlightedtext": "^0.9.3",
-    "@gradio/html": "^0.6.11",
-    "@gradio/icons": "^0.12.0",
+    "@gradio/dataframe": "^0.17.12",
+    "@gradio/dataset": "^0.4.19",
+    "@gradio/datetime": "^0.3.13",
+    "@gradio/downloadbutton": "^0.4.0",
+    "@gradio/dropdown": "^0.9.21",
+    "@gradio/file": "^0.12.18",
+    "@gradio/form": "^0.2.19",
+    "@gradio/fallback": "^0.4.21",
+    "@gradio/fileexplorer": "^0.5.29",
+    "@gradio/highlightedtext": "^0.9.4",
+    "@gradio/gallery": "^0.15.19",
+    "@gradio/html": "^0.6.13",
     "@gradio/group": "^0.2.0",
-    "@gradio/imageeditor": "^0.14.4",
-    "@gradio/image": "^0.22.4",
-    "@gradio/imageslider": "^0.2.0",
-    "@gradio/json": "^0.5.20",
+    "@gradio/icons": "^0.12.0",
+    "@gradio/image": "^0.22.6",
+    "@gradio/imageeditor": "^0.15.0",
+    "@gradio/imageslider": "^0.2.2",
+    "@gradio/label": "^0.5.13",
+    "@gradio/json": "^0.5.22",
     "@gradio/browserstate": "^0.3.2",
-    "@gradio/markdown": "^0.13.10",
-    "@gradio/label": "^0.5.12",
-    "@gradio/model3d": "^0.14.11",
-    "@gradio/paramviewer": "^0.7.8",
-    "@gradio/number": "^0.5.20",
-    "@gradio/nativeplot": "^0.5.14",
-    "@gradio/plot": "^0.9.15",
-    "@gradio/multimodaltextbox": "^0.10.4",
-    "@gradio/radio": "^0.7.3",
+    "@gradio/markdown": "^0.13.12",
+    "@gradio/multimodaltextbox": "^0.10.6",
+    "@gradio/nativeplot": "^0.5.16",
+    "@gradio/paramviewer": "^0.7.9",
+    "@gradio/number": "^0.5.21",
+    "@gradio/model3d": "^0.14.13",
+    "@gradio/plot": "^0.9.16",
+    "@gradio/radio": "^0.7.4",
     "@gradio/row": "^0.2.1",
-    "@gradio/sidebar": "^0.1.12",
-    "@gradio/simpledropdown": "^0.3.20",
-    "@gradio/simpleimage": "^0.8.27",
-    "@gradio/simpletextbox": "^0.3.20",
-    "@gradio/sketchbox": "^0.6.7",
-    "@gradio/slider": "^0.6.8",
+    "@gradio/sidebar": "^0.1.13",
+    "@gradio/simpledropdown": "^0.3.21",
+    "@gradio/sketchbox": "^0.6.8",
+    "@gradio/simpletextbox": "^0.3.21",
+    "@gradio/simpleimage": "^0.8.29",
+    "@gradio/slider": "^0.6.9",
+    "@gradio/statustracker": "^0.10.11",
     "@gradio/state": "^0.1.2",
-    "@gradio/statustracker": "^0.10.10",
-    "@gradio/tabitem": "^0.4.3",
-    "@gradio/tabs": "^0.4.3",
+    "@gradio/tabitem": "^0.4.4",
+    "@gradio/tabs": "^0.4.4",
+    "@gradio/textbox": "^0.10.11",
     "@gradio/theme": "^0.4.0",
-    "@gradio/textbox": "^0.10.10",
-    "@gradio/upload": "^0.16.3",
-    "@gradio/uploadbutton": "^0.8.17",
     "@gradio/timer": "^0.4.5",
+    "@gradio/upload": "^0.16.5",
+    "@gradio/uploadbutton": "^0.9.0",
     "@gradio/utils": "^0.10.2",
-    "@gradio/video": "^0.14.12",
-    "@gradio/wasm": "^0.18.1"
+    "@gradio/wasm": "^0.18.1",
+    "@gradio/video": "^0.14.14"
   },
   "msw": {
     "workerDirectory": "public"

package/src/Blocks.svelte

@@ -26,8 +26,6 @@
 		StatusMessage
 	} from "@gradio/client";
 
-	setupi18n();
-
 	export let root: string;
 	export let components: ComponentMeta[];
 	export let layout: LayoutNode;
@@ -52,6 +50,8 @@
 	export let initial_layout: ComponentMeta | undefined = undefined;
 	export let css: string | null | undefined = null;
 
+	setupi18n(app.config?.i18n_translations ?? undefined);
+
 	let {
 		layout: _layout,
 		targets,
@@ -822,7 +822,11 @@
 					}}
 					class="show-api"
 				>
-					{$_("errors.use_via_api")}
+					{#if app.config?.mcp_server}
+						{$_("errors.use_via_api_or_mcp")}
+					{:else}
+						{$_("errors.use_via_api")}
+					{/if}
 					<img src={api_logo} alt={$_("common.logo")} />
 				</button>
 				<div class="divider show-api-divider">·</div>

package/src/Render.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Gradio, formatter } from "./gradio_helper";
+	import { Gradio, reactive_formatter } from "./gradio_helper";
 	import { onMount, createEventDispatcher, setContext } from "svelte";
 	import type { ComponentMeta, ThemeMode } from "./types";
 	import type { Client } from "@gradio/client";
@@ -70,7 +70,7 @@
 		root,
 		autoscroll,
 		max_file_size,
-		formatter,
+		$reactive_formatter,
 		client,
 		load_component
 	);

package/src/RenderComponent.svelte

@@ -1,9 +1,9 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
-	import type { Gradio } from "./gradio_helper";
 	import type { ComponentMeta, ThemeMode } from "./types";
 	import type { SvelteComponent, ComponentType } from "svelte";
+	import { translate_if_needed } from "./i18n";
 	// @ts-ignore
 	import { bind, binding_callbacks } from "svelte/internal";
 
@@ -50,6 +50,26 @@
 	}
 
 	const _component = wrap(component);
+
+	const supported_props = [
+		"description",
+		"info",
+		"title",
+		"placeholder",
+		"value",
+		"label"
+	];
+
+	function translate_prop(obj: SvelteRestProps): void {
+		for (const key in obj) {
+			if (supported_props.includes(key as string)) {
+				obj[key] = translate_if_needed(obj[key]);
+			}
+		}
+	}
+
+	$: translate_prop($$restProps);
+	$: value = translate_if_needed(value);
 </script>
 
 <!-- {#if visible} -->

package/src/api_docs/ApiDocs.svelte

@@ -35,6 +35,8 @@
 	const bash_docs =
 		"https://www.gradio.app/guides/querying-gradio-apps-with-curl";
 	const spaces_docs_suffix = "#connecting-to-a-hugging-face-space";
+	const mcp_docs =
+		"https://www.gradio.app/guides/building-mcp-server-with-gradio";
 
 	let api_count = dependencies.filter(
 		(dependency) => dependency.show_api
@@ -343,7 +345,12 @@
 														mcpServers: {
 															gradio: {
 																command: "npx",
-																args: ["mcp-remote", mcp_server_url]
+																args: [
+																	"mcp-remote",
+																	mcp_server_url,
+																	"--transport",
+																	"sse-only"
+																]
 															}
 														}
 													},
@@ -358,7 +365,12 @@
 														mcpServers: {
 															gradio: {
 																command: "npx",
-																arguments: ["mcp-remote", mcp_server_url]
+																args: [
+																	"mcp-remote",
+																	mcp_server_url,
+																	"--transport",
+																	"sse-only"
+																]
 															}
 														}
 													},
@@ -369,7 +381,11 @@
 									</code>
 								</Block>
 								<p>&nbsp;</p>
-								<p>&nbsp;</p>
+								<p>
+									<a href={mcp_docs} target="_blank">
+										Read more about MCP in the Gradio docs
+									</a>
+								</p>
 							{:else}
 								This Gradio app can also serve as an MCP server, with an MCP
 								tool corresponding to each API endpoint. To enable this, launch

package/src/gradio_helper.ts

@@ -1,28 +1,16 @@
-import { format, _ } from "svelte-i18n";
-import { get } from "svelte/store";
 import { all_common_keys } from "./i18n";
-
+import { _ } from "svelte-i18n";
+import { get, derived } from "svelte/store";
 export { Gradio } from "@gradio/utils";
+
 export type I18nFormatter = typeof formatter;
 
-/**
- * i18n formatter with fallback to svelte-i18n's format function.
- *
- * @param value - The string to translate or format
- * @returns The translated string
- *
- * This formatter attempts translation in the following order:
- * 1. Direct translation of the input string
- * 2. Checks if input matches any common key names
- * 3. Falls back to svelte-i18n's format function
- */
 export function formatter(value: string | null | undefined): string {
 	if (value == null) {
 		return "";
 	}
 	const string_value = String(value);
 	const translate = get(_);
-	const initial_formatter = get(format);
 
 	let direct_translation = translate(string_value);
 
@@ -45,11 +33,7 @@ export function formatter(value: string | null | undefined): string {
 		}
 	}
 
-	// fall back to the svelte-i18n formatter to maintain compatibility
-	const formatted = initial_formatter(string_value);
-	if (formatted !== string_value) {
-		return formatted;
-	}
-
 	return string_value;
 }
+
+export const reactive_formatter = derived(_, () => formatter);

package/src/i18n.test.ts

@@ -1,7 +1,36 @@
-import { describe, test, assert } from "vitest";
+import {
+	describe,
+	test,
+	expect,
+	assert,
+	vi,
+	beforeEach,
+	afterEach
+} from "vitest";
 import { process_langs } from "./i18n";
 import languagesByAnyCode from "wikidata-lang/indexes/by_any_code";
 import BCP47 from "./lang/BCP47_codes";
+import {
+	translate_if_needed,
+	get_initial_locale,
+	load_translations,
+	changeLocale,
+	is_translation_metadata
+} from "./i18n";
+
+vi.mock("svelte-i18n", () => ({
+	locale: { set: vi.fn() },
+	_: vi.fn((key) => `translated_${key}`),
+	addMessages: vi.fn(),
+	init: vi.fn().mockResolvedValue(undefined)
+}));
+
+vi.mock("svelte/store", () => ({
+	get: vi.fn((store) => store),
+	derived: vi.fn()
+}));
+
+import { locale, init, addMessages } from "svelte-i18n";
 
 describe("i18n", () => {
 	test("languages are loaded correctly", () => {
@@ -24,4 +53,94 @@ describe("i18n", () => {
 			assert.ok(translation.common);
 		});
 	});
+
+	describe("basic functions", () => {
+		test("translate_if_needed handles regular strings", () => {
+			const regularString = "hello world";
+			expect(translate_if_needed(regularString)).toBe(regularString);
+		});
+	});
+
+	describe("locale management", () => {
+		test("get_initial_locale returns browser locale when available", () => {
+			const result = get_initial_locale("fr", ["en", "fr", "de"]);
+			expect(result).toBe("fr");
+		});
+
+		test("get_initial_locale falls back to fallback locale when browser locale not available", () => {
+			const result = get_initial_locale("es", ["en", "fr", "de"]);
+			expect(result).toBe("en");
+		});
+
+		test("get_initial_locale falls back to fallback locale when browser locale is null", () => {
+			const result = get_initial_locale(null, ["en", "fr", "de"]);
+			expect(result).toBe("en");
+		});
+
+		test("get_initial_locale uses custom fallback locale when provided", () => {
+			const result = get_initial_locale("es", ["en", "fr", "de"], "de");
+			expect(result).toBe("de");
+		});
+	});
+
+	describe("i18n setup and initialization", () => {
+		beforeEach(() => {
+			vi.clearAllMocks();
+		});
+
+		afterEach(() => {
+			vi.resetAllMocks();
+		});
+
+		test("load_translations adds messages for each language", () => {
+			const mockAddMessages = addMessages as unknown as ReturnType<
+				typeof vi.fn
+			>;
+
+			const custom_translations = {
+				en: {
+					greeting: "Hello"
+				},
+				fr: {
+					greeting: "Bonjour"
+				}
+			};
+
+			load_translations(custom_translations);
+
+			expect(mockAddMessages).toHaveBeenCalledTimes(2);
+			expect(mockAddMessages).toHaveBeenCalledWith(
+				"en",
+				custom_translations.en
+			);
+			expect(mockAddMessages).toHaveBeenCalledWith(
+				"fr",
+				custom_translations.fr
+			);
+		});
+
+		test("changeLocale sets the locale correctly", () => {
+			const mockSetLocale = locale.set as unknown as ReturnType<typeof vi.fn>;
+
+			changeLocale("fr");
+
+			expect(mockSetLocale).toHaveBeenCalledWith("fr");
+		});
+	});
+
+	describe("translation metadata handling", () => {
+		test("is_translation_metadata identifies valid metadata objects", () => {
+			expect(
+				is_translation_metadata({
+					__type__: "translation_metadata" as const,
+					key: "test.key"
+				})
+			).toBe(true);
+			expect(is_translation_metadata({ key: "test.key" })).toBe(false);
+
+			expect(Boolean(is_translation_metadata(null))).toBe(false);
+			expect(Boolean(is_translation_metadata(undefined))).toBe(false);
+			expect(Boolean(is_translation_metadata("not an object"))).toBe(false);
+		});
+	});
 });