@gradio/core 1.0.0-dev.0 → 1.0.0

package/src/MountComponents.svelte

@@ -1,32 +1,22 @@
 <script lang="ts">
-	import { onMount, createEventDispatcher } from "svelte";
-	import type { Client } from "@gradio/client";
-	import Render from "./Render.svelte";
+	import Self from "./MountComponents.svelte";
+	let { node } = $props();
 
-	export let rootNode: any;
-	export let root: any;
-	export let target: any;
-	export let theme_mode: any;
-	export let version: any;
-	export let autoscroll: boolean;
-	export let max_file_size: number | null = null;
-	export let client: Client;
-
-	const dispatch = createEventDispatcher<{ mount?: never }>();
-	onMount(() => {
-		dispatch("mount");
-	});
+	let component = $derived(await node.component);
 </script>
 
-{#if rootNode}
-	<Render
-		node={rootNode}
-		{root}
-		{target}
-		{theme_mode}
-		{version}
-		{autoscroll}
-		{max_file_size}
-		{client}
-	/>
+{#if node && component}
+	{#if node.props.shared_props.visible}
+		<svelte:component
+			this={component.default}
+			shared_props={node.props.shared_props}
+			props={node.props.props}
+		>
+			{#if node.children && node.children.length}
+				{#each node.children as _node}
+					<Self node={_node} />
+				{/each}
+			{/if}
+		</svelte:component>
+	{/if}
 {/if}

package/src/{init.ts → _init.ts}

@@ -1,4 +1,4 @@
-import { writable, type Writable, get } from "svelte/store";
+import { writable, type Writable } from "svelte/store";
 import { dequal } from "dequal";
 
 import type {
@@ -13,6 +13,7 @@ import type { client_return } from "@gradio/client";
 import { create_loading_status_store } from "./stores";
 import { _ } from "svelte-i18n";
 import { i18n_marker } from "./i18n";
+import type { SharedProps } from "@gradio/utils";
 
 export interface UpdateTransaction {
 	id: number;
@@ -20,11 +21,17 @@ export interface UpdateTransaction {
 	prop: string;
 }
 
-let pending_updates: UpdateTransaction[][] = [];
-const is_browser = typeof window !== "undefined";
-const raf = is_browser
-	? requestAnimationFrame
-	: async (fn: () => Promise<void> | void) => await fn();
+const shared_props: (keyof SharedProps)[] = [
+	"elem_id",
+	"elem_classes",
+	"components",
+	"visible",
+	"interactive",
+	"server_fns"
+] as const;
+
+type set_data_type = (data: Record<string, unknown>) => void;
+type get_data_type = () => Promise<Record<string, unknown>>;
 
 /**
  * Create a store with the layout and a map of targets
@@ -41,13 +48,12 @@ export function create_components(
 ): {
 	layout: Writable<ComponentMeta>;
 	targets: Writable<TargetMap>;
-	update_value: (updates: UpdateTransaction[]) => void;
-	get_data: (id: number) => any | Promise<any>;
+	get_data: (id: number) => Promise<unknown> | void;
+	set_data: (id: number, data: Record<string, unknown>) => void;
 	modify_stream: (id: number, state: "open" | "waiting" | "closed") => void;
 	get_stream_state: (id: number) => "open" | "waiting" | "closed" | "not_set";
 	set_time_limit: (id: number, time_limit: number | undefined) => void;
 	loading_status: ReturnType<typeof create_loading_status_store>;
-	scheduled_updates: Writable<boolean>;
 	create_layout: (args: {
 		app: client_return;
 		components: ComponentMeta[];
@@ -65,7 +71,11 @@ export function create_components(
 		root: string;
 		dependencies: Dependency[];
 	}) => void;
-	value_change: (cb: (id: number, value: any) => void) => void;
+	register_component: (
+		id: number,
+		set: set_data_type,
+		get: get_data_type
+	) => void;
 } {
 	let _component_map: Map<number, ComponentMeta>;
 
@@ -83,16 +93,22 @@ export function create_components(
 	let keys_per_render_id: Record<number, (string | number)[]> = {};
 	let _rootNode: ComponentMeta;
 
-	let value_change_cb: ((id: number, value: any) => void) | null = null;
-
-	function value_change(cb: (id: number, value: any) => void): void {
-		value_change_cb = cb;
-	}
-
 	let current_layout: LayoutNode;
 	let current_root: string;
 
-	function set_event_specific_args(dependencies: Dependency[]): void {
+	const get_callbacks = new Map<number, get_data_type>();
+	const set_callbacks = new Map<number, set_data_type>();
+
+	function register_component(
+		id: number,
+		_set_data: set_data_type,
+		_get_data: get_data_type
+	): void {
+		set_callbacks.set(id, _set_data);
+		get_callbacks.set(id, _get_data);
+	}
+
+	function get_event_specific_args(dependencies: Dependency[]): void {
 		dependencies.forEach((dep) => {
 			dep.targets.forEach((target) => {
 				const instance = instance_map?.[target[0]];
@@ -122,7 +138,6 @@ export function create_components(
 			fill_height: boolean;
 		};
 	}): Promise<void> {
-		flush();
 		app = _app;
 
 		if (instance_map) {
@@ -135,13 +150,15 @@ export function create_components(
 						c.props.value = matching_instance.props.value;
 					}
 				}
+
+				const { shared_props, props } = gather_props(c.props);
+				c.props = { props, shared_props };
 			});
 		}
 
 		_components = components;
 		inputs = new Set();
 		outputs = new Set();
-		pending_updates = [];
 		constructor_map = new Map();
 		_component_map = new Map();
 		instance_map = {};
@@ -216,13 +233,13 @@ export function create_components(
 		root: string;
 		dependencies: Dependency[];
 	}): void {
-		components.forEach((c) => {
-			for (const prop in c.props) {
-				if (c.props[prop] === null) {
-					c.props[prop] = undefined;
-				}
-			}
-		});
+		// components.forEach((c) => {
+		// 	for (const prop in c.props) {
+		// 		if (c.props[prop] === null) {
+		// 			c.props[prop] = undefined;
+		// 		}
+		// 	}
+		// });
 		let replacement_components: ComponentMeta[] = [];
 		let new_components: ComponentMeta[] = [];
 		components.forEach((c) => {
@@ -428,9 +445,6 @@ export function create_components(
 		return instance;
 	}
 
-	let update_scheduled = false;
-	let update_scheduled_store = writable(false);
-
 	/**
 	 * Load newly visible components after visibility changes
 	 * @param newly_visible_ids Set of component IDs that are now visible
@@ -496,102 +510,12 @@ export function create_components(
 		);
 	}
 
-	function flush(): void {
-		const had_visibility_changes = has_visibility_changes(pending_updates);
-		let previous_visible_ids: Set<number> | undefined;
-		const all_components = _component_map
-			? [..._component_map.values()]
-			: _components;
-
-		if (had_visibility_changes && current_layout) {
-			previous_visible_ids = determine_visible_components(
-				current_layout,
-				all_components
-			);
-		}
-
-		layout_store.update((layout) => {
-			for (let i = 0; i < pending_updates.length; i++) {
-				for (let j = 0; j < pending_updates[i].length; j++) {
-					const update = pending_updates[i][j];
-					if (!update) continue;
-					const instance = instance_map?.[update.id];
-					if (!instance) continue;
-					let new_value;
-					const old_value = instance.props[update.prop];
-					if (update.value instanceof Map) new_value = new Map(update.value);
-					else if (update.value instanceof Set)
-						new_value = new Set(update.value);
-					else if (Array.isArray(update.value)) new_value = [...update.value];
-					else if (update.value == null) new_value = null;
-					else if (typeof update.value === "object")
-						new_value = { ...update.value };
-					else new_value = update.value;
-					instance.props[update.prop] = new_value;
-
-					if (
-						update.prop === "value" &&
-						!is_visible(instance) &&
-						!dequal(old_value, new_value)
-					) {
-						value_change_cb?.(update.id, new_value);
-					}
-				}
-			}
-
-			return layout;
-		});
-
-		if (had_visibility_changes && current_layout && previous_visible_ids) {
-			raf(async () => {
-				const new_visible_ids = determine_visible_components(
-					current_layout,
-					all_components
-				);
-				const newly_visible_ids = new Set<number>();
-
-				for (const id of new_visible_ids) {
-					if (!previous_visible_ids!.has(id)) {
-						newly_visible_ids.add(id);
-					}
-				}
-
-				await load_newly_visible_components(newly_visible_ids, all_components);
-
-				if (newly_visible_ids.size > 0) {
-					layout_store.update((layout) => layout);
-				}
-			});
-		}
-
-		pending_updates = [];
-		update_scheduled = false;
-		update_scheduled_store.set(false);
+	async function get_data(id: number): Promise<unknown | void> {
+		return get_callbacks.get(id)?.();
 	}
 
-	function update_value(updates: UpdateTransaction[] | undefined): void {
-		if (!updates) return;
-		pending_updates.push(updates);
-
-		if (!update_scheduled) {
-			update_scheduled = true;
-			update_scheduled_store.set(true);
-			raf(flush);
-		}
-	}
-	function get_data(id: number): any | Promise<any> {
-		let comp = _component_map.get(id);
-		if (!comp) {
-			const layout = get(layout_store);
-			comp = findComponentById(layout, id);
-		}
-		if (!comp) {
-			return null;
-		}
-		if (comp.instance?.get_value) {
-			return comp.instance.get_value() as Promise<any>;
-		}
-		return comp.props.value;
+	function set_data(id: number, data: Record<string, unknown>): void {
+		set_callbacks.get(id)?.(data);
 	}
 
 	function findComponentById(
@@ -641,16 +565,15 @@ export function create_components(
 	return {
 		layout: layout_store,
 		targets: target_map,
-		update_value,
 		get_data,
+		set_data,
 		modify_stream,
 		get_stream_state,
 		set_time_limit,
 		loading_status,
-		scheduled_updates: update_scheduled_store,
 		create_layout: create_layout,
 		rerender_layout,
-		value_change
+		register_component
 	};
 }
 

package/src/api_docs/ApiDocs.svelte

@@ -21,6 +21,7 @@
 	import ResponseSnippet from "./ResponseSnippet.svelte";
 	import mcp from "./img/mcp.svg";
 	import MCPSnippet from "./MCPSnippet.svelte";
+	import CopyMarkdown from "./CopyMarkdown.svelte";
 
 	export let dependencies: Dependency[];
 	export let root: string;
@@ -28,6 +29,7 @@
 	export let space_id: string | null;
 	export let root_node: ComponentMeta;
 	export let username: string | null;
+	export let last_api_call: Payload | null = null;
 
 	const js_docs =
 		"https://www.gradio.app/guides/getting-started-with-the-js-client";
@@ -53,6 +55,20 @@
 	export let api_calls: Payload[] = [];
 	let current_language: "python" | "javascript" | "bash" | "mcp" = "python";
 
+	$: sorted_dependencies = (() => {
+		const valid = dependencies.filter(
+			(dep) =>
+				dep.api_visibility === "public" &&
+				info?.named_endpoints?.["/" + dep.api_name]
+		);
+		if (info && last_api_call) {
+			const mostRecent = valid.find((dep) => dep.id === last_api_call.fn_index);
+			const others = valid.filter((dep) => dep.id !== last_api_call.fn_index);
+			return mostRecent ? [mostRecent, ...others] : valid;
+		}
+		return valid;
+	})();
+
 	function set_query_param(key: string, value: string) {
 		const url = new URL(window.location.href);
 		url.searchParams.set(key, value);
@@ -126,25 +142,12 @@
 	$: 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;
-		}
-	}
-
 	interface ToolParameter {
 		title?: string;
 		type: string;
@@ -167,7 +170,6 @@
 
 	let tools: Tool[] = [];
 	let headers: string[] = [];
-	let mcp_json_sse: any;
 	let mcp_json_stdio: any;
 	let file_data_present = false;
 	let selected_tools: Set<string> = new Set();
@@ -212,29 +214,15 @@
 			selected_tools = new Set(tools.map((tool) => tool.name));
 			headers = schema.map((tool: any) => tool.meta?.headers || []).flat();
 			if (headers.length > 0) {
-				mcp_json_sse = {
-					mcpServers: {
-						gradio: {
-							url: mcp_server_url,
-							headers: headers.reduce(
-								(accumulator: Record<string, string>, current_key: string) => {
-									accumulator[current_key] = "<YOUR_HEADER_VALUE>";
-									return accumulator;
-								},
-								{}
-							)
-						}
-					}
-				};
 				mcp_json_stdio = {
 					mcpServers: {
 						gradio: {
 							command: "npx",
 							args: [
 								"mcp-remote",
-								mcp_server_url,
+								mcp_server_url_streamable,
 								"--transport",
-								"sse-only",
+								"streamable-http",
 								...headers
 									.map((header) => [
 										"--header",
@@ -246,24 +234,20 @@
 					}
 				};
 			} else {
-				mcp_json_sse = {
-					mcpServers: {
-						gradio: {
-							url: mcp_server_url
-						}
-					}
-				};
 				mcp_json_stdio = {
 					mcpServers: {
 						gradio: {
 							command: "npx",
-							args: ["mcp-remote", mcp_server_url, "--transport", "sse-only"]
+							args: [
+								"mcp-remote",
+								mcp_server_url_streamable,
+								"--transport",
+								"streamable-http"
+							]
 						}
 					}
 				};
 				if (file_data_present) {
-					mcp_json_sse.mcpServers.upload_files_to_gradio =
-						upload_file_mcp_server;
 					mcp_json_stdio.mcpServers.upload_files_to_gradio =
 						upload_file_mcp_server;
 				}
@@ -274,6 +258,14 @@
 		}
 	}
 
+	let markdown_code_snippets: Record<string, Record<string, string>> = {};
+
+	$: markdown_code_snippets;
+
+	let config_snippets: Record<string, string> = {};
+
+	$: config_snippets;
+
 	onMount(() => {
 		const controller = new AbortController();
 		const signal = controller.signal;
@@ -288,8 +280,8 @@
 			current_language = lang_param as "python" | "javascript" | "bash" | "mcp";
 		}
 
-		// Check MCP server status and fetch tools if active
-		fetch(mcp_server_url, { signal: signal })
+		const mcp_schema_url = `${root}gradio_api/mcp/schema`;
+		fetch(mcp_schema_url, { signal: signal })
 			.then((response) => {
 				mcp_server_active = response.ok;
 				if (mcp_server_active) {
@@ -326,10 +318,32 @@
 		</div>
 
 		<div class="docs-wrap">
-			<div class="client-doc">
+			<div
+				class="client-doc"
+				style="display: flex; align-items: center; justify-content: space-between;"
+			>
 				<p style="font-size: var(--text-lg);">
 					Choose one of the following ways to interact with the API.
 				</p>
+				<CopyMarkdown
+					{current_language}
+					{space_id}
+					{root}
+					{api_count}
+					{tools}
+					{py_docs}
+					{js_docs}
+					{bash_docs}
+					{mcp_docs}
+					{spaces_docs_suffix}
+					{mcp_server_active}
+					{mcp_server_url_streamable}
+					{config_snippets}
+					{markdown_code_snippets}
+					{dependencies}
+					{info}
+					{js_info}
+				/>
 			</div>
 			<div class="endpoint">
 				<div class="snippets">
@@ -392,25 +406,27 @@
 								href={current_language == "python" ? py_docs : js_docs}
 								target="_blank">docs</a
 							>) if you don't already have it installed.
-						{:else if current_language == "mcp"}
-							<MCPSnippet
-								{mcp_server_active}
-								{mcp_server_url}
-								{mcp_server_url_streamable}
-								tools={tools.filter((tool) => selected_tools.has(tool.name))}
-								all_tools={tools}
-								bind:selected_tools
-								{mcp_json_sse}
-								{mcp_json_stdio}
-								{file_data_present}
-								{mcp_docs}
-								{analytics}
-							/>
-						{:else}
+						{:else if current_language == "bash"}
 							1. Confirm that you have cURL installed on your system.
 						{/if}
 					</p>
 
+					<div class:hidden={current_language !== "mcp"}>
+						<MCPSnippet
+							{mcp_server_active}
+							{mcp_server_url_streamable}
+							tools={tools.filter((tool) => selected_tools.has(tool.name))}
+							all_tools={tools}
+							bind:selected_tools
+							{mcp_json_stdio}
+							{file_data_present}
+							{mcp_docs}
+							{analytics}
+							{root}
+							bind:config_snippets
+						/>
+					</div>
+
 					{#if current_language !== "mcp"}
 						<InstallSnippet {current_language} />
 
@@ -464,9 +480,9 @@
 					{/if}
 				{/if}
 
-				{#if current_language !== "mcp"}
-					{#each dependencies as dependency}
-						{#if dependency.api_visibility === "public" && info.named_endpoints["/" + dependency.api_name]}
+				<div class:hidden={current_language === "mcp"}>
+					{#each sorted_dependencies as dependency}
+						{#if info.named_endpoints["/" + dependency.api_name]}
 							<div class="endpoint-container">
 								<CodeSnippet
 									endpoint_parameters={info.named_endpoints[
@@ -482,6 +498,8 @@
 										"/" + dependency.api_name
 									].description}
 									{analytics}
+									{last_api_call}
+									bind:markdown_code_snippets
 								/>
 
 								<ParametersSnippet
@@ -506,7 +524,7 @@
 							</div>
 						{/if}
 					{/each}
-				{/if}
+				</div>
 			</div>
 		</div>
 	{:else}
@@ -701,4 +719,8 @@
 	.api-name {
 		color: var(--color-accent);
 	}
+
+	.hidden {
+		display: none;
+	}
 </style>