@gradio/core 0.27.2 → 0.28.0

package/package.json

@@ -1,69 +1,69 @@
 {
   "name": "@gradio/core",
-  "version": "0.27.2",
+  "version": "0.28.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/accordion": "^0.5.23",
+    "@gradio/annotatedimage": "^0.9.30",
+    "@gradio/atoms": "^0.17.0",
+    "@gradio/audio": "^0.18.0",
     "@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/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/fileexplorer": "^0.5.39",
-    "@gradio/file": "^0.12.28",
-    "@gradio/form": "^0.2.23",
+    "@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.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/html": "^0.7.1",
+    "@gradio/gallery": "^0.15.32",
+    "@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/sidebar": "^0.1.20",
-    "@gradio/radio": "^0.7.10",
-    "@gradio/simpledropdown": "^0.3.27",
-    "@gradio/simpletextbox": "^0.3.28",
+    "@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/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/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/theme": "^0.4.0",
     "@gradio/uploadbutton": "^0.9.11",
-    "@gradio/upload": "^0.16.16",
-    "@gradio/timer": "^0.4.5",
     "@gradio/utils": "^0.10.2",
-    "@gradio/vibeeditor": "^0.2.2",
-    "@gradio/wasm": "^0.18.1",
-    "@gradio/video": "^0.15.0"
+    "@gradio/upload": "^0.16.17",
+    "@gradio/vibeeditor": "^0.2.3",
+    "@gradio/video": "^0.15.1",
+    "@gradio/wasm": "^0.18.1"
   },
   "msw": {
     "workerDirectory": "public"
@@ -80,6 +80,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,40 @@
 			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;
+	}
+
+	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);
+			}
+		});
+
+		mut.observe(root_container, {
+			childList: true,
+			subtree: true,
+			attributes: true
+		});
+
+		return () => {
+			mut.disconnect();
+		};
+	});
 </script>
 
 <svelte:head>
@@ -1005,6 +1104,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 +1123,7 @@
 	</div>
 
 	{#if show_footer}
-		<footer>
+		<footer bind:clientHeight={footer_height}>
 			{#if show_api}
 				<button
 					on:click={() => {

package/src/Embed.svelte

@@ -1,7 +1,9 @@
 <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;
@@ -16,9 +18,63 @@
 	export let pages: [string, string][] = [];
 	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;
+		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 base_pages =
+			navbar &&
+			navbar.main_page_name !== false &&
+			navbar.main_page_name !== "Home"
+				? pages.map(([route, label], index) =>
+						index === 0 && route === "" && label === "Home"
+							? ([route, navbar!.main_page_name] as [string, string])
+							: ([route, label] as [string, string])
+					)
+				: pages;
+
+		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];
+		}
+
+		return base_pages;
+	})();
 </script>
 
 <div
@@ -31,10 +87,10 @@
 	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}
+				{#each effective_pages as [route, label], i}
 					{#if is_lite}
 						<button
 							class:active={route === current_page}
@@ -46,9 +102,18 @@
 						</button>
 					{:else}
 						<a
-							href={`${root}/${route}`}
+							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}

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) {
@@ -155,7 +156,8 @@ let i18n_initialized = false;
 let previous_translations: Record<string, Record<string, string>> | undefined;
 
 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,7 +173,7 @@ export async function setupi18n(
 		custom_translations: custom_translations ?? {}
 	});
 
-	const browser_locale = getLocaleFromNavigator();
+	const browser_locale = preferred_locale ?? getLocaleFromNavigator();
 
 	let initial_locale =
 		browser_locale && available_locales.includes(browser_locale)

package/src/init.ts

@@ -12,6 +12,7 @@ import { load_component } from "virtual:component-loader";
 import type { client_return } from "@gradio/client";
 import { create_loading_status_store } from "./stores";
 import { _ } from "svelte-i18n";
