@gradio/client 2.6.0 → 2.7.0

package/dist/utils/submit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"submit.d.ts","sourceRoot":"","sources":["../../src/utils/submit.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGX,WAAW,EAMX,cAAc,EACd,MAAM,UAAU,CAAC;AAoBlB,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAQnC,wBAAgB,MAAM,CACrB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,IAAI,GAAE,OAAO,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EAC9C,UAAU,CAAC,EAAE,OAAO,EACpB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,EAC1B,UAAU,CAAC,EAAE,OAAO,EACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACzC,cAAc,CAAC,WAAW,CAAC,CAsvB7B"}
+{"version":3,"file":"submit.d.ts","sourceRoot":"","sources":["../../src/utils/submit.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGX,WAAW,EAMX,cAAc,EACd,MAAM,UAAU,CAAC;AAyBlB,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAQnC,wBAAgB,MAAM,CACrB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,IAAI,GAAE,OAAO,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EAC9C,UAAU,CAAC,EAAE,OAAO,EACpB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,EAC1B,UAAU,CAAC,EAAE,OAAO,EACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACzC,cAAc,CAAC,WAAW,CAAC,CA0vB7B"}

package/dist/utils/view_api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view_api.d.ts","sourceRoot":"","sources":["../../src/utils/view_api.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAInC,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAiDzD"}
+{"version":3,"file":"view_api.d.ts","sourceRoot":"","sources":["../../src/utils/view_api.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAInC,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAoDzD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/client",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Gradio API client",
   "type": "module",
   "main": "dist/index.cjs",

package/src/client.ts

@@ -35,6 +35,7 @@ import { check_and_wake_space, check_space_status } from "./helpers/spaces";
 import { initialize_zerogpu_handshake } from "./helpers/zerogpu";
 import { open_stream, readable_stream, close_stream } from "./utils/stream";
 import { clear_run_history } from "./utils/run_history";
+import { sign_config_file_urls, sign_file_urls } from "./helpers/data";
 import {
 	API_INFO_ERROR_MSG,
 	APP_ID_URL,
@@ -48,6 +49,7 @@ export class Client {
 	app_reference: string;
 	options: ClientOptions;
 	deep_link: string | null = null;
+	page: string | null = null;
 
 	config: Config | undefined;
 	api_prefix = "";
@@ -199,6 +201,7 @@ export class Client {
 	) {
 		this.app_reference = app_reference;
 		this.deep_link = options.query_params?.deep_link || null;
+		this.page = options.query_params?.page ?? null;
 		if (!options.events) {
 			options.events = ["data"];
 		}
@@ -250,25 +253,19 @@ export class Client {
 	}
 
 	async _resolve_heartbeat(_config: Config): Promise<void> {
-		if (_config) {
-			this.config = _config;
-			this.api_prefix = _config.api_prefix || "";
-
-			if (this.config && this.config.connect_heartbeat) {
-				if (this.config.space_id && this.options.token) {
-					this.jwt = await get_jwt(
-						this.config.space_id,
-						this.options.token,
-						this.cookies
-					);
-				}
-			}
-		}
+		this.config = _config;
+		this.api_prefix = _config.api_prefix || "";
 
 		if (_config.space_id && this.options.token) {
-			this.jwt = await get_jwt(_config.space_id, this.options.token);
+			this.jwt = await get_jwt(
+				_config.space_id,
+				this.options.token,
+				this.cookies
+			);
 		}
 
+		sign_config_file_urls(this.config, this.jwt);
+
 		if (this.config && this.config.connect_heartbeat) {
 			// connect to the heartbeat endpoint via GET request
 			const heartbeat_url = new URL(
@@ -344,6 +341,7 @@ export class Client {
 		this.config = config;
 		this.api_prefix = config.api_prefix || "";
 		this.api_map = map_names_to_ids(config.dependencies || []);
+		sign_config_file_urls(this.config, this.jwt);
 		try {
 			this.api_info = await this.view_api();
 		} catch (e) {
@@ -545,6 +543,12 @@ export class Client {
 			}
 
 			const output = await response.json();
+			sign_file_urls(
+				output,
+				this.config.root,
+				this.config.api_prefix || "",
+				this.jwt
+			);
 			return output;
 		} catch (e) {
 			console.warn(e);

package/src/helpers/data.ts

@@ -224,3 +224,80 @@ export function handle_payload(
 
 	return updated_payload;
 }
+
+const FILE_ROUTE_PREFIXES = ["/file=", "/file/", "/stream/", "/proxy="];
+
+/**
+ * Add the Space JWT required for browser-managed media requests.
+ *
+ * This is a bearer credential and must not be logged or persisted. Restrict it
+ * to Gradio routes that serve files; the user's Hugging Face token remains in
+ * the Authorization header used to obtain this credential.
+ */
+export function sign_file_urls(
+	data: unknown,
+	root: string,
+	api_prefix: string,
+	jwt: string | false
+): void {
+	if (!jwt || data === null || typeof data !== "object") return;
+
+	const signature = jwt;
+	const root_url = new URL(root);
+	const root_path = root_url.pathname.replace(/\/+$/, "");
+	const normalized_api_prefix = api_prefix
+		? `/${api_prefix.replace(/^\/+|\/+$/g, "")}`
+		: "";
+	const route_bases = new Set([
+		`${root_path}${normalized_api_prefix}`,
+		normalized_api_prefix
+	]);
+	if (!normalized_api_prefix) {
+		route_bases.add(`${root_path}/gradio_api`);
+		route_bases.add("/gradio_api");
+	}
+
+	function visit(value: unknown): void {
+		if (value === null || typeof value !== "object") return;
+
+		const object = value as Record<string, unknown>;
+		const meta = object.meta as Record<string, unknown> | undefined;
+		if (meta?._type === "gradio.FileData" && typeof object.url === "string") {
+			const file_url = new URL(
+				object.url,
+				`${root_url.toString().replace(/\/$/, "")}/`
+			);
+			const is_file_route = [...route_bases].some((base) =>
+				FILE_ROUTE_PREFIXES.some((route) =>
+					file_url.pathname.startsWith(`${base}${route}`)
+				)
+			);
+			if (
+				(file_url.protocol === "http:" || file_url.protocol === "https:") &&
+				file_url.origin === root_url.origin &&
+				is_file_route
+			) {
+				file_url.searchParams.set("__sign", signature);
+				object.url = file_url.toString();
+			}
+		}
+
+		for (const child of Object.values(object)) visit(child);
+	}
+
+	visit(data);
+}
+
+export function sign_config_file_urls(
+	config: Config,
+	jwt: string | false
+): void {
+	for (const component of config.components || []) {
+		sign_file_urls(
+			component.props?.value,
+			config.root,
+			config.api_prefix || "",
+			jwt
+		);
+	}
+}

package/src/helpers/init_helpers.ts

@@ -129,12 +129,10 @@ export async function resolve_config(
 			window.gradio_config.dev_mode ||
 			(typeof window !== "undefined" && window?.BUILD_MODE === "dev")
 		) {
-			let config_url = join_urls(
-				endpoint,
-				this.deep_link
-					? CONFIG_URL + "?deep_link=" + this.deep_link
-					: CONFIG_URL
-			);
+			let config_url = new URL(join_urls(endpoint, CONFIG_URL));
+			if (this.deep_link)
+				config_url.searchParams.set("deep_link", this.deep_link);
+			if (this.page !== null) config_url.searchParams.set("page", this.page);
 			const response = await this.fetch(config_url, {
 				headers,
 				credentials: this.options.credentials ?? "same-origin"
@@ -160,10 +158,10 @@ export async function resolve_config(
 		);
 		return config;
 	} else if (endpoint) {
-		let config_url = join_urls(
-			endpoint,
-			this.deep_link ? CONFIG_URL + "?deep_link=" + this.deep_link : CONFIG_URL
-		);
+		let config_url = new URL(join_urls(endpoint, CONFIG_URL));
+		if (this.deep_link)
+			config_url.searchParams.set("deep_link", this.deep_link);
+		if (this.page !== null) config_url.searchParams.set("page", this.page);
 
 		const response = await this.fetch(config_url, {
 			headers,

package/src/test/data.test.ts

@@ -5,6 +5,7 @@ import {
 	skip_queue,
 	post_message,
 	handle_file,
+	sign_file_urls,
 	handle_payload
 } from "../helpers/data";
 import { config_response, endpoint_info } from "./test_data";
@@ -359,6 +360,100 @@ describe("post_message", () => {
 	);
 });
 
+describe("sign_file_urls", () => {
+	it("signs nested file and stream URLs on the private Space origin", () => {
+		const data = {
+			image: {
+				path: "/tmp/cat.png",
+				url: "gradio_api/file=/tmp/cat.png?download=true",
+				meta: { _type: "gradio.FileData" }
+			},
+			gallery: [
+				{
+					image: {
+						path: "/tmp/tone.wav",
+						url: "/gradio_api/stream/tone.wav",
+						is_stream: true,
+						meta: { _type: "gradio.FileData" }
+					}
+				}
+			],
+			proxied: {
+				path: "https://nested-space.hf.space/gradio_api/file=/tmp/cat.png",
+				url: "/app/gradio_api/proxy=https://nested-space.hf.space/gradio_api/file=/tmp/cat.png",
+				meta: { _type: "gradio.FileData" }
+			}
+		};
+
+		sign_file_urls(
+			data,
+			"https://private-space.hf.space/app",
+			"/gradio_api",
+			"jwt_123"
+		);
+
+		expect(data.image.url).toBe(
+			"https://private-space.hf.space/app/gradio_api/file=/tmp/cat.png?download=true&__sign=jwt_123"
+		);
+		expect(data.gallery[0].image.url).toBe(
+			"https://private-space.hf.space/gradio_api/stream/tone.wav?__sign=jwt_123"
+		);
+		expect(data.proxied.url).toBe(
+			"https://private-space.hf.space/app/gradio_api/proxy=https://nested-space.hf.space/gradio_api/file=/tmp/cat.png?__sign=jwt_123"
+		);
+	});
+
+	it("does not sign external or unrelated same-origin URLs", () => {
+		const data = {
+			external: {
+				path: "https://cdn.example.com/cat.png",
+				url: "https://cdn.example.com/cat.png",
+				meta: { _type: "gradio.FileData" }
+			},
+			plain: {
+				url: "https://private-space.hf.space/gradio_api/file=/tmp/cat.png"
+			},
+			unrelated: {
+				path: "/tmp/cat.png",
+				url: "https://private-space.hf.space/api/custom-file",
+				meta: { _type: "gradio.FileData" }
+			}
+		};
+
+		sign_file_urls(
+			data,
+			"https://private-space.hf.space",
+			"/gradio_api",
+			"jwt_123"
+		);
+
+		expect(data.external.url).toBe("https://cdn.example.com/cat.png");
+		expect(data.plain.url).toBe(
+			"https://private-space.hf.space/gradio_api/file=/tmp/cat.png"
+		);
+		expect(data.unrelated.url).toBe(
+			"https://private-space.hf.space/api/custom-file"
+		);
+	});
+
+	it("does nothing without a Space JWT", () => {
+		const file = {
+			path: "/tmp/cat.png",
+			url: "https://private-space.hf.space/gradio_api/file=/tmp/cat.png",
+			meta: { _type: "gradio.FileData" }
+		};
+
+		sign_file_urls(
+			file,
+			"https://private-space.hf.space",
+			"/gradio_api",
+			false
+		);
+
+		expect(file.url).not.toContain("__sign");
+	});
+});
+
 describe("handle_file", () => {
 	it("should handle a Blob object and return the blob", () => {
 		const blob = new Blob(["test data"], { type: "image/png" });

package/src/test/init.test.ts

@@ -7,7 +7,6 @@ import {
 	expect,
 	vi
 } from "vitest";
-
 import { Client, client, duplicate } from "..";
 import {
 	transformed_api_info,
@@ -16,6 +15,7 @@ import {
 } from "./test_data";
 import { initialise_server } from "./server";
 import { SPACE_NOT_FOUND_MSG } from "../constants";
+import { HttpResponse, http } from "msw";
 
 const app_reference = "hmb/hello_world";
 const broken_app_reference = "hmb/bye_world";
@@ -65,6 +65,29 @@ describe("Client class", () => {
 			expect(app.config).toEqual(config_response);
 		});
 
+		test("forwards a page query when resolving config and API info", async () => {
+			const requested_urls: string[] = [];
+			server.use(
+				http.get(`${direct_app_reference}/config`, ({ request }) => {
+					requested_urls.push(request.url);
+					return HttpResponse.json(config_response);
+				}),
+				http.get(`${direct_app_reference}/info`, ({ request }) => {
+					requested_urls.push(request.url);
+					return HttpResponse.json(response_api_info);
+				})
+			);
+
+			await Client.connect(direct_app_reference, {
+				query_params: { page: "details" }
+			});
+
+			expect(requested_urls).toEqual([
+				`${direct_app_reference}/config?page=details`,
+				`${direct_app_reference}/info?page=details`
+			]);
+		});
+
 		test("connecting successfully to a private running app with a space reference", async () => {
 			const app = await Client.connect("hmb/secret_world", {
 				token: "hf_123"
@@ -76,6 +99,29 @@ describe("Client class", () => {
 			});
 		});
 
+		test("signs initial file values in a private Space config", async () => {
+			const props = config_response.components[0].props;
+			props.value = {
+				path: "/tmp/cat.png",
+				url: `${secret_direct_app_reference}/gradio_api/file=/tmp/cat.png`,
+				meta: { _type: "gradio.FileData" }
+			};
+			try {
+				const app = await Client.connect("hmb/secret_world", {
+					token: "hf_123"
+				});
+				const value = app.config?.components[0].props.value as {
+					url: string;
+				};
+
+				expect(value.url).toBe(
+					`${secret_direct_app_reference}/gradio_api/file=/tmp/cat.png?__sign=jwt_123`
+				);
+			} finally {
+				delete props.value;
+			}
+		});
+
 		test("connecting successfully to a private running app with a direct app URL ", async () => {
 			const app = await Client.connect(secret_direct_app_reference, {
 				token: "hf_123"

package/src/test/server.ts

@@ -8,6 +8,7 @@ const IS_NODE =
 interface MockServer {
 	start: (opts: StartOptions) => void | ReturnType<SetupWorker["start"]>;
 	stop: () => void | Promise<void>;
+	use: (...handlers: any[]) => void;
 	resetHandlers: (...handlers: any[]) => void;
 }
 
@@ -18,6 +19,7 @@ export async function initialise_server(): Promise<MockServer> {
 		return {
 			start: (opts: StartOptions) => server.listen(opts),
 			stop: () => server.close(),
+			use: (...h) => server.use(...h),
 			resetHandlers: (...h) => server.resetHandlers(...h)
 		};
 	}
@@ -26,6 +28,7 @@ export async function initialise_server(): Promise<MockServer> {
 	return {
 		start: (opts: StartOptions) => worker.start(opts),
 		stop: () => worker.stop(),
+		use: (...h) => worker.use(...h),
 		resetHandlers: (...h) => worker.resetHandlers(...h)
 	};
 }

package/src/test/submit.test.ts

@@ -37,6 +37,43 @@ async function race_with_timeout<T>(
 }
 
 describe("submit iterator", () => {
+	test("signs private Space file URLs before publishing data events", async () => {
+		const app = await Client.connect("hmb/hello_world", {
+			token: "hf_123",
+			events: ["data", "status"]
+		});
+		app.stream_status.open = true;
+
+		const iterator = app.submit("/predict", ["hi"]);
+		const event_id = await iterator.wait_for_id();
+		const callback = app.event_callbacks[event_id as string];
+
+		const events: any[] = [];
+		const consumer = (async () => {
+			for await (const event of iterator) events.push(event);
+		})();
+
+		await callback({
+			msg: "process_completed",
+			output: {
+				data: [
+					{
+						path: "/tmp/cat.png",
+						url: `${direct_space_url}/gradio_api/file=/tmp/cat.png`,
+						meta: { _type: "gradio.FileData" }
+					}
+				]
+			},
+			success: true
+		});
+		await consumer;
+
+		const data_event = events.find((event) => event.type === "data");
+		expect(data_event.data[0].url).toBe(
+			`${direct_space_url}/gradio_api/file=/tmp/cat.png?__sign=jwt_123`
+		);
+	});
+
 	test.skipIf(typeof window === "undefined")(
 		"sends the selected history bucket with queued submissions",
 		async () => {

package/src/utils/submit.ts

@@ -10,7 +10,12 @@ import type {
 	SubmitIterable
 } from "../types";
 
-import { skip_queue, post_message, handle_payload } from "../helpers/data";
+import {
+	skip_queue,
+	post_message,
+	handle_payload,
+	sign_file_urls
+} from "../helpers/data";
 import { get_zerogpu_origin } from "../helpers/zerogpu";
 import {
 	handle_message,
@@ -70,6 +75,7 @@ export function submit(
 
 		if (!api_info) throw new Error(NO_API_INFO_MSG);
 		if (!config) throw new Error("Could not resolve app config");
+		const root = config.root;
 
 		let { fn_index, endpoint_info, dependency } = get_endpoint_info(
 			api_info,
@@ -170,6 +176,9 @@ export function submit(
 		// event subscription methods
 		function fire_event(event: GradioEvent): void {
 			update_run_history(history_scope, history_run_id, event);
+			if (event.type === "data" || event.type === "render") {
+				sign_file_urls(event.data, root, api_prefix, that.jwt);
+			}
 			if (all_events || events_to_publish[event.type]) {
 				push_event(event);
 			}

package/src/utils/view_api.ts

@@ -28,7 +28,10 @@ export async function view_api(this: Client): Promise<any> {
 		if (typeof window !== "undefined" && window.gradio_api_info) {
 			api_info = window.gradio_api_info;
 		} else {
-			const url = join_urls(config.root, this.api_prefix, API_INFO_URL);
+			const url = new URL(
+				join_urls(config.root, this.api_prefix, API_INFO_URL)
+			);
+			if (this.page !== null) url.searchParams.set("page", this.page);
 			response = await this.fetch(url, {
 				headers,
 				credentials: this.options.credentials ?? "same-origin"