@gradio/core 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @gradio/core
 
+## 0.17.0
+
+### Features
+
+- [#11155](https://github.com/gradio-app/gradio/pull/11155) [`30a1d9e`](https://github.com/gradio-app/gradio/commit/30a1d9e2ac3013d9c844b236410010bce97ffaf5) - Improvements to MCP page.  Thanks @abidlabs!
+- [#11047](https://github.com/gradio-app/gradio/pull/11047) [`6d4b8a7`](https://github.com/gradio-app/gradio/commit/6d4b8a7f10daefc9c79aa224635da23fbaeebb76) - Implement custom i18n.  Thanks @hannahblair!
+
+### Fixes
+
+- [#11206](https://github.com/gradio-app/gradio/pull/11206) [`c196ac2`](https://github.com/gradio-app/gradio/commit/c196ac25b7744e9dcfa788b1ac8edf6551eec1ff) - Render key fixes.  Thanks @aliabid94!
+
+### Dependency updates
+
+- @gradio/code@0.14.4
+- @gradio/paramviewer@0.7.9
+- @gradio/statustracker@0.10.11
+- @gradio/atoms@0.16.1
+- @gradio/client@1.15.0
+- @gradio/upload@0.16.5
+- @gradio/button@0.5.0
+- @gradio/image@0.22.6
+- @gradio/video@0.14.14
+- @gradio/file@0.12.18
+- @gradio/column@0.2.0
+- @gradio/gallery@0.15.19
+- @gradio/plot@0.9.16
+- @gradio/textbox@0.10.11
+- @gradio/checkbox@0.4.21
+
+## 0.16.1
+
+### Dependency updates
+
+- @gradio/tabs@0.4.4
+- @gradio/tabitem@0.4.4
+
+## 0.16.1
+
+### Fixes
+
+- [#11115](https://github.com/gradio-app/gradio/pull/11115) [`49e7a0d`](https://github.com/gradio-app/gradio/commit/49e7a0dd18174196b262d32e6c59d93ca40b1c73) - update STDIO instructions to specify sse-only transport.  Thanks @evalstate!
+
+### Dependency updates
+
+- @gradio/code@0.14.3
+- @gradio/button@0.4.18
+- @gradio/video@0.14.13
+- @gradio/upload@0.16.4
+- @gradio/image@0.22.5
+- @gradio/gallery@0.15.18
+- @gradio/file@0.12.17
+
 ## 0.16.0
 
 ### Features

package/dist/src/Blocks.svelte

@@ -10,7 +10,6 @@ import logo from "./images/logo.svg";
 import api_logo from "./api_docs/img/api-logo.svg";
 import settings_logo from "./api_docs/img/settings-logo.svg";
 import { create_components, AsyncFunction } from "./init";
-setupi18n();
 export let root;
 export let components;
 export let layout;
@@ -34,6 +33,7 @@ export let api_prefix = "";
 export let max_file_size = void 0;
 export let initial_layout = void 0;
 export let css = null;
+setupi18n(app.config?.i18n_translations ?? void 0);
 let {
   layout: _layout,
   targets,
@@ -659,7 +659,11 @@ onMount(() => {
 					}}
 					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/dist/src/Render.svelte

@@ -1,4 +1,4 @@
-<script>import { Gradio, formatter } from "./gradio_helper";
+<script>import { Gradio, reactive_formatter } from "./gradio_helper";
 import { onMount, createEventDispatcher, setContext } from "svelte";
 import RenderComponent from "./RenderComponent.svelte";
 import { load_component } from "virtual:component-loader";
@@ -55,7 +55,7 @@ $:
     root,
     autoscroll,
     max_file_size,
-    formatter,
+    $reactive_formatter,
     client,
     load_component
   );

package/dist/src/RenderComponent.svelte

@@ -1,6 +1,7 @@
 <svelte:options immutable={true} />
 
-<script>import { bind, binding_callbacks } from "svelte/internal";
+<script>import { translate_if_needed } from "./i18n";
+import { bind, binding_callbacks } from "svelte/internal";
 export let root;
 export let component;
 export let target;
@@ -34,6 +35,25 @@ function wrap(component2) {
   return ProxiedMyClass;
 }
 const _component = wrap(component);
+const supported_props = [
+  "description",
+  "info",
+  "title",
+  "placeholder",
+  "value",
+  "label"
+];
+function translate_prop(obj) {
+  for (const key in obj) {
+    if (supported_props.includes(key)) {
+      obj[key] = translate_if_needed(obj[key]);
+    }
+  }
+}
+$:
+  translate_prop($$restProps);
+$:
+  value = translate_if_needed(value);
 </script>
 
 <!-- {#if visible} -->

package/dist/src/api_docs/ApiDocs.svelte

@@ -23,6 +23,7 @@ const js_docs = "https://www.gradio.app/guides/getting-started-with-the-js-clien
 const py_docs = "https://www.gradio.app/guides/getting-started-with-the-python-client";
 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
 ).length;
@@ -290,7 +291,12 @@ onMount(() => {
 														mcpServers: {
 															gradio: {
 																command: "npx",
-																args: ["mcp-remote", mcp_server_url]
+																args: [
+																	"mcp-remote",
+																	mcp_server_url,
+																	"--transport",
+																	"sse-only"
+																]
 															}
 														}
 													},
@@ -305,7 +311,12 @@ onMount(() => {
 														mcpServers: {
 															gradio: {
 																command: "npx",
-																arguments: ["mcp-remote", mcp_server_url]
+																args: [
+																	"mcp-remote",
+																	mcp_server_url,
+																	"--transport",
+																	"sse-only"
+																]
 															}
 														}
 													},
@@ -316,7 +327,11 @@ onMount(() => {
 									</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/dist/src/gradio_helper.d.ts

@@ -1,14 +1,4 @@
 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 declare function formatter(value: string | null | undefined): string;
+export declare const reactive_formatter: import("svelte/store").Readable<typeof formatter>;

package/dist/src/gradio_helper.js

@@ -1,25 +1,13 @@
-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";
-/**
- * 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) {
     if (value == null) {
         return "";
     }
     const string_value = String(value);
     const translate = get(_);
-    const initial_formatter = get(format);
     let direct_translation = translate(string_value);
     if (direct_translation !== string_value) {
         return direct_translation;
@@ -35,10 +23,6 @@ export function formatter(value) {
             break;
         }
     }
-    // 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/dist/src/i18n.d.ts

@@ -1,9 +1,16 @@
-type LangsRecord = Record<string, {
-    [key: string]: any;
-}>;
+export interface I18nData {
+    __type__: "translation_metadata";
+    key: string;
+}
+export interface LangsRecord {
+    [lang: string]: any;
+}
+export declare function is_translation_metadata(obj: any): obj is I18nData;
+export declare function translate_if_needed(value: any): string;
 export declare function process_langs(): LangsRecord;
 export declare const language_choices: [string, string][];
 export declare let all_common_keys: Set<string>;
-export declare function setupi18n(): Promise<void>;
+export declare function setupi18n(custom_translations?: Record<string, Record<string, string>>): Promise<void>;
 export declare function changeLocale(new_locale: string): void;
-export {};
+export declare function get_initial_locale(browser_locale: string | null, available_locales: string[], fallback_locale?: string): string;
+export declare function load_translations(translations: LangsRecord | null | undefined): void;

package/dist/src/i18n.js

@@ -1,27 +1,87 @@
-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
 });
-export function process_langs() {
-    let _langs = {};
-    for (const lang in langs) {
-        const code = lang.split("/").pop().split(".").shift();
-        _langs[code] = langs[lang].default;
+export function is_translation_metadata(obj) {
+    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) {
+    if (typeof value !== "string") {
+        return value;
+    }
+    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);
+        }
+        return value;
+    }
+    catch (e) {
+        console.error("Error processing translation:", e);
+        return value;
     }
-    return _langs;
+}
+export function process_langs() {
+    return Object.fromEntries(Object.entries(langs).map(([path, module]) => [
+        path.split("/").pop().split(".")[0],
+        module.default
+    ]));
 }
 const processed_langs = process_langs();
 const available_locales = Object.keys(processed_langs);
 export const language_choices = Object.entries(processed_langs).map(([code, data]) => [data._name || code, code]);
 export let all_common_keys = new Set();
-for (const lang in processed_langs) {
-    addMessages(lang, processed_langs[lang]);
-}
 let i18n_initialized = false;
-export async function setupi18n() {
-    if (i18n_initialized) {
+let previous_translations;
+export async function setupi18n(custom_translations) {
+    const should_reinitialize = i18n_initialized && custom_translations !== previous_translations;
+    if (i18n_initialized && !should_reinitialize) {
         return;
     }
+    previous_translations = custom_translations;
+    load_translations({
+        ...processed_langs,
+        ...(custom_translations ?? {})
+    });
     const browser_locale = getLocaleFromNavigator();
     let initial_locale = browser_locale && available_locales.includes(browser_locale)
         ? browser_locale
@@ -53,3 +113,24 @@ export async function setupi18n() {
 export function changeLocale(new_locale) {
     locale.set(new_locale);
 }
+export function get_initial_locale(browser_locale, available_locales, fallback_locale = "en") {
+    if (!browser_locale)
+        return fallback_locale;
+    if (available_locales.includes(browser_locale)) {
+        return browser_locale;
+    }
+    return fallback_locale;
+}
+export function load_translations(translations) {
+    if (!translations) {
+        return;
+    }
+    try {
+        for (const lang in translations) {
+            addMessages(lang, translations[lang]);
+        }
+    }
+    catch (e) {
+        console.error("Error loading translations:", e);
+    }
+}

package/dist/src/init.js

@@ -24,7 +24,7 @@ export function create_components(initial_layout) {
     const layout_store = writable(initial_layout);
     let _components = [];
     let app;
-    let keyed_component_values = {};
+    let keys_per_render_id = {};
     let _rootNode;
     function set_event_specific_args(dependencies) {
         dependencies.forEach((dep) => {
@@ -42,7 +42,6 @@ export function create_components(initial_layout) {
         // make sure the state is settled before proceeding
         flush();
         app = _app;
-        store_keyed_values(_components);
         _components = components;
         inputs = new Set();
         outputs = new Set();
@@ -81,7 +80,20 @@ export function create_components(initial_layout) {
      * Rerender the layout when the config has been modified to attach new components
      */
     function rerender_layout({ render_id, components, layout, root, dependencies }) {
-        let _constructor_map = preload_all_components(components, root);
+        let replacement_components = [];
+        let new_components = [];
+        console.log("old_keys", keys_per_render_id[render_id]);
+        console.log("new_keys", components.map((c) => c.key));
+        components.forEach((c) => {
+            if (c.key == null || !keys_per_render_id[render_id]?.includes(c.key)) {
+                new_components.push(c);
+            }
+            else {
+                replacement_components.push(c);
+            }
+        });
+        console.log(new_components.length, replacement_components.length);
+        let _constructor_map = preload_all_components(new_components, root);
         _constructor_map.forEach((v, k) => {
             constructor_map.set(k, v);
         });
@@ -104,17 +116,27 @@ export function create_components(initial_layout) {
             }
         };
         add_to_current_children(current_element);
-        store_keyed_values(all_current_children);
         Object.entries(instance_map).forEach(([id, component]) => {
             let _id = Number(id);
             if (component.rendered_in === render_id) {
-                delete instance_map[_id];
-                if (_component_map.has(_id)) {
-                    _component_map.delete(_id);
+                let replacement_component = replacement_components.find((c) => c.key === component.key);
+                if (component.key != null && replacement_component !== undefined) {
+                    const instance = instance_map[component.id];
+                    for (const prop in replacement_component.props) {
+                        if (!replacement_component.props.preserved_by_key?.includes(prop)) {
+                            instance.props[prop] = replacement_component.props[prop];
+                        }
+                    }
+                }
+                else {
+                    delete instance_map[_id];
+                    if (_component_map.has(_id)) {
+                        _component_map.delete(_id);
+                    }
                 }
             }
         });
-        components.forEach((c) => {
+        new_components.forEach((c) => {
             instance_map[c.id] = c;
             _component_map.set(c.id, c);
         });
@@ -123,12 +145,17 @@ export function create_components(initial_layout) {
         }
         walk_layout(layout, root, _components.concat(components), current_element.parent).then(() => {
             layout_store.set(_rootNode);
+            keys_per_render_id[render_id] = components
+                .map((c) => c.key)
+                .filter((c) => c != null);
         });
         set_event_specific_args(dependencies);
     }
     async function walk_layout(node, root, components, parent) {
         const instance = instance_map[node.id];
-        instance.component = (await constructor_map.get(instance.component_class_id || instance.type))?.default;
+        if (!instance.component) {
+            instance.component = (await constructor_map.get(instance.component_class_id || instance.type))?.default;
+        }
         instance.parent = parent;
         if (instance.type === "dataset") {
             instance.props.component_map = get_component(instance.type, instance.component_class_id, root, components, instance.props.components).example_components;
@@ -138,10 +165,6 @@ export function create_components(initial_layout) {
         }
         instance.props.interactive = determine_interactivity(instance.id, instance.props.interactive, instance.props.value, inputs, outputs);
         instance.props.server = process_server_fn(instance.id, instance.props.server_fns, app);
-        if (instance.key != null &&
-            keyed_component_values[instance.key] !== undefined) {
-            instance.props.value = keyed_component_values[instance.key];
-        }
         _component_map.set(instance.id, instance);
         if (node.children) {
             instance.children = await Promise.all(node.children.map((v) => walk_layout(v, root, components, instance)));
@@ -178,13 +201,6 @@ export function create_components(initial_layout) {
     }
     let update_scheduled = false;
     let update_scheduled_store = writable(false);
-    function store_keyed_values(components) {
-        components.forEach((c) => {
-            if (c.key != null) {
-                keyed_component_values[c.key] = c.props.value;
-            }
-        });
-    }
     function flush() {
         layout_store.update((layout) => {
             for (let i = 0; i < pending_updates.length; i++) {

package/dist/src/lang/en.json

@@ -98,7 +98,8 @@
 		"runtime_error": "there is a runtime error",
 		"space_not_working": "\"Space isn't working because\" {0}",
 		"space_paused": "the space is paused",
-		"use_via_api": "Use via API"
+		"use_via_api": "Use via API",
+		"use_via_api_or_mcp": "Use via API or MCP"
 	},
 	"file": {
 		"uploading": "Uploading..."

package/dist/src/lang/es.json

@@ -88,7 +88,8 @@
 		"runtime_error": "hay un error de ejecución",
 		"space_not_working": "\"El Space no funciona porque\" {0}",
 		"space_paused": "el space está pausado",
-		"use_via_api": "Usar vía API"
+		"use_via_api": "Usar vía API",
+		"use_via_api_or_mcp": "Usar vía API o MCP"
 	},
 	"file": {
 		"uploading": "Subiendo..."

package/dist/src/lang/fr.json

@@ -89,7 +89,8 @@
 		"runtime_error": "il y a une erreur d'exécution",
 		"space_not_working": "\"Le Space ne fonctionne pas car\" {0}",
 		"space_paused": "le Space est en pause",
-		"use_via_api": "Utiliser via l'API"
+		"use_via_api": "Utiliser via API",
+		"use_via_api_or_mcp": "Utiliser via API ou MCP"
 	},
 	"file": {
 		"uploading": "Téléchargement..."

package/dist/src/lang/ja.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/ko.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/lt.json

@@ -97,7 +97,8 @@
 		"runtime_error": "yra vykdymo klaida",
 		"space_not_working": "\"Erdvė neveikia, nes\" {0}",
 		"space_paused": "erdvė yra pristabdyta",
-		"use_via_api": "Naudoti per API"
+		"use_via_api": "Naudoti per API",
+		"use_via_api_or_mcp": "Naudoti per API arba MCP"
 	},
 	"file": {
 		"uploading": "Įkeliama..."

package/dist/src/lang/nb.json

@@ -87,7 +87,8 @@
 		"runtime_error": "Det er en kjøretidsfeil",
 		"space_not_working": "\"Space fungerer ikke fordi\" {0}",
 		"space_paused": "Space er pauset",
-		"use_via_api": "Bruk via API"
+		"use_via_api": "Bruk via API",
+		"use_via_api_or_mcp": "Bruk via API eller MCP"
 	},
 	"file": {
 		"uploading": "Laster opp..."

package/dist/src/lang/nl.json

@@ -97,7 +97,8 @@
 		"runtime_error": "Er is een runtime-fout",
 		"space_not_working": "\"Space werkt niet omdat\" {0}",
 		"space_paused": "De Space is gepauzeerd",
-		"use_via_api": "Gebruik via API"
+		"use_via_api": "Gebruik via API",
+		"use_via_api_or_mcp": "Gebruik via API of MCP"
 	},
 	"file": {
 		"uploading": "Uploaden..."

package/dist/src/lang/pl.json

@@ -87,7 +87,8 @@
 		"runtime_error": "Wystąpił błąd wykonania",
 		"space_not_working": "\"Space nie działa, ponieważ\" {0}",
 		"space_paused": "Space jest wstrzymany",
-		"use_via_api": "Użyj przez API"
+		"use_via_api": "Użyj przez API",
+		"use_via_api_or_mcp": "Użyj przez API lub MCP"
 	},
 	"file": {
 		"uploading": "Przesyłanie..."

package/dist/src/lang/pt-BR.json

@@ -98,6 +98,7 @@
 		"space_not_working": "\"O Space não está funcionando porque\" {0}",
 		"space_paused": "O Space está pausado",
 		"use_via_api": "Usar via API",
+		"use_via_api_or_mcp": "Usar via API ou MCP",
 		"runtime_error": "Houve um erro de execução"
 	},
 	"file": {

package/dist/src/lang/pt.json

@@ -87,7 +87,8 @@
 		"runtime_error": "Há um erro de execução",
 		"space_not_working": "\"O Space não está a funcionar porque\" {0}",
 		"space_paused": "O Space está em pausa",
-		"use_via_api": "Utilizar via API"
+		"use_via_api": "Usar via API",
+		"use_via_api_or_mcp": "Usar via API ou MCP"
 	},
 	"file": {
 		"uploading": "A carregar..."

package/dist/src/lang/ro.json

@@ -87,7 +87,8 @@
 		"runtime_error": "Există o eroare de execuție",
 		"space_not_working": "\"Space-ul nu funcționează deoarece\" {0}",
 		"space_paused": "Space-ul este în pauză",
-		"use_via_api": "Utilizați prin API"
+		"use_via_api": "Utilizați prin API",
+		"use_via_api_or_mcp": "Utilizați prin API sau MCP"
 	},
 	"file": {
 		"uploading": "Se încarcă..."

package/dist/src/lang/ru.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/sv.json

@@ -87,7 +87,8 @@
 		"runtime_error": "Det finns ett körtidsfel",
 		"space_not_working": "\"Space fungerar inte eftersom\" {0}",
 		"space_paused": "Space är pausat",
-		"use_via_api": "Använd via API"
+		"use_via_api": "Använd via API",
+		"use_via_api_or_mcp": "Använd via API eller MCP"
 	},
 	"file": {
 		"uploading": "Laddar upp..."