@gradio/core 1.1.3 → 1.3.0

package/dist/src/init.svelte.js

@@ -1,5 +1,4 @@
 import { determine_interactivity, get_component, get_inputs_outputs } from "./init_utils";
-import { translate_if_needed } from "./i18n";
 import { tick } from "svelte";
 import { dequal } from "dequal";
 import {} from "@gradio/utils";
@@ -32,6 +31,7 @@ export class AppTree {
     #pending_components = [];
     #get_callbacks = new Map();
     #set_callbacks = new Map();
+    #pending_updates = new Map();
     #event_dispatcher;
     component_ids;
     initial_tabs = {};
@@ -111,6 +111,20 @@ export class AppTree {
         this.#set_callbacks.set(id, _set_data);
         this.#get_callbacks.set(id, _get_data);
         this.components_to_register.delete(id);
+        // Apply any pending updates that were stored while the component
+        // was not yet mounted (e.g. hidden in an inactive tab).
+        // We must apply AFTER tick() so that the Gradio class's $effect
+        // (which syncs from node props) has already run. Otherwise the
+        // $effect would overwrite the values we set here.
+        const pending = this.#pending_updates.get(id);
+        if (pending) {
+            this.#pending_updates.delete(id);
+            tick().then(() => {
+                const _set = this.#set_callbacks.get(id);
+                if (_set)
+                    _set(pending);
+            });
+        }
         if (this.components_to_register.size === 0 && !this.resolved) {
             this.resolved = true;
             this.ready_resolve();
@@ -130,8 +144,6 @@ export class AppTree {
         this.root = this.traverse(tree, [
             (node) => handle_visibility(node, this.#config.api_url),
             (node) => untrack_children_of_invisible_parents(node, this.components_to_register),
-            (node) => handle_empty_forms(node, this.components_to_register),
-            (node) => translate_props(node),
             (node) => apply_initial_tabs(node, this.initial_tabs),
             (node) => this.find_attached_events(node, this.#dependency_payload),
             (node) => untrack_children_of_closed_accordions_or_inactive_tabs(node, this.components_to_register, this.#hidden_on_startup)
@@ -269,7 +281,6 @@ export class AppTree {
                 //@ts-ignore
                 (n) => set_visibility_for_updated_node(n, id, new_state.visible),
                 //@ts-ignore
-                (n) => update_parent_visibility(n, id, new_state.visible),
                 (n) => handle_visibility(n, this.#config.api_url)
             ]);
             await tick();
@@ -280,11 +291,22 @@ export class AppTree {
             const old_value = node?.props.props.value;
             // @ts-ignore
             const new_props = create_props_shared_props(new_state);
-            node.props.shared_props = {
-                ...node?.props.shared_props,
-                ...new_props.shared_props
-            };
-            node.props.props = { ...node?.props.props, ...new_props.props };
+            // Modify props in-place instead of replacing the entire object.
+            // Replacing with a new object via spread can cause Svelte 5's
+            // deep $state proxy to lose track of the values during async
+            // component mounting/revival.
+            for (const key in new_props.shared_props) {
+                // @ts-ignore
+                node.props.shared_props[key] = new_props.shared_props[key];
+            }
+            for (const key in new_props.props) {
+                // @ts-ignore
+                node.props.props[key] = new_props.props[key];
+            }
+            // Also store as pending so the value can be applied via _set_data
+            // when the component eventually mounts and registers
+            const existing = this.#pending_updates.get(id) || {};
+            this.#pending_updates.set(id, { ...existing, ...new_state });
             if ("value" in new_state && !dequal(old_value, new_state.value)) {
                 this.#event_dispatcher(id, "change", null);
             }
@@ -302,10 +324,6 @@ export class AppTree {
         // any values currently in the UI.
         // @ts-ignore
         await this.update_visibility(node, new_state);
-        const parent_node = find_parent(this.root, id);
-        if (parent_node)
-            // @ts-ignore
-            update_parent_visibility(parent_node, id, new_state.visible);
     }
     /**
      * Gets the current state of a component by its ID
@@ -324,24 +342,58 @@ export class AppTree {
         return null;
     }
     async render_previously_invisible_children(id) {
-        this.root = this.traverse(this.root, [
-            (node) => {
-                if (node.id === id) {
-                    make_visible_if_not_rendered(node, this.#hidden_on_startup);
-                }
-                return node;
-            },
-            (node) => handle_visibility(node, this.#config.api_url)
-        ]);
+        const node = find_node_by_id(this.root, id);
+        if (!node)
+            return;
+        // Check if this node or any of its descendants need to be made visible.
+        // If not, skip entirely to avoid unnecessary reactive updates
+        // from mutating the tree through the $state proxy.
+        if (!this.#hidden_on_startup.has(node.id) &&
+            !has_hidden_descendants(node, this.#hidden_on_startup)) {
+            return;
+        }
+        make_visible_if_not_rendered(node, this.#hidden_on_startup, true);
+        load_components(node, this.#config.api_url);
     }
 }
-function make_visible_if_not_rendered(node, hidden_on_startup) {
+function make_visible_if_not_rendered(node, hidden_on_startup, is_target_node = false) {
     node.props.shared_props.visible = hidden_on_startup.has(node.id)
         ? true
         : node.props.shared_props.visible;
-    node.children.forEach((child) => {
-        make_visible_if_not_rendered(child, hidden_on_startup);
-    });
+    if (node.type === "tabs") {
+        const selectedId = node.props.props.selected ?? node.props.props.initial_tabs?.[0]?.id;
+        node.children.forEach((child) => {
+            if (child.type === "tabitem" &&
+                (child.props.props.id === selectedId || child.id === selectedId)) {
+                make_visible_if_not_rendered(child, hidden_on_startup, false);
+            }
+        });
+    }
+    else if (node.type === "accordion" &&
+        node.props.props.open === false &&
+        !is_target_node) {
+        // Don't recurse into closed accordion content
+    }
+    else {
+        node.children.forEach((child) => {
+            make_visible_if_not_rendered(child, hidden_on_startup, false);
+        });
+    }
+}
+function has_hidden_descendants(node, hidden_on_startup) {
+    for (const child of node.children) {
+        if (hidden_on_startup.has(child.id))
+            return true;
+        if (has_hidden_descendants(child, hidden_on_startup))
+            return true;
+    }
+    return false;
+}
+function load_components(node, api_url) {
+    if (node.props.shared_props.visible && !node.component) {
+        node.component = get_component(node.type, node.component_class_id, api_url);
+    }
+    node.children.forEach((child) => load_components(child, api_url));
 }
 /**
  * Process the server function names and return a dictionary of functions
@@ -482,61 +534,6 @@ function untrack_children_of_closed_accordions_or_inactive_tabs(node, components
     }
     return node;
 }
-function handle_empty_forms(node, components_to_register) {
-    // Check if the node is visible
-    if (node.type === "form") {
-        const all_children_invisible = node.children.every((child) => child.props.shared_props.visible === false);
-        if (all_children_invisible) {
-            node.props.shared_props.visible = false;
-            components_to_register.delete(node.id);
-            return node;
-        }
-    }
-    return node;
-}
-function update_parent_visibility(node, child_made_visible, visibility_state) {
-    // This function was added to address a tricky situation:
-    // Form components are wrapped in a Form component automatically.
-    // If all the children of the Form are invisible, the Form itself is marked invisible.
-    // in AppTree.postprocess -> handle_empty_forms
-    // This is to avoid rendering empty forms in the UI. They look ugly.
-    // So what happens when a child inside the Form is made visible again?
-    // The Form needs to become visible again too.
-    // If the child is made invisible, the form should be too if all other children are invisible.
-    // However, we are not doing this now since what we want to do is fetch the latest visibility of all
-    // the children from the UI. However, get_data only returns the props, not the shared props.
-    if (node.type === "form" &&
-        node.children.length &&
-        node.children.some((child) => child.id === child_made_visible)) {
-        if (visibility_state === true)
-            node.props.shared_props.visible = true;
-        else if (!visibility_state && node.children.length === 1)
-            node.props.shared_props.visible = "hidden";
-    }
-    return node;
-}
-function translate_props(node) {
-    const supported_props = [
-        "description",
-        "info",
-        "title",
-        "placeholder",
-        "value",
-        "label"
-    ];
-    for (const attr of Object.keys(node.props.shared_props)) {
-        if (supported_props.includes(attr)) {
-            // @ts-ignore
-            node.props.shared_props[attr] = translate_if_needed(node.props.shared_props[attr]);
-        }
-    }
-    for (const attr of Object.keys(node.props.props)) {
-        if (supported_props.includes(attr)) {
-            node.props.props[attr] = translate_if_needed(node.props.props[attr]);
-        }
-    }
-    return node;
-}
 function apply_initial_tabs(node, initial_tabs) {
     if (node.type === "tabs" && node.id in initial_tabs) {
         const tabs = initial_tabs[node.id].sort((a, b) => a.order - b.order);
@@ -555,8 +552,10 @@ function _gather_initial_tabs(node, initial_tabs, parent_tab_id, order) {
         if (!("id" in node.props.props)) {
             node.props.props.id = node.id;
         }
+        const i18n = node.props.props.i18n;
+        const raw_label = node.props.shared_props.label;
         initial_tabs[parent_tab_id].push({
-            label: node.props.shared_props.label,
+            label: i18n ? i18n(raw_label) : raw_label,
             id: node.props.props.id,
             elem_id: node.props.shared_props.elem_id,
             visible: node.props.shared_props.visible,

package/package.json

@@ -1,67 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "1.1.3",
+  "version": "1.3.0",
   "type": "module",
   "devDependencies": {
-    "@gradio/atoms": "^0.21.0",
-    "@gradio/annotatedimage": "^0.11.2",
-    "@gradio/audio": "^0.22.2",
-    "@gradio/box": "^0.2.29",
-    "@gradio/accordion": "^0.5.30",
+    "@gradio/annotatedimage": "^0.11.3",
+    "@gradio/accordion": "^0.5.31",
+    "@gradio/audio": "^0.22.3",
+    "@gradio/atoms": "^0.22.0",
+    "@gradio/box": "^0.2.30",
     "@gradio/browserstate": "^0.3.6",
-    "@gradio/button": "^0.6.3",
-    "@gradio/checkbox": "^0.6.2",
-    "@gradio/checkboxgroup": "^0.9.2",
-    "@gradio/code": "^0.17.2",
-    "@gradio/colorpicker": "^0.5.5",
-    "@gradio/client": "^2.0.4",
+    "@gradio/button": "^0.6.4",
+    "@gradio/chatbot": "^0.29.4",
+    "@gradio/checkbox": "^0.6.3",
+    "@gradio/checkboxgroup": "^0.9.3",
+    "@gradio/client": "^2.1.0",
+    "@gradio/colorpicker": "^0.5.6",
     "@gradio/column": "^0.3.2",
-    "@gradio/chatbot": "^0.29.3",
-    "@gradio/dataframe": "^0.21.4",
-    "@gradio/datetime": "^0.4.2",
-    "@gradio/dataset": "^0.5.3",
+    "@gradio/datetime": "^0.4.3",
+    "@gradio/code": "^0.17.3",
     "@gradio/downloadbutton": "^0.4.17",
-    "@gradio/dropdown": "^0.11.3",
-    "@gradio/fallback": "^0.4.33",
-    "@gradio/fileexplorer": "^0.6.2",
-    "@gradio/form": "^0.2.30",
-    "@gradio/file": "^0.14.2",
-    "@gradio/gallery": "^0.17.0",
+    "@gradio/dropdown": "^0.11.4",
+    "@gradio/dataset": "^0.5.4",
+    "@gradio/fallback": "^0.4.34",
+    "@gradio/file": "^0.14.3",
+    "@gradio/fileexplorer": "^0.6.3",
+    "@gradio/dataframe": "^0.21.6",
+    "@gradio/form": "^0.3.0",
     "@gradio/group": "^0.3.2",
-    "@gradio/highlightedtext": "^0.11.1",
-    "@gradio/html": "^0.9.2",
+    "@gradio/gallery": "^0.17.1",
+    "@gradio/highlightedtext": "^0.11.2",
+    "@gradio/html": "^0.10.0",
     "@gradio/icons": "^0.15.1",
-    "@gradio/image": "^0.25.2",
-    "@gradio/imageeditor": "^0.18.5",
-    "@gradio/imageslider": "^0.4.2",
-    "@gradio/json": "^0.7.1",
-    "@gradio/markdown": "^0.13.27",
-    "@gradio/label": "^0.6.2",
-    "@gradio/model3d": "^0.16.3",
-    "@gradio/multimodaltextbox": "^0.11.5",
-    "@gradio/nativeplot": "^0.10.1",
-    "@gradio/number": "^0.8.2",
-    "@gradio/paramviewer": "^0.9.3",
-    "@gradio/radio": "^0.9.2",
-    "@gradio/plot": "^0.10.3",
-    "@gradio/simpledropdown": "^0.3.33",
-    "@gradio/sidebar": "^0.2.2",
+    "@gradio/image": "^0.25.3",
+    "@gradio/imageeditor": "^0.18.6",
+    "@gradio/label": "^0.6.3",
+    "@gradio/json": "^0.7.2",
+    "@gradio/markdown": "^0.13.28",
+    "@gradio/imageslider": "^0.4.3",
+    "@gradio/model3d": "^0.16.4",
+    "@gradio/multimodaltextbox": "^0.11.6",
+    "@gradio/nativeplot": "^0.10.2",
+    "@gradio/number": "^0.8.3",
+    "@gradio/paramviewer": "^0.9.4",
+    "@gradio/plot": "^0.10.4",
     "@gradio/row": "^0.3.1",
-    "@gradio/simpleimage": "^0.9.4",
-    "@gradio/simpletextbox": "^0.3.35",
-    "@gradio/slider": "^0.7.4",
+    "@gradio/sidebar": "^0.2.3",
+    "@gradio/simpledropdown": "^0.3.34",
+    "@gradio/simpleimage": "^0.9.5",
+    "@gradio/slider": "^0.7.6",
+    "@gradio/simpletextbox": "^0.3.36",
+    "@gradio/radio": "^0.9.3",
     "@gradio/state": "^0.2.2",
-    "@gradio/statustracker": "^0.12.3",
+    "@gradio/statustracker": "^0.12.4",
     "@gradio/tabitem": "^0.6.5",
-    "@gradio/tabs": "^0.5.5",
-    "@gradio/textbox": "^0.13.3",
+    "@gradio/tabs": "^0.5.7",
+    "@gradio/textbox": "^0.13.4",
     "@gradio/theme": "^0.6.1",
-    "@gradio/upload": "^0.17.5",
     "@gradio/timer": "^0.4.8",
-    "@gradio/utils": "^0.11.2",
+    "@gradio/upload": "^0.17.6",
     "@gradio/uploadbutton": "^0.9.17",
-    "@gradio/vibeeditor": "^0.3.4",
-    "@gradio/video": "^0.20.2"
+    "@gradio/utils": "^0.11.3",
+    "@gradio/video": "^0.20.3",
+    "@gradio/vibeeditor": "^0.3.5"
   },
   "msw": {
     "workerDirectory": "public"

package/src/Blocks.svelte

@@ -12,7 +12,6 @@
 		LayoutNode
 	} from "./types";
 	// import type { UpdateTransaction } from "./_init";
-	import { setupi18n } from "./i18n";
 	import type { ThemeMode, Payload } from "./types";
 	import { Toast } from "@gradio/statustracker";
 	import type { ToastMessage } from "@gradio/statustracker";
@@ -105,6 +104,7 @@
 	});
 
 	let messages: (ToastMessage & { fn_index: number })[] = $state([]);
+	let reconnect_interval: ReturnType<typeof setInterval> | null = null;
 
 	function gradio_event_dispatcher(
 		id: number,
@@ -207,6 +207,35 @@
 		api_calls = [...api_calls, last_api_call];
 	};
 
+	function handle_connection_lost(): void {
+		messages = messages.filter((m) => m.type !== "error");
+
+		++_error_id;
+		messages.push({
+			title: "Connection Lost",
+			message: LOST_CONNECTION_MESSAGE,
+			fn_index: -1,
+			type: "error",
+			id: _error_id,
+			duration: null,
+			visible: true
+		});
+
+		reconnect_interval = setInterval(async () => {
+			try {
+				const status = await app.reconnect();
+				if (status === "connected" || status === "changed") {
+					clearInterval(reconnect_interval!);
+					reconnect_interval = null;
+					window.location.reload();
+				}
+			} catch (e) {
+				// server still unreachable
+				console.debug(e);
+			}
+		}, 2000);
+	}
+
 	let dep_manager = new DependencyManager(
 		dependencies,
 		app,
@@ -214,7 +243,8 @@
 		app_tree.get_state.bind(app_tree),
 		app_tree.rerender.bind(app_tree),
 		new_message,
-		add_to_api_calls
+		add_to_api_calls,
+		handle_connection_lost
 	);
 
 	$effect(() => {
@@ -427,6 +457,7 @@
 		return () => {
 			mut.disconnect();
 			res.disconnect();
+			if (reconnect_interval) clearInterval(reconnect_interval);
 		};
 	});
 

package/src/_init.ts

@@ -12,8 +12,8 @@ import { load_component } from "virtual:component-loader";
 import type { client_return } from "@gradio/client";
 import { create_loading_status_store } from "./stores";
 import { _ } from "svelte-i18n";
-import { i18n_marker } from "./i18n";
 import type { SharedProps } from "@gradio/utils";
+import { has_i18n_marker } from "@gradio/utils";
 
 export interface UpdateTransaction {
 	id: number;
@@ -423,7 +423,7 @@ export function create_components(
 			);
 
 			instance.props.initial_tabs = child_tab_items?.map((child) => ({
-				label: child.props.label.includes(i18n_marker) ? "" : child.props.label,
+				label: has_i18n_marker(child.props.label) ? "" : child.props.label,
 				id: child.props.id,
 				visible:
 					typeof child.props.visible === "boolean" ||

package/src/api_docs/ApiBanner.svelte

@@ -6,8 +6,12 @@
 
 	export let root: string;
 	export let api_count: number;
-	export let current_language: "python" | "javascript" | "bash" | "mcp" =
-		"python";
+	export let current_language:
+		| "python"
+		| "javascript"
+		| "bash"
+		| "skill"
+		| "mcp" = "python";
 
 	const dispatch = createEventDispatcher();
 </script>

package/src/api_docs/ApiDocs.svelte

@@ -19,6 +19,8 @@
 	import javascript from "./img/javascript.svg";
 	import bash from "./img/bash.svg";
 	import ResponseSnippet from "./ResponseSnippet.svelte";
+	import skill from "./img/skill.svg";
+	import SkillSnippet from "./SkillSnippet.svelte";
 	import mcp from "./img/mcp.svg";
 	import MCPSnippet from "./MCPSnippet.svelte";
 	import CopyMarkdown from "./CopyMarkdown.svelte";
@@ -53,7 +55,8 @@
 	}
 
 	export let api_calls: Payload[] = [];
-	let current_language: "python" | "javascript" | "bash" | "mcp" = "python";
+	let current_language: "python" | "javascript" | "bash" | "skill" | "mcp" =
+		"python";
 
 	$: sorted_dependencies = (() => {
 		const valid = dependencies.filter(
@@ -81,13 +84,16 @@
 	}
 
 	function is_valid_language(lang: string | null): boolean {
-		return ["python", "javascript", "bash", "mcp"].includes(lang ?? "");
+		return ["python", "javascript", "bash", "skill", "mcp"].includes(
+			lang ?? ""
+		);
 	}
 
-	const langs = [
+	$: langs = [
 		["python", "Python", python],
 		["javascript", "JavaScript", javascript],
 		["bash", "cURL", bash],
+		...(space_id ? [["skill", "Skill", skill] as const] : []),
 		["mcp", "MCP", mcp]
 	] as const;
 
@@ -277,7 +283,12 @@
 
 		const lang_param = get_query_param("lang");
 		if (is_valid_language(lang_param)) {
-			current_language = lang_param as "python" | "javascript" | "bash" | "mcp";
+			current_language = lang_param as
+				| "python"
+				| "javascript"
+				| "bash"
+				| "skill"
+				| "mcp";
 		}
 
 		const mcp_schema_url = `${root}gradio_api/mcp/schema`;
@@ -398,18 +409,25 @@
 						API Documentation
 					</p>
 				{:else}
-					<p class="padded">
-						{#if current_language == "python" || current_language == "javascript"}
-							1. Install the
-							<span style="text-transform:capitalize">{current_language}</span>
-							client (<a
-								href={current_language == "python" ? py_docs : js_docs}
-								target="_blank">docs</a
-							>) if you don't already have it installed.
-						{:else if current_language == "bash"}
-							1. Confirm that you have cURL installed on your system.
-						{/if}
-					</p>
+					{#if current_language !== "skill"}
+						<p class="padded">
+							{#if current_language == "python" || current_language == "javascript"}
+								1. Install the
+								<span style="text-transform:capitalize">{current_language}</span
+								>
+								client (<a
+									href={current_language == "python" ? py_docs : js_docs}
+									target="_blank">docs</a
+								>) if you don't already have it installed.
+							{:else if current_language == "bash"}
+								1. Confirm that you have cURL installed on your system.
+							{/if}
+						</p>
+					{/if}
+
+					<div class:hidden={current_language !== "skill"}>
+						<SkillSnippet {space_id} />
+					</div>
 
 					<div class:hidden={current_language !== "mcp"}>
 						<MCPSnippet
@@ -427,7 +445,7 @@
 						/>
 					</div>
 
-					{#if current_language !== "mcp"}
+					{#if current_language !== "mcp" && current_language !== "skill"}
 						<InstallSnippet {current_language} />
 
 						<p class="padded">
@@ -480,25 +498,23 @@
 					{/if}
 				{/if}
 
-				<div class:hidden={current_language === "mcp"}>
+				<div
+					class:hidden={current_language === "mcp" ||
+						current_language === "skill"}
+				>
 					{#each sorted_dependencies as dependency}
 						{#if info.named_endpoints["/" + dependency.api_name]}
 							<div class="endpoint-container">
 								<CodeSnippet
-									endpoint_parameters={info.named_endpoints[
-										"/" + dependency.api_name
-									].parameters}
 									{dependency}
 									{current_language}
-									{root}
-									{space_id}
-									{username}
-									api_prefix={app.api_prefix}
 									api_description={info.named_endpoints[
 										"/" + dependency.api_name
 									].description}
 									{analytics}
 									{last_api_call}
+									code_snippets={info.named_endpoints["/" + dependency.api_name]
+										.code_snippets}
 									bind:markdown_code_snippets
 								/>