@gradio/core 1.0.0-dev.3 → 1.0.1

package/src/api_docs/MCPSnippet.svelte

@@ -3,9 +3,11 @@
 	import CopyButton from "./CopyButton.svelte";
 	import { Tool, Prompt, Resource } from "@gradio/icons";
 	import { format_latency, get_color_from_success_rate } from "./utils";
+	import PercentileChart from "./PercentileChart.svelte";
 
 	export let mcp_server_active: boolean;
 	export let mcp_server_url_streamable: string;
+	export let root: string;
 	export let tools: Tool[];
 	export let all_tools: Tool[] = [];
 	export let selected_tools: Set<string> = new Set();
@@ -69,7 +71,7 @@
 					"gradio[mcp]",
 					"gradio",
 					"upload-mcp",
-					mcp_server_url_streamable,
+					root,
 					"<UPLOAD_DIRECTORY>"
 				]
 			};
@@ -218,34 +220,19 @@
 									: "⚠︎ No description provided in function docstring"}
 							</span>
 							{#if analytics[tool.meta.endpoint_name]}
-								<span
-									class="tool-analytics"
-									style="color: var(--body-text-color-subdued); margin-left: 1em;"
-								>
-									Total requests: {analytics[tool.meta.endpoint_name]
-										.total_requests}
-									<span style={color}
-										>({Math.round(success_rate * 100)}% successful)</span
+								{@const endpoint_analytics = analytics[tool.meta.endpoint_name]}
+								{@const p50 =
+									endpoint_analytics.process_time_percentiles["50th"]}
+								<div class="tool-analytics-wrapper" style="margin-left: 1em;">
+									<span
+										class="tool-analytics"
+										style="color: var(--body-text-color-subdued);"
 									>
-									&nbsp;|&nbsp; p50/p90/p99:
-									{format_latency(
-										analytics[tool.meta.endpoint_name].process_time_percentiles[
-											"50th"
-										]
-									)}
-									/
-									{format_latency(
-										analytics[tool.meta.endpoint_name].process_time_percentiles[
-											"90th"
-										]
-									)}
-									/
-									{format_latency(
-										analytics[tool.meta.endpoint_name].process_time_percentiles[
-											"99th"
-										]
-									)}
-								</span>
+										{endpoint_analytics.total_requests} requests ({Math.round(
+											success_rate * 100
+										)}% successful, p50: {format_latency(p50)})
+									</span>
+								</div>
 							{/if}
 						</span>
 						<span class="tool-arrow">{tool.expanded ? "▼" : "▶"}</span>
@@ -354,10 +341,16 @@
 {/if}
 
 <style>
+	.tool-analytics-wrapper {
+		position: relative;
+		display: inline-block;
+	}
+
 	.tool-analytics {
 		font-size: 0.95em;
 		color: var(--body-text-color-subdued);
 	}
+
 	.transport-selection {
 		margin-bottom: var(--size-4);
 	}

package/src/api_docs/PercentileChart.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { format_latency } from "./utils";
+
+	export let p50: number;
+	export let p90: number;
+	export let p99: number;
+
+	$: max_latency = Math.max(p50, p90, p99);
+</script>
+
+<div class="tooltip-chart">
+	<div class="tooltip-arrow"></div>
+	<div class="chart-bars">
+		<div class="chart-bar-container">
+			<div class="chart-bar-label">p50</div>
+			<div class="chart-bar-wrapper">
+				<div
+					class="chart-bar"
+					style="width: {(p50 / max_latency) * 100}%"
+				></div>
+			</div>
+			<div class="chart-bar-value">{format_latency(p50)}</div>
+		</div>
+		<div class="chart-bar-container">
+			<div class="chart-bar-label">p90</div>
+			<div class="chart-bar-wrapper">
+				<div
+					class="chart-bar"
+					style="width: {(p90 / max_latency) * 100}%"
+				></div>
+			</div>
+			<div class="chart-bar-value">{format_latency(p90)}</div>
+		</div>
+		<div class="chart-bar-container">
+			<div class="chart-bar-label">p99</div>
+			<div class="chart-bar-wrapper">
+				<div
+					class="chart-bar"
+					style="width: {(p99 / max_latency) * 100}%"
+				></div>
+			</div>
+			<div class="chart-bar-value">{format_latency(p99)}</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.tooltip-chart {
+		background: var(--background-fill-primary);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-md);
+		padding: var(--size-3);
+		box-shadow: var(--shadow-drop-lg);
+		min-width: 200px;
+		position: relative;
+	}
+
+	.tooltip-arrow {
+		position: absolute;
+		bottom: -8px;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 0;
+		height: 0;
+		border-left: 8px solid transparent;
+		border-right: 8px solid transparent;
+		border-top: 8px solid var(--border-color-primary);
+	}
+
+	.tooltip-arrow::after {
+		content: "";
+		position: absolute;
+		bottom: 1px;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 0;
+		height: 0;
+		border-left: 7px solid transparent;
+		border-right: 7px solid transparent;
+		border-top: 7px solid var(--background-fill-primary);
+	}
+
+	.chart-bars {
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-2);
+	}
+
+	.chart-bar-container {
+		display: flex;
+		align-items: center;
+		gap: var(--size-2);
+	}
+
+	.chart-bar-label {
+		font-size: var(--text-sm);
+		font-weight: var(--weight-semibold);
+		color: var(--body-text-color);
+		min-width: 30px;
+	}
+
+	.chart-bar-wrapper {
+		flex: 1;
+		height: 16px;
+		background: var(--background-fill-secondary);
+		border-radius: var(--radius-sm);
+		overflow: hidden;
+		position: relative;
+	}
+
+	.chart-bar {
+		height: 100%;
+		background: var(--color-accent);
+		border-radius: var(--radius-sm);
+		transition: width 0.3s ease;
+	}
+
+	.chart-bar-value {
+		font-size: var(--text-sm);
+		color: var(--body-text-color);
+		min-width: 50px;
+		text-align: right;
+		font-family: var(--font-mono);
+	}
+</style>

