@gradio/core 0.27.0 → 0.27.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @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
+
+- [#11767](https://github.com/gradio-app/gradio/pull/11767) [`f67faa4`](https://github.com/gradio-app/gradio/commit/f67faa464add0ef6a4a58d60eb2ae850125ebb87) - Use icons instead of Emojis in MCP page.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/icons@0.13.1
+- @gradio/upload@0.16.16
+
 ## 0.27.0
 
 ### Features

package/dist/src/Blocks.svelte

@@ -53,17 +53,15 @@ let {
 } = create_components({
   initial_layout
 });
-$:
-  components, layout, dependencies, root, app, fill_height, target, run();
+$: components, layout, dependencies, root, app, fill_height, target, run();
 $: {
   ready = !!$_layout;
 }
 let old_dependencies = dependencies;
-$:
-  if (dependencies !== old_dependencies && render_complete && !layout_creating) {
-    handle_load_triggers();
-    old_dependencies = dependencies;
-  }
+$: if (dependencies !== old_dependencies && render_complete && !layout_creating) {
+  handle_load_triggers();
+  old_dependencies = dependencies;
+}
 let vibe_editor_width = 350;
 async function run() {
   await setupi18n(app.config?.i18n_translations || void 0);
@@ -94,10 +92,8 @@ async function loadApiDocs() {
   if (!ApiDocs || !ApiRecorder) {
     const api_docs_module = await import("./api_docs/ApiDocs.svelte");
     const api_recorder_module = await import("./api_docs/ApiRecorder.svelte");
-    if (!ApiDocs)
-      ApiDocs = api_docs_module.default;
-    if (!ApiRecorder)
-      ApiRecorder = api_recorder_module.default;
+    if (!ApiDocs) ApiDocs = api_docs_module.default;
+    if (!ApiRecorder) ApiRecorder = api_recorder_module.default;
   }
 }
 async function loadApiRecorder() {
@@ -405,8 +401,7 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
       );
     } catch (e) {
       const fn_index = 0;
-      if (app.closed)
-        return;
+      if (app.closed) return;
       messages = [
         new_message("Error", String(e), fn_index, "error"),
         ...messages
@@ -637,11 +632,9 @@ async function handle_mount() {
       a[i].setAttribute("target", "_blank");
   }
   handle_load_triggers();
-  if (!target || render_complete)
-    return;
+  if (!target || render_complete) return;
   target.addEventListener("prop_change", (e) => {
-    if (!isCustomEvent(e))
-      throw new Error("not a custom event");
+    if (!isCustomEvent(e)) throw new Error("not a custom event");
     const { id, prop, value } = e.detail;
     update_value([{ id, prop, value }]);
     if (prop === "input_ready" && value === false) {
@@ -652,8 +645,7 @@ async function handle_mount() {
     }
   });
   target.addEventListener("gradio", (e) => {
-    if (!isCustomEvent(e))
-      throw new Error("not a custom event");
+    if (!isCustomEvent(e)) throw new Error("not a custom event");
     const { id, event, data } = e.detail;
     if (event === "share") {
       const { title: title2, description } = data;
@@ -701,8 +693,7 @@ const handle_load_triggers = () => {
     }
   });
 };
-$:
-  set_status($loading_status);
+$: set_status($loading_status);
 function update_status(id, status, data) {
   data.status = status;
   update_value([

package/dist/src/Blocks.svelte.d.ts

@@ -9,34 +9,36 @@ declare const __propDef: {
         components: ComponentMeta[];
         layout: LayoutNode;
         dependencies: Dependency[];
-        title?: string | undefined;
+        title?: string;
         target: HTMLElement;
         autoscroll: boolean;
-        show_api?: boolean | undefined;
-        show_footer?: boolean | undefined;
-        control_page_title?: boolean | undefined;
+        show_api?: boolean;
+        show_footer?: boolean;
+        control_page_title?: boolean;
         app_mode: boolean;
         theme_mode: ThemeMode;
         app: Awaited<ReturnType<typeof Client.connect>>;
         space_id: string | null;
         version: string;
         js: string | null;
-        fill_height?: boolean | undefined;
+        fill_height?: boolean;
         ready: boolean;
         username: string | null;
-        api_prefix?: string | undefined;
+        api_prefix?: string;
         max_file_size?: number | undefined;
         initial_layout?: ComponentMeta | undefined;
         css?: string | null | undefined;
-        vibe_mode?: boolean | undefined;
+        vibe_mode?: boolean;
         search_params: URLSearchParams;
-        render_complete?: boolean | undefined;
-        add_new_message?: ((title: string, message: string, type: ToastMessage["type"]) => void) | undefined;
+        render_complete?: boolean;
+        add_new_message?: (title: string, message: string, type: ToastMessage["type"]) => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type BlocksProps = typeof __propDef.props;
 export type BlocksEvents = typeof __propDef.events;

package/dist/src/Embed.svelte.d.ts

@@ -11,8 +11,8 @@ declare const __propDef: {
         display: boolean;
         info: boolean;
         loaded: boolean;
-        pages?: [string, string][] | undefined;
-        current_page?: string | undefined;
+        pages?: [string, string][];
+        current_page?: string;
         root: string;
     };
     events: {
@@ -21,6 +21,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type EmbedProps = typeof __propDef.props;
 export type EmbedEvents = typeof __propDef.events;

package/dist/src/Login.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type LoginProps = typeof __propDef.props;
 export type LoginEvents = typeof __propDef.events;

package/dist/src/MountComponents.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         theme_mode: any;
         version: any;
         autoscroll: boolean;
-        max_file_size?: (number | null) | undefined;
+        max_file_size?: number | null;
         client: Client;
     };
     events: {
@@ -17,6 +17,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type MountComponentsProps = typeof __propDef.props;
 export type MountComponentsEvents = typeof __propDef.events;

package/dist/src/Render.svelte

@@ -48,19 +48,18 @@ $: {
     }
   }
 }
-$:
-  node.props.gradio = new Gradio(
-    node.id,
-    target,
-    theme_mode,
-    version,
-    root,
-    autoscroll,
-    max_file_size,
-    $reactive_formatter,
-    client,
-    load_component
-  );
+$: node.props.gradio = new Gradio(
+  node.id,
+  target,
+  theme_mode,
+  version,
+  root,
+  autoscroll,
+  max_file_size,
+  $reactive_formatter,
+  client,
+  load_component
+);
 </script>
 
 {#if node.component}

package/dist/src/Render.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
     props: {
         root: string;
         node: ComponentMeta;
-        parent?: (string | null) | undefined;
+        parent?: string | null;
         target: HTMLElement;
         theme_mode: ThemeMode;
         version: string;
@@ -20,6 +20,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type RenderProps = typeof __propDef.props;
 export type RenderEvents = typeof __propDef.events;

package/dist/src/RenderComponent.svelte

@@ -20,8 +20,7 @@ function wrap(component2) {
       const props = Object.keys(instance2.$$.props);
       function report(props2) {
         return function(propargs) {
-          if (!target)
-            return;
+          if (!target) return;
           const ev = s(_id, props2, propargs);
           target.dispatchEvent(ev);
         };
@@ -50,10 +49,8 @@ function translate_prop(obj) {
     }
   }
 }
-$:
-  translate_prop($$restProps);
-$:
-  value = translate_if_needed(value);
+$: translate_prop($$restProps);
+$: value = translate_if_needed(value);
 </script>
 
 {#if visible}

package/dist/src/RenderComponent.svelte.d.ts

@@ -22,6 +22,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type RenderComponentProps = typeof __propDef.props;
 export type RenderComponentEvents = typeof __propDef.events;

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

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         root: string;
         api_count: number;
-        current_language?: ("python" | "javascript" | "bash" | "mcp") | undefined;
+        current_language?: "python" | "javascript" | "bash" | "mcp";
     };
     events: {
         close: CustomEvent<any>;
@@ -11,6 +11,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ApiBannerProps = typeof __propDef.props;
 export type ApiBannerEvents = typeof __propDef.events;

package/dist/src/api_docs/ApiDocs.svelte

@@ -69,29 +69,33 @@ 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);
-$:
-  mcp_server_url = `${root}gradio_api/mcp/sse`;
-$:
-  mcp_server_url_streamable = selected_tools_array.length > 0 && selected_tools_array.length < tools.length ? `${root}gradio_api/mcp/?tools=${selected_tools_without_prefix.join(",")}` : `${root}gradio_api/mcp/`;
-$:
-  if (mcp_json_sse && selected_tools.size > 0) {
-    const baseUrl = selected_tools_array.length > 0 && selected_tools_array.length < tools.length ? `${root}gradio_api/mcp/sse?tools=${selected_tools_without_prefix.join(",")}` : `${root}gradio_api/mcp/sse`;
-    mcp_json_sse.mcpServers.gradio.url = baseUrl;
-    if (mcp_json_stdio) {
-      mcp_json_stdio.mcpServers.gradio.args[1] = baseUrl;
-    }
+$: selected_tools_array = Array.from(selected_tools);
+$: selected_tools_without_prefix = selected_tools_array.map(remove_tool_prefix);
+$: mcp_server_url = `${root}gradio_api/mcp/sse`;
+$: mcp_server_url_streamable = selected_tools_array.length > 0 && selected_tools_array.length < tools.length ? `${root}gradio_api/mcp/?tools=${selected_tools_without_prefix.join(",")}` : `${root}gradio_api/mcp/`;
+$: if (mcp_json_sse && selected_tools.size > 0) {
+  const baseUrl = selected_tools_array.length > 0 && selected_tools_array.length < tools.length ? `${root}gradio_api/mcp/sse?tools=${selected_tools_without_prefix.join(",")}` : `${root}gradio_api/mcp/sse`;
+  mcp_json_sse.mcpServers.gradio.url = baseUrl;
+  if (mcp_json_stdio) {
+    mcp_json_stdio.mcpServers.gradio.args[1] = baseUrl;
   }
+}
 let tools = [];
 let headers = [];
 let mcp_json_sse;
@@ -127,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();
@@ -190,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);
@@ -198,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();
@@ -210,6 +217,7 @@ onMount(() => {
         current_language = "python";
       }
     }
+    controller.abort();
   }).catch(() => {
     mcp_server_active = false;
   });
@@ -219,7 +227,7 @@ onMount(() => {
 });
 </script>
 
-{#if info}
+{#if info && analytics}
 	{#if api_count}
 		<div class="banner-wrap">
 			<ApiBanner
@@ -309,6 +317,7 @@ onMount(() => {
 								{mcp_json_stdio}
 								{file_data_present}
 								{mcp_docs}
+								{analytics}
 							/>
 						{:else}
 							1. Confirm that you have cURL installed on your system.
@@ -385,6 +394,7 @@ onMount(() => {
 									api_description={info.named_endpoints[
 										"/" + dependency.api_name
 									].description}
+									{analytics}
 								/>
 
 								<ParametersSnippet

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

@@ -10,7 +10,7 @@ declare const __propDef: {
         space_id: string | null;
         root_node: ComponentMeta;
         username: string | null;
-        api_calls?: Payload[] | undefined;
+        api_calls?: Payload[];
     };
     events: {
         close: CustomEvent<any>;
@@ -18,6 +18,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ApiDocsProps = typeof __propDef.props;
 export type ApiDocsEvents = typeof __propDef.events;

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

@@ -2,13 +2,15 @@ import { SvelteComponent } from "svelte";
 import type { Payload, Dependency } from "../types";
 declare const __propDef: {
     props: {
-        api_calls?: Payload[] | undefined;
+        api_calls?: Payload[];
         dependencies: Dependency[];
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ApiRecorderProps = typeof __propDef.props;
 export type ApiRecorderEvents = typeof __propDef.events;

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;
@@ -21,16 +22,15 @@ let blob_components = ["Audio", "File", "Image", "Video"];
 let blob_examples = endpoint_parameters.filter(
   (param) => blob_components.includes(param.component)
 );
-$:
-  normalised_api_prefix = api_prefix ? api_prefix : "/";
-$:
-  normalised_root = root.replace(/\/$/, "");
+$: normalised_api_prefix = api_prefix ? api_prefix : "/";
+$: normalised_root = root.replace(/\/$/, "");
 </script>
 
 <div class="container">
 	<EndpointDetail
 		api_name={dependency.api_name}
 		description={api_description}
+		{analytics}
 	/>
 	{#if current_language === "python"}
 		<Block>
@@ -43,13 +43,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(
@@ -59,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>
@@ -75,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>
@@ -125,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

@@ -9,12 +9,15 @@ declare const __propDef: {
         endpoint_parameters: any;
         username: string | null;
         current_language: "python" | "javascript" | "bash";
-        api_description?: (string | null) | undefined;
+        api_description?: string | null;
+        analytics: Record<string, any>;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CodeSnippetProps = typeof __propDef.props;
 export type CodeSnippetEvents = typeof __propDef.events;

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

@@ -7,6 +7,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CopyButtonProps = typeof __propDef.props;
 export type CopyButtonEvents = typeof __propDef.events;

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);
 	}