@gradio/core 0.27.2 → 0.29.0

package/package.json

@@ -1,69 +1,68 @@
 {
   "name": "@gradio/core",
-  "version": "0.27.2",
+  "version": "0.29.0",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.22",
-    "@gradio/annotatedimage": "^0.9.29",
-    "@gradio/audio": "^0.17.26",
-    "@gradio/box": "^0.2.23",
+    "@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/atoms": "^0.16.5",
-    "@gradio/button": "^0.5.11",
-    "@gradio/checkbox": "^0.4.28",
-    "@gradio/chatbot": "^0.26.23",
-    "@gradio/checkboxgroup": "^0.6.27",
-    "@gradio/code": "^0.14.15",
-    "@gradio/client": "^1.17.1",
-    "@gradio/colorpicker": "^0.4.27",
-    "@gradio/column": "^0.2.1",
-    "@gradio/dataframe": "^0.19.1",
-    "@gradio/dataset": "^0.4.32",
-    "@gradio/dropdown": "^0.10.2",
-    "@gradio/fallback": "^0.4.27",
-    "@gradio/datetime": "^0.3.20",
-    "@gradio/downloadbutton": "^0.4.11",
-    "@gradio/fileexplorer": "^0.5.39",
-    "@gradio/file": "^0.12.28",
-    "@gradio/form": "^0.2.23",
-    "@gradio/group": "^0.2.0",
-    "@gradio/html": "^0.7.0",
-    "@gradio/icons": "^0.13.1",
-    "@gradio/highlightedtext": "^0.9.10",
-    "@gradio/gallery": "^0.15.31",
-    "@gradio/imageeditor": "^0.16.5",
-    "@gradio/image": "^0.22.17",
-    "@gradio/imageslider": "^0.2.13",
-    "@gradio/json": "^0.5.29",
-    "@gradio/label": "^0.5.19",
-    "@gradio/model3d": "^0.14.25",
-    "@gradio/markdown": "^0.13.20",
-    "@gradio/number": "^0.6.4",
-    "@gradio/multimodaltextbox": "^0.10.17",
-    "@gradio/paramviewer": "^0.7.15",
-    "@gradio/nativeplot": "^0.7.4",
-    "@gradio/plot": "^0.9.22",
-    "@gradio/row": "^0.2.1",
-    "@gradio/sidebar": "^0.1.20",
-    "@gradio/radio": "^0.7.10",
-    "@gradio/simpledropdown": "^0.3.27",
-    "@gradio/simpletextbox": "^0.3.28",
+    "@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/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/sketchbox": "^0.6.15",
-    "@gradio/simpleimage": "^0.8.39",
-    "@gradio/statustracker": "^0.10.18",
-    "@gradio/tabitem": "^0.5.0",
-    "@gradio/slider": "^0.6.16",
-    "@gradio/textbox": "^0.10.20",
-    "@gradio/tabs": "^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/upload": "^0.16.16",
     "@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/vibeeditor": "^0.2.2",
-    "@gradio/wasm": "^0.18.1",
-    "@gradio/video": "^0.15.0"
+    "@gradio/video": "^0.16.0"
   },
   "msw": {
     "workerDirectory": "public"
@@ -80,6 +79,11 @@
       "svelte": "./dist/src/Login.svelte",
       "types": "./dist/src/Login.svelte.d.ts"
     },
+    "./navbar_store": {
+      "gradio": "./src/navbar_store.ts",
+      "import": "./src/navbar_store.ts",
+      "types": "./src/navbar_store.ts"
+    },
     "./package.json": "./package.json",
     ".": {
       "gradio": "./index.ts",

package/src/Blocks.svelte

@@ -255,6 +255,19 @@
 		});
 		update_value(updates);
 
+		// Handle navbar updates separately since they need to be updated in the store.
+		updates.forEach((update) => {
+			const component = components.find((comp) => comp.id === update.id);
+			if (component && component.type === "navbar") {
+				import("./navbar_store").then(({ navbar_config }) => {
+					navbar_config.update((current) => ({
+						...current,
+						[update.prop]: update.value
+					}));
+				});
+			}
+		});
+
 		await tick();
 	}
 
