@gradio/core 0.16.1 → 0.17.0

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.1",
+  "version": "0.17.0",
   "type": "module",
   "devDependencies": {
-    "@gradio/annotatedimage": "^0.9.18",
-    "@gradio/accordion": "^0.5.14",
-    "@gradio/atoms": "^0.16.0",
-    "@gradio/button": "^0.4.18",
-    "@gradio/box": "^0.2.18",
-    "@gradio/chatbot": "^0.26.5",
-    "@gradio/checkbox": "^0.4.20",
-    "@gradio/audio": "^0.17.13",
-    "@gradio/checkboxgroup": "^0.6.20",
-    "@gradio/client": "^1.14.2",
-    "@gradio/code": "^0.14.3",
-    "@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.11",
-    "@gradio/dataset": "^0.4.17",
-    "@gradio/downloadbutton": "^0.3.18",
-    "@gradio/datetime": "^0.3.12",
-    "@gradio/dropdown": "^0.9.20",
-    "@gradio/fallback": "^0.4.20",
-    "@gradio/fileexplorer": "^0.5.28",
-    "@gradio/file": "^0.12.17",
-    "@gradio/form": "^0.2.18",
-    "@gradio/gallery": "^0.15.18",
-    "@gradio/highlightedtext": "^0.9.3",
+    "@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/icons": "^0.12.0",
-    "@gradio/image": "^0.22.5",
-    "@gradio/html": "^0.6.12",
-    "@gradio/imageeditor": "^0.14.5",
-    "@gradio/imageslider": "^0.2.1",
-    "@gradio/json": "^0.5.20",
+    "@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.11",
-    "@gradio/model3d": "^0.14.12",
-    "@gradio/label": "^0.5.12",
-    "@gradio/multimodaltextbox": "^0.10.5",
-    "@gradio/nativeplot": "^0.5.14",
-    "@gradio/number": "^0.5.20",
-    "@gradio/paramviewer": "^0.7.8",
-    "@gradio/radio": "^0.7.3",
-    "@gradio/plot": "^0.9.15",
+    "@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.28",
-    "@gradio/sketchbox": "^0.6.7",
-    "@gradio/simpletextbox": "^0.3.20",
+    "@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/slider": "^0.6.8",
-    "@gradio/tabitem": "^0.4.3",
-    "@gradio/statustracker": "^0.10.10",
-    "@gradio/tabs": "^0.4.3",
-    "@gradio/textbox": "^0.10.10",
+    "@gradio/tabitem": "^0.4.4",
+    "@gradio/tabs": "^0.4.4",
+    "@gradio/textbox": "^0.10.11",
     "@gradio/theme": "^0.4.0",
     "@gradio/timer": "^0.4.5",
-    "@gradio/upload": "^0.16.4",
-    "@gradio/uploadbutton": "^0.8.18",
-    "@gradio/wasm": "^0.18.1",
+    "@gradio/upload": "^0.16.5",
+    "@gradio/uploadbutton": "^0.9.0",
     "@gradio/utils": "^0.10.2",
-    "@gradio/video": "^0.14.13"
+    "@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
@@ -379,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);
+		});
+	});
 });

package/src/i18n.ts

@@ -1,31 +1,94 @@
-import {
-	addMessages,
-	init,
-	getLocaleFromNavigator,
-	locale,
-	_
-} from "svelte-i18n";
+import { addMessages, init, getLocaleFromNavigator, locale } from "svelte-i18n";
+import { formatter } from "./gradio_helper";
 
 const langs = import.meta.glob("./lang/*.json", {
 	eager: true
 });
 
