@gradio/core 0.28.0 → 0.29.1

package/package.json

@@ -1,69 +1,68 @@
 {
   "name": "@gradio/core",
-  "version": "0.28.0",
+  "version": "0.29.1",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.23",
-    "@gradio/annotatedimage": "^0.9.30",
-    "@gradio/atoms": "^0.17.0",
-    "@gradio/audio": "^0.18.0",
+    "@gradio/accordion": "^0.5.24",
+    "@gradio/annotatedimage": "^0.10.0",
+    "@gradio/atoms": "^0.18.1",
+    "@gradio/audio": "^0.19.2",
     "@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/box": "^0.2.25",
+    "@gradio/button": "^0.5.13",
+    "@gradio/chatbot": "^0.27.0",
+    "@gradio/checkboxgroup": "^0.7.0",
+    "@gradio/checkbox": "^0.4.31",
+    "@gradio/client": "^1.19.1",
+    "@gradio/code": "^0.15.0",
+    "@gradio/column": "^0.2.2",
+    "@gradio/colorpicker": "^0.4.29",
+    "@gradio/dataframe": "^0.20.1",
+    "@gradio/dataset": "^0.4.34",
+    "@gradio/datetime": "^0.3.22",
+    "@gradio/downloadbutton": "^0.4.12",
+    "@gradio/fallback": "^0.4.29",
+    "@gradio/file": "^0.13.0",
+    "@gradio/dropdown": "^0.10.4",
+    "@gradio/fileexplorer": "^0.5.41",
+    "@gradio/form": "^0.2.25",
+    "@gradio/gallery": "^0.15.34",
+    "@gradio/group": "^0.2.1",
     "@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/highlightedtext": "^0.9.13",
+    "@gradio/html": "^0.7.2",
+    "@gradio/image": "^0.23.1",
+    "@gradio/imageeditor": "^0.17.1",
+    "@gradio/imageslider": "^0.3.0",
+    "@gradio/json": "^0.5.31",
+    "@gradio/markdown": "^0.13.22",
+    "@gradio/multimodaltextbox": "^0.10.20",
+    "@gradio/model3d": "^0.15.0",
+    "@gradio/label": "^0.5.21",
+    "@gradio/nativeplot": "^0.8.0",
+    "@gradio/paramviewer": "^0.8.1",
+    "@gradio/number": "^0.7.1",
+    "@gradio/plot": "^0.9.24",
+    "@gradio/radio": "^0.7.12",
+    "@gradio/sidebar": "^0.1.23",
+    "@gradio/row": "^0.2.2",
+    "@gradio/simpleimage": "^0.9.0",
+    "@gradio/simpletextbox": "^0.3.30",
+    "@gradio/sketchbox": "^0.6.17",
+    "@gradio/simpledropdown": "^0.3.29",
+    "@gradio/slider": "^0.6.18",
     "@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/tabitem": "^0.6.1",
+    "@gradio/textbox": "^0.11.1",
+    "@gradio/tabs": "^0.5.1",
+    "@gradio/statustracker": "^0.11.1",
     "@gradio/timer": "^0.4.5",
+    "@gradio/upload": "^0.17.1",
     "@gradio/theme": "^0.4.0",
-    "@gradio/uploadbutton": "^0.9.11",
+    "@gradio/uploadbutton": "^0.9.12",
+    "@gradio/vibeeditor": "^0.3.0",
     "@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

@@ -876,7 +876,11 @@
 			const { id, prop, value } = e.detail;
 			if (prop === "value") {
 				update_value([
-					{ id, prop: "loading_status", value: { validation_error: undefined } }
+					{
+						id,
+						prop: "loading_status",
+						value: { validation_error: undefined }
+					}
 				]);
 			}
 			update_value([{ id, prop, value }]);
@@ -1059,25 +1063,27 @@
 	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;
 	}
 
+	function handle_resize(): void {
+		if ("parentIFrame" in window) {
+			const box = root_container.children[0].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 +1091,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];