@gradio/core 0.28.0 → 0.29.0

package/package.json

@@ -1,69 +1,68 @@
 {
   "name": "@gradio/core",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.23",
-    "@gradio/annotatedimage": "^0.9.30",
-    "@gradio/atoms": "^0.17.0",
-    "@gradio/audio": "^0.18.0",
+    "@gradio/annotatedimage": "^0.10.0",
+    "@gradio/accordion": "^0.5.24",
+    "@gradio/atoms": "^0.18.0",
+    "@gradio/box": "^0.2.25",
     "@gradio/browserstate": "^0.3.2",
-    "@gradio/box": "^0.2.24",
-    "@gradio/button": "^0.5.12",
-    "@gradio/chatbot": "^0.26.24",
-    "@gradio/checkbox": "^0.4.29",
-    "@gradio/checkboxgroup": "^0.6.28",
-    "@gradio/client": "^1.18.0",
-    "@gradio/code": "^0.14.16",
-    "@gradio/colorpicker": "^0.4.28",
-    "@gradio/dataframe": "^0.19.2",
-    "@gradio/dataset": "^0.4.33",
-    "@gradio/datetime": "^0.3.21",
-    "@gradio/downloadbutton": "^0.4.11",
-    "@gradio/dropdown": "^0.10.3",
-    "@gradio/fallback": "^0.4.28",
-    "@gradio/column": "^0.2.1",
-    "@gradio/file": "^0.12.29",
-    "@gradio/fileexplorer": "^0.5.40",
-    "@gradio/form": "^0.2.24",
-    "@gradio/highlightedtext": "^0.9.11",
-    "@gradio/group": "^0.2.0",
-    "@gradio/html": "^0.7.1",
-    "@gradio/gallery": "^0.15.32",
+    "@gradio/audio": "^0.19.0",
+    "@gradio/button": "^0.5.13",
+    "@gradio/chatbot": "^0.27.0",
+    "@gradio/checkbox": "^0.4.30",
+    "@gradio/checkboxgroup": "^0.7.0",
+    "@gradio/code": "^0.15.0",
+    "@gradio/colorpicker": "^0.4.29",
+    "@gradio/client": "^1.19.0",
+    "@gradio/column": "^0.2.2",
+    "@gradio/dataset": "^0.4.34",
+    "@gradio/downloadbutton": "^0.4.12",
+    "@gradio/dataframe": "^0.19.3",
+    "@gradio/datetime": "^0.3.22",
+    "@gradio/fallback": "^0.4.29",
+    "@gradio/dropdown": "^0.10.4",
+    "@gradio/file": "^0.13.0",
+    "@gradio/fileexplorer": "^0.5.41",
+    "@gradio/form": "^0.2.25",
+    "@gradio/gallery": "^0.15.33",
+    "@gradio/highlightedtext": "^0.9.12",
+    "@gradio/group": "^0.2.1",
+    "@gradio/html": "^0.7.2",
+    "@gradio/image": "^0.23.0",
     "@gradio/icons": "^0.14.0",
-    "@gradio/imageeditor": "^0.16.6",
-    "@gradio/imageslider": "^0.2.14",
-    "@gradio/image": "^0.22.18",
-    "@gradio/json": "^0.5.30",
-    "@gradio/label": "^0.5.20",
-    "@gradio/multimodaltextbox": "^0.10.18",
-    "@gradio/nativeplot": "^0.7.5",
-    "@gradio/model3d": "^0.14.26",
-    "@gradio/markdown": "^0.13.21",
-    "@gradio/number": "^0.7.0",
-    "@gradio/paramviewer": "^0.7.16",
-    "@gradio/row": "^0.2.1",
-    "@gradio/simpleimage": "^0.8.40",
-    "@gradio/sidebar": "^0.1.21",
-    "@gradio/plot": "^0.9.23",
-    "@gradio/simpledropdown": "^0.3.28",
-    "@gradio/simpletextbox": "^0.3.29",
-    "@gradio/sketchbox": "^0.6.16",
-    "@gradio/slider": "^0.6.17",
+    "@gradio/imageslider": "^0.3.0",
+    "@gradio/imageeditor": "^0.17.0",
+    "@gradio/label": "^0.5.21",
+    "@gradio/json": "^0.5.31",
+    "@gradio/markdown": "^0.13.22",
+    "@gradio/model3d": "^0.15.0",
+    "@gradio/multimodaltextbox": "^0.10.19",
+    "@gradio/paramviewer": "^0.8.0",
+    "@gradio/number": "^0.7.1",
+    "@gradio/nativeplot": "^0.7.6",
+    "@gradio/plot": "^0.9.24",
+    "@gradio/radio": "^0.7.12",
+    "@gradio/simpledropdown": "^0.3.29",
+    "@gradio/sidebar": "^0.1.22",
+    "@gradio/simpleimage": "^0.9.0",
+    "@gradio/row": "^0.2.2",
+    "@gradio/simpletextbox": "^0.3.30",
+    "@gradio/slider": "^0.6.18",
+    "@gradio/sketchbox": "^0.6.17",
     "@gradio/state": "^0.1.2",
-    "@gradio/statustracker": "^0.11.0",
-    "@gradio/tabitem": "^0.6.0",
-    "@gradio/radio": "^0.7.11",
-    "@gradio/tabs": "^0.5.0",
-    "@gradio/textbox": "^0.11.0",
-    "@gradio/timer": "^0.4.5",
+    "@gradio/tabitem": "^0.6.1",
+    "@gradio/tabs": "^0.5.1",
+    "@gradio/statustracker": "^0.11.1",
+    "@gradio/textbox": "^0.11.1",
     "@gradio/theme": "^0.4.0",
-    "@gradio/uploadbutton": "^0.9.11",
+    "@gradio/timer": "^0.4.5",
+    "@gradio/upload": "^0.17.0",
+    "@gradio/vibeeditor": "^0.2.4",
+    "@gradio/uploadbutton": "^0.9.12",
     "@gradio/utils": "^0.10.2",
-    "@gradio/upload": "^0.16.17",
-    "@gradio/vibeeditor": "^0.2.3",
-    "@gradio/video": "^0.15.1",
-    "@gradio/wasm": "^0.18.1"
+    "@gradio/video": "^0.16.0"
   },
   "msw": {
     "workerDirectory": "public"

package/src/Blocks.svelte

@@ -1066,18 +1066,21 @@
 		return container.children[container.children.length - 1] as HTMLElement;
 	}
 
