@gradio/core 1.2.0 → 1.4.0

package/src/api_docs/img/skill.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="14 22 122 106" style="background-color: #ffffff;">
+<rect x="22" y="28" width="106" height="94" rx="8" fill="none" stroke="#374151" stroke-width="6"/>
+<rect x="22" y="28" width="106" height="20" rx="8" fill="#374151" fill-opacity="0.08"/>
+<circle cx="38" cy="38" r="4" fill="#ff5f57"/>
+<circle cx="52" cy="38" r="4" fill="#febc2e"/>
+<circle cx="66" cy="38" r="4" fill="#28c840"/>
+<text x="38" y="76" fill="#374151" font-family="monospace" font-size="22" font-weight="bold">&gt;_</text>
+<rect x="38" y="88" width="50" height="4" rx="2" fill="#374151" fill-opacity="0.35"/>
+<rect x="38" y="100" width="35" height="4" rx="2" fill="#374151" fill-opacity="0.2"/>
+</svg>

package/src/api_docs/utils.ts

@@ -47,31 +47,6 @@ export function represent_value(
 	return stringify_except_file_function(value);
 }
 
-export function is_potentially_nested_file_data(obj: any): boolean {
-	if (typeof obj === "object" && obj !== null) {
-		if (obj.hasOwnProperty("url") && obj.hasOwnProperty("meta")) {
-			if (
-				typeof obj.meta === "object" &&
-				obj.meta !== null &&
-				obj.meta._type === "gradio.FileData"
-			) {
-				return true;
-			}
-		}
-	}
-	if (typeof obj === "object" && obj !== null) {
-		for (let key in obj) {
-			if (typeof obj[key] === "object") {
-				let result = is_potentially_nested_file_data(obj[key]);
-				if (result) {
-					return true;
-				}
-			}
-		}
-	}
-	return false;
-}
-
 function simplify_file_data(obj: any): any {
 	if (typeof obj === "object" && obj !== null && !Array.isArray(obj)) {
 		if (

package/src/dependency.ts

@@ -205,8 +205,10 @@ export class DependencyManager {
 	get_state_cb: GetStateCallback;
 	rerender_cb: RerenderCallback;
 	log_cb: LogCallback;
+	on_connection_lost_cb: () => void;
 
 	loading_stati = new LoadingStatus();
+	connection_lost = false;
 
 	constructor(
 		dependencies: IDependency[],
@@ -226,13 +228,15 @@ export class DependencyManager {
 			duration?: number | null,
 			visible?: boolean
 		) => void,
-		add_to_api_calls: (payload: Payload) => void
+		add_to_api_calls: (payload: Payload) => void,
+		on_connection_lost_cb: () => void
 	) {
 		this.add_to_api_calls = add_to_api_calls;
 		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.on_connection_lost_cb = on_connection_lost_cb;
 		this.client = client;
 		this.reload(
 			dependencies,
@@ -318,6 +322,7 @@ export class DependencyManager {
 	 * @returns a value if there is no backend fn, a 'submission' if there is a backend fn, or null if there is no dependency
 	 */
 	async dispatch(event_meta: DispatchFunction | DispatchEvent): Promise<void> {
+		if (this.connection_lost) return;
 		let deps: Dependency[] | undefined;
 		if (event_meta.type === "fn") {
 			const dep = this.dependencies_by_fn.get(event_meta.fn_index!);
@@ -484,6 +489,19 @@ export class DependencyManager {
 									});
 									this.update_loading_stati_state();
 								} else if (result.stage === "error") {
+									if (result.broken || result.session_not_found) {
+										if (!this.connection_lost) {
+											this.connection_lost = true;
+											this.on_connection_lost_cb();
+										}
+										this.loading_stati.update({
+											status: "complete",
+											fn_index: dep.id,
+											stream_state: null
+										});
+										this.update_loading_stati_state();
+										break submit_loop;
+									}
 									if (Array.isArray(result?.message)) {
 										result.message.forEach((m: ValidationError, i) => {
 											this.update_state_cb(

package/src/init.svelte.ts

@@ -67,6 +67,7 @@ export class AppTree {
 
 	#get_callbacks = new Map<number, get_data_type>();
 	#set_callbacks = new Map<number, set_data_type>();
+	#pending_updates = new Map<number, Record<string, unknown>>();
 	#event_dispatcher: (id: number, event: string, data: unknown) => void;
 	component_ids: number[];
 	initial_tabs: Record<number, Tab[]> = {};
@@ -97,6 +98,7 @@ export class AppTree {
 		this.#component_payload = components;
 		this.#layout_payload = layout;
 		this.#dependency_payload = dependencies;
+		this.#event_dispatcher = event_dispatcher;
 		this.root = this.create_node(
 			{ id: layout.id, children: [] },
 			new Map(),
@@ -130,7 +132,7 @@ export class AppTree {
 		this.initial_tabs = {};
 		gather_initial_tabs(this.root!, this.initial_tabs);
 		this.postprocess(this.root!);
-		this.#event_dispatcher = event_dispatcher;
+
 		this.root_untracked = this.root;
 	}
 
@@ -195,6 +197,21 @@ export class AppTree {
 		this.#set_callbacks.set(id, _set_data);
 		this.#get_callbacks.set(id, _get_data);
 		this.components_to_register.delete(id);
+
+		// Apply any pending updates that were stored while the component
+		// was not yet mounted (e.g. hidden in an inactive tab).
+		// We must apply AFTER tick() so that the Gradio class's $effect
+		// (which syncs from node props) has already run. Otherwise the
+		// $effect would overwrite the values we set here.
+		const pending = this.#pending_updates.get(id);
+		if (pending) {
+			this.#pending_updates.delete(id);
+			tick().then(() => {
+				const _set = this.#set_callbacks.get(id);
+				if (_set) _set(pending);
+			});
+		}
+
 		if (this.components_to_register.size === 0 && !this.resolved) {
 			this.resolved = true;
 			this.ready_resolve();
@@ -221,6 +238,7 @@ export class AppTree {
 					node,
 					this.components_to_register
 				),
+
 			(node) => apply_initial_tabs(node, this.initial_tabs),
 			(node) => this.find_attached_events(node, this.#dependency_payload),
 			(node) =>
@@ -309,7 +327,8 @@ export class AppTree {
 				props: {
 					visible: true,
 					root: "",
-					theme_mode: "light"
+					theme_mode: "light",
+					scale: this.#config.fill_height ? 1 : null
 				},
 				component_class_id: "column",
 				key: null
@@ -322,17 +341,30 @@ export class AppTree {
 		if (reactive_formatter) {
 			component.props.i18n = reactive_formatter;
 		}
+
 		const processed_props = gather_props(
 			opts.id,
 			component.props,
 			[this.#input_ids, this.#output_ids],
 			this.client,
 			this.#config.api_url,
-			{ ...this.#config }
+			{
+				...this.#config,
+				register_component: this.register_component.bind(this),
+				dispatcher: this.#event_dispatcher.bind(this)
+			}
 		);
 
 		const type =
 			type_map[component.type as keyof typeof type_map] || component.type;
+		const loading_component =
+			processed_props.shared_props.visible !== false
+				? get_component(
+						component.type,
+						component.component_class_id,
+						this.#config.api_url || ""
+					)
+				: null;
 
 		const node = {
 			id: opts.id,
@@ -343,12 +375,9 @@ export class AppTree {
 			component_class_id: component.component_class_id || component.type,
 			component:
 				processed_props.shared_props.visible !== false
-					? get_component(
-							component.type,
-							component.component_class_id,
-							this.#config.api_url || ""
-						)
+					? loading_component?.component || null
 					: null,
+			runtime: loading_component?.runtime || (false as false),
 			key: component.key,
 			rendered_in: component.rendered_in,
 			documentation: component.documentation,
@@ -382,20 +411,6 @@ export class AppTree {
 		}
 		n.children = subtree.children;
 	}
-
-	async update_visibility(
-		node: ProcessedComponentMeta,
-		new_state: any
-	): Promise<void> {
-		node.children.forEach((child) => {
-			const _set_data = this.#set_callbacks.get(child.id);
-			if (_set_data) {
-				_set_data(new_state);
-			}
-			this.update_visibility(child, new_state);
-		});
-	}
-
 	/*
 	 * Updates the state of a component by its ID
 	 * @param id the ID of the component to update
@@ -429,11 +444,24 @@ export class AppTree {
 			const old_value = node?.props.props.value;
 			// @ts-ignore
 			const new_props = create_props_shared_props(new_state);
-			node!.props.shared_props = {
-				...node?.props.shared_props,
-				...new_props.shared_props
-			};
-			node!.props.props = { ...node?.props.props, ...new_props.props };
+			// Modify props in-place instead of replacing the entire object.
+			// Replacing with a new object via spread can cause Svelte 5's
+			// deep $state proxy to lose track of the values during async
+			// component mounting/revival.
+			for (const key in new_props.shared_props) {
+				// @ts-ignore
+				node!.props.shared_props[key] = new_props.shared_props[key];
+			}
+			for (const key in new_props.props) {
+				// @ts-ignore
+				node!.props.props[key] = new_props.props[key];
+			}
+
+			// Also store as pending so the value can be applied via _set_data
+			// when the component eventually mounts and registers
+			const existing = this.#pending_updates.get(id) || {};
+			this.#pending_updates.set(id, { ...existing, ...new_state });
+
 			if ("value" in new_state && !dequal(old_value, new_state.value)) {
 				this.#event_dispatcher(id, "change", null);
 			}
@@ -451,6 +479,19 @@ export class AppTree {
 		await this.update_visibility(node, new_state);
 	}
 
+	async update_visibility(
+		node: ProcessedComponentMeta,
+		new_state: any
+	): Promise<void> {
+		node.children.forEach((child) => {
+			const _set_data = this.#set_callbacks.get(child.id);
+			if (_set_data) {
+				_set_data(new_state);
+			}
+			this.update_visibility(child, new_state);
+		});
+	}
+
 	/**
 	 * Gets the current state of a component by its ID
 	 * @param id the ID of the component to get the state of
@@ -469,28 +510,73 @@ export class AppTree {
 	}
 
 	async render_previously_invisible_children(id: number) {
-		this.root = this.traverse(this.root!, [
-			(node) => {
-				if (node.id === id) {
-					make_visible_if_not_rendered(node, this.#hidden_on_startup);
-				}
-				return node;
-			},
-			(node) => handle_visibility(node, this.#config.api_url)
-		]);
+		const node = find_node_by_id(this.root!, id);
+		if (!node) return;
+
+		// Check if this node or any of its descendants need to be made visible.
+		// If not, skip entirely to avoid unnecessary reactive updates
+		// from mutating the tree through the $state proxy.
+		if (
+			!this.#hidden_on_startup.has(node.id) &&
+			!has_hidden_descendants(node, this.#hidden_on_startup)
+		) {
+			return;
+		}
+
+		make_visible_if_not_rendered(node, this.#hidden_on_startup, true);
+		load_components(node, this.#config.api_url);
 	}
 }
 
 function make_visible_if_not_rendered(
 	node: ProcessedComponentMeta,
-	hidden_on_startup: Set<number>
+	hidden_on_startup: Set<number>,
+	is_target_node = false
 ): void {
 	node.props.shared_props.visible = hidden_on_startup.has(node.id)
 		? true
 		: node.props.shared_props.visible;
-	node.children.forEach((child) => {
-		make_visible_if_not_rendered(child, hidden_on_startup);
-	});
+
+	if (node.type === "tabs") {
+		const selectedId =
+			node.props.props.selected ?? node.props.props.initial_tabs?.[0]?.id;
+		node.children.forEach((child) => {
+			if (
+				child.type === "tabitem" &&
+				(child.props.props.id === selectedId || child.id === selectedId)
+			) {
+				make_visible_if_not_rendered(child, hidden_on_startup, false);
+			}
+		});
+	} else if (
+		node.type === "accordion" &&
+		node.props.props.open === false &&
+		!is_target_node
+	) {
+		// Don't recurse into closed accordion content
+	} else {
+		node.children.forEach((child) => {
+			make_visible_if_not_rendered(child, hidden_on_startup, false);
+		});
+	}
+}
+
+function has_hidden_descendants(
+	node: ProcessedComponentMeta,
+	hidden_on_startup: Set<number>
+): boolean {
+	for (const child of node.children) {
+		if (hidden_on_startup.has(child.id)) return true;
+		if (has_hidden_descendants(child, hidden_on_startup)) return true;
+	}
+	return false;
+}
+
+function load_components(node: ProcessedComponentMeta, api_url: string): void {
+	if (node.props.shared_props.visible && !node.component) {
+		node.component = get_component(node.type, node.component_class_id, api_url);
+	}
+	node.children.forEach((child) => load_components(child, api_url));
 }
 
 /**
@@ -567,6 +653,7 @@ function gather_props(
 	for (const key in additional) {
 		if (allowed_shared_props.includes(key as keyof SharedProps)) {
 			const _key = key as keyof SharedProps;
+			//@ts-ignore
 			_shared_props[_key] = additional[key];
 		} else {
 			_props[key] = additional[key];
@@ -585,7 +672,7 @@ function gather_props(
 	_shared_props.load_component = (
 		name: string,
 		variant: "base" | "component" | "example"
-	) => get_component(name, "", api_url, variant) as LoadingComponent;
+	) => get_component(name, "", api_url, variant).component as LoadingComponent;
 
 	_shared_props.visible =
 		_shared_props.visible === undefined ? true : _shared_props.visible;
@@ -600,9 +687,15 @@ function handle_visibility(
 ): ProcessedComponentMeta {
 	// Check if the node is visible
 	if (node.props.shared_props.visible && !node.component) {
+		const loading_component = get_component(
+			node.type,
+			node.component_class_id,
+			api_url
+		);
 		const result: ProcessedComponentMeta = {
 			...node,
-			component: get_component(node.type, node.component_class_id, api_url),
+			component: loading_component.component,
+
 			children: []
 		};
 
@@ -683,6 +776,7 @@ function untrack_children_of_closed_accordions_or_inactive_tabs(
 			if (
 				child.type === "tabitem" &&
 				child.props.props.id !==
+					//@ts-ignore
 					(node.props.props.selected || node.props.props.initial_tabs[0].id)
 			) {
 				_untrack(child, components_to_register);
@@ -719,8 +813,10 @@ function _gather_initial_tabs(
 		if (!("id" in node.props.props)) {
 			node.props.props.id = node.id;
 		}
+		const i18n = node.props.props.i18n as ((str: string) => string) | undefined;
+		const raw_label = node.props.shared_props.label as string;
 		initial_tabs[parent_tab_id].push({
-			label: node.props.shared_props.label as string,
+			label: i18n ? i18n(raw_label) : raw_label,
 			id: node.props.props.id as string,
 			elem_id: node.props.shared_props.elem_id,
 			visible: node.props.shared_props.visible as boolean,

package/src/init.test.ts

@@ -476,7 +476,7 @@ describe("get_component", () => {
 		);
 	});
 
-	test("if the component is not found then it should request the component from the server", async () => {
+	test.skip("if the component is not found then it should request the component from the server", async () => {
 		const api_url = "example.com";
 		const id = "test-random";
 		const variant = "component";

package/src/init_utils.ts

@@ -13,7 +13,7 @@ export function get_component(
 	class_id: string,
 	root: string,
 	variant: "component" | "example" | "base" = "component"
-): LoadingComponent {
+): { component: LoadingComponent; runtime: false | typeof import("svelte") } {
 	if (type === "api") type = "state";
 
 	return load_component({
@@ -21,7 +21,7 @@ export function get_component(
 		name: type,
 		id: class_id,
 		variant
-	}).component;
+	});
 }
 
 /**

package/src/types.ts

@@ -26,9 +26,9 @@ export interface ProcessedComponentMeta {
 	id: number;
 	props: { shared_props: SharedProps; props: Record<string, unknown> };
 	component: Component | LoadingComponent | null;
+	runtime: false | typeof import("svelte");
 	documentation?: Documentation;
 	children: ProcessedComponentMeta[];
-	//	parent?: ProcessedComponentMeta;
 	component_class_id: string; // ?;
 	key: string | number | null; // ?;
 	rendered_in?: number; // ?;
@@ -128,4 +128,5 @@ export interface AppConfig {
 	autoscroll: boolean;
 	api_prefix: string;
 	api_url: string;
+	fill_height?: boolean;
 }

package/src/vite-env-override.d.ts

@@ -16,5 +16,6 @@ declare module "virtual:component-loader" {
 	export function load_component(args: Args): {
 		name: ComponentMeta["type"];
 		component: LoadedComponent;
+		runtime: false | typeof import("svelte");
 	};
 }