@gradio/core 0.27.1 → 0.28.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @gradio/core
 
+## 0.28.0
+
+### Features
+
+- [#11814](https://github.com/gradio-app/gradio/pull/11814) [`013784a`](https://github.com/gradio-app/gradio/commit/013784a7086047651e8e661a38bde7d5c7f10db7) - add validation support.  Thanks @pngwn!
+- [#11833](https://github.com/gradio-app/gradio/pull/11833) [`a446fcb`](https://github.com/gradio-app/gradio/commit/a446fcba6f3fe59c32194beb7f27fb6f80b61347) - Add gr.Navbar component for multipage apps.  Thanks @abidlabs!
+- [#11783](https://github.com/gradio-app/gradio/pull/11783) [`f407daf`](https://github.com/gradio-app/gradio/commit/f407daf8046f37e042ab8b86730ff0ab8d174bcf) - Add Walkthrough and Step compoents to facilitate multi-step workflows.  Thanks @pngwn!
+
+### Fixes
+
+- [#11815](https://github.com/gradio-app/gradio/pull/11815) [`1a477c5`](https://github.com/gradio-app/gradio/commit/1a477c5202c13097d1089fb70a32a08db22d7660) - Fix i18n string visible during load and i18n not respecting HTML.  Thanks @freddyaboulton!
+- [#11749](https://github.com/gradio-app/gradio/pull/11749) [`70f4532`](https://github.com/gradio-app/gradio/commit/70f4532a4dc7576dbdbe1d0a43a05644a0dfcf43) - fix various iFrame related UI issues when deploying to spaces.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/client@1.18.0
+- @gradio/icons@0.14.0
+- @gradio/atoms@0.17.0
+- @gradio/statustracker@0.11.0
+- @gradio/gallery@0.15.32
+- @gradio/plot@0.9.23
+- @gradio/upload@0.16.17
+- @gradio/file@0.12.29
+- @gradio/image@0.22.18
+- @gradio/video@0.15.1
+- @gradio/tabitem@0.6.0
+- @gradio/tabs@0.5.0
+- @gradio/code@0.14.16
+- @gradio/paramviewer@0.7.16
+- @gradio/column@0.2.1
+- @gradio/textbox@0.11.0
+- @gradio/dropdown@0.10.3
+- @gradio/button@0.5.12
+- @gradio/checkbox@0.4.29
+
+## 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/Blocks.svelte

@@ -193,6 +193,17 @@ async function handle_update(data, fn_index) {
     }
   });
   update_value(updates);
+  updates.forEach((update) => {
+    const component = components.find((comp) => comp.id === update.id);
+    if (component && component.type === "navbar") {
+      import("./navbar_store").then(({ navbar_config }) => {
+        navbar_config.update((current) => ({
+          ...current,
+          [update.prop]: update.value
+        }));
+      });
+    }
+  });
   await tick();
 }
 let submit_map = /* @__PURE__ */ new Map();
@@ -485,6 +496,40 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
       }
     }
     function handle_status_update(message) {
+      if (message.code === "validation_error") {
+        const dep2 = dependencies.find((dep3) => dep3.id === message.fn_index);
+        if (dep2 === void 0 || message.message === void 0 || typeof message.message === "string") {
+          return;
+        }
+        const validation_error_data = [];
+        message.message.forEach((message2, i) => {
+          if (message2.is_valid) {
+            return;
+          }
+          validation_error_data.push({
+            id: dep2.inputs[i],
+            prop: "validation_error",
+            value: message2.message
+          });
+          validation_error_data.push({
+            id: dep2.inputs[i],
+            prop: "loading_status",
+            value: { validation_error: message2.message }
+          });
+        });
+        if (validation_error_data.length > 0) {
+          update_value(validation_error_data);
+          loading_status.update({
+            status: "complete",
+            fn_index: message.fn_index,
+            eta: 0,
+            queue: false,
+            queue_position: null
+          });
+          set_status($loading_status);
+          return;
+        }
+      }
       if (message.broken && !broken_connection) {
         messages = [
           new_message(
@@ -567,7 +612,7 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
         submit_map.delete(dep_index);
       }
       if (status.stage === "error" && !broken_connection && !message.session_not_found) {
-        if (status.message) {
+        if (status.message && typeof status.message === "string") {
           const _message = status.message.replace(
             MESSAGE_QUOTE_RE,
             (_2, b) => b
@@ -636,6 +681,11 @@ async function handle_mount() {
   target.addEventListener("prop_change", (e) => {
     if (!isCustomEvent(e)) throw new Error("not a custom event");
     const { id, prop, value } = e.detail;
+    if (prop === "value") {
+      update_value([
+        { id, prop: "loading_status", value: { validation_error: void 0 } }
+      ]);
+    }
     update_value([{ id, prop, value }]);
     if (prop === "input_ready" && value === false) {
       inputs_waiting.push(id);
@@ -780,6 +830,33 @@ function screen_recording() {
     screen_recorder.startRecording();
   }
 }
+let footer_height = 0;
+let root_container;
+$: root_node = $_layout && get_root_node(root_container);
+function get_root_node(container) {
+  if (!container) return null;
+  return container.children[container.children.length - 1];
+}
+onMount(() => {
+  if ("parentIFrame" in window) {
+    window.parentIFrame?.autoResize(false);
+  }
+  const mut = new MutationObserver((mutations) => {
+    if ("parentIFrame" in window) {
+      const box = root_node?.getBoundingClientRect();
+      if (!box) return;
+      window.parentIFrame?.size(box.bottom + footer_height + 32);
+    }
+  });
+  mut.observe(root_container, {
+    childList: true,
+    subtree: true,
+    attributes: true
+  });
+  return () => {
+    mut.disconnect();
+  };
+});
 </script>
 
 <svelte:head>
@@ -795,6 +872,7 @@ function screen_recording() {
 	<div
 		class="contain"
 		style:flex-grow={app_mode ? "1" : "auto"}
+		bind:this={root_container}
 		style:margin-right={vibe_mode ? `${vibe_editor_width}px` : "0"}
 	>
 		{#if $_layout && app.config}
@@ -813,7 +891,7 @@ function screen_recording() {
 	</div>
 
 	{#if show_footer}
-		<footer>
+		<footer bind:clientHeight={footer_height}>
 			{#if show_api}
 				<button
 					on:click={() => {

package/dist/src/Embed.svelte

@@ -1,6 +1,7 @@
-<script>import { getContext } from "svelte";
+<script>import { getContext, onMount } from "svelte";
 import space_logo from "./images/spaces.svg";
 import { _ } from "svelte-i18n";
+import { navbar_config } from "./navbar_store";
 export let wrapper;
 export let version;
 export let initial_height;
@@ -14,7 +15,38 @@ export let loaded;
 export let pages = [];
 export let current_page = "";
 export let root;
+export let components = [];
 const set_page = getContext("set_lite_page");
+let navbar_component = components.find((c) => c.type === "navbar");
+let navbar = navbar_component ? {
+  visible: navbar_component.props.visible,
+  main_page_name: navbar_component.props.main_page_name,
+  value: navbar_component.props.value
+} : null;
+if (navbar) {
+  navbar_config.set(navbar);
+}
+$: if ($navbar_config) {
+  navbar = {
+    visible: $navbar_config.visible ?? true,
+    main_page_name: $navbar_config.main_page_name ?? "Home",
+    value: $navbar_config.value ?? null
+  };
+}
+$: show_navbar = pages.length > 1 && (navbar === null || navbar.visible !== false);
+$: effective_pages = (() => {
+  let base_pages = navbar && navbar.main_page_name !== false && navbar.main_page_name !== "Home" ? pages.map(
+    ([route, label], index) => index === 0 && route === "" && label === "Home" ? [route, navbar.main_page_name] : [route, label]
+  ) : pages;
+  if (navbar?.value && navbar.value.length > 0) {
+    const existing_routes = new Set(base_pages.map(([route]) => route));
+    const additional_pages = navbar.value.map(
+      ([page_name, page_path]) => [page_path, page_name]
+    ).filter(([route]) => !existing_routes.has(route));
+    return [...base_pages, ...additional_pages];
+  }
+  return base_pages;
+})();
 </script>
 
 <div
@@ -27,10 +59,10 @@ const set_page = getContext("set_lite_page");
 	style:flex-grow={!display ? "1" : "auto"}
 	data-iframe-height
 >
-	{#if pages.length > 1}
+	{#if show_navbar}
 		<div class="nav-holder">
 			<nav class="fillable" class:fill_width>
-				{#each pages as [route, label], i}
+				{#each effective_pages as [route, label], i}
 					{#if is_lite}
 						<button
 							class:active={route === current_page}
@@ -42,9 +74,18 @@ const set_page = getContext("set_lite_page");
 						</button>
 					{:else}
 						<a
-							href={`${root}/${route}`}
+							href={route.startsWith("http://") || route.startsWith("https://")
+								? route
+								: `${root}/${route}`}
 							class:active={route === current_page}
 							data-sveltekit-reload
+							target={route.startsWith("http://") ||
+							route.startsWith("https://")
+								? "_blank"
+								: "_self"}
+							rel={route.startsWith("http://") || route.startsWith("https://")
+								? "noopener noreferrer"
+								: ""}
 							>{label}
 						</a>
 					{/if}

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

@@ -14,6 +14,7 @@ declare const __propDef: {
         pages?: [string, string][];
         current_page?: string;
         root: string;
+        components?: any[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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;";
+}