+	function handle_resize(): void {
+		if ("parentIFrame" in window) {
+			const box = root_node?.getBoundingClientRect();
+			if (!box) return;
+			window.parentIFrame?.size(box.bottom + footer_height + 32);
+		}
+	}
+
 	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);
-			}
-		});
+		const mut = new MutationObserver(handle_resize);
+		const res = new ResizeObserver(handle_resize);
 
 		mut.observe(root_container, {
 			childList: true,
@@ -1085,8 +1088,11 @@
 			attributes: true
 		});
 
+		res.observe(root_container);
+
 		return () => {
 			mut.disconnect();
+			res.disconnect();
 		};
 	});
 </script>

package/src/Embed.svelte

@@ -9,20 +9,16 @@
 	export let initial_height: string;
 	export let fill_width: boolean;
 	export let is_embed: boolean;
-	export let is_lite: boolean;
 
 	export let space: string | null;
 	export let display: boolean;
 	export let info: boolean;
 	export let loaded: boolean;
-	export let pages: [string, string][] = [];
+	export let pages: [string, string, boolean][] = [];
 	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;
@@ -52,16 +48,25 @@
 		pages.length > 1 && (navbar === null || navbar.visible !== false);
 
 	$: effective_pages = (() => {
+		let visible_pages = pages.filter(([route, label, show], index) => {
+			if (index === 0 && route === "") {
+				return navbar?.main_page_name !== false;
+			}
+			return show !== false;
+		});
+
 		let base_pages =
 			navbar &&
 			navbar.main_page_name !== false &&
 			navbar.main_page_name !== "Home"
-				? pages.map(([route, label], index) =>
+				? visible_pages.map(([route, label, show], index) =>
 						index === 0 && route === "" && label === "Home"
 							? ([route, navbar!.main_page_name] as [string, string])
 							: ([route, label] as [string, string])
 					)
-				: pages;
+				: visible_pages.map(
+						([route, label]) => [route, label] as [string, string]
+					);
 
 		if (navbar?.value && navbar.value.length > 0) {
 			const existing_routes = new Set(base_pages.map(([route]) => route));
@@ -91,32 +96,20 @@
 		<div class="nav-holder">
 			<nav class="fillable" class:fill_width>
 				{#each effective_pages as [route, label], i}
-					{#if is_lite}
-						<button
-							class:active={route === current_page}
-							on:click={(e) => {
-								e.preventDefault();
-								set_page?.(route);
-							}}
-							>{label}
-						</button>
-					{:else}
-						<a
-							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}
+					<a
+						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>
 				{/each}
 			</nav>
 		</div>
@@ -162,16 +155,14 @@
 		margin: 0 auto;
 		padding: 0 var(--size-8);
 	}
-	nav a,
-	button {
+	nav a {
 		padding: var(--size-1) var(--size-2);
 		border-radius: var(--block-radius);
 		border-width: var(--block-border-width);
 		border-color: transparent;
 		color: var(--body-text-color-subdued);
 	}
-	nav a.active,
-	button.active {
+	nav a.active {
 		color: var(--body-text-color);
 		border-color: var(--block-border-color);
 		background-color: var(--block-background-fill);

package/src/Render.svelte

@@ -54,13 +54,20 @@
 
 	$: {
 		if (node && node.type === "form") {
-			if (
-				node.children?.every(
-					(c) => typeof c.props.visible === "boolean" && !c.props.visible
-				)
-			) {
-				node.props.visible = false;
+			// Check if all children are invisible (false or "hidden")
+			const allChildrenInvisible = node.children?.every(
+				(c) => c.props.visible === false || c.props.visible === "hidden"
+			);
+
+			if (allChildrenInvisible) {
+				// Check if any child is "hidden" vs false
+				const hasHiddenChild = node.children?.some(
+					(c) => c.props.visible === "hidden"
+				);
+				// If any child is "hidden", form should be "hidden", otherwise false
+				node.props.visible = hasHiddenChild ? "hidden" : false;
 			} else {
+				// If any child is visible, form should be visible
 				node.props.visible = true;
 			}
 		}
@@ -94,7 +101,8 @@
 		{...node.props}
 		{theme_mode}
 		{root}
-		visible={typeof node.props.visible === "boolean"
+		visible={typeof node.props.visible === "boolean" ||
+		node.props.visible === "hidden"
 			? node.props.visible
 			: true}
 	>

package/src/RenderComponent.svelte

@@ -17,7 +17,7 @@
 	export let elem_id: string;
 	export let elem_classes: string[];
 	export let _id: number;
-	export let visible: boolean;
+	export let visible: boolean | "hidden";
 
 	const s = (id: number, p: string, v: any): CustomEvent =>
 		new CustomEvent("prop_change", { detail: { id, prop: p, value: v } });

package/src/api_docs/CodeSnippet.svelte

@@ -58,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(
@@ -74,11 +74,11 @@
 								)}</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>

package/src/i18n.ts

@@ -155,6 +155,23 @@ export let all_common_keys: Set<string> = new Set();
 let i18n_initialized = false;
 let previous_translations: Record<string, Record<string, string>> | undefined;
 
+function get_lang_from_preferred_locale(header: string): string | null {
+	const options = header
+		.split(",")
+		.map((value) =>
+			value.includes(";") ? value.split(";").slice(0, 2) : [value, 1]
+		);
+	options.sort(
+		(a, b) => parseFloat(b[1] as string) - parseFloat(a[1] as string)
+	);
+	for (const [lang, _] of options) {
+		if (available_locales.includes(lang as string)) {
+			return lang as string;
+		}
+	}
+	return null;
+}
+
 export async function setupi18n(
 	custom_translations?: Record<string, Record<string, string>>,
 	preferred_locale?: string
@@ -173,12 +190,16 @@ export async function setupi18n(
 		custom_translations: custom_translations ?? {}
 	});
 
-	const browser_locale = preferred_locale ?? getLocaleFromNavigator();
-
-	let initial_locale =
-		browser_locale && available_locales.includes(browser_locale)
-			? browser_locale
-			: null;
+	let initial_locale: string | null = null;
+	const browser_locale = getLocaleFromNavigator();
+	if (preferred_locale) {
+		initial_locale = get_lang_from_preferred_locale(preferred_locale);
+	} else {
+		initial_locale =
+			browser_locale && available_locales.includes(browser_locale)
+				? browser_locale
+				: null;
+	}
 
 	if (!initial_locale) {
 		const normalized_locale = browser_locale?.split("-")[0];

package/src/init.ts

@@ -89,7 +89,6 @@ export function create_components(
 		value_change_cb = cb;
 	}
 
-	// Store current layout and root for dynamic visibility recalculation
 	let current_layout: LayoutNode;
 	let current_root: string;
 
@@ -123,15 +122,12 @@ export function create_components(
 			fill_height: boolean;
 		};
 	}): Promise<void> {
-		// make sure the state is settled before proceeding
 		flush();
 		app = _app;
 
 		if (instance_map) {
-			// re-render in reload mode
 			components.forEach((c) => {
 				if (c.props.value == null && c.key) {
-					// If the component has a key, we preserve its value by finding a matching instance with the same key
 					const matching_instance = Object.values(instance_map).find(
 						(instance) => instance.key === c.key
 					);
@@ -150,14 +146,17 @@ export function create_components(
 		_component_map = new Map();
 		instance_map = {};
 
-		// Store current layout and root for dynamic visibility recalculation
 		current_layout = layout;
 		current_root = root;
 
 		_rootNode = {
 			id: layout.id,
 			type: "column",
-			props: { interactive: false, scale: options.fill_height ? 1 : null },
+			props: {
+				interactive: false,
+				scale: options.fill_height ? 1 : null,
+				visible: true
+			},
 			has_modes: false,
 			instance: null as unknown as ComponentMeta["instance"],
 			component: null as unknown as ComponentMeta["component"],
@@ -410,7 +409,10 @@ export function create_components(
 				label: child.props.label.includes(i18n_marker) ? "" : child.props.label,
 				id: child.props.id,
 				visible:
-					typeof child.props.visible === "boolean" ? child.props.visible : true,
+					typeof child.props.visible === "boolean" ||
+					child.props.visible === "hidden"
+						? child.props.visible
+						: true,
 				interactive: child.props.interactive,
 				order: child.props.order
 			}));
@@ -446,7 +448,6 @@ export function create_components(
 		for (const component of components_to_load) {
 			const constructor_key = component.component_class_id || component.type;
 
-			// Only load if not already loaded
 			if (!constructor_map.has(constructor_key)) {
 				const { component: loadable_component, example_components } =
 					get_component(
@@ -464,7 +465,6 @@ export function create_components(
 					}
 				}
 
-				// Load the component if it doesn't exist yet
 				if (!component.component) {
 					component.component = (await loadable_component)?.default;
 				}
@@ -487,10 +487,8 @@ export function create_components(
 				const instance = instance_map?.[update.id];
 				if (!instance) return false;
 
-				// Check for visibility property changes
 				if (update.prop === "visible") return true;
 
-				// Check for selected tab changes in tabs components
 				if (update.prop === "selected" && instance.type === "tabs") return true;
 
 				return false;
@@ -505,7 +503,6 @@ export function create_components(
 			? [..._component_map.values()]
 			: _components;
 
-		// Capture current visibility state before applying updates
 		if (had_visibility_changes && current_layout) {
 			previous_visible_ids = determine_visible_components(
 				current_layout,
@@ -541,10 +538,10 @@ export function create_components(
 					}
 				}
 			}
+
 			return layout;
 		});
 
-		// After applying updates, check if we need to load new components
 		if (had_visibility_changes && current_layout && previous_visible_ids) {
 			raf(async () => {
 				const new_visible_ids = determine_visible_components(
@@ -553,17 +550,14 @@ export function create_components(
 				);
 				const newly_visible_ids = new Set<number>();
 
-				// Find components that are now visible but weren't before
 				for (const id of new_visible_ids) {
 					if (!previous_visible_ids!.has(id)) {
 						newly_visible_ids.add(id);
 					}
 				}
 
-				// Load the newly visible components
 				await load_newly_visible_components(newly_visible_ids, all_components);
 
-				// Trigger a layout update to render the newly loaded components
 				if (newly_visible_ids.size > 0) {
 					layout_store.update((layout) => layout);
 				}
@@ -906,13 +900,11 @@ function get_selected_tab_id(
 	layout: LayoutNode,
 	components: ComponentMeta[]
 ): string | number | undefined {
-	// Check if selected prop is a string or number
 	const selected = component.props.selected;
 	if (typeof selected === "string" || typeof selected === "number") {
 		return selected;
 	}
 
-	// If no tab is explicitly selected, find the first visible and interactive tab
 	if (layout.children) {
 		for (const child of layout.children) {
 			const child_component = components.find((c) => c.id === child.id);
@@ -975,27 +967,42 @@ function determine_visible_components(
 	parent_tabs_context?: { selected_tab_id?: string | number }
 ): Set<number> {
 	const visible_components: Set<number> = new Set();
+
 	const component = components.find((c) => c.id === layout.id);
 
 	if (!component) {
 		return visible_components;
 	}
 
-	// Check if the component itself is visible
 	const component_visible =
-		parent_visible &&
-		(typeof component.props.visible === "boolean"
-			? component.props.visible
-			: true);
+		component.props.visible !== false &&
+		component.props.visible !== "hidden" &&
+		parent_visible;
+
+	const should_load = component.props.visible === "hidden" || component_visible;
+
+	if (!should_load) {
+		return visible_components;
+	}
+
+	if (component.type === "tabs") {
+		const selected_tab_id = get_selected_tab_id(component, layout, components);
+		const tabs_context = { selected_tab_id };
+
+		visible_components.add(layout.id);
 
-	// Handle tab_item special case
-	if (component.type === "tabitem") {
+		const child_visible = process_children_visibility(
+			layout,
+			components,
+			tabs_context
+		);
+		child_visible.forEach((id) => visible_components.add(id));
+	} else if (component.type === "tabitem") {
 		if (
 			is_tab_item_visible(component, component_visible, parent_tabs_context)
 		) {
-			visible_components.add(component.id);
+			visible_components.add(layout.id);
 
-			// Process children if this tab item is visible
 			const child_visible = process_children_visibility(
 				layout,
 				components,
@@ -1003,36 +1010,9 @@ function determine_visible_components(
 			);
 			child_visible.forEach((id) => visible_components.add(id));
 		}
-		// If tab item is not visible, none of its children should be loaded
-		return visible_components;
-	}
-
-	// Handle tabs component
-	if (component.type === "tabs") {
-		if (component_visible) {
-			visible_components.add(component.id);
-
-			// Determine which tab should be selected
-			const selected_tab_id = get_selected_tab_id(
-				component,
-				layout,
-				components
-			);
-
-			// Process children with tabs context
-			const child_visible = process_children_visibility(layout, components, {
-				selected_tab_id
-			});
-			child_visible.forEach((id) => visible_components.add(id));
-		}
-		return visible_components;
-	}
-
-	// For regular components
-	if (component_visible) {
-		visible_components.add(component.id);
+	} else {
+		visible_components.add(layout.id);
 
-		// Process children if this component is visible
 		const child_visible = process_children_visibility(
 			layout,
 			components,
@@ -1040,7 +1020,6 @@ function determine_visible_components(
 		);
 		child_visible.forEach((id) => visible_components.add(id));
 	}
-	// If component is not visible, don't process children
 
 	return visible_components;
 }
@@ -1059,13 +1038,11 @@ export function preload_visible_components(
 ): Map<ComponentMeta["type"], LoadingComponent> {
 	let constructor_map: Map<ComponentMeta["type"], LoadingComponent> = new Map();
 
-	// Determine which components should be visible
 	const visible_component_ids = determine_visible_components(
 		layout,
 		components
 	);
 
-	// Only preload visible components
 	components.forEach((c) => {
 		if (visible_component_ids.has(c.id)) {
 			const { component, example_components } = get_component(
@@ -1121,6 +1098,9 @@ export function preload_all_components(
 }
 
 function is_visible(component: ComponentMeta): boolean {
+	if (component.props.visible === "hidden") {
+		return true;
+	}
 	if (
 		typeof component.props.visible === "boolean" &&
 		component.props.visible === false