+import { i18n_marker } from "./i18n";
 
 export interface UpdateTransaction {
 	id: number;
@@ -95,7 +96,7 @@ export function create_components(
 	function set_event_specific_args(dependencies: Dependency[]): void {
 		dependencies.forEach((dep) => {
 			dep.targets.forEach((target) => {
-				const instance = instance_map[target[0]];
+				const instance = instance_map?.[target[0]];
 				if (instance && dep.event_specific_args?.length > 0) {
 					dep.event_specific_args?.forEach((arg: string) => {
 						instance.props[arg] = dep[arg as keyof Dependency];
@@ -257,7 +258,7 @@ export function create_components(
 
 		target_map.set(_target_map);
 
-		let current_element = instance_map[layout.id];
+		let current_element = instance_map?.[layout.id];
 		let all_current_children: ComponentMeta[] = [];
 		const add_to_current_children = (component: ComponentMeta): void => {
 			all_current_children.push(component);
@@ -276,7 +277,7 @@ export function create_components(
 					(c) => c.key === component.key
 				);
 				if (component.key != null && replacement_component !== undefined) {
-					const instance = instance_map[component.id];
+					const instance = instance_map?.[component.id];
 					for (const prop in replacement_component.props) {
 						if (
 							!(
@@ -289,7 +290,7 @@ export function create_components(
 						}
 					}
 				} else {
-					delete instance_map[_id];
+					if (instance_map) delete instance_map[_id];
 					if (_component_map.has(_id)) {
 						_component_map.delete(_id);
 					}
@@ -298,17 +299,18 @@ export function create_components(
 		});
 
 		const components_to_add = new_components.concat(
-			replacement_components.filter((c) => !instance_map[c.id])
+			replacement_components.filter((c) => !instance_map?.[c.id])
 		);
 
 		components_to_add.forEach((c) => {
 			instance_map[c.id] = c;
+
 			_component_map.set(c.id, c);
 		});
 		if (current_element.parent) {
 			current_element.parent.children![
 				current_element.parent.children!.indexOf(current_element)
-			] = instance_map[layout.id];
+			] = instance_map?.[layout.id];
 		}
 
 		walk_layout(
@@ -332,7 +334,7 @@ export function create_components(
 		components: ComponentMeta[],
 		parent?: ComponentMeta
 	): Promise<ComponentMeta> {
-		const instance = instance_map[node.id];
+		const instance = instance_map?.[node.id];
 		if (!instance.component) {
 			const constructor_key = instance.component_class_id || instance.type;
 			let component_constructor = constructor_map.get(constructor_key);
@@ -379,10 +381,13 @@ export function create_components(
 			);
 		}
 
-		if (instance.type === "tabs" && !instance.props.initial_tabs) {
+		if (
+			(instance.type === "tabs" && !instance.props.initial_tabs) ||
+			(instance.type === "walkthrough" && !instance.props.initial_tabs)
+		) {
 			const tab_items_props =
 				node.children?.map((c, i) => {
-					const instance = instance_map[c.id];
+					const instance = instance_map?.[c.id];
 					instance.props.id ??= c.id;
 					return {
 						type: instance.type,
@@ -394,12 +399,15 @@ export function create_components(
 					};
 				}) || [];
 
+			const _type =
+				instance.type === "walkthrough" ? "walkthroughstep" : "tabitem";
+
 			const child_tab_items = tab_items_props.filter(
-				(child) => child.type === "tabitem"
+				(child) => child.type === _type
 			);
 
 			instance.props.initial_tabs = child_tab_items?.map((child) => ({
-				label: child.props.label,
+				label: child.props.label.includes(i18n_marker) ? "" : child.props.label,
 				id: child.props.id,
 				visible:
 					typeof child.props.visible === "boolean" ? child.props.visible : true,
@@ -408,9 +416,9 @@ export function create_components(
 			}));
 		}
 
-		if (instance.type === "tabs") {
+		if (instance.type === "tabs" || instance.type === "walkthrough") {
 			node.children?.forEach((c, i) => {
-				const child = instance_map[c.id];
+				const child = instance_map?.[c.id];
 				child.props.order = i;
 			});
 		}
@@ -476,7 +484,7 @@ export function create_components(
 	function has_visibility_changes(updates: UpdateTransaction[][]): boolean {
 		return updates.some((update_batch) =>
 			update_batch.some((update) => {
-				const instance = instance_map[update.id];
+				const instance = instance_map?.[update.id];
 				if (!instance) return false;
 
 				// Check for visibility property changes
@@ -510,7 +518,7 @@ export function create_components(
 				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];
+					const instance = instance_map?.[update.id];
 					if (!instance) continue;
 					let new_value;
 					const old_value = instance.props[update.prop];