@gradio/core 0.22.0 → 0.23.1

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @gradio/core
 
+## 0.23.1
+
+### Features
+
+- [#11619](https://github.com/gradio-app/gradio/pull/11619) [`33c5d2b`](https://github.com/gradio-app/gradio/commit/33c5d2bb8214c0d7a90daca0f1eaf96411a52e79) - Add a query param for the selected language & make MCP the default option when `mcp_server` is enabled.  Thanks @abidlabs!
+- [#11615](https://github.com/gradio-app/gradio/pull/11615) [`e2b66d7`](https://github.com/gradio-app/gradio/commit/e2b66d718f3a8f57b6ee224502849ee737b1b120) - fix change events for hidden components.  Thanks @pngwn!
+
+### Fixes
+
+- [#11599](https://github.com/gradio-app/gradio/pull/11599) [`c39d373`](https://github.com/gradio-app/gradio/commit/c39d3739bf2494ad13556174757cdd56060f033e) - Ensure component visibility is correctly propagated to all components.  Thanks @copilot-swe-agent!
+
+## 0.23.0
+
+### Features
+
+- [#11578](https://github.com/gradio-app/gradio/pull/11578) [`872798a`](https://github.com/gradio-app/gradio/commit/872798a780dd81c834a44b05277f6c9ebe09de8b) - Add an `api_description` parameter for API and MCP server.  Thanks @abidlabs!
+- [#11543](https://github.com/gradio-app/gradio/pull/11543) [`ac95ac0`](https://github.com/gradio-app/gradio/commit/ac95ac0d8c2e65d1632376e632fb7d16131334b6) - Connection handling messaging.  Thanks @aliabid94!
+- [#11508](https://github.com/gradio-app/gradio/pull/11508) [`f5a6fa8`](https://github.com/gradio-app/gradio/commit/f5a6fa8c52bcb8f508e10ea54a3427f3dab8e3f8) - Handle uploading files in mcp server automatically.  Thanks @freddyaboulton!
+- [#11515](https://github.com/gradio-app/gradio/pull/11515) [`2c24ca7`](https://github.com/gradio-app/gradio/commit/2c24ca709396291a344d981c19ed1655028b5d64) - Making it easier for MCP developers call APIs with user credentials.  Thanks @freddyaboulton!
+- [#11584](https://github.com/gradio-app/gradio/pull/11584) [`78428cb`](https://github.com/gradio-app/gradio/commit/78428cb29bf6dc66d583b7cf93dd404aef737e75) - Fix reload mode.  Thanks @aliabid94!
+
+### Fixes
+
+- [#11590](https://github.com/gradio-app/gradio/pull/11590) [`33b6057`](https://github.com/gradio-app/gradio/commit/33b6057dc5cbdfdab15b1ee000b0f0b3d9f3fff6) - Add Gradio File Input keyword to gradio file inputs.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/video@0.14.21
+- @gradio/client@1.15.6
+- @gradio/statustracker@0.10.15
+- @gradio/button@0.5.7
+- @gradio/upload@0.16.11
+- @gradio/checkbox@0.4.26
+- @gradio/image@0.22.13
+- @gradio/gallery@0.15.27
+- @gradio/plot@0.9.20
+- @gradio/textbox@0.10.17
+- @gradio/file@0.12.24
+- @gradio/code@0.14.11
+- @gradio/paramviewer@0.7.13
+- @gradio/column@0.2.1
+
 ## 0.22.0
 
 ### Features

package/dist/src/Blocks.svelte

@@ -35,6 +35,7 @@ export let api_prefix = "";
 export let max_file_size = void 0;
 export let initial_layout = void 0;
 export let css = null;
+let broken_connection = false;
 let {
   layout: _layout,
   targets,
@@ -46,8 +47,11 @@ let {
   loading_status,
   scheduled_updates,
   create_layout,
-  rerender_layout
-} = create_components(initial_layout);
+  rerender_layout,
+  value_change
+} = create_components({
+  initial_layout
+});
 $:
   components, layout, dependencies, root, app, fill_height, target, run();
 $: {
@@ -203,11 +207,13 @@ export function add_new_message(title2, message, type) {
   messages = [new_message(title2, message, -1, type), ...messages];
 }
 let _error_id = -1;
-let user_left_page = false;
 const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
 const DUPLICATE_MESSAGE = $_("blocks.long_requests_queue");
 const MOBILE_QUEUE_WARNING = $_("blocks.connection_can_break");
-const MOBILE_RECONNECT_MESSAGE = $_("blocks.lost_connection");
+const LOST_CONNECTION_MESSAGE = "Connection to the server was lost. Attempting reconnection...";
+const CHANGED_CONNECTION_MESSAGE = "Reconnected to server, but the server has changed. You may need to <a href=''>refresh the page</a>.";
+const RECONNECTION_MESSAGE = "Connection re-established.";
+const SESSION_NOT_FOUND_MESSAGE = "Session not found - this is likely because the machine you were connected to has changed. <a href=''>Refresh the page</a> to continue.";
 const WAITING_FOR_INPUTS_MESSAGE = $_("blocks.waiting_for_inputs");
 const SHOW_DUPLICATE_MESSAGE_ON_ETA = 15;
 const SHOW_MOBILE_QUEUE_WARNING_ON_ETA = 10;
@@ -322,6 +328,42 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
       }
     }
   }
+  async function reconnect() {
+    const connection_status = await app.reconnect();
+    if (connection_status === "broken") {
+      setTimeout(reconnect, 1e3);
+    } else if (connection_status === "changed") {
+      broken_connection = false;
+      messages = [
+        new_message(
+          "Changed Connection",
+          CHANGED_CONNECTION_MESSAGE,
+          -1,
+          "info",
+          3,
+          true
+        ),
+        ...messages.map(
+          (m) => m.message === LOST_CONNECTION_MESSAGE ? { ...m, visible: false } : m
+        )
+      ];
+    } else if (connection_status === "connected") {
+      broken_connection = false;
+      messages = [
+        new_message(
+          "Reconnected",
+          RECONNECTION_MESSAGE,
+          -1,
+          "success",
+          null,
+          true
+        ),
+        ...messages.map(
+          (m) => m.message === LOST_CONNECTION_MESSAGE ? { ...m, visible: false } : m
+        )
+      ];
+    }
+  }
   async function make_prediction(payload2, streaming = false) {
     if (allow_video_trim) {
       screen_recorder.markRemoveSegmentStart();
@@ -439,6 +481,34 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
       }
     }
     function handle_status_update(message) {
+      if (message.broken && !broken_connection) {
+        messages = [
+          new_message(
+            "Broken Connection",
+            LOST_CONNECTION_MESSAGE,
+            -1,
+            "error",
+            null,
+            true
+          ),
+          ...messages
+        ];
+        broken_connection = true;
+        setTimeout(reconnect, 1e3);
+      }
+      if (message.session_not_found) {
+        messages = [
+          new_message(
+            "Session Not Found",
+            SESSION_NOT_FOUND_MESSAGE,
+            -1,
+            "error",
+            null,
+            true
+          ),
+          ...messages
+        ];
+      }
       const { fn_index, ...status } = message;
       if (status.stage === "streaming" && status.time_limit) {
         dep.inputs.forEach((id) => {
@@ -492,16 +562,7 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
         });
         submit_map.delete(dep_index);
       }
-      if (status.broken && is_mobile_device && user_left_page) {
-        window.setTimeout(() => {
-          messages = [
-            new_message("Error", MOBILE_RECONNECT_MESSAGE, fn_index, "error"),
-            ...messages
-          ];
-        }, 0);
-        wait_then_trigger_api_call(dep.id, payload2.trigger_id, event_data);
-        user_left_page = false;
-      } else if (status.stage === "error") {
+      if (status.stage === "error" && !broken_connection && !message.session_not_found) {
         if (status.message) {
           const _message = status.message.replace(
             MESSAGE_QUOTE_RE,
@@ -616,6 +677,14 @@ async function handle_mount() {
   });
   render_complete = true;
 }
+value_change((id, value) => {
+  const deps = $targets[id]?.["change"];
+  deps?.forEach((dep_id) => {
+    requestAnimationFrame(() => {
+      wait_then_trigger_api_call(dep_id, id, value);
+    });
+  });
+});
 const handle_load_triggers = () => {
   dependencies.forEach((dep) => {
     if (dep.targets.some((dep2) => dep2[1] === "load")) {
@@ -672,11 +741,6 @@ function isCustomEvent(event) {
 }
 let is_screen_recording = writable(false);
 onMount(() => {
-  document.addEventListener("visibilitychange", function() {
-    if (document.visibilityState === "hidden") {
-      user_left_page = true;
-    }
-  });
   is_mobile_device = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
     navigator.userAgent
   );

package/dist/src/RenderComponent.svelte

@@ -65,6 +65,7 @@ $:
 		{elem_id}
 		{elem_classes}
 		{target}
+		{visible}
 		{...$$restProps}
 		{theme_mode}
 		{root}

package/dist/src/api_docs/ApiDocs.svelte

@@ -35,6 +35,18 @@ if (!root.endsWith("/")) {
 }
 export let api_calls = [];
 let current_language = "python";
+function set_query_param(key, value) {
+  const url = new URL(window.location.href);
+  url.searchParams.set(key, value);
+  history.replaceState(null, "", url.toString());
+}
+function get_query_param(key) {
+  const url = new URL(window.location.href);
+  return url.searchParams.get(key);
+}
+function is_valid_language(lang) {
+  return ["python", "javascript", "bash", "mcp"].includes(lang ?? "");
+}
 const langs = [
   ["python", "Python", python],
   ["javascript", "JavaScript", javascript],
@@ -65,16 +77,83 @@ get_js_info().then((js_api_info) => {
 const dispatch = createEventDispatcher();
 const mcp_server_url = `${root}gradio_api/mcp/sse`;
 let tools = [];
+let headers = [];
+let mcp_json_sse;
+let mcp_json_stdio;
+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) => tool.meta?.file_data_present).some((present) => present);
     tools = schema.map((tool) => ({
       name: tool.name,
       description: tool.description || "",
       parameters: tool.inputSchema?.properties || {},
       expanded: false
     }));
+    headers = schema.map((tool) => tool.meta?.headers || []).flat();
+    if (headers.length > 0) {
+      mcp_json_sse = {
+        mcpServers: {
+          gradio: {
+            url: mcp_server_url,
+            headers: headers.reduce((accumulator, current_key) => {
+              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 = [];
@@ -85,10 +164,21 @@ onMount(() => {
   if ("parentIFrame" in window) {
     window.parentIFrame?.scrollTo(0, 0);
   }
+  const lang_param = get_query_param("lang");
+  if (is_valid_language(lang_param)) {
+    current_language = lang_param;
+  }
   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(() => {
     mcp_server_active = false;
@@ -122,7 +212,10 @@ onMount(() => {
 						<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}
@@ -180,7 +273,7 @@ onMount(() => {
 									<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} />
@@ -239,45 +332,42 @@ onMount(() => {
 								</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:
@@ -286,43 +376,11 @@ onMount(() => {
 									<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>
@@ -398,21 +456,22 @@ onMount(() => {
 				{/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/dist/src/api_docs/CodeSnippet.svelte

@@ -3,14 +3,13 @@ import { represent_value, is_potentially_nested_file_data } from "./utils";
 import { Block } from "@gradio/atoms";
 import EndpointDetail from "./EndpointDetail.svelte";
 export let dependency;
-export let dependency_index;
 export let root;
 export let api_prefix;
 export let space_id;
 export let endpoint_parameters;
-export let named;
 export let username;
 export let current_language;
+export let api_description = null;
 let python_code;
 let js_code;
 let bash_post_code;
@@ -29,11 +28,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>
@@ -86,9 +84,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/dist/src/api_docs/CodeSnippet.svelte.d.ts

@@ -3,14 +3,13 @@ import type { Dependency } from "../types";
 declare const __propDef: {
     props: {
         dependency: Dependency;
-        dependency_index: number;
         root: string;
         api_prefix: string;
         space_id: string | null;
         endpoint_parameters: any;
-        named: boolean;
         username: string | null;
         current_language: "python" | "javascript" | "bash";
+        api_description?: (string | null) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/src/api_docs/EndpointDetail.svelte

@@ -1,19 +1,12 @@
 <script>export let api_name = null;
-export let fn_index = null;
-export let named;
+export let description = 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 {
@@ -33,4 +26,10 @@ export let named;
 		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/dist/src/api_docs/EndpointDetail.svelte.d.ts

@@ -2,8 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         api_name?: (string | null) | undefined;
-        fn_index?: (number | null) | undefined;
-        named: boolean;
+        description?: (string | null) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/src/init.d.ts

@@ -7,7 +7,13 @@ export interface UpdateTransaction {
     value: any;
     prop: string;
 }
-export declare function create_components(initial_layout: ComponentMeta | undefined): {
+/**
+ * Create a store with the layout and a map of targets
+ * @returns A store with the layout and a map of targets
+ */
+export declare function create_components({ initial_layout }?: {
+    initial_layout: ComponentMeta | undefined;
+}): {
     layout: Writable<ComponentMeta>;
     targets: Writable<TargetMap>;
     update_value: (updates: UpdateTransaction[]) => void;
@@ -34,6 +40,7 @@ export declare function create_components(initial_layout: ComponentMeta | undefi
         root: string;
         dependencies: Dependency[];
     }) => void;
+    value_change: (cb: (id: number, value: any) => void) => void;
 };
 /** An async version of 'new Function' */
 export declare const AsyncFunction: new (...args: string[]) => (...args: any[]) => Promise<any>;