@gradio/core 0.27.1 → 0.27.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @gradio/core
 
+## 0.27.2
+
+### Features
+
+- [#11764](https://github.com/gradio-app/gradio/pull/11764) [`e6ce731`](https://github.com/gradio-app/gradio/commit/e6ce731bbcf2889c8147e57bc2ca97e2c731ddf5) - Display performance metrics for API/MCP requests in View API page.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.18
+
 ## 0.27.1
 
 ### Features

package/dist/src/api_docs/ApiDocs.svelte

@@ -69,12 +69,21 @@ async function get_js_info() {
 }
 let info;
 let js_info;
+let analytics;
 get_info().then((data) => {
   info = data;
 });
 get_js_info().then((js_api_info) => {
   js_info = js_api_info;
 });
+async function get_summary() {
+  let response = await fetch(root.replace(/\/$/, "") + "/monitoring/summary");
+  let data = await response.json();
+  return data;
+}
+get_summary().then((summary) => {
+  analytics = summary.functions;
+});
 const dispatch = createEventDispatcher();
 $: selected_tools_array = Array.from(selected_tools);
 $: selected_tools_without_prefix = selected_tools_array.map(remove_tool_prefix);
@@ -122,7 +131,8 @@ async function fetch_mcp_tools() {
       description: tool.description || "",
       parameters: tool.inputSchema?.properties || {},
       meta: tool.meta,
-      expanded: false
+      expanded: false,
+      endpoint_name: tool.endpoint_name
     }));
     selected_tools = new Set(tools.map((tool) => tool.name));
     headers = schema.map((tool) => tool.meta?.headers || []).flat();