package/src/dependency.ts

@@ -9,7 +9,11 @@ import { AsyncFunction } from "./init_utils";
 import { Client, type client_return } from "@gradio/client";
 import { LoadingStatus, type LoadingStatusArgs } from "@gradio/statustracker";
 import type { ToastMessage } from "@gradio/statustracker";
-import type { StatusMessage, ValidationError } from "@gradio/client";
+import type {
+	StatusMessage,
+	ValidationError,
+	LogMessage
+} from "@gradio/client";
 const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
 
 const NOVALUE = Symbol("NOVALUE");
@@ -36,6 +40,8 @@ export class Dependency {
 	// in the case of chained events, it would be the id of the initial trigger
 	original_trigger_id: number | null = null;
 	show_progress_on: number[] | null = null;
+	component_prop_inputs: number[] = [];
+	show_progress: "full" | "minimal" | "hidden";
 
 	functions: {
 		frontend?: (...args: unknown[]) => Promise<unknown[]>;
@@ -49,6 +55,7 @@ export class Dependency {
 		this.inputs = dep_config.inputs;
 		this.outputs = dep_config.outputs;
 		this.connection_type = dep_config.connection;
+		this.show_progress = dep_config.show_progress;
 		this.functions = {
 			frontend: dep_config.js
 				? process_frontend_fn(
@@ -70,6 +77,7 @@ export class Dependency {
 		this.cancels = dep_config.cancels;
 		this.trigger_modes = dep_config.trigger_mode;
 		this.show_progress_on = dep_config.show_progress_on || null;
+		this.component_prop_inputs = dep_config.component_prop_inputs || [];
 
 		for (let i = 0; i < dep_config.event_specific_args?.length || 0; i++) {
 			const key = dep_config.event_specific_args[i];
@@ -146,6 +154,25 @@ interface DispatchEvent {
 	event_data: unknown;
 }
 
+type UpdateStateCallback = (
+	id: number,
+	state: Record<string, unknown>,
+	check_visibility?: boolean
+) => Promise<void>;
+type GetStateCallback = (id: number) => Promise<Record<string, unknown> | null>;
+type RerenderCallback = (
+	components: ComponentMeta[],
+	layout: LayoutNode
+) => void;
+type LogCallback = (
+	title: string,
+	message: string,
+	fn_index: number,
+	type: ToastMessage["type"],
+	duration?: number | null,
+	visible?: boolean
+) => void;
+
 /**
  * Manages all dependencies for an app acting as a bridge between app state and Dependencies
  * Responsible for registering dependencies and dispatching events to them
@@ -167,21 +194,11 @@ export class DependencyManager {
 	queue: Set<number> = new Set();
 	add_to_api_calls: (payload: Payload) => void;
 
-	update_state_cb: (
-		id: number,
-		state: Record<string, unknown>,
-		check_visibility?: boolean
-	) => Promise<void>;
-	get_state_cb: (id: number) => Promise<Record<string, unknown> | null>;
-	rerender_cb: (components: ComponentMeta[], layout: LayoutNode) => void;
-	log_cb: (
-		title: string,
-		message: string,
-		fn_index: number,
-		type: ToastMessage["type"],
-		duration?: number | null,
-		visible?: boolean
-	) => void;
+	update_state_cb: UpdateStateCallback;
+	get_state_cb: GetStateCallback;
+	rerender_cb: RerenderCallback;
+	log_cb: LogCallback;
+
 	loading_stati = new LoadingStatus();
 
 	constructor(
@@ -205,33 +222,39 @@ export class DependencyManager {
 		add_to_api_calls: (payload: Payload) => void
 	) {
 		this.add_to_api_calls = add_to_api_calls;
-		this.client = client;
 		this.log_cb = log_cb;
-		// this.update_state_cb = update_state_cb;
-		// this.get_state_cb = get_state_cb;
-		// this.rerender_cb = rerender_cb;
-		this.reload(dependencies, update_state_cb, get_state_cb, rerender_cb);
+		this.update_state_cb = update_state_cb;
+		this.get_state_cb = get_state_cb;
+		this.rerender_cb = rerender_cb;
+		this.client = client;
+		this.reload(
+			dependencies,
+			update_state_cb,
+			get_state_cb,
+			rerender_cb,
+			client
+		);
 	}
 
 	reload(
 		dependencies: IDependency[],
-		update_state,
-		get_state,
-		rerender,
-		client
+		update_state: UpdateStateCallback,
+		get_state: GetStateCallback,
+		rerender: RerenderCallback,
+		client: Client
 	) {
 		const { by_id, by_event } = this.create(dependencies);
 		this.dependencies_by_event = by_event;
 		this.dependencies_by_fn = by_id;
+		this.client = client;
+		this.update_state_cb = update_state;
+		this.get_state_cb = get_state;
+		this.rerender_cb = rerender;
 		for (const [dep_id, dep] of this.dependencies_by_fn) {
 			for (const [output_id] of dep.targets) {
 				this.set_event_args(output_id, dep.event_args);
 			}
 		}
-		this.client = client;
-		this.update_state_cb = update_state;
-		this.get_state_cb = get_state;
-		this.rerender_cb = rerender;
 		this.register_loading_stati(by_id);
 	}
 	register_loading_stati(deps: Map<number, Dependency>): void {
@@ -239,7 +262,8 @@ export class DependencyManager {
 			this.loading_stati.register(
 				dep.id,
 				dep.show_progress_on || dep.outputs,
-				dep.inputs
+				dep.inputs,
+				dep.show_progress
 			);
 		}
 	}
@@ -324,7 +348,10 @@ export class DependencyManager {
 					this.update_loading_stati_state();
 				}
 
-				const data_payload = await this.gather_state(dep.inputs);
+				const data_payload = await this.gather_state(
+					dep.inputs,
+					dep.component_prop_inputs
+				);
 				const unset_args = await Promise.all(
 					dep.targets.map(([output_id]) =>
 						this.set_event_args(output_id, dep.event_args)
@@ -354,7 +381,7 @@ export class DependencyManager {
 							data: data_payload,
 							event_data: event_meta.event_data
 						};
-						submission!.send_chunk(payload);
+						submission!.send_chunk(payload as any);
 						unset_args.forEach((fn) => fn());
 						continue;
 					}
@@ -375,7 +402,7 @@ export class DependencyManager {
 					if (dep_submission.type === "void") {
 						unset_args.forEach((fn) => fn());
 					} else if (dep_submission.type === "data") {
-						this.handle_data(dep.outputs, dep_submission.data);
+						await this.handle_data(dep.outputs, dep_submission.data);
 						unset_args.forEach((fn) => fn());
 					} else {
 						let stream_state: "open" | "closed" | "waiting" | null = null;
@@ -408,7 +435,7 @@ export class DependencyManager {
 							index += 1;
 							if (result === null) continue;
 							if (result.type === "data") {
-								this.handle_data(dep.outputs, result.data);
+								await this.handle_data(dep.outputs, result.data);
 							}
 							if (result.type === "status") {
 								if (
@@ -495,8 +522,9 @@ export class DependencyManager {
 										(_, b) => b
 									);
 									this.log_cb(
-										result._title ?? "Error",
-										_message,
+										//@ts-ignore
+										result?._title ?? "Error",
+										_message || "",
 										fn_index,
 										"error",
 										status.duration,
@@ -516,6 +544,12 @@ export class DependencyManager {
 							}
 
 							if (result.type === "render") {
+								this.loading_stati.update({
+									status: "complete",
+									fn_index: dep.id,
+									stream_state: null
+								});
+								this.update_loading_stati_state();
 								const { layout, components, render_id, dependencies } =
 									result.data;
 
@@ -660,52 +694,61 @@ export class DependencyManager {
 	 * @param data the data to update the components with
 	 * */
 	async handle_data(outputs: number[], data: unknown[]) {
-		outputs.forEach(async (output_id, i) => {
-			const _data = data[i] === undefined ? NOVALUE : data[i];
-			if (_data === NOVALUE) return;
-
-			if (is_prop_update(_data)) {
-				let pending_visibility_update = false;
-				let pending_visibility_value = null;
-				for (const [update_key, update_value] of Object.entries(_data)) {
-					if (update_key === "__type__") continue;
-					if (update_key === "visible") {
-						pending_visibility_update = true;
-						pending_visibility_value = update_value;
-						continue;
+		await Promise.all(
+			outputs.map(async (output_id, i) => {
+				const _data = data[i] === undefined ? NOVALUE : data[i];
+				if (_data === NOVALUE) return;
+
+				if (is_prop_update(_data)) {
+					let pending_visibility_update = false;
+					let pending_visibility_value = null;
+					for (const [update_key, update_value] of Object.entries(_data)) {
+						if (update_key === "__type__") continue;
+						if (update_key === "visible") {
+							pending_visibility_update = true;
+							pending_visibility_value = update_value;
+							continue;
+						}
+						await this.update_state_cb(
+							outputs[i],
+							{
+								[update_key]: update_value
+							},
+							false
+						);
 					}
-					await this.update_state_cb(
-						outputs[i],
-						{
-							[update_key]: update_value
-						},
-						false
-					);
-				}
-				if (pending_visibility_update) {
-					await this.update_state_cb(
-						outputs[i],
-						{
-							visible: pending_visibility_value
-						},
-						true
-					);
+					if (pending_visibility_update) {
+						await this.update_state_cb(
+							outputs[i],
+							{
+								visible: pending_visibility_value
+							},
+							true
+						);
+					}
+				} else {
+					await this.update_state_cb(output_id, { value: _data }, false);
 				}
-			} else {
-				await this.update_state_cb(output_id, { value: _data }, false);
-			}
-		});
+			})
+		);
 	}
 
 	/**
 	 * Gathers the current state of the inputs
 	 *
 	 * @param ids the ids of the components to gather state from
+	 * @param prop_indices the indices (relative to ids array) that should return all component props instead of just the value
 	 * @returns an array of the current state of the components, in the same order as the ids
 	 */
-	async gather_state(ids: number[]): Promise<(unknown | null)[]> {
+	async gather_state(
+		ids: number[],
+		prop_indices: number[] = []
+	): Promise<(unknown | null)[]> {
 		return (await Promise.all(ids.map((id) => this.get_state_cb(id)))).map(
-			(state) => {
+			(state, index) => {
+				if (prop_indices.includes(index)) {
+					return state ?? null;
+				}
 				return state?.value ?? null;
 			}
 		);
@@ -722,7 +765,8 @@ export class DependencyManager {
 		args: Record<string, unknown>
 	): Promise<() => void> {
 		let current_args: Record<string, unknown> = {};
-		const current_state = await this.get_state_cb(id);
+		const current_state = await this.get_state_cb?.(id);
+		if (!current_state) return () => {};
 		for (const [key] of Object.entries(args)) {
 			current_args[key] = current_state?.[key] ?? null;
 		}