-type LangsRecord = Record<
-	string,
-	{
-		[key: string]: any;
+export interface I18nData {
+	__type__: "translation_metadata";
+	key: string;
+}
+
+export interface LangsRecord {
+	[lang: string]: any;
+}
+
+export function is_translation_metadata(obj: any): obj is I18nData {
+	console.log(obj);
+	const result =
+		obj &&
+		typeof obj === "object" &&
+		obj.__type__ === "translation_metadata" &&
+		typeof obj.key === "string";
+
+	return result;
+}
+
+// handles strings with embedded JSON metadata of shape "__i18n__{"key": "some.key"}"
+export function translate_if_needed(value: any): string {
+	if (typeof value !== "string") {
+		return value;
 	}
->;
 
-export function process_langs(): LangsRecord {
-	let _langs: LangsRecord = {};
+	const i18n_marker = "__i18n__";
+	const marker_index = value.indexOf(i18n_marker);
+
+	if (marker_index === -1) {
+		return value;
+	}
+
+	try {
+		const before_marker =
+			marker_index > 0 ? value.substring(0, marker_index) : "";
+
+		const after_marker_index = marker_index + i18n_marker.length;
+		const json_start = value.indexOf("{", after_marker_index);
+		let json_end = -1;
+		let bracket_count = 0;
+
+		for (let i = json_start; i < value.length; i++) {
+			if (value[i] === "{") bracket_count++;
+			if (value[i] === "}") bracket_count--;
+			if (bracket_count === 0) {
+				json_end = i + 1;
+				break;
+			}
+		}
+
+		if (json_end === -1) {
+			console.error("Could not find end of JSON in i18n string");
+			return value;
+		}
+
+		const metadata_json = value.substring(json_start, json_end);
+		const after_json = json_end < value.length ? value.substring(json_end) : "";
+
+		try {
+			const metadata = JSON.parse(metadata_json);
+
+			if (metadata && metadata.key) {
+				const translated = formatter(metadata.key);
+				return before_marker + translated + after_json;
+			}
+		} catch (jsonError) {
+			console.error("Error parsing i18n JSON:", jsonError);
+		}
 
-	for (const lang in langs) {
-		const code = (lang.split("/").pop() as string).split(".").shift() as string;
-		_langs[code] = (langs[lang] as Record<string, any>).default;
+		return value;
+	} catch (e) {
+		console.error("Error processing translation:", e);
+		return value;
 	}
+}
 
-	return _langs;
+export function process_langs(): LangsRecord {
+	return Object.fromEntries(
+		Object.entries(langs).map(([path, module]) => [
+			path.split("/").pop()!.split(".")[0],
+			(module as Record<string, any>).default
+		])
+	);
 }
 
 const processed_langs = process_langs();
@@ -37,17 +100,26 @@ export const language_choices: [string, string][] = Object.entries(
 
 export let all_common_keys: Set<string> = new Set();
 
-for (const lang in processed_langs) {
-	addMessages(lang, processed_langs[lang]);
-}
-
 let i18n_initialized = false;
+let previous_translations: Record<string, Record<string, string>> | undefined;
+
+export async function setupi18n(
+	custom_translations?: Record<string, Record<string, string>>
+): Promise<void> {
+	const should_reinitialize =
+		i18n_initialized && custom_translations !== previous_translations;
 
-export async function setupi18n(): Promise<void> {
-	if (i18n_initialized) {
+	if (i18n_initialized && !should_reinitialize) {
 		return;
 	}
 
+	previous_translations = custom_translations;
+
+	load_translations({
+		...processed_langs,
+		...(custom_translations ?? {})
+	});
+
 	const browser_locale = getLocaleFromNavigator();
 
 	let initial_locale =
@@ -88,3 +160,33 @@ export async function setupi18n(): Promise<void> {
 export function changeLocale(new_locale: string): void {
 	locale.set(new_locale);
 }
+
+export function get_initial_locale(
+	browser_locale: string | null,
+	available_locales: string[],
+	fallback_locale = "en"
+): string {
+	if (!browser_locale) return fallback_locale;
+
+	if (available_locales.includes(browser_locale)) {
+		return browser_locale;
+	}
+
+	return fallback_locale;
+}
+
+export function load_translations(
+	translations: LangsRecord | null | undefined
+): void {
+	if (!translations) {
+		return;
+	}
+
+	try {
+		for (const lang in translations) {
+			addMessages(lang, translations[lang]);
+		}
+	} catch (e) {
+		console.error("Error loading translations:", e);
+	}
+}