@gradio/core 1.0.0-dev.0 → 1.0.0

package/dist/src/api_docs/MCPSnippet.svelte

@@ -1,73 +1,110 @@
-<script>import { Block } from "@gradio/atoms";
-import CopyButton from "./CopyButton.svelte";
-import { Tool, Prompt, Resource } from "@gradio/icons";
-import { format_latency, get_color_from_success_rate } from "./utils";
-export let mcp_server_active;
-export let mcp_server_url;
-export let mcp_server_url_streamable;
-export let tools;
-export let all_tools = [];
-export let selected_tools = /* @__PURE__ */ new Set();
-export let mcp_json_sse;
-export let mcp_json_stdio;
-export let file_data_present;
-export let mcp_docs;
-export let analytics;
-let current_transport = "streamable_http";
-let include_file_upload = true;
-const transports = [
-  ["streamable_http", "Streamable HTTP"],
-  ["sse", "SSE"],
-  ["stdio", "STDIO"]
-];
-const tool_type_icons = {
-  tool: Tool,
-  resource: Resource,
-  prompt: Prompt
-};
-$: display_url = current_transport === "sse" ? mcp_server_url : mcp_server_url_streamable;
-function update_config_with_file_upload(base_config, include_upload) {
-  if (!base_config) return null;
-  const config = JSON.parse(JSON.stringify(base_config));
-  if (include_upload && file_data_present) {
-    const upload_file_mcp_server = {
-      command: "uvx",
-      args: [
-        "--from",
-        "gradio[mcp]",
-        "gradio",
-        "upload-mcp",
-        current_transport === "sse" ? mcp_server_url : mcp_server_url_streamable,
-        "<UPLOAD_DIRECTORY>"
-      ]
-    };
-    config.mcpServers.upload_files_to_gradio = upload_file_mcp_server;
-  } else {
-    delete config.mcpServers?.upload_files_to_gradio;
-  }
-  return config;
-}
-$: mcp_json_streamable_http = update_config_with_file_upload(
-  mcp_json_sse ? {
-    ...mcp_json_sse,
-    mcpServers: {
-      ...mcp_json_sse.mcpServers,
-      gradio: {
-        ...mcp_json_sse.mcpServers.gradio,
-        url: mcp_server_url_streamable
-      }
-    }
-  } : null,
-  include_file_upload
-);
-$: mcp_json_sse_updated = update_config_with_file_upload(
-  mcp_json_sse,
-  include_file_upload
-);
-$: mcp_json_stdio_updated = update_config_with_file_upload(
-  mcp_json_stdio,
-  include_file_upload
-);
+<script lang="ts">
+	import { Block } from "@gradio/atoms";
+	import CopyButton from "./CopyButton.svelte";
+	import { Tool, Prompt, Resource } from "@gradio/icons";
+	import { format_latency, get_color_from_success_rate } from "./utils";
+	import PercentileChart from "./PercentileChart.svelte";
+
+	export let mcp_server_active: boolean;
+	export let mcp_server_url_streamable: string;
+	export let root: string;
+	export let tools: Tool[];
+	export let all_tools: Tool[] = [];
+	export let selected_tools: Set<string> = new Set();
+	export let mcp_json_stdio: any;
+	export let file_data_present: boolean;
+	export let mcp_docs: string;
+	export let analytics: Record<string, any>;
+	export let config_snippets: Record<string, string>;
+
+	interface ToolParameter {
+		title?: string;
+		type: string;
+		description: string;
+		format?: string;
+		default?: any;
+	}
+
+	interface Tool {
+		name: string;
+		description: string;
+		parameters: Record<string, ToolParameter>;
+		expanded?: boolean;
+		meta: {
+			mcp_type: "tool" | "resource" | "prompt";
+			file_data_present: boolean;
+			endpoint_name: string;
+		};
+	}
+
+	type Transport = "streamable_http" | "stdio";
+	let current_transport: Transport = "streamable_http";
+	let include_file_upload = true;
+
+	const transports = [
+		["streamable_http", "Streamable HTTP"],
+		["stdio", "STDIO"]
+	] as const;
+
+	const tool_type_icons: Record<Tool["meta"]["mcp_type"], typeof Tool> = {
+		tool: Tool,
+		resource: Resource,
+		prompt: Prompt
+	};
+
+	$: display_url = mcp_server_url_streamable;
+
+	// Helper function to add/remove file upload tool from config
+	function update_config_with_file_upload(
+		base_config: any,
+		include_upload: boolean
+	): any {
+		if (!base_config) return null;
+
+		const config = JSON.parse(JSON.stringify(base_config));
+
+		if (include_upload && file_data_present) {
+			const upload_file_mcp_server = {
+				command: "uvx",
+				args: [
+					"--from",
+					"gradio[mcp]",
+					"gradio",
+					"upload-mcp",
+					root,
+					"<UPLOAD_DIRECTORY>"
+				]
+			};
+			config.mcpServers.upload_files_to_gradio = upload_file_mcp_server;
+		} else {
+			delete config.mcpServers?.upload_files_to_gradio;
+		}
+
+		return config;
+	}
+
+	$: mcp_json_streamable_http = update_config_with_file_upload(
+		mcp_json_stdio
+			? {
+					mcpServers: {
+						gradio: {
+							url: mcp_server_url_streamable
+						}
+					}
+				}
+			: null,
+		include_file_upload
+	);
+
+	$: mcp_json_stdio_updated = update_config_with_file_upload(
+		mcp_json_stdio,
+		include_file_upload
+	);
+
+	$: config_snippets = {
+		streamable_http: JSON.stringify(mcp_json_streamable_http, null, 2),
+		stdio: JSON.stringify(mcp_json_stdio_updated, null, 2)
+	};
 </script>
 
 {#if mcp_server_active}
@@ -92,10 +129,8 @@ $: mcp_json_stdio_updated = update_config_with_file_upload(
 		<Block>
 			<div class="mcp-url">
 				<label for="mcp-server-url"
-					><span class="status-indicator active">●</span>MCP Server URL ({current_transport ===
-					"sse"
-						? "SSE"
-						: "Streamable HTTP"})</label
+					><span class="status-indicator active">●</span>MCP Server URL
+					(Streamable HTTP)</label
 				>
 				<div class="textbox">
 					<input id="mcp-server-url" type="text" readonly value={display_url} />
@@ -185,34 +220,19 @@ $: mcp_json_stdio_updated = update_config_with_file_upload(
 									: "⚠︎ No description provided in function docstring"}
 							</span>
 							{#if analytics[tool.meta.endpoint_name]}
-								<span
-									class="tool-analytics"
-									style="color: var(--body-text-color-subdued); margin-left: 1em;"
-								>
-									Total requests: {analytics[tool.meta.endpoint_name]
-										.total_requests}
-									<span style={color}
-										>({Math.round(success_rate * 100)}% successful)</span
+								{@const endpoint_analytics = analytics[tool.meta.endpoint_name]}
+								{@const p50 =
+									endpoint_analytics.process_time_percentiles["50th"]}
+								<div class="tool-analytics-wrapper" style="margin-left: 1em;">
+									<span
+										class="tool-analytics"
+										style="color: var(--body-text-color-subdued);"
 									>
-									&nbsp;|&nbsp; p50/p90/p99:
-									{format_latency(
-										analytics[tool.meta.endpoint_name].process_time_percentiles[
-											"50th"
-										]
-									)}
-									/
-									{format_latency(
-										analytics[tool.meta.endpoint_name].process_time_percentiles[
-											"90th"
-										]
-									)}
-									/
-									{format_latency(
-										analytics[tool.meta.endpoint_name].process_time_percentiles[
-											"99th"
-										]
-									)}
-								</span>
+										{endpoint_analytics.total_requests} requests ({Math.round(
+											success_rate * 100
+										)}% successful, p50: {format_latency(p50)})
+									</span>
+								</div>
 							{/if}
 						</span>
 						<span class="tool-arrow">{tool.expanded ? "▼" : "▶"}</span>
@@ -248,7 +268,7 @@ $: mcp_json_stdio_updated = update_config_with_file_upload(
 	</div>
 	<p>&nbsp;</p>
 
-	{#if current_transport === "streamable_http"}
+	<div class:hidden={current_transport !== "streamable_http"}>
 		<strong>Streamable HTTP Transport</strong>: To add this MCP to clients that
 		support Streamable HTTP, simply add the following configuration to your MCP
 		config.
@@ -256,32 +276,15 @@ $: mcp_json_stdio_updated = update_config_with_file_upload(
 		<Block>
 			<code>
 				<div class="copy">
-					<CopyButton
-						code={JSON.stringify(mcp_json_streamable_http, null, 2)}
-					/>
-				</div>
-				<div>
-					<pre>{JSON.stringify(mcp_json_streamable_http, null, 2)}</pre>
-				</div>
-			</code>
-		</Block>
-	{:else if current_transport === "sse"}
-		<strong>SSE Transport</strong>: The SSE transport has been deprecated by the
-		MCP spec. We recommend using the Streamable HTTP transport instead. But to
-		add this MCP to clients that only support server-sent events (SSE), simply
-		add the following configuration to your MCP config.
-		<p>&nbsp;</p>
-		<Block>
-			<code>
-				<div class="copy">
-					<CopyButton code={JSON.stringify(mcp_json_sse_updated, null, 2)} />
+					<CopyButton code={config_snippets.streamable_http} />
 				</div>
 				<div>
-					<pre>{JSON.stringify(mcp_json_sse_updated, null, 2)}</pre>
+					<pre>{config_snippets.streamable_http}</pre>
 				</div>
 			</code>
 		</Block>
-	{:else if current_transport === "stdio"}
+	</div>
+	<div class:hidden={current_transport !== "stdio"}>
 		<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
@@ -290,14 +293,14 @@ $: mcp_json_stdio_updated = update_config_with_file_upload(
 		<Block>
 			<code>
 				<div class="copy">
-					<CopyButton code={JSON.stringify(mcp_json_stdio_updated, null, 2)} />
+					<CopyButton code={config_snippets.stdio} />
 				</div>
 				<div>
-					<pre>{JSON.stringify(mcp_json_stdio_updated, null, 2)}</pre>
+					<pre>{config_snippets.stdio}</pre>
 				</div>
 			</code>
 		</Block>
-	{/if}
+	</div>
 	{#if file_data_present}
 		<div class="file-upload-section">
 			<label class="checkbox-label">
@@ -338,10 +341,16 @@ $: mcp_json_stdio_updated = update_config_with_file_upload(
 {/if}
 
 <style>
+	.tool-analytics-wrapper {
+		position: relative;
+		display: inline-block;
+	}
+
 	.tool-analytics {
 		font-size: 0.95em;
 		color: var(--body-text-color-subdued);
 	}
+
 	.transport-selection {
 		margin-bottom: var(--size-4);
 	}
@@ -623,4 +632,8 @@ $: mcp_json_stdio_updated = update_config_with_file_upload(
 	a {
 		text-decoration: underline;
 	}
+
+	.hidden {
+		display: none;
+	}
 </style>

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

@@ -1,60 +1,62 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        mcp_server_active: boolean;
-        mcp_server_url: string;
-        mcp_server_url_streamable: string;
-        tools: {
-            name: string;
-            description: string;
-            parameters: Record<string, {
-                title?: string;
-                type: string;
-                description: string;
-                format?: string;
-                default?: any;
-            }>;
-            expanded?: boolean;
-            meta: {
-                mcp_type: "tool" | "resource" | "prompt";
-                file_data_present: boolean;
-                endpoint_name: string;
-            };
-        }[];
-        all_tools?: {
-            name: string;
-            description: string;
-            parameters: Record<string, {
-                title?: string;
-                type: string;
-                description: string;
-                format?: string;
-                default?: any;
-            }>;
-            expanded?: boolean;
-            meta: {
-                mcp_type: "tool" | "resource" | "prompt";
-                file_data_present: boolean;
-                endpoint_name: string;
-            };
-        }[];
-        selected_tools?: Set<string>;
-        mcp_json_sse: any;
-        mcp_json_stdio: any;
-        file_data_present: boolean;
-        mcp_docs: string;
-        analytics: Record<string, any>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
+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;
     };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type McpSnippetProps = typeof __propDef.props;
-export type McpSnippetEvents = typeof __propDef.events;
-export type McpSnippetSlots = typeof __propDef.slots;
-export default class McpSnippet extends SvelteComponent<McpSnippetProps, McpSnippetEvents, McpSnippetSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const MCPSnippet: $$__sveltets_2_IsomorphicComponent<{
+    mcp_server_active: boolean;
+    mcp_server_url_streamable: string;
+    root: string;
+    tools: {
+        name: string;
+        description: string;
+        parameters: Record<string, {
+            title?: string;
+            type: string;
+            description: string;
+            format?: string;
+            default?: any;
+        }>;
+        expanded?: boolean;
+        meta: {
+            mcp_type: "tool" | "resource" | "prompt";
+            file_data_present: boolean;
+            endpoint_name: string;
+        };
+    }[];
+    all_tools?: {
+        name: string;
+        description: string;
+        parameters: Record<string, {
+            title?: string;
+            type: string;
+            description: string;
+            format?: string;
+            default?: any;
+        }>;
+        expanded?: boolean;
+        meta: {
+            mcp_type: "tool" | "resource" | "prompt";
+            file_data_present: boolean;
+            endpoint_name: string;
+        };
+    }[];
+    selected_tools?: Set<string>;
+    mcp_json_stdio: any;
+    file_data_present: boolean;
+    mcp_docs: string;
+    analytics: Record<string, any>;
+    config_snippets: Record<string, string>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MCPSnippet = InstanceType<typeof MCPSnippet>;
+export default MCPSnippet;

package/dist/src/api_docs/NoApi.svelte

@@ -1,7 +1,10 @@
-<script>import { createEventDispatcher } from "svelte";
-import Clear from "./img/clear.svelte";
-const dispatch = createEventDispatcher();
-export let root;
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import Clear from "./img/clear.svelte";
+
+	const dispatch = createEventDispatcher();
+
+	export let root: string;
 </script>
 
 <div class="wrap prose">

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

@@ -1,20 +1,22 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        root: string;
+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;
     };
-    events: {
-        close: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type NoApiProps = typeof __propDef.props;
-export type NoApiEvents = typeof __propDef.events;
-export type NoApiSlots = typeof __propDef.slots;
-export default class NoApi extends SvelteComponent<NoApiProps, NoApiEvents, NoApiSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const NoApi: $$__sveltets_2_IsomorphicComponent<{
+    root: string;
+}, {
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NoApi = InstanceType<typeof NoApi>;
+export default NoApi;

package/dist/src/api_docs/ParametersSnippet.svelte

@@ -1,9 +1,11 @@
-<script>import { Loader } from "@gradio/statustracker";
-import { represent_value } from "./utils";
-export let is_running;
-export let endpoint_returns;
-export let js_returns;
-export let current_language;
+<script lang="ts">
+	import { Loader } from "@gradio/statustracker";
+	import { represent_value } from "./utils";
+
+	export let is_running: boolean;
+	export let endpoint_returns: any;
+	export let js_returns: any;
+	export let current_language: "python" | "javascript" | "bash" | "mcp";
 </script>
 
 <h4>

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

@@ -1,21 +1,23 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        is_running: boolean;
-        endpoint_returns: any;
-        js_returns: any;
-        current_language: "python" | "javascript" | "bash";
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ParametersSnippetProps = typeof __propDef.props;
-export type ParametersSnippetEvents = typeof __propDef.events;
-export type ParametersSnippetSlots = typeof __propDef.slots;
-export default class ParametersSnippet extends SvelteComponent<ParametersSnippetProps, ParametersSnippetEvents, ParametersSnippetSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ParametersSnippet: $$__sveltets_2_IsomorphicComponent<{
+    is_running: boolean;
+    endpoint_returns: any;
+    js_returns: any;
+    current_language: "python" | "javascript" | "bash" | "mcp";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ParametersSnippet = InstanceType<typeof ParametersSnippet>;
+export default ParametersSnippet;