@gradio/core 0.22.0 → 0.23.1

package/src/api_docs/ApiDocs.svelte

@@ -52,6 +52,21 @@
 	export let api_calls: Payload[] = [];
 	let current_language: "python" | "javascript" | "bash" | "mcp" = "python";
 
+	function set_query_param(key: string, value: string) {
+		const url = new URL(window.location.href);
+		url.searchParams.set(key, value);
+		history.replaceState(null, "", url.toString());
+	}
+
+	function get_query_param(key: string): string | null {
+		const url = new URL(window.location.href);
+		return url.searchParams.get(key);
+	}
+
+	function is_valid_language(lang: string | null): boolean {
+		return ["python", "javascript", "bash", "mcp"].includes(lang ?? "");
+	}
+
 	const langs = [
 		["python", "Python", python],
 		["javascript", "JavaScript", javascript],
@@ -112,11 +127,30 @@
 	}
 
 	let tools: Tool[] = [];
+	let headers: string[] = [];
+	let mcp_json_sse: any;
+	let mcp_json_stdio: any;
+	let file_data_present = false;
+
+	const upload_file_mcp_server = {
+		command: "uvx",
+		args: [
+			"--from",
+			"gradio[mcp]",
+			"gradio",
+			"upload-mcp",
+			root,
+			"<UPLOAD_DIRECTORY>"
+		]
+	};
 
 	async function fetchMcpTools() {
 		try {
 			const response = await fetch(`${root}gradio_api/mcp/schema`);
 			const schema = await response.json();
+			file_data_present = schema
+				.map((tool: any) => tool.meta?.file_data_present)
+				.some((present: boolean) => present);
 
 			tools = schema.map((tool: any) => ({
 				name: tool.name,
@@ -124,6 +158,62 @@
 				parameters: tool.inputSchema?.properties || {},
 				expanded: false
 			}));
+			headers = schema.map((tool: any) => tool.meta?.headers || []).flat();
+			if (headers.length > 0) {
+				mcp_json_sse = {
+					mcpServers: {
+						gradio: {
+							url: mcp_server_url,
+							headers: headers.reduce((accumulator, current_key) => {
+								// @ts-ignore
+								accumulator[current_key] = "<YOUR_HEADER_VALUE>";
+								return accumulator;
+							}, {})
+						}
+					}
+				};
+				mcp_json_stdio = {
+					mcpServers: {
+						gradio: {
+							command: "npx",
+							args: [
+								"mcp-remote",
+								mcp_server_url,
+								"--transport",
+								"sse-only",
+								...headers
+									.map((header) => [
+										"--header",
+										`${header}: <YOUR_HEADER_VALUE>`
+									])
+									.flat()
+							]
+						}
+					}
+				};
+			} else {
+				mcp_json_sse = {
+					mcpServers: {
+						gradio: {
+							url: mcp_server_url
+						}
+					}
+				};
+				mcp_json_stdio = {
+					mcpServers: {
+						gradio: {
+							command: "npx",
+							args: ["mcp-remote", mcp_server_url, "--transport", "sse-only"]
+						}
+					}
+				};
+				if (file_data_present) {
+					mcp_json_sse.mcpServers.upload_files_to_gradio =
+						upload_file_mcp_server;
+					mcp_json_stdio.mcpServers.upload_files_to_gradio =
+						upload_file_mcp_server;
+				}
+			}
 		} catch (error) {
 			console.error("Failed to fetch MCP tools:", error);
 			tools = [];
@@ -136,12 +226,24 @@
 			window.parentIFrame?.scrollTo(0, 0);
 		}
 
+		const lang_param = get_query_param("lang");
+		if (is_valid_language(lang_param)) {
+			current_language = lang_param as "python" | "javascript" | "bash" | "mcp";
+		}
+
 		// Check MCP server status and fetch tools if active
 		fetch(mcp_server_url)
 			.then((response) => {
 				mcp_server_active = response.ok;
 				if (mcp_server_active) {
 					fetchMcpTools();
+					if (!is_valid_language(lang_param)) {
+						current_language = "mcp";
+					}
+				} else {
+					if (!is_valid_language(lang_param)) {
+						current_language = "python";
+					}
 				}
 			})
 			.catch(() => {
@@ -177,7 +279,10 @@
 						<li
 							class="snippet
 						{current_language === language ? 'current-lang' : 'inactive-lang'}"
-							on:click={() => (current_language = language)}
+							on:click={() => {
+								current_language = language;
+								set_query_param("lang", language);
+							}}
 						>
 							<img src={img} alt="" />
 							{display_name}
@@ -235,7 +340,7 @@
 									<div class="mcp-url">
 										<label
 											><span class="status-indicator active">●</span>MCP Server
-											URL</label
+											URL (SSE)</label
 										>
 										<div class="textbox">
 											<input type="text" readonly value={mcp_server_url} />
@@ -294,45 +399,42 @@
 								</div>
 								<p>&nbsp;</p>
 
-								<strong>Integration</strong>: To add this MCP to clients that
+								<strong>SSE Transport</strong>: To add this MCP to clients that
 								support SSE (e.g. Cursor, Windsurf, Cline), simply add the
-								following configuration to your MCP config:
+								following configuration to your MCP config.
 								<p>&nbsp;</p>
 								<Block>
 									<code>
 										<div class="copy">
 											<CopyButton
-												code={JSON.stringify(
-													{
-														mcpServers: {
-															gradio: {
-																url: mcp_server_url
-															}
-														}
-													},
-													null,
-													2
-												)}
+												code={JSON.stringify(mcp_json_sse, null, 2)}
 											/>
 										</div>
 										<div>
-											<pre>{JSON.stringify(
-													{
-														mcpServers: {
-															gradio: {
-																url: mcp_server_url
-															}
-														}
-													},
-													null,
-													2
-												)}</pre>
+											<pre>{JSON.stringify(mcp_json_sse, null, 2)}</pre>
 										</div>
 									</code>
 								</Block>
-								<p>&nbsp;</p>
-								<em>Experimental stdio support</em>: For clients that only
-								support stdio, first
+								{#if file_data_present}
+									<p>&nbsp;</p>
+									<em>Note about files</em>: Gradio MCP servers that have files
+									as inputs need the files as URLs, so the
+									<code>upload_files_to_gradio</code>
+									tool is included for your convenience. This tool can upload files
+									located in the specified <code>UPLOAD_DIRECTORY</code>
+									argument (an absolute path in your local machine) or any of its
+									subdirectories to the Gradio app. You can omit this tool if you
+									are fine manually uploading files yourself and providing the URLs.
+									Before using this tool, you must have
+									<a
+										href="https://docs.astral.sh/uv/getting-started/installation/"
+										target="_blank">uv installed</a
+									>.
+									<p>&nbsp;</p>
+								{/if}
+
+								<strong>STDIO Transport</strong>: For clients that only support
+								stdio (e.g. Claude Desktop), first
 								<a href="https://nodejs.org/en/download/" target="_blank"
 									>install Node.js</a
 								>. Then, you can use the following command:
@@ -341,43 +443,11 @@
 									<code>
 										<div class="copy">
 											<CopyButton
-												code={JSON.stringify(
-													{
-														mcpServers: {
-															gradio: {
-																command: "npx",
-																args: [
-																	"mcp-remote",
-																	mcp_server_url,
-																	"--transport",
-																	"sse-only"
-																]
-															}
-														}
-													},
-													null,
-													2
-												)}
+												code={JSON.stringify(mcp_json_stdio, null, 2)}
 											/>
 										</div>
 										<div>
-											<pre>{JSON.stringify(
-													{
-														mcpServers: {
-															gradio: {
-																command: "npx",
-																args: [
-																	"mcp-remote",
-																	mcp_server_url,
-																	"--transport",
-																	"sse-only"
-																]
-															}
-														}
-													},
-													null,
-													2
-												)}</pre>
+											<pre>{JSON.stringify(mcp_json_stdio, null, 2)}</pre>
 										</div>
 									</code>
 								</Block>
@@ -453,21 +523,22 @@
 				{/if}
 
 				{#if current_language !== "mcp"}
-					{#each dependencies as dependency, dependency_index}
+					{#each dependencies as dependency}
 						{#if dependency.show_api && info.named_endpoints["/" + dependency.api_name]}
 							<div class="endpoint-container">
 								<CodeSnippet
-									named={true}
 									endpoint_parameters={info.named_endpoints[
 										"/" + dependency.api_name
 									].parameters}
 									{dependency}
-									{dependency_index}
 									{current_language}
 									{root}
 									{space_id}
 									{username}
 									api_prefix={app.api_prefix}
+									api_description={info.named_endpoints[
+										"/" + dependency.api_name
+									].description}
 								/>
 
 								<ParametersSnippet

package/src/api_docs/CodeSnippet.svelte

@@ -15,14 +15,13 @@
 	}
 
 	export let dependency: Dependency;
-	export let dependency_index: number;
 	export let root: string;
 	export let api_prefix: string;
 	export let space_id: string | null;
 	export let endpoint_parameters: any;
-	export let named: boolean;
 	export let username: string | null;
 	export let current_language: "python" | "javascript" | "bash";
+	export let api_description: string | null = null;
 
 	let python_code: HTMLElement;
 	let js_code: HTMLElement;
@@ -42,11 +41,10 @@
 </script>
 
 <div class="container">
-	{#if named}
-		<EndpointDetail {named} api_name={dependency.api_name} />
-	{:else}
-		<EndpointDetail {named} fn_index={dependency_index} />
-	{/if}
+	<EndpointDetail
+		api_name={dependency.api_name}
+		description={api_description}
+	/>
 	{#if current_language === "python"}
 		<Block>
 			<code>
@@ -99,9 +97,9 @@ const example{component} = await response_{i}.blob();
 const client = await Client.connect(<span class="token string"
 							>"{space_id || root}"</span
 						>{#if username !== null}, &lbrace;auth: ["{username}", **password**]&rbrace;{/if});
-const result = await client.predict({#if named}<span class="api-name"
-								>"/{dependency.api_name}"</span
-							>{:else}{dependency_index}{/if}, &lbrace; <!--
+const result = await client.predict(<span class="api-name"
+							>"/{dependency.api_name}"</span
+						>, &lbrace; <!--
 -->{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}<!--
 		-->{#if blob_components.includes(component)}<!--
 	-->

package/src/api_docs/EndpointDetail.svelte

@@ -1,20 +1,13 @@
 <script lang="ts">
 	export let api_name: string | null = null;
-	export let fn_index: number | null = null;
-	export let named: boolean;
+	export let description: string | null = null;
 </script>
 
-{#if named}
-	<h3>
-		api_name:
-		<span class="post">{"/" + api_name}</span>
-	</h3>
-{:else}
-	<h3>
-		fn_index:
-		<span class="post">{fn_index}</span>
-	</h3>
-{/if}
+<h3>
+	API name:
+	<span class="post">{"/" + api_name}</span>
+	<span class="desc">{description}</span>
+</h3>
 
 <style>
 	h3 {
@@ -34,4 +27,10 @@
 		color: var(--color-accent);
 		font-weight: var(--weight-semibold);
 	}
+
+	.desc {
+		color: var(--body-text-color-subdued);
+		font-size: var(--text-lg);
+		margin-top: var(--size-1);
+	}
 </style>

package/src/init.ts

@@ -1,4 +1,5 @@
 import { writable, type Writable, get } from "svelte/store";
+import { dequal } from "dequal";
 
 import type {
 	ComponentMeta,
@@ -28,8 +29,15 @@ const raf = is_browser
  * Create a store with the layout and a map of targets
  * @returns A store with the layout and a map of targets
  */
-let has_run = new Set<number>();
-export function create_components(initial_layout: ComponentMeta | undefined): {
+export function create_components(
+	{
+		initial_layout = undefined
+	}: {
+		initial_layout: ComponentMeta | undefined;
+	} = {
+		initial_layout: undefined
+	}
+): {
 	layout: Writable<ComponentMeta>;
 	targets: Writable<TargetMap>;
 	update_value: (updates: UpdateTransaction[]) => void;
@@ -56,6 +64,7 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 		root: string;
 		dependencies: Dependency[];
 	}) => void;
+	value_change: (cb: (id: number, value: any) => void) => void;
 } {
 	let _component_map: Map<number, ComponentMeta>;
 
@@ -73,6 +82,12 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 	let keys_per_render_id: Record<number, (string | number)[]> = {};
 	let _rootNode: ComponentMeta;
 
+	let value_change_cb: ((id: number, value: any) => void) | null = null;
+
+	function value_change(cb: (id: number, value: any) => void): void {
+		value_change_cb = cb;
+	}
+
 	// Store current layout and root for dynamic visibility recalculation
 	let current_layout: LayoutNode;
 	let current_root: string;
@@ -114,8 +129,14 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 		if (instance_map) {
 			// re-render in reload mode
 			components.forEach((c) => {
-				if (c.props.value == null && c.id in instance_map) {
-					c.props.value = instance_map[c.id].props.value;
+				if (c.props.value == null && c.key) {
+					// If the component has a key, we preserve its value by finding a matching instance with the same key
+					const matching_instance = Object.values(instance_map).find(
+						(instance) => instance.key === c.key
+					);
+					if (matching_instance) {
+						c.props.value = matching_instance.props.value;
+					}
 				}
 			});
 		}
@@ -126,7 +147,6 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 		pending_updates = [];
 		constructor_map = new Map();
 		_component_map = new Map();
-
 		instance_map = {};
 
 		// Store current layout and root for dynamic visibility recalculation
@@ -321,19 +341,12 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 			const constructor_key = instance.component_class_id || instance.type;
 			let component_constructor = constructor_map.get(constructor_key);
 
-			// Only load component if it was preloaded (i.e., it's visible)
 			if (component_constructor) {
 				instance.component = (await component_constructor)?.default;
 			}
-			// If component wasn't preloaded, leave it unloaded for now
-			// It will be loaded later when/if it becomes visible
 		}
 		instance.parent = parent;
 
-		// if (instance.type === "timer") {
-		// 	console.log("timer", instance, constructor_map);
-		// }
-
 		if (instance.type === "dataset") {
 			instance.props.component_map = get_component(
 				instance.type,
@@ -500,6 +513,7 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 					const instance = instance_map[update.id];
 					if (!instance) continue;
 					let new_value;
+					const old_value = instance.props[update.prop];
 					if (update.value instanceof Map) new_value = new Map(update.value);
 					else if (update.value instanceof Set)
 						new_value = new Set(update.value);
@@ -509,6 +523,14 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 						new_value = { ...update.value };
 					else new_value = update.value;
 					instance.props[update.prop] = new_value;
+
+					if (
+						update.prop === "value" &&
+						!is_visible(instance) &&
+						!dequal(old_value, new_value)
+					) {
+						value_change_cb?.(update.id, new_value);
+					}
 				}
 			}
 			return layout;
@@ -625,7 +647,8 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 		loading_status,
 		scheduled_updates: update_scheduled_store,
 		create_layout: create_layout,
-		rerender_layout
+		rerender_layout,
+		value_change
 	};
 }
 
@@ -1088,3 +1111,15 @@ export function preload_all_components(
 
 	return constructor_map;
 }
+
+function is_visible(component: ComponentMeta): boolean {
+	if (
+		typeof component.props.visible === "boolean" &&
+		component.props.visible === false
+	) {
+		return false;
+	} else if (component.parent) {
+		return is_visible(component.parent);
+	}
+	return true;
+}