@@ -185,6 +195,8 @@ async function fetch_mcp_tools() {
   }
 }
 onMount(() => {
+  const controller = new AbortController();
+  const signal = controller.signal;
   document.body.style.overflow = "hidden";
   if ("parentIFrame" in window) {
     window.parentIFrame?.scrollTo(0, 0);
@@ -193,7 +205,7 @@ onMount(() => {
   if (is_valid_language(lang_param)) {
     current_language = lang_param;
   }
-  fetch(mcp_server_url).then((response) => {
+  fetch(mcp_server_url, { signal }).then((response) => {
     mcp_server_active = response.ok;
     if (mcp_server_active) {
       fetch_mcp_tools();
@@ -205,6 +217,7 @@ onMount(() => {
         current_language = "python";
       }
     }
+    controller.abort();
   }).catch(() => {
     mcp_server_active = false;
   });
@@ -214,7 +227,7 @@ onMount(() => {
 });
 </script>
 
-{#if info}
+{#if info && analytics}
 	{#if api_count}
 		<div class="banner-wrap">
 			<ApiBanner
@@ -304,6 +317,7 @@ onMount(() => {
 								{mcp_json_stdio}
 								{file_data_present}
 								{mcp_docs}
+								{analytics}
 							/>
 						{:else}
 							1. Confirm that you have cURL installed on your system.
@@ -380,6 +394,7 @@ onMount(() => {
 									api_description={info.named_endpoints[
 										"/" + dependency.api_name
 									].description}
+									{analytics}
 								/>
 
 								<ParametersSnippet

package/dist/src/api_docs/CodeSnippet.svelte

@@ -10,6 +10,7 @@ export let endpoint_parameters;
 export let username;
 export let current_language;
 export let api_description = null;
+export let analytics;
 let python_code;
 let js_code;
 let bash_post_code;
@@ -29,6 +30,7 @@ $: normalised_root = root.replace(/\/$/, "");
 	<EndpointDetail
 		api_name={dependency.api_name}
 		description={api_description}
+		{analytics}
 	/>
 	{#if current_language === "python"}
 		<Block>
@@ -41,13 +43,13 @@ $: normalised_root = root.replace(/\/$/, "");
 							class="highlight">import</span
 						> Client{#if has_file_path}, handle_file{/if}
 
-client = Client(<span class="token string">"{space_id || root}"</span
+	client = Client(<span class="token string">"{space_id || root}"</span
 						>{#if username !== null}, auth=("{username}", **password**){/if})
-result = client.<span class="highlight">predict</span
+	result = client.<span class="highlight">predict</span
 						>(<!--
--->{#each endpoint_parameters as { python_type, example_input, parameter_name, parameter_has_default, parameter_default }, i}<!--
-        -->
-		{parameter_name
+	-->{#each endpoint_parameters as { python_type, example_input, parameter_name, parameter_has_default, parameter_default }, i}<!--
+			-->
+			{parameter_name
 								? parameter_name + "="
 								: ""}<span
 								>{represent_value(
@@ -57,11 +59,11 @@ result = client.<span class="highlight">predict</span
 								)}</span
 							>,{/each}<!--
 
-		-->
-		api_name=<span class="api-name">"/{dependency.api_name}"</span><!--
-		-->
-)
-<span class="highlight">print</span>(result)</pre>
+			-->
+			api_name=<span class="api-name">"/{dependency.api_name}"</span><!--
+			-->
+	)
+	<span class="highlight">print</span>(result)</pre>
 				</div>
 			</code>
 		</Block>
@@ -73,44 +75,44 @@ result = client.<span class="highlight">predict</span
 				</div>
 				<div bind:this={js_code}>
 					<pre>import &lbrace; Client &rbrace; from "@gradio/client";
-{#each blob_examples as { component, example_input }, i}<!--
--->
-const response_{i} = await fetch("{example_input.url}");
-const example{component} = await response_{i}.blob();
+	{#each blob_examples as { component, example_input }, i}<!--
+	-->
+	const response_{i} = await fetch("{example_input.url}");
+	const example{component} = await response_{i}.blob();
 						{/each}<!--
--->
-const client = await Client.connect(<span class="token string"
+	-->
+	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(<span class="api-name"
+	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)}<!--
-	-->
-				<span
+	-->{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}<!--
+			-->{#if blob_components.includes(component)}<!--
+		-->
+					<span
 									class="example-inputs"
 									>{parameter_name}: example{component}</span
 								>, <!--
-		--><span class="desc"><!--
-		--></span
+			--><span class="desc"><!--
+			--></span
 								><!--
-		-->{:else}<!--
-	-->		
-		<span class="example-inputs"
+			-->{:else}<!--
+		-->		
+			<span class="example-inputs"
 									>{parameter_name}: {represent_value(
 										example_input,
 										python_type.type,
 										"js"
 									)}</span
 								>, <!--
---><!--
--->{/if}
+	--><!--
+	-->{/if}
 						{/each}
-&rbrace;);
+	&rbrace;);
 
-console.log(result.data);
-</pre>
+	console.log(result.data);
+	</pre>
 				</div>
 			</code>
 		</Block>
@@ -123,18 +125,18 @@ console.log(result.data);
 
 				<div bind:this={bash_post_code}>
 					<pre>curl -X POST {normalised_root}{normalised_api_prefix}/call/{dependency.api_name} -s -H "Content-Type: application/json" -d '{"{"}
-  "data": [{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}
+	"data": [{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}
 							<!-- 
--->{represent_value(
+	-->{represent_value(
 								example_input,
 								python_type.type,
 								"bash"
 							)}{#if i < endpoint_parameters.length - 1},
 							{/if}
 						{/each}
-]{"}"}' \
-  | awk -F'"' '{"{"} print $4{"}"}'  \
-  | read EVENT_ID; curl -N {normalised_root}{normalised_api_prefix}/call/{dependency.api_name}/$EVENT_ID</pre>
+	]{"}"}' \
+	| awk -F'"' '{"{"} print $4{"}"}'  \
+	| read EVENT_ID; curl -N {normalised_root}{normalised_api_prefix}/call/{dependency.api_name}/$EVENT_ID</pre>
 				</div>
 			</code>
 		</Block>

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         username: string | null;
         current_language: "python" | "javascript" | "bash";
         api_description?: string | null;
+        analytics: Record<string, any>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/src/api_docs/EndpointDetail.svelte

@@ -1,11 +1,28 @@
 <script>export let api_name = null;
 export let description = null;
+export let analytics;
+import { format_latency, get_color_from_success_rate } from "./utils";
+const success_rate = api_name ? analytics[api_name]?.success_rate : 0;
+const color = get_color_from_success_rate(success_rate);
 </script>
 
 <h3>
 	API name:
 	<span class="post">{"/" + api_name}</span>
 	<span class="desc">{description}</span>
+	{#if analytics && api_name && analytics[api_name]}
+		<span class="analytics">
+			Total requests: {analytics[api_name].total_requests} (<span style={color}
+				>{Math.round(success_rate * 100)}%</span
+			>
+			successful) &nbsp;|&nbsp; p50/p90/p99:
+			{format_latency(analytics[api_name].process_time_percentiles["50th"])}
+			/
+			{format_latency(analytics[api_name].process_time_percentiles["90th"])}
+			/
+			{format_latency(analytics[api_name].process_time_percentiles["99th"])}
+		</span>
+	{/if}
 </h3>
 
 <style>
@@ -27,8 +44,13 @@ export let description = null;
 		font-weight: var(--weight-semibold);
 	}
 
-	.desc {
+	.analytics {
 		color: var(--body-text-color-subdued);
+		margin-top: var(--size-1);
+	}
+
+	.desc {
+		color: var(--body-text-color);
 		font-size: var(--text-lg);
 		margin-top: var(--size-1);
 	}

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

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         api_name?: string | null;
         description?: string | null;
+        analytics: Record<string, any>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/src/api_docs/MCPSnippet.svelte

@@ -1,6 +1,7 @@
 <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;
@@ -11,6 +12,7 @@ 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 = [
@@ -137,6 +139,9 @@ $: mcp_json_stdio_updated = update_config_with_file_upload(
 	</div>
 	<div class="mcp-tools">
 		{#each all_tools.length > 0 ? all_tools : tools as tool}
+			{@const success_rate =
+				analytics[tool.meta.endpoint_name]?.success_rate || 0}
+			{@const color = get_color_from_success_rate(success_rate)}
 			<div class="tool-item">
 				<div class="tool-header-wrapper">
 					{#if all_tools.length > 0}
@@ -179,6 +184,36 @@ $: mcp_json_stdio_updated = update_config_with_file_upload(
 									? tool.description
 									: "⚠︎ 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
+									>
+									&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>
+							{/if}
 						</span>
 						<span class="tool-arrow">{tool.expanded ? "▼" : "▶"}</span>
 					</button>
@@ -303,6 +338,10 @@ $: mcp_json_stdio_updated = update_config_with_file_upload(
 {/if}
 
 <style>
+	.tool-analytics {
+		font-size: 0.95em;
+		color: var(--body-text-color-subdued);
+	}
 	.transport-selection {
 		margin-bottom: var(--size-4);
 	}

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

@@ -18,6 +18,7 @@ declare const __propDef: {
             meta: {
                 mcp_type: "tool" | "resource" | "prompt";
                 file_data_present: boolean;
+                endpoint_name: string;
             };
         }[];
         all_tools?: {
@@ -34,6 +35,7 @@ declare const __propDef: {
             meta: {
                 mcp_type: "tool" | "resource" | "prompt";
                 file_data_present: boolean;
+                endpoint_name: string;
             };
         }[];
         selected_tools?: Set<string>;
@@ -41,6 +43,7 @@ declare const __propDef: {
         mcp_json_stdio: any;
         file_data_present: boolean;
         mcp_docs: string;
+        analytics: Record<string, any>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,2 +1,4 @@
 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

@@ -133,3 +133,17 @@ function stringify_except_file_function(obj) {
     const regexNone = /"UNQUOTEDNone"/g;
     return jsonString.replace(regexNone, "None");
 }
+export function format_latency(val) {
+    if (val < 1)
+        return `${Math.round(val * 1000)} ms`;
+    return `${val.toFixed(2)} s`;
+}
+export function get_color_from_success_rate(success_rate) {
+    if (success_rate > 0.9) {
+        return "color: green;";
+    }
+    else if (success_rate > 0.1) {
+        return "color: orange;";
+    }
+    return "color: red;";
+}

package/package.json

@@ -1,69 +1,69 @@
 {
   "name": "@gradio/core",
-  "version": "0.27.1",
+  "version": "0.27.2",
   "type": "module",
   "devDependencies": {
     "@gradio/accordion": "^0.5.22",
     "@gradio/annotatedimage": "^0.9.29",
-    "@gradio/atoms": "^0.16.5",
+    "@gradio/audio": "^0.17.26",
     "@gradio/box": "^0.2.23",
-    "@gradio/audio": "^0.17.25",
     "@gradio/browserstate": "^0.3.2",
+    "@gradio/atoms": "^0.16.5",
     "@gradio/button": "^0.5.11",
-    "@gradio/chatbot": "^0.26.22",
     "@gradio/checkbox": "^0.4.28",
+    "@gradio/chatbot": "^0.26.23",
     "@gradio/checkboxgroup": "^0.6.27",
-    "@gradio/client": "^1.17.1",
     "@gradio/code": "^0.14.15",
+    "@gradio/client": "^1.17.1",
     "@gradio/colorpicker": "^0.4.27",
     "@gradio/column": "^0.2.1",
-    "@gradio/dataframe": "^0.19.0",
+    "@gradio/dataframe": "^0.19.1",
     "@gradio/dataset": "^0.4.32",
+    "@gradio/dropdown": "^0.10.2",
+    "@gradio/fallback": "^0.4.27",
     "@gradio/datetime": "^0.3.20",
     "@gradio/downloadbutton": "^0.4.11",
-    "@gradio/fallback": "^0.4.27",
-    "@gradio/file": "^0.12.28",
-    "@gradio/dropdown": "^0.10.2",
     "@gradio/fileexplorer": "^0.5.39",
+    "@gradio/file": "^0.12.28",
     "@gradio/form": "^0.2.23",
-    "@gradio/gallery": "^0.15.31",
     "@gradio/group": "^0.2.0",
-    "@gradio/highlightedtext": "^0.9.10",
     "@gradio/html": "^0.7.0",
-    "@gradio/image": "^0.22.17",
     "@gradio/icons": "^0.13.1",
+    "@gradio/highlightedtext": "^0.9.10",
+    "@gradio/gallery": "^0.15.31",
     "@gradio/imageeditor": "^0.16.5",
+    "@gradio/image": "^0.22.17",
     "@gradio/imageslider": "^0.2.13",
     "@gradio/json": "^0.5.29",
     "@gradio/label": "^0.5.19",
-    "@gradio/markdown": "^0.13.20",
     "@gradio/model3d": "^0.14.25",
-    "@gradio/nativeplot": "^0.7.4",
+    "@gradio/markdown": "^0.13.20",
     "@gradio/number": "^0.6.4",
     "@gradio/multimodaltextbox": "^0.10.17",
     "@gradio/paramviewer": "^0.7.15",
+    "@gradio/nativeplot": "^0.7.4",
     "@gradio/plot": "^0.9.22",
-    "@gradio/radio": "^0.7.10",
     "@gradio/row": "^0.2.1",
     "@gradio/sidebar": "^0.1.20",
+    "@gradio/radio": "^0.7.10",
     "@gradio/simpledropdown": "^0.3.27",
-    "@gradio/simpleimage": "^0.8.39",
     "@gradio/simpletextbox": "^0.3.28",
-    "@gradio/sketchbox": "^0.6.15",
     "@gradio/state": "^0.1.2",
-    "@gradio/slider": "^0.6.16",
-    "@gradio/statustracker": "^0.10.17",
+    "@gradio/sketchbox": "^0.6.15",
+    "@gradio/simpleimage": "^0.8.39",
+    "@gradio/statustracker": "^0.10.18",
     "@gradio/tabitem": "^0.5.0",
-    "@gradio/tabs": "^0.4.5",
+    "@gradio/slider": "^0.6.16",
     "@gradio/textbox": "^0.10.20",
-    "@gradio/timer": "^0.4.5",
+    "@gradio/tabs": "^0.4.5",
     "@gradio/theme": "^0.4.0",
-    "@gradio/upload": "^0.16.16",
-    "@gradio/vibeeditor": "^0.2.2",
     "@gradio/uploadbutton": "^0.9.11",
-    "@gradio/video": "^0.15.0",
+    "@gradio/upload": "^0.16.16",
+    "@gradio/timer": "^0.4.5",
     "@gradio/utils": "^0.10.2",
-    "@gradio/wasm": "^0.18.1"
+    "@gradio/vibeeditor": "^0.2.2",
+    "@gradio/wasm": "^0.18.1",
+    "@gradio/video": "^0.15.0"
   },
   "msw": {
     "workerDirectory": "public"

package/src/api_docs/ApiDocs.svelte

@@ -99,6 +99,7 @@
 	};
 
 	let js_info: Record<string, any>;
+	let analytics: Record<string, any>;
 
 	get_info().then((data) => {
 		info = data;
@@ -108,6 +109,18 @@
 		js_info = js_api_info;
 	});
 
+	async function get_summary(): Promise<{
+		functions: any;
+	}> {
+		let response = await fetch(root.replace(/\/$/, "") + "/monitoring/summary");
+		let data = await response.json();
+		return data;
+	}
+
+	get_summary().then((summary) => {
+		analytics = summary.functions;
+	});
+
 	const dispatch = createEventDispatcher();
 
 	$: selected_tools_array = Array.from(selected_tools);
@@ -148,6 +161,7 @@
 		meta: {
 			mcp_type: "tool" | "resource" | "prompt";
 			file_data_present: boolean;
+			endpoint_name: string;
 		};
 	}
 
@@ -192,7 +206,8 @@
 				description: tool.description || "",
 				parameters: tool.inputSchema?.properties || {},
 				meta: tool.meta,
-				expanded: false
+				expanded: false,
+				endpoint_name: tool.endpoint_name
 			}));
 			selected_tools = new Set(tools.map((tool) => tool.name));
 			headers = schema.map((tool: any) => tool.meta?.headers || []).flat();
@@ -260,6 +275,9 @@
 	}
 
 	onMount(() => {
+		const controller = new AbortController();
+		const signal = controller.signal;
+
 		document.body.style.overflow = "hidden";
 		if ("parentIFrame" in window) {
 			window.parentIFrame?.scrollTo(0, 0);
@@ -271,7 +289,7 @@
 		}
 
 		// Check MCP server status and fetch tools if active
-		fetch(mcp_server_url)
+		fetch(mcp_server_url, { signal: signal })
 			.then((response) => {
 				mcp_server_active = response.ok;
 				if (mcp_server_active) {
@@ -284,6 +302,7 @@
 						current_language = "python";
 					}
 				}
+				controller.abort();
 			})
 			.catch(() => {
 				mcp_server_active = false;
@@ -295,7 +314,7 @@
 	});
 </script>
 
-{#if info}
+{#if info && analytics}
 	{#if api_count}
 		<div class="banner-wrap">
 			<ApiBanner
@@ -385,6 +404,7 @@
 								{mcp_json_stdio}
 								{file_data_present}
 								{mcp_docs}
+								{analytics}
 							/>
 						{:else}
 							1. Confirm that you have cURL installed on your system.
@@ -461,6 +481,7 @@
 									api_description={info.named_endpoints[
 										"/" + dependency.api_name
 									].description}
+									{analytics}
 								/>
 
 								<ParametersSnippet

package/src/api_docs/CodeSnippet.svelte

@@ -22,6 +22,7 @@
 	export let username: string | null;
 	export let current_language: "python" | "javascript" | "bash";
 	export let api_description: string | null = null;
+	export let analytics: Record<string, any>;
 
 	let python_code: HTMLElement;
 	let js_code: HTMLElement;
@@ -44,6 +45,7 @@
 	<EndpointDetail
 		api_name={dependency.api_name}
 		description={api_description}
+		{analytics}
 	/>
 	{#if current_language === "python"}
 		<Block>
@@ -56,13 +58,13 @@
 							class="highlight">import</span
 						> Client{#if has_file_path}, handle_file{/if}
 
-client = Client(<span class="token string">"{space_id || root}"</span
+	client = Client(<span class="token string">"{space_id || root}"</span
 						>{#if username !== null}, auth=("{username}", **password**){/if})
-result = client.<span class="highlight">predict</span
+	result = client.<span class="highlight">predict</span
 						>(<!--
--->{#each endpoint_parameters as { python_type, example_input, parameter_name, parameter_has_default, parameter_default }, i}<!--
-        -->
-		{parameter_name
+	-->{#each endpoint_parameters as { python_type, example_input, parameter_name, parameter_has_default, parameter_default }, i}<!--
+			-->
+			{parameter_name
 								? parameter_name + "="
 								: ""}<span
 								>{represent_value(
@@ -72,11 +74,11 @@ result = client.<span class="highlight">predict</span
 								)}</span
 							>,{/each}<!--
 
-		-->
-		api_name=<span class="api-name">"/{dependency.api_name}"</span><!--
-		-->
-)
-<span class="highlight">print</span>(result)</pre>
+			-->
+			api_name=<span class="api-name">"/{dependency.api_name}"</span><!--
+			-->
+	)
+	<span class="highlight">print</span>(result)</pre>
 				</div>
 			</code>
 		</Block>
@@ -88,44 +90,44 @@ result = client.<span class="highlight">predict</span
 				</div>
 				<div bind:this={js_code}>
 					<pre>import &lbrace; Client &rbrace; from "@gradio/client";
-{#each blob_examples as { component, example_input }, i}<!--
--->
-const response_{i} = await fetch("{example_input.url}");
-const example{component} = await response_{i}.blob();
+	{#each blob_examples as { component, example_input }, i}<!--
+	-->
+	const response_{i} = await fetch("{example_input.url}");
+	const example{component} = await response_{i}.blob();
 						{/each}<!--
--->
-const client = await Client.connect(<span class="token string"
+	-->
+	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(<span class="api-name"
+	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)}<!--
-	-->
-				<span
+	-->{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}<!--
+			-->{#if blob_components.includes(component)}<!--
+		-->
+					<span
 									class="example-inputs"
 									>{parameter_name}: example{component}</span
 								>, <!--
-		--><span class="desc"><!--
-		--></span
+			--><span class="desc"><!--
+			--></span
 								><!--
-		-->{:else}<!--
-	-->		
-		<span class="example-inputs"
+			-->{:else}<!--
+		-->		
+			<span class="example-inputs"
 									>{parameter_name}: {represent_value(
 										example_input,
 										python_type.type,
 										"js"
 									)}</span
 								>, <!--
---><!--
--->{/if}
+	--><!--
+	-->{/if}
 						{/each}
-&rbrace;);
+	&rbrace;);
 
-console.log(result.data);
-</pre>
+	console.log(result.data);
+	</pre>
 				</div>
 			</code>
 		</Block>
@@ -138,18 +140,18 @@ console.log(result.data);
 
 				<div bind:this={bash_post_code}>
 					<pre>curl -X POST {normalised_root}{normalised_api_prefix}/call/{dependency.api_name} -s -H "Content-Type: application/json" -d '{"{"}
-  "data": [{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}
+	"data": [{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}
 							<!-- 
--->{represent_value(
+	-->{represent_value(
 								example_input,
 								python_type.type,
 								"bash"
 							)}{#if i < endpoint_parameters.length - 1},
 							{/if}
 						{/each}
-]{"}"}' \
-  | awk -F'"' '{"{"} print $4{"}"}'  \
-  | read EVENT_ID; curl -N {normalised_root}{normalised_api_prefix}/call/{dependency.api_name}/$EVENT_ID</pre>
+	]{"}"}' \
+	| awk -F'"' '{"{"} print $4{"}"}'  \
+	| read EVENT_ID; curl -N {normalised_root}{normalised_api_prefix}/call/{dependency.api_name}/$EVENT_ID</pre>
 				</div>
 			</code>
 		</Block>

package/src/api_docs/EndpointDetail.svelte

@@ -1,12 +1,30 @@
 <script lang="ts">
 	export let api_name: string | null = null;
 	export let description: string | null = null;
+	export let analytics: Record<string, any>;
+	import { format_latency, get_color_from_success_rate } from "./utils";
+
+	const success_rate = api_name ? analytics[api_name]?.success_rate : 0;
+	const color = get_color_from_success_rate(success_rate);
 </script>
 
 <h3>
 	API name:
 	<span class="post">{"/" + api_name}</span>
 	<span class="desc">{description}</span>
+	{#if analytics && api_name && analytics[api_name]}
+		<span class="analytics">
+			Total requests: {analytics[api_name].total_requests} (<span style={color}
+				>{Math.round(success_rate * 100)}%</span
+			>
+			successful) &nbsp;|&nbsp; p50/p90/p99:
+			{format_latency(analytics[api_name].process_time_percentiles["50th"])}
+			/
+			{format_latency(analytics[api_name].process_time_percentiles["90th"])}
+			/
+			{format_latency(analytics[api_name].process_time_percentiles["99th"])}
+		</span>
+	{/if}
 </h3>
 
 <style>
@@ -28,8 +46,13 @@
 		font-weight: var(--weight-semibold);
 	}
 
-	.desc {
+	.analytics {
 		color: var(--body-text-color-subdued);
+		margin-top: var(--size-1);
+	}
+
+	.desc {
+		color: var(--body-text-color);
 		font-size: var(--text-lg);
 		margin-top: var(--size-1);
 	}

package/src/api_docs/MCPSnippet.svelte

@@ -2,6 +2,7 @@
 	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: boolean;
 	export let mcp_server_url: string;
@@ -13,6 +14,7 @@
 	export let mcp_json_stdio: any;
 	export let file_data_present: boolean;
 	export let mcp_docs: string;
+	export let analytics: Record<string, any>;
 
 	interface ToolParameter {
 		title?: string;
@@ -30,6 +32,7 @@
 		meta: {
 			mcp_type: "tool" | "resource" | "prompt";
 			file_data_present: boolean;
+			endpoint_name: string;
 		};
 	}
 
@@ -178,6 +181,9 @@
 	</div>
 	<div class="mcp-tools">
 		{#each all_tools.length > 0 ? all_tools : tools as tool}
+			{@const success_rate =
+				analytics[tool.meta.endpoint_name]?.success_rate || 0}
+			{@const color = get_color_from_success_rate(success_rate)}
 			<div class="tool-item">
 				<div class="tool-header-wrapper">
 					{#if all_tools.length > 0}
@@ -220,6 +226,36 @@
 									? tool.description
 									: "⚠︎ 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
+									>
+									&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>
+							{/if}
 						</span>
 						<span class="tool-arrow">{tool.expanded ? "▼" : "▶"}</span>
 					</button>
@@ -344,6 +380,10 @@
 {/if}
 
 <style>
+	.tool-analytics {
+		font-size: 0.95em;
+		color: var(--body-text-color-subdued);
+	}
 	.transport-selection {
 		margin-bottom: var(--size-4);
 	}

package/src/api_docs/utils.ts

@@ -141,3 +141,17 @@ function stringify_except_file_function(obj: any): string {
 	const regexNone = /"UNQUOTEDNone"/g;
 	return jsonString.replace(regexNone, "None");
 }
+
+export function format_latency(val: number): string {
+	if (val < 1) return `${Math.round(val * 1000)} ms`;
+	return `${val.toFixed(2)} s`;
+}
+
+export function get_color_from_success_rate(success_rate: number): string {
+	if (success_rate > 0.9) {
+		return "color: green;";
+	} else if (success_rate > 0.1) {
+		return "color: orange;";
+	}
+	return "color: red;";
+}