@gradio/core 0.27.1 → 0.28.0

package/src/Blocks.svelte

@@ -255,6 +255,19 @@
 		});
 		update_value(updates);
 
+		// Handle navbar updates separately since they need to be updated in the store.
+		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();
 	}
 
@@ -623,6 +636,53 @@
 
 			/* eslint-disable complexity */
 			function handle_status_update(message: StatusMessage): void {
+				if (message.code === "validation_error") {
+					const dep = dependencies.find((dep) => dep.id === message.fn_index);
+					if (
+						dep === undefined ||
+						message.message === undefined ||
+						typeof message.message === "string"
+					) {
+						return;
+					}
+
+					const validation_error_data: {
+						id: number;
+						prop: string;
+						value: unknown;
+					}[] = [];
+
+					message.message.forEach((message, i) => {
+						if (message.is_valid) {
+							return;
+						}
+						validation_error_data.push({
+							id: dep.inputs[i],
+							prop: "validation_error",
+							value: message.message
+						});
+
+						validation_error_data.push({
+							id: dep.inputs[i],
+							prop: "loading_status",
+							value: { validation_error: message.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(
@@ -729,7 +789,7 @@
 					!broken_connection &&
 					!message.session_not_found
 				) {
-					if (status.message) {
+					if (status.message && typeof status.message === "string") {
 						const _message = status.message.replace(
 							MESSAGE_QUOTE_RE,
 							(_, b) => b
@@ -814,6 +874,11 @@
 		target.addEventListener("prop_change", (e: Event) => {
 			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: undefined } }
+				]);
+			}
 			update_value([{ id, prop, value }]);
 			if (prop === "input_ready" && value === false) {
 				inputs_waiting.push(id);
@@ -990,6 +1055,40 @@
 			screen_recorder.startRecording();
 		}
 	}
+
+	let footer_height = 0;
+
+	let root_container: HTMLElement;
+	$: root_node = $_layout && get_root_node(root_container);
+
+	function get_root_node(container: HTMLElement | null): HTMLElement | null {
+		if (!container) return null;
+		return container.children[container.children.length - 1] as HTMLElement;
+	}
+
+	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>
@@ -1005,6 +1104,7 @@
 	<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}
@@ -1023,7 +1123,7 @@
 	</div>
 
 	{#if show_footer}
-		<footer>
+		<footer bind:clientHeight={footer_height}>
 			{#if show_api}
 				<button
 					on:click={() => {

package/src/Embed.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-	import { getContext } from "svelte";
+	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: HTMLDivElement;
 	export let version: string;
 	export let initial_height: string;
@@ -16,9 +18,63 @@
 	export let pages: [string, string][] = [];
 	export let current_page = "";
 	export let root: string;
+	export let components: any[] = [];
 
 	const set_page: ((page: string) => void) | undefined =
 		getContext("set_lite_page");
+
+	let navbar_component = components.find((c) => c.type === "navbar");
+	let navbar: {
+		visible: boolean;
+		main_page_name: string | false;
+		value: [string, string][] | null;
+	} | null = 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] as [string, string])
+							: ([route, label] as [string, string])
+					)
+				: 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] as [string, string]
+				)
+				.filter(([route]) => !existing_routes.has(route));
+			return [...base_pages, ...additional_pages];
+		}
+
+		return base_pages;
+	})();
 </script>
 
 <div
@@ -31,10 +87,10 @@
 	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}
@@ -46,9 +102,18 @@
 						</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/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;";
+}

package/src/i18n.ts

@@ -71,13 +71,14 @@ export function is_translation_metadata(obj: any): obj is I18nData {
 	return result;
 }
 
+export const i18n_marker = "__i18n__";
+
 // handles strings with embedded JSON metadata of shape "__i18n__{"key": "some.key"}"
 export function translate_if_needed(value: any): string {
 	if (typeof value !== "string") {
 		return value;
 	}
 
-	const i18n_marker = "__i18n__";
 	const marker_index = value.indexOf(i18n_marker);
 
 	if (marker_index === -1) {
@@ -155,7 +156,8 @@ let i18n_initialized = false;
 let previous_translations: Record<string, Record<string, string>> | undefined;
 
 export async function setupi18n(
-	custom_translations?: Record<string, Record<string, string>>
+	custom_translations?: Record<string, Record<string, string>>,
+	preferred_locale?: string
 ): Promise<void> {
 	const should_reinitialize =
 		i18n_initialized && custom_translations !== previous_translations;
@@ -171,7 +173,7 @@ export async function setupi18n(
 		custom_translations: custom_translations ?? {}
 	});
 
-	const browser_locale = getLocaleFromNavigator();
+	const browser_locale = preferred_locale ?? getLocaleFromNavigator();
 
 	let initial_locale =
 		browser_locale && available_locales.includes(browser_locale)