@@ -623,6 +636,53 @@
 
 			/* eslint-disable complexity */
 			function handle_status_update(message: StatusMessage): void {
+				if (message.code === "validation_error") {
+					const dep = dependencies.find((dep) => dep.id === message.fn_index);
+					if (
+						dep === undefined ||
+						message.message === undefined ||
+						typeof message.message === "string"
+					) {
+						return;
+					}
+
+					const validation_error_data: {
+						id: number;
+						prop: string;
+						value: unknown;
+					}[] = [];
+
+					message.message.forEach((message, i) => {
+						if (message.is_valid) {
+							return;
+						}
+						validation_error_data.push({
+							id: dep.inputs[i],
+							prop: "validation_error",
+							value: message.message
+						});
+
+						validation_error_data.push({
+							id: dep.inputs[i],
+							prop: "loading_status",
+							value: { validation_error: message.message }
+						});
+					});
+
+					if (validation_error_data.length > 0) {
+						update_value(validation_error_data);
+						loading_status.update({
+							status: "complete",
+							fn_index: message.fn_index,
+							eta: 0,
+							queue: false,
+							queue_position: null
+						});
+						set_status($loading_status);
+
+						return;
+					}
+				}
 				if (message.broken && !broken_connection) {
 					messages = [
 						new_message(
@@ -729,7 +789,7 @@
 					!broken_connection &&
 					!message.session_not_found
 				) {
-					if (status.message) {
+					if (status.message && typeof status.message === "string") {
 						const _message = status.message.replace(
 							MESSAGE_QUOTE_RE,
 							(_, b) => b
@@ -814,6 +874,11 @@
 		target.addEventListener("prop_change", (e: Event) => {
 			if (!isCustomEvent(e)) throw new Error("not a custom event");
 			const { id, prop, value } = e.detail;
+			if (prop === "value") {
+				update_value([
+					{ id, prop: "loading_status", value: { validation_error: undefined } }
+				]);
+			}
 			update_value([{ id, prop, value }]);
 			if (prop === "input_ready" && value === false) {
 				inputs_waiting.push(id);
@@ -990,6 +1055,46 @@
 			screen_recorder.startRecording();
 		}
 	}
+
+	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_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(handle_resize);
+		const res = new ResizeObserver(handle_resize);
+
+		mut.observe(root_container, {
+			childList: true,
+			subtree: true,
+			attributes: true
+		});
+
+		res.observe(root_container);
+
+		return () => {
+			mut.disconnect();
+			res.disconnect();
+		};
+	});
 </script>
 
 <svelte:head>
@@ -1005,6 +1110,7 @@
 	<div
 		class="contain"
 		style:flex-grow={app_mode ? "1" : "auto"}
+		bind:this={root_container}
 		style:margin-right={vibe_mode ? `${vibe_editor_width}px` : "0"}
 	>
 		{#if $_layout && app.config}
@@ -1023,7 +1129,7 @@
 	</div>
 
 	{#if show_footer}
-		<footer>
+		<footer bind:clientHeight={footer_height}>
 			{#if show_api}
 				<button
 					on:click={() => {

package/src/Embed.svelte

@@ -1,24 +1,85 @@
 <script lang="ts">
-	import { getContext } from "svelte";
+	import { getContext, onMount } from "svelte";
 	import space_logo from "./images/spaces.svg";
 	import { _ } from "svelte-i18n";
+	import { navbar_config } from "./navbar_store";
+
 	export let wrapper: HTMLDivElement;
 	export let version: string;
 	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[] = [];
+
+	let navbar_component = components.find((c) => c.type === "navbar");
+	let navbar: {
+		visible: boolean;
+		main_page_name: string | false;
+		value: [string, string][] | null;
+	} | null = navbar_component
+		? {
+				visible: navbar_component.props.visible,
+				main_page_name: navbar_component.props.main_page_name,
+				value: navbar_component.props.value
+			}
+		: null;
+
+	if (navbar) {
+		navbar_config.set(navbar);
+	}
+
+	$: if ($navbar_config) {
+		navbar = {
+			visible: $navbar_config.visible ?? true,
+			main_page_name: $navbar_config.main_page_name ?? "Home",
+			value: $navbar_config.value ?? null
+		};
+	}
+
+	$: show_navbar =
+		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"
+				? 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])
+					)
+				: 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));
+			const additional_pages = navbar.value
+				.map(
+					([page_name, page_path]) => [page_path, page_name] as [string, string]
+				)
+				.filter(([route]) => !existing_routes.has(route));
+			return [...base_pages, ...additional_pages];
+		}
 
-	const set_page: ((page: string) => void) | undefined =
-		getContext("set_lite_page");
+		return base_pages;
+	})();
 </script>
 
 <div
@@ -31,27 +92,24 @@
 	style:flex-grow={!display ? "1" : "auto"}
 	data-iframe-height
 >
-	{#if pages.length > 1}
+	{#if show_navbar}
 		<div class="nav-holder">
 			<nav class="fillable" class:fill_width>
-				{#each 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={`${root}/${route}`}
-							class:active={route === current_page}
-							data-sveltekit-reload
-							>{label}
-						</a>
-					{/if}
+				{#each effective_pages as [route, label], i}
+					<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>
@@ -97,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

@@ -71,13 +71,14 @@ export function is_translation_metadata(obj: any): obj is I18nData {
 	return result;
 }
 
+export const i18n_marker = "__i18n__";
+
 // handles strings with embedded JSON metadata of shape "__i18n__{"key": "some.key"}"
 export function translate_if_needed(value: any): string {
 	if (typeof value !== "string") {
 		return value;
 	}
 
-	const i18n_marker = "__i18n__";
 	const marker_index = value.indexOf(i18n_marker);
 
 	if (marker_index === -1) {
@@ -154,8 +155,26 @@ 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>>
+	custom_translations?: Record<string, Record<string, string>>,
+	preferred_locale?: string
 ): Promise<void> {
 	const should_reinitialize =
 		i18n_initialized && custom_translations !== previous_translations;
@@ -171,12 +190,16 @@ export async function setupi18n(
 		custom_translations: custom_translations ?? {}
 	});
 
+	let initial_locale: string | null = null;
 	const browser_locale = getLocaleFromNavigator();
-
-	let initial_locale =
-		browser_locale && available_locales.includes(browser_locale)
-			? browser_locale
-			: null;
+	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];