@gradio/core 1.4.0 → 1.4.2

package/package.json

@@ -1,67 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.32",
-    "@gradio/annotatedimage": "^0.11.4",
-    "@gradio/audio": "^0.22.4",
-    "@gradio/atoms": "^0.22.2",
-    "@gradio/box": "^0.2.30",
-    "@gradio/button": "^0.6.5",
+    "@gradio/accordion": "^0.5.34",
+    "@gradio/annotatedimage": "^0.11.6",
+    "@gradio/atoms": "^0.23.0",
+    "@gradio/audio": "^0.23.1",
+    "@gradio/box": "^0.2.31",
     "@gradio/browserstate": "^0.3.7",
-    "@gradio/chatbot": "^0.29.5",
-    "@gradio/checkbox": "^0.6.4",
-    "@gradio/checkboxgroup": "^0.9.4",
+    "@gradio/button": "^0.6.6",
+    "@gradio/checkbox": "^0.6.6",
+    "@gradio/chatbot": "^0.29.7",
+    "@gradio/checkboxgroup": "^0.10.1",
     "@gradio/client": "^2.1.0",
-    "@gradio/code": "^0.17.4",
-    "@gradio/colorpicker": "^0.5.7",
+    "@gradio/code": "^0.17.6",
+    "@gradio/colorpicker": "^0.5.9",
     "@gradio/column": "^0.3.2",
-    "@gradio/datetime": "^0.4.4",
-    "@gradio/dataframe": "^0.21.7",
+    "@gradio/dataframe": "^0.23.0",
+    "@gradio/dataset": "^0.5.7",
     "@gradio/downloadbutton": "^0.4.18",
-    "@gradio/dataset": "^0.5.5",
-    "@gradio/dropdown": "^0.11.5",
-    "@gradio/file": "^0.14.4",
-    "@gradio/fallback": "^0.4.35",
-    "@gradio/fileexplorer": "^0.6.4",
-    "@gradio/gallery": "^0.17.3",
-    "@gradio/form": "^0.3.1",
-    "@gradio/group": "^0.3.3",
-    "@gradio/html": "^0.11.1",
-    "@gradio/highlightedtext": "^0.11.3",
+    "@gradio/dropdown": "^0.11.7",
+    "@gradio/fallback": "^0.4.37",
+    "@gradio/datetime": "^0.4.6",
+    "@gradio/file": "^0.14.6",
+    "@gradio/fileexplorer": "^0.6.6",
+    "@gradio/form": "^0.3.2",
+    "@gradio/highlightedtext": "^0.11.5",
+    "@gradio/group": "^0.3.4",
+    "@gradio/gallery": "^0.17.5",
+    "@gradio/html": "^0.12.1",
     "@gradio/icons": "^0.15.1",
-    "@gradio/image": "^0.25.4",
-    "@gradio/imageeditor": "^0.18.7",
-    "@gradio/imageslider": "^0.4.4",
-    "@gradio/json": "^0.7.3",
-    "@gradio/label": "^0.6.4",
-    "@gradio/markdown": "^0.13.29",
-    "@gradio/multimodaltextbox": "^0.11.7",
-    "@gradio/number": "^0.8.4",
-    "@gradio/nativeplot": "^0.10.3",
-    "@gradio/paramviewer": "^0.9.5",
-    "@gradio/model3d": "^0.16.5",
-    "@gradio/plot": "^0.10.5",
-    "@gradio/sidebar": "^0.2.4",
-    "@gradio/radio": "^0.9.4",
-    "@gradio/simpledropdown": "^0.3.35",
-    "@gradio/simpleimage": "^0.9.6",
-    "@gradio/simpletextbox": "^0.3.37",
+    "@gradio/image": "^0.26.1",
+    "@gradio/imageeditor": "^0.18.9",
+    "@gradio/imageslider": "^0.4.6",
+    "@gradio/label": "^0.6.6",
+    "@gradio/json": "^0.7.5",
+    "@gradio/model3d": "^0.16.7",
+    "@gradio/markdown": "^0.13.31",
+    "@gradio/multimodaltextbox": "^0.11.9",
+    "@gradio/number": "^0.8.6",
+    "@gradio/nativeplot": "^0.10.5",
+    "@gradio/paramviewer": "^0.9.7",
+    "@gradio/plot": "^0.10.7",
+    "@gradio/radio": "^0.10.1",
     "@gradio/row": "^0.3.1",
