@gradio/core 1.2.0 → 1.3.0

package/dist/src/api_docs/ResponseSnippet.svelte

@@ -4,7 +4,12 @@
 	export let is_running: boolean;
 	export let endpoint_returns: any;
 	export let js_returns: any;
-	export let current_language: "python" | "javascript" | "bash" | "mcp";
+	export let current_language:
+		| "python"
+		| "javascript"
+		| "bash"
+		| "skill"
+		| "mcp";
 </script>
 
 <h4>

package/dist/src/api_docs/ResponseSnippet.svelte.d.ts

@@ -15,7 +15,7 @@ declare const ResponseSnippet: $$__sveltets_2_IsomorphicComponent<{
     is_running: boolean;
     endpoint_returns: any;
     js_returns: any;
-    current_language: "python" | "javascript" | "bash" | "mcp";
+    current_language: "python" | "javascript" | "bash" | "skill" | "mcp";
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/src/api_docs/SkillSnippet.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { Block } from "@gradio/atoms";
+	import CopyButton from "./CopyButton.svelte";
+
+	export let space_id: string | null;
+
+	$: effective_space_id = space_id || "";
+	$: skill_id = effective_space_id.replace("/", "-");
+	$: install_gradio = "pip install --upgrade gradio";
+	$: install_cmd_claude = `gradio skills add ${effective_space_id} --claude`;
+	$: install_cmd_cursor = `gradio skills add ${effective_space_id} --cursor`;
+	$: install_cmd_codex = `gradio skills add ${effective_space_id} --codex`;
+
+	$: skill_preview = `---
+name: ${skill_id}
+description: Use the ${effective_space_id} Gradio Space via API. Provides Python, JavaScript, and cURL usage examples.
+---
+
+# ${effective_space_id}
+
+This skill describes how to use the ${effective_space_id} Gradio Space programmatically.
+
+## API Endpoints
+...`;
+</script>
+
+<div class="skill-content">
+	<p class="padded">1. Make sure you are using the latest version of Gradio:</p>
+	<Block>
+		<code>
+			<div class="copy">
+				<CopyButton code={install_gradio} />
+			</div>
+			<div>
+				<pre>$ {install_gradio}</pre>
+			</div>
+		</code>
+	</Block>
+
+	<p class="padded">
+		2. Install the usage of this Space as a Skill for your coding agent by
+		running this in your terminal:
+	</p>
+	<Block>
+		<code>
+			<div class="copy">
+				<CopyButton code={install_cmd_claude} />
+			</div>
+			<div>
+				<pre>$ {install_cmd_claude}</pre>
+			</div>
+		</code>
+	</Block>
+	<p class="hint">
+		Instead of <span class="inline-code">--claude</span>, you can use
+		<span class="inline-code">--cursor</span>,
+		<span class="inline-code">--codex</span>, or
+		<span class="inline-code">--opencode</span>. Combine flags to install for
+		multiple agents. Use <span class="inline-code">--global</span> to install user-level
+		instead of per-project.
+	</p>
+
+	<p class="padded">
+		3. This will add a skill to your coding agent that describes how to use this
+		Space via Python, JavaScript, and cURL API. The skill will look like this:
+	</p>
+	<Block>
+		<code>
+			<div class="copy">
+				<CopyButton code={skill_preview} />
+			</div>
+			<div>
+				<pre>{skill_preview}</pre>
+			</div>
+		</code>
+	</Block>
+</div>
+
+<style>
+	.skill-content {
+		margin-top: var(--size-2);
+	}
+
+	p.padded {
+		padding: 15px 0px;
+		font-size: var(--text-lg);
+	}
+
+	.hint {
+		margin-top: var(--size-2);
+		color: var(--body-text-color);
+		opacity: 0.8;
+		font-size: var(--text-md);
+		line-height: 1.6;
+	}
+
+	.inline-code {
+		display: inline;
+		font-family: var(--font-mono);
+		font-size: var(--text-md);
+		background: var(--background-fill-secondary);
+		padding: 1px 4px;
+		border-radius: var(--radius-sm);
+	}
+
+	code pre {
+		overflow-x: auto;
+		color: var(--body-text-color);
+		font-family: var(--font-mono);
+		tab-size: 2;
+	}
+
+	code {
+		position: relative;
+		display: block;
+	}
+
+	.copy {
+		position: absolute;
+		top: 0;
+		right: 0;
+		margin-top: -5px;
+		margin-right: -5px;
+	}
+</style>

package/dist/src/api_docs/SkillSnippet.svelte.d.ts

@@ -0,0 +1,20 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SkillSnippet: $$__sveltets_2_IsomorphicComponent<{
+    space_id: string | null;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SkillSnippet = InstanceType<typeof SkillSnippet>;
+export default SkillSnippet;

package/dist/src/api_docs/img/skill.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="14 22 122 106" style="background-color: #ffffff;">
+<rect x="22" y="28" width="106" height="94" rx="8" fill="none" stroke="#374151" stroke-width="6"/>
+<rect x="22" y="28" width="106" height="20" rx="8" fill="#374151" fill-opacity="0.08"/>
+<circle cx="38" cy="38" r="4" fill="#ff5f57"/>
+<circle cx="52" cy="38" r="4" fill="#febc2e"/>
+<circle cx="66" cy="38" r="4" fill="#28c840"/>
+<text x="38" y="76" fill="#374151" font-family="monospace" font-size="22" font-weight="bold">&gt;_</text>
+<rect x="38" y="88" width="50" height="4" rx="2" fill="#374151" fill-opacity="0.35"/>
+<rect x="38" y="100" width="35" height="4" rx="2" fill="#374151" fill-opacity="0.2"/>
+</svg>

package/dist/src/api_docs/utils.d.ts

@@ -1,4 +1,3 @@
 export declare function represent_value(value: string, type: string | undefined, lang?: "js" | "py" | "bash" | null): string | null | number | boolean | Record<string, unknown>;
-export declare function is_potentially_nested_file_data(obj: any): boolean;
 export declare function format_latency(val: number): string;
 export declare function get_color_from_success_rate(success_rate: number): string;

package/dist/src/api_docs/utils.js

@@ -48,28 +48,6 @@ export function represent_value(value, type, lang = null) {
     }
     return stringify_except_file_function(value);
 }
-export function is_potentially_nested_file_data(obj) {
-    if (typeof obj === "object" && obj !== null) {
-        if (obj.hasOwnProperty("url") && obj.hasOwnProperty("meta")) {
-            if (typeof obj.meta === "object" &&
-                obj.meta !== null &&
-                obj.meta._type === "gradio.FileData") {
-                return true;
-            }
-        }
-    }
-    if (typeof obj === "object" && obj !== null) {
-        for (let key in obj) {
-            if (typeof obj[key] === "object") {
-                let result = is_potentially_nested_file_data(obj[key]);
-                if (result) {
-                    return true;
-                }
-            }
-        }
-    }
-    return false;
-}
 function simplify_file_data(obj) {
     if (typeof obj === "object" && obj !== null && !Array.isArray(obj)) {
         if ("url" in obj &&

package/dist/src/dependency.d.ts

@@ -85,8 +85,10 @@ export declare class DependencyManager {
     get_state_cb: GetStateCallback;
     rerender_cb: RerenderCallback;
     log_cb: LogCallback;
+    on_connection_lost_cb: () => void;
     loading_stati: LoadingStatus;
-    constructor(dependencies: IDependency[], client: Client, update_state_cb: (id: number, state: Record<string, unknown>, check_visibility?: boolean) => Promise<void>, get_state_cb: (id: number) => Promise<Record<string, unknown> | null>, rerender_cb: (components: ComponentMeta[], layout: LayoutNode) => void, log_cb: (title: string, message: string, fn_index: number, type: ToastMessage["type"], duration?: number | null, visible?: boolean) => void, add_to_api_calls: (payload: Payload) => void);
+    connection_lost: boolean;
+    constructor(dependencies: IDependency[], client: Client, update_state_cb: (id: number, state: Record<string, unknown>, check_visibility?: boolean) => Promise<void>, get_state_cb: (id: number) => Promise<Record<string, unknown> | null>, rerender_cb: (components: ComponentMeta[], layout: LayoutNode) => void, log_cb: (title: string, message: string, fn_index: number, type: ToastMessage["type"], duration?: number | null, visible?: boolean) => void, add_to_api_calls: (payload: Payload) => void, on_connection_lost_cb: () => void);
     reload(dependencies: IDependency[], update_state: UpdateStateCallback, get_state: GetStateCallback, rerender: RerenderCallback, client: Client): void;
     register_loading_stati(deps: Map<number, Dependency>): void;
     clear_loading_status(component_id: number): void;

package/dist/src/dependency.js

@@ -118,13 +118,16 @@ export class DependencyManager {
     get_state_cb;
     rerender_cb;
     log_cb;
+    on_connection_lost_cb;
     loading_stati = new LoadingStatus();
-    constructor(dependencies, client, update_state_cb, get_state_cb, rerender_cb, log_cb, add_to_api_calls) {
+    connection_lost = false;
+    constructor(dependencies, client, update_state_cb, get_state_cb, rerender_cb, log_cb, add_to_api_calls, on_connection_lost_cb) {
         this.add_to_api_calls = add_to_api_calls;
         this.log_cb = log_cb;
         this.update_state_cb = update_state_cb;
         this.get_state_cb = get_state_cb;
         this.rerender_cb = rerender_cb;
+        this.on_connection_lost_cb = on_connection_lost_cb;
         this.client = client;
         this.reload(dependencies, update_state_cb, get_state_cb, rerender_cb, client);
     }
@@ -180,6 +183,8 @@ export class DependencyManager {
      * @returns a value if there is no backend fn, a 'submission' if there is a backend fn, or null if there is no dependency
      */
     async dispatch(event_meta) {
+        if (this.connection_lost)
+            return;
         let deps;
         if (event_meta.type === "fn") {
             const dep = this.dependencies_by_fn.get(event_meta.fn_index);
@@ -314,6 +319,19 @@ export class DependencyManager {
                                     this.update_loading_stati_state();
                                 }
                                 else if (result.stage === "error") {
+                                    if (result.broken || result.session_not_found) {
+                                        if (!this.connection_lost) {
+                                            this.connection_lost = true;
+                                            this.on_connection_lost_cb();
+                                        }
+                                        this.loading_stati.update({
+                                            status: "complete",
+                                            fn_index: dep.id,
+                                            stream_state: null
+                                        });
+                                        this.update_loading_stati_state();
+                                        break submit_loop;
+                                    }
                                     if (Array.isArray(result?.message)) {
                                         result.message.forEach((m, i) => {
                                             this.update_state_cb(dep.inputs[i], {

package/dist/src/init.svelte.js

@@ -31,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 = {};
@@ -110,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();
@@ -276,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);
             }
@@ -316,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
@@ -492,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,63 +1,63 @@
 {
   "name": "@gradio/core",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "devDependencies": {
+    "@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/annotatedimage": "^0.11.3",
     "@gradio/browserstate": "^0.3.6",
-    "@gradio/button": "^0.6.3",
+    "@gradio/button": "^0.6.4",
+    "@gradio/chatbot": "^0.29.4",
     "@gradio/checkbox": "^0.6.3",
     "@gradio/checkboxgroup": "^0.9.3",
-    "@gradio/client": "^2.0.4",
-    "@gradio/code": "^0.17.3",
+    "@gradio/client": "^2.1.0",
     "@gradio/colorpicker": "^0.5.6",
-    "@gradio/dataframe": "^0.21.5",
-    "@gradio/dataset": "^0.5.4",
-    "@gradio/chatbot": "^0.29.4",
     "@gradio/column": "^0.3.2",
     "@gradio/datetime": "^0.4.3",
+    "@gradio/code": "^0.17.3",
+    "@gradio/downloadbutton": "^0.4.17",
     "@gradio/dropdown": "^0.11.4",
+    "@gradio/dataset": "^0.5.4",
     "@gradio/fallback": "^0.4.34",
     "@gradio/file": "^0.14.3",
-    "@gradio/form": "^0.3.0",
-    "@gradio/downloadbutton": "^0.4.17",
-    "@gradio/gallery": "^0.17.1",
     "@gradio/fileexplorer": "^0.6.3",
+    "@gradio/dataframe": "^0.21.6",
+    "@gradio/form": "^0.3.0",
     "@gradio/group": "^0.3.2",
+    "@gradio/gallery": "^0.17.1",
     "@gradio/highlightedtext": "^0.11.2",
-    "@gradio/html": "^0.9.3",
+    "@gradio/html": "^0.10.0",
     "@gradio/icons": "^0.15.1",
-    "@gradio/imageeditor": "^0.18.6",
     "@gradio/image": "^0.25.3",
+    "@gradio/imageeditor": "^0.18.6",
     "@gradio/label": "^0.6.3",
     "@gradio/json": "^0.7.2",
-    "@gradio/imageslider": "^0.4.3",
     "@gradio/markdown": "^0.13.28",
+    "@gradio/imageslider": "^0.4.3",
     "@gradio/model3d": "^0.16.4",
     "@gradio/multimodaltextbox": "^0.11.6",
-    "@gradio/paramviewer": "^0.9.4",
     "@gradio/nativeplot": "^0.10.2",
     "@gradio/number": "^0.8.3",
+    "@gradio/paramviewer": "^0.9.4",
     "@gradio/plot": "^0.10.4",
-    "@gradio/radio": "^0.9.3",
     "@gradio/row": "^0.3.1",
-    "@gradio/simpletextbox": "^0.3.36",
-    "@gradio/simpledropdown": "^0.3.34",
     "@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/tabitem": "^0.6.5",
     "@gradio/statustracker": "^0.12.4",
-    "@gradio/tabs": "^0.5.6",
-    "@gradio/theme": "^0.6.1",
+    "@gradio/tabitem": "^0.6.5",
+    "@gradio/tabs": "^0.5.7",
     "@gradio/textbox": "^0.13.4",
-    "@gradio/upload": "^0.17.6",
+    "@gradio/theme": "^0.6.1",
     "@gradio/timer": "^0.4.8",
+    "@gradio/upload": "^0.17.6",
     "@gradio/uploadbutton": "^0.9.17",
     "@gradio/utils": "^0.11.3",
     "@gradio/video": "^0.20.3",

package/src/Blocks.svelte

@@ -104,6 +104,7 @@
 	});
 
 	let messages: (ToastMessage & { fn_index: number })[] = $state([]);
+	let reconnect_interval: ReturnType<typeof setInterval> | null = null;
 
 	function gradio_event_dispatcher(
 		id: number,
@@ -206,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,
@@ -213,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(() => {
@@ -426,6 +457,7 @@
 		return () => {
 			mut.disconnect();
 			res.disconnect();
+			if (reconnect_interval) clearInterval(reconnect_interval);
 		};
 	});
 

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>