-    "@gradio/state": "^0.2.3",
-    "@gradio/slider": "^0.7.7",
+    "@gradio/simpledropdown": "^0.3.37",
+    "@gradio/sidebar": "^0.2.6",
+    "@gradio/simpleimage": "^0.9.8",
+    "@gradio/simpletextbox": "^0.3.39",
+    "@gradio/slider": "^0.7.9",
+    "@gradio/statustracker": "^0.13.1",
     "@gradio/tabitem": "^0.6.6",
-    "@gradio/statustracker": "^0.12.5",
-    "@gradio/textbox": "^0.13.5",
-    "@gradio/tabs": "^0.5.8",
+    "@gradio/state": "^0.2.3",
+    "@gradio/tabs": "^0.5.9",
+    "@gradio/textbox": "^0.13.7",
     "@gradio/theme": "^0.6.1",
+    "@gradio/upload": "^0.17.8",
     "@gradio/timer": "^0.4.9",
-    "@gradio/upload": "^0.17.7",
-    "@gradio/utils": "^0.12.0",
+    "@gradio/utils": "^0.12.2",
     "@gradio/uploadbutton": "^0.9.18",
-    "@gradio/video": "^0.20.4",
-    "@gradio/vibeeditor": "^0.3.6"
+    "@gradio/vibeeditor": "^0.3.8",
+    "@gradio/video": "^0.20.6"
   },
   "msw": {
     "workerDirectory": "public"

package/src/gradio_helper.ts

@@ -17,7 +17,10 @@ export function formatter(value: string | null | undefined): string {
 	}
 
 	const direct_translation = translate(string_value);
-	if (direct_translation !== string_value) {
+	if (
+		typeof direct_translation === "string" &&
+		direct_translation !== string_value
+	) {
 		return direct_translation;
 	}
 

package/src/i18n.test.ts

@@ -8,8 +8,31 @@ import {
 	afterEach
 } from "vitest";
 import { Lang, process_langs } from "./i18n";
-import languagesByAnyCode from "wikidata-lang/indexes/by_any_code";
+// wikidata-lang/indexes/by_any_code uses Node.js createRequire internally.
+// Import the raw JSON data and build the index directly for browser compatibility.
+import languages from "wikidata-lang/data/languages.json";
 import BCP47 from "./lang/BCP47_codes";
+
+const languagesByAnyCode: Record<string, any[]> = {};
+for (const langData of languages) {
+	for (const codeName of [
+		"wmCode",
+		"iso6391",
+		"iso6392",
+		"iso6393",
+		"iso6396"
+	]) {
+		const codes = (langData as Record<string, any>)[codeName];
+		if (!codes) continue;
+		for (const code of codes) {
+			if (languagesByAnyCode[code] == null) {
+				languagesByAnyCode[code] = [langData];
+			} else if (!languagesByAnyCode[code].includes(langData)) {
+				languagesByAnyCode[code].push(langData);
+			}
+		}
+	}
+}
 import {
 	get_initial_locale,
 	load_translations,
@@ -25,7 +48,10 @@ vi.mock("svelte-i18n", () => ({
 	locale: { set: vi.fn() },
 	_: vi.fn((key) => `translated_${key}`),
 	addMessages: vi.fn(),
-	init: vi.fn().mockResolvedValue(undefined)
+	init: vi.fn().mockResolvedValue(undefined),
+	getLocaleFromNavigator: vi.fn(() => "en"),
+	register: vi.fn(),
+	waitLocale: vi.fn().mockResolvedValue(undefined)
 }));
 
 const mock_translations: Record<string, string> = {

package/src/init.svelte.ts

@@ -40,6 +40,20 @@ const type_map = {
 	walkthrough: "tabs",
 	walkthroughstep: "tabitem"
 };
+
+export function get_api_url(config: Omit<AppConfig, "api_url">): string {
+	// Handle api_prefix correctly when app is mounted at a subpath.
+	// config.root may not include a trailing slash, so we normalize its pathname
+	// before appending api_prefix to ensure correct URL construction.
+	const rootUrl = new URL(config.root);
+	const rootPath = rootUrl.pathname.endsWith("/")
+		? rootUrl.pathname
+		: rootUrl.pathname + "/";
+	const apiPrefix = config.api_prefix.startsWith("/")
+		? config.api_prefix
+		: "/" + config.api_prefix;
+	return new URL(rootPath.slice(0, -1) + apiPrefix, rootUrl.origin).toString();
+}
 export class AppTree {
 	/** the raw component structure received from the backend */
 	#component_payload: ComponentMeta[];
@@ -91,9 +105,10 @@ export class AppTree {
 			this.ready_resolve = resolve;
 		});
 		this.reactive_formatter = reactive_formatter;
+		const api_url = get_api_url(config);
 		this.#config = {
 			...config,
-			api_url: new URL(config.api_prefix, config.root).toString()
+			api_url
 		};
 		this.#component_payload = components;
 		this.#layout_payload = layout;
@@ -144,9 +159,10 @@ export class AppTree {
 	) {
 		this.#layout_payload = layout;
 		this.#component_payload = components;
+		const api_url = get_api_url(config);
 		this.#config = {
 			...config,
-			api_url: new URL(config.api_prefix, config.root).toString()
+			api_url
 		};
 		this.#dependency_payload = dependencies;
 
@@ -421,11 +437,6 @@ export class AppTree {
 		new_state: Partial<SharedProps> & Record<string, unknown>,
 		check_visibility: boolean = true
 	) {
-		// Visibility is tricky 😅
-		// If the component is not visible, it has not been rendered
-		// and so it has no _set_data callback
-		// Therefore, we need to traverse the tree and set the visible prop to true
-		// and then render it and its children. After that, we can call the _set_data callback
 		const node = find_node_by_id(this.root!, id);
 		let already_updated_visibility = false;
 		if (check_visibility && !node?.component) {
@@ -465,6 +476,12 @@ export class AppTree {
 			if ("value" in new_state && !dequal(old_value, new_state.value)) {
 				this.#event_dispatcher(id, "change", null);
 			}
+
+			// If this is a non-mounted tabitem, update the parent Tabs'
+			// initial_tabs so the tab button reflects the new state.
+			if (node?.type === "tabitem") {
+				this.#update_parent_tabs_initial_tab(id, node);
+			}
 		} else if (_set_data) {
 			_set_data(new_state);
 		}
@@ -492,6 +509,55 @@ export class AppTree {
 		});
 	}
 
+	/**
+	 * Updates the parent Tabs component's initial_tabs when a non-mounted
+	 * tabitem's props change. This ensures the tab button (rendered by
+	 * the Tabs component) reflects the updated state even though the
+	 * TabItem component itself is not mounted.
+	 */
+	#update_parent_tabs_initial_tab(
+		id: number,
+		node: ProcessedComponentMeta
+	): void {
+		const parent = find_parent(this.root!, id);
+		if (!parent || parent.type !== "tabs") return;
+
+		const initial_tabs = parent.props.props.initial_tabs as Tab[];
+		if (!initial_tabs) return;
+
+		const tab_index = initial_tabs.findIndex((t) => t.component_id === node.id);
+		if (tab_index === -1) return;
+
+		const i18n = node.props.props.i18n as ((str: string) => string) | undefined;
+		const raw_label = node.props.shared_props.label as string;
+		// Use original_visibility since the node's visible may have been
+		// set to false by the startup optimization for non-selected tabs.
+		const visible =
+			"original_visibility" in node
+				? (node.original_visibility as boolean)
+				: (node.props.shared_props.visible as boolean);
+		initial_tabs[tab_index] = {
+			label: i18n ? i18n(raw_label) : raw_label,
+			id: node.props.props.id as string,
+			elem_id: node.props.shared_props.elem_id,
+			visible,
+			interactive: node.props.shared_props.interactive,
+			scale: node.props.shared_props.scale || null,
+			component_id: node.id
+		};
+
+		// Trigger reactivity by replacing the array
+		parent.props.props.initial_tabs = [...initial_tabs];
+
+		// Also update via _set_data if the Tabs component is mounted
+		const parent_set_data = this.#set_callbacks.get(parent.id);
+		if (parent_set_data) {
+			parent_set_data({
+				initial_tabs: parent.props.props.initial_tabs
+			});
+		}
+	}
+
 	/**
 	 * Gets the current state of a component by its ID
 	 * @param id the ID of the component to get the state of
@@ -671,8 +737,9 @@ function gather_props(
 
 	_shared_props.load_component = (
 		name: string,
-		variant: "base" | "component" | "example"
-	) => get_component(name, "", api_url, variant).component as LoadingComponent;
+		variant: "base" | "component" | "example",
+		component_class_id?: string
+	) => get_component(name, component_class_id || "", api_url, variant);
 
 	_shared_props.visible =
 		_shared_props.visible === undefined ? true : _shared_props.visible;

package/src/{init.test.ts → init.test.skip.ts}

@@ -1,6 +1,6 @@
 import { describe, test, expect, vi } from "vitest";
 import { spy } from "tinyspy";
-import { setupServer } from "msw/node";
+import { setupWorker } from "msw/browser";
 import { http, HttpResponse } from "msw";
 import type { client_return } from "@gradio/client";
 import { Dependency, TargetMap } from "./types";
@@ -11,6 +11,9 @@ import {
 	process_server_fn,
 	get_component
 } from "./_init";
+import { get_api_url } from "./init.svelte";
+import type { AppConfig } from "./types";
+import { commands } from "@vitest/browser/context";
 
 describe("process_frontend_fn", () => {
 	test("empty source code returns null", () => {
@@ -461,6 +464,8 @@ describe("get_component", () => {
 						value: "hi",
 						interactive: false
 					},
+					key: "test-component-one",
+
 					has_modes: false,
 					instance: {} as any,
 					component: {} as any
@@ -512,13 +517,307 @@ describe("get_component", () => {
 			}
 		);
 
-		const server = setupServer(...handlers);
-		server.listen();
+		const worker = setupWorker(...handlers);
+		worker.start();
 
 		await get_component("test-random", id, api_url, []).component;
 
 		expect(mock).toHaveBeenCalled();
 
-		server.close();
+		worker.stop();
+	});
+});
+
+describe("get_api_url", () => {
+	describe("root URL with trailing slash", () => {
+		test("root with trailing slash, api_prefix with leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp/",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("root with trailing slash, api_prefix without leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp/",
+				api_prefix: "api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("root at domain root with trailing slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/api");
+		});
+	});
+
+	describe("root URL without trailing slash", () => {
+		test("root without trailing slash, api_prefix with leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("root without trailing slash, api_prefix without leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp",
+				api_prefix: "api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("root at domain root without trailing slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/api");
+		});
+	});
+
+	describe("different root path combinations", () => {
+		test("root path is just '/'", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/api");
+		});
+
+		test("root path is '/' without trailing slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/api");
+		});
+
+		test("root path is '/myapp'", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("root path is '/myapp/'", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp/",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("root path is '/deep/nested/path'", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/deep/nested/path",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/deep/nested/path/api");
+		});
+
+		test("root path is '/deep/nested/path/'", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/deep/nested/path/",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/deep/nested/path/api");
+		});
+	});
+
+	describe("different api_prefix formats", () => {
+		test("api_prefix with leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("api_prefix without leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp",
+				api_prefix: "api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("api_prefix with nested path and leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp",
+				api_prefix: "/api/v1",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api/v1");
+		});
+
+		test("api_prefix with nested path without leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp",
+				api_prefix: "api/v1",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api/v1");
+		});
+	});
+
+	describe("edge cases", () => {
+		test("root with port number", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com:8080/myapp",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com:8080/myapp/api");
+		});
+
+		test("root with HTTPS", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "https://example.com/myapp",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("https://example.com/myapp/api");
+		});
+
+		test("root with query parameters (should be ignored)", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp?param=value",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("root with hash (should be ignored)", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp#section",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+	});
+
+	describe("consistency checks", () => {
+		test("same result regardless of root trailing slash", () => {
+			const baseConfig = {
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+
+			const config1: Omit<AppConfig, "api_url"> = {
+				...baseConfig,
+				root: "http://example.com/myapp"
+			};
+			const config2: Omit<AppConfig, "api_url"> = {
+				...baseConfig,
+				root: "http://example.com/myapp/"
+			};
+
+			expect(get_api_url(config1)).toBe(get_api_url(config2));
+		});
+
+		test("same result regardless of api_prefix leading slash", () => {
+			const baseConfig = {
+				root: "http://example.com/myapp",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+
+			const config1: Omit<AppConfig, "api_url"> = {
+				...baseConfig,
+				api_prefix: "/api"
+			};
+			const config2: Omit<AppConfig, "api_url"> = {
+				...baseConfig,
+				api_prefix: "api"
+			};
+
+			expect(get_api_url(config1)).toBe(get_api_url(config2));
+		});
 	});
 });