@gradio/client 0.19.4 → 0.20.0

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":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAInC,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CA2DzD"}
+{"version":3,"file":"view_api.d.ts","sourceRoot":"","sources":["../../src/utils/view_api.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAInC,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CA8DzD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/client",
-  "version": "0.19.4",
+  "version": "0.20.0",
   "description": "Gradio API client",
   "type": "module",
   "main": "dist/index.js",

package/src/client.ts

@@ -23,8 +23,10 @@ import { submit } from "./utils/submit";
 import { RE_SPACE_NAME, process_endpoint } from "./helpers/api_info";
 import {
 	map_names_to_ids,
+	resolve_cookies,
 	resolve_config,
-	get_jwt
+	get_jwt,
+	parse_and_set_cookies
 } from "./helpers/init_helpers";
 import { check_space_status } from "./helpers/spaces";
 import { open_stream } from "./utils/stream";
@@ -47,6 +49,8 @@ export class Client {
 	jwt: string | false = false;
 	last_status: Record<string, Status["stage"]> = {};
 
+	private cookies: string | null = null;
+
 	// streaming
 	stream_status = { open: false };
 	pending_stream_messages: Record<string, any[][]> = {};
@@ -56,7 +60,12 @@ export class Client {
 	heartbeat_event: EventSource | null = null;
 
 	fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
-		return fetch(input, init);
+		const headers = new Headers(init?.headers || {});
+		if (this && this.cookies) {
+			headers.append("Cookie", this.cookies);
+		}
+
+		return fetch(input, { ...init, headers });
 	}
 
 	async stream(url: URL): Promise<EventSource> {
@@ -108,6 +117,7 @@ export class Client {
 	) => Promise<SubmitReturn>;
 	open_stream: () => Promise<void>;
 	private resolve_config: (endpoint: string) => Promise<Config | undefined>;
+	private resolve_cookies: () => Promise<void>;
 	constructor(app_reference: string, options: ClientOptions = {}) {
 		this.app_reference = app_reference;
 		this.options = options;
@@ -120,6 +130,7 @@ export class Client {
 		this.predict = predict.bind(this);
 		this.open_stream = open_stream.bind(this);
 		this.resolve_config = resolve_config.bind(this);
+		this.resolve_cookies = resolve_cookies.bind(this);
 		this.upload = upload.bind(this);
 	}
 
@@ -135,33 +146,56 @@ export class Client {
 		}
 
 		try {
-			await this._resolve_config().then(async ({ config }) => {
-				this.config = config;
-
-				if (config.space_id && this.options.hf_token) {
-					this.jwt = await get_jwt(config.space_id, this.options.hf_token);
-				}
+			if (this.options.auth) {
+				await this.resolve_cookies();
+			}
 
-				if (this.config && this.config.connect_heartbeat) {
-					// connect to the heartbeat endpoint via GET request
-					const heartbeat_url = new URL(
-						`${this.config.root}/heartbeat/${this.session_hash}`
-					);
+			await this._resolve_config().then(({ config }) =>
+				this._resolve_hearbeat(config)
+			);
+		} catch (e: any) {
+			throw Error(e);
+		}
 
-					// if the jwt is available, add it to the query params
-					if (this.jwt) {
-						heartbeat_url.searchParams.set("__sign", this.jwt);
-					}
+		this.api_info = await this.view_api();
+		this.api_map = map_names_to_ids(this.config?.dependencies || []);
+	}
 
-					this.heartbeat_event = await this.stream(heartbeat_url); // Just connect to the endpoint without parsing the response. Ref: https://github.com/gradio-app/gradio/pull/7974#discussion_r1557717540
+	async _resolve_hearbeat(_config: Config): Promise<void> {
+		if (_config) {
+			this.config = _config;
+			if (this.config && this.config.connect_heartbeat) {
+				if (this.config.space_id && this.options.hf_token) {
+					this.jwt = await get_jwt(
+						this.config.space_id,
+						this.options.hf_token,
+						this.cookies
+					);
 				}
-			});
-		} catch (e) {
-			throw Error(CONFIG_ERROR_MSG + (e as Error).message);
+			}
 		}
 
-		this.api_info = await this.view_api();
-		this.api_map = map_names_to_ids(this.config?.dependencies || []);
+		if (_config.space_id && this.options.hf_token) {
+			this.jwt = await get_jwt(_config.space_id, this.options.hf_token);
+		}
+
+		if (this.config && this.config.connect_heartbeat) {
+			// connect to the heartbeat endpoint via GET request
+			const heartbeat_url = new URL(
+				`${this.config.root}/heartbeat/${this.session_hash}`
+			);
+
+			// if the jwt is available, add it to the query params
+			if (this.jwt) {
+				heartbeat_url.searchParams.set("__sign", this.jwt);
+			}
+
+			// Just connect to the endpoint without parsing the response. Ref: https://github.com/gradio-app/gradio/pull/7974#discussion_r1557717540
+			if (!this.heartbeat_event)
+				this.heartbeat_event = await this.stream(heartbeat_url);
+		} else {
+			this.heartbeat_event?.close();
+		}
 	}
 
 	static async connect(
@@ -201,9 +235,8 @@ export class Client {
 			}
 
 			return this.config_success(config);
-		} catch (e) {
-			console.error(e);
-			if (space_id) {
+		} catch (e: any) {
+			if (space_id && status_callback) {
 				check_space_status(
 					space_id,
 					RE_SPACE_NAME.test(space_id) ? "space_name" : "subdomain",
@@ -217,6 +250,7 @@ export class Client {
 						load_status: "error",
 						detail: "NOT_FOUND"
 					});
+				throw Error(e);
 			}
 		}
 	}
@@ -246,6 +280,9 @@ export class Client {
 	}
 
 	async handle_space_success(status: SpaceStatus): Promise<Config | void> {
+		if (!this) {
+			throw new Error(CONFIG_ERROR_MSG);
+		}
 		const { status_callback } = this.options;
 		if (status_callback) status_callback(status);
 		if (status.status === "running") {
@@ -259,7 +296,6 @@ export class Client {
 
 				return _config as Config;
 			} catch (e) {
-				console.error(e);
 				if (status_callback) {
 					status_callback({
 						status: "error",
@@ -268,6 +304,7 @@ export class Client {
 						detail: "NOT_FOUND"
 					});
 				}
+				throw e;
 			}
 		}
 	}
@@ -333,7 +370,8 @@ export class Client {
 			const response = await this.fetch(`${root_url}/component_server/`, {
 				method: "POST",
 				body: body,
-				headers
+				headers,
+				credentials: "include"
 			});
 
 			if (!response.ok) {
@@ -349,6 +387,10 @@ export class Client {
 		}
 	}
 
+	public set_cookies(raw_cookies: string): void {
+		this.cookies = parse_and_set_cookies(raw_cookies).join("; ");
+	}
+
 	private prepare_return_obj(): client_return {
 		return {
 			config: this.config,

package/src/constants.ts

@@ -25,3 +25,8 @@ export const CONFIG_ERROR_MSG = "Could not resolve app config. ";
 export const SPACE_STATUS_ERROR_MSG = "Could not get space status. ";
 export const API_INFO_ERROR_MSG = "Could not get API info. ";
 export const SPACE_METADATA_ERROR_MSG = "Space metadata could not be loaded. ";
+export const INVALID_URL_MSG = "Invalid URL. A full URL path is required.";
+export const UNAUTHORIZED_MSG = "Not authorized to access this space. ";
+export const INVALID_CREDENTIALS_MSG = "Invalid credentials. Could not login. ";
+export const MISSING_CREDENTIALS_MSG =
+	"Login credentials are required to access this space.";

package/src/helpers/api_info.ts

@@ -1,9 +1,14 @@
 import type { Status } from "../types";
-import { QUEUE_FULL_MSG } from "../constants";
+import {
+	HOST_URL,
+	INVALID_URL_MSG,
+	QUEUE_FULL_MSG,
+	SPACE_METADATA_ERROR_MSG
+} from "../constants";
 import type { ApiData, ApiInfo, Config, JsApiData } from "../types";
 import { determine_protocol } from "./init_helpers";
 
-export const RE_SPACE_NAME = /^[^\/]*\/[^\/]*$/;
+export const RE_SPACE_NAME = /^[a-zA-Z0-9_\-\.]+\/[a-zA-Z0-9_\-\.]+$/;
 export const RE_SPACE_DOMAIN = /.*hf\.space\/{0,1}$/;
 
 export async function process_endpoint(
@@ -20,12 +25,13 @@ export async function process_endpoint(
 		headers.Authorization = `Bearer ${hf_token}`;
 	}
 
-	const _app_reference = app_reference.trim();
+	const _app_reference = app_reference.trim().replace(/\/$/, "");
 
 	if (RE_SPACE_NAME.test(_app_reference)) {
+		// app_reference is a HF space name
 		try {
 			const res = await fetch(
-				`https://huggingface.co/api/spaces/${_app_reference}/host`,
+				`https://huggingface.co/api/spaces/${_app_reference}/${HOST_URL}`,
 				{ headers }
 			);
 
@@ -36,13 +42,12 @@ export async function process_endpoint(
 				...determine_protocol(_host)
 			};
 		} catch (e) {
-			throw new Error(
-				"Space metadata could not be loaded. " + (e as Error).message
-			);
+			throw new Error(SPACE_METADATA_ERROR_MSG);
 		}
 	}
 
 	if (RE_SPACE_DOMAIN.test(_app_reference)) {
+		// app_reference is a direct HF space domain
 		const { ws_protocol, http_protocol, host } =
 			determine_protocol(_app_reference);
 
@@ -60,6 +65,18 @@ export async function process_endpoint(
 	};
 }
 
+export const join_urls = (...urls: string[]): string => {
+	try {
+		return urls.reduce((base_url: string, part: string) => {
+			base_url = base_url.replace(/\/+$/, "");
+			part = part.replace(/^\/+/, "");
+			return new URL(part, base_url + "/").toString();
+		});
+	} catch (e) {
+		throw new Error(INVALID_URL_MSG);
+	}
+};
+
 export function transform_api_info(
 	api_info: ApiInfo<ApiData>,
 	config: Config,
@@ -77,27 +94,30 @@ export function transform_api_info(
 			Object.entries(api_info[category]).forEach(
 				([endpoint, { parameters, returns }]) => {
 					const dependencyIndex =
-						config.dependencies.findIndex(
+						config.dependencies.find(
 							(dep) =>
 								dep.api_name === endpoint ||
 								dep.api_name === endpoint.replace("/", "")
-						) ||
+						)?.id ||
 						api_map[endpoint.replace("/", "")] ||
 						-1;
 
 					const dependencyTypes =
 						dependencyIndex !== -1
-							? config.dependencies[dependencyIndex].types
+							? config.dependencies.find((dep) => dep.id == dependencyIndex)
+									?.types
 							: { continuous: false, generator: false };
 
 					if (
 						dependencyIndex !== -1 &&
-						config.dependencies[dependencyIndex]?.inputs?.length !==
-							parameters.length
+						config.dependencies.find((dep) => dep.id == dependencyIndex)?.inputs
+							?.length !== parameters.length
 					) {
-						const components = config.dependencies[dependencyIndex].inputs.map(
-							(input) => config.components.find((c) => c.id === input)?.type
-						);
+						const components = config.dependencies
+							.find((dep) => dep.id == dependencyIndex)!
+							.inputs.map(
+								(input) => config.components.find((c) => c.id === input)?.type
+							);
 
 						try {
 							components.forEach((comp, idx) => {
@@ -115,7 +135,9 @@ export function transform_api_info(
 									parameters.splice(idx, 0, new_param);
 								}
 							});
-						} catch (e) {}
+						} catch (e) {
+							console.error(e);
+						}
 					}
 
 					const transform_type = (
@@ -201,6 +223,7 @@ export function get_description(
 	return type?.description;
 }
 
+/* eslint-disable complexity */
 export function handle_message(
 	data: any,
 	last_status: Status["stage"]
@@ -308,7 +331,10 @@ export function handle_message(
 					message: !data.success ? data.output.error : undefined,
 					stage: data.success ? "complete" : "error",
 					code: data.code,
-					progress_data: data.progress_data
+					progress_data: data.progress_data,
+					changed_state_ids: data.success
+						? data.output.changed_state_ids
+						: undefined
 				},
 				data: data.success ? data.output : null
 			};
@@ -330,6 +356,7 @@ export function handle_message(
 
 	return { type: "none", status: { stage: "error", queue } };
 }
+/* eslint-enable complexity */
 
 /**
  * Maps the provided `data` to the parameters defined by the `/info` endpoint response.

package/src/helpers/data.ts

@@ -96,8 +96,9 @@ export async function walk_and_store_blobs(
 }
 
 export function skip_queue(id: number, config: Config): boolean {
-	if (config?.dependencies?.[id]?.queue !== null) {
-		return !config.dependencies[id].queue;
+	let fn_queue = config?.dependencies?.find((dep) => dep.id == id)?.queue;
+	if (fn_queue != null) {
+		return !fn_queue;
 	}
 	return !config.enable_queue;
 }

package/src/helpers/init_helpers.ts

@@ -1,6 +1,15 @@
 import type { Config } from "../types";
-import { CONFIG_ERROR_MSG, CONFIG_URL } from "../constants";
+import {
+	CONFIG_ERROR_MSG,
+	CONFIG_URL,
+	INVALID_CREDENTIALS_MSG,
+	LOGIN_URL,
+	MISSING_CREDENTIALS_MSG,
+	SPACE_METADATA_ERROR_MSG,
+	UNAUTHORIZED_MSG
+} from "../constants";
 import { Client } from "..";
+import { join_urls, process_endpoint } from "./api_info";
 
 /**
  * This function is used to resolve the URL for making requests when the app has a root path.
@@ -25,12 +34,14 @@ export function resolve_root(
 
 export async function get_jwt(
 	space: string,
-	token: `hf_${string}`
+	token: `hf_${string}`,
+	cookies?: string | null
 ): Promise<string | false> {
 	try {
 		const r = await fetch(`https://huggingface.co/api/spaces/${space}/jwt`, {
 			headers: {
-				Authorization: `Bearer ${token}`
+				Authorization: `Bearer ${token}`,
+				...(cookies ? { Cookie: cookies } : {})
 			}
 		});
 
@@ -47,8 +58,8 @@ export function map_names_to_ids(
 ): Record<string, number> {
 	let apis: Record<string, number> = {};
 
-	fns.forEach(({ api_name }, i: number) => {
-		if (api_name) apis[api_name] = i;
+	fns.forEach(({ api_name, id }) => {
+		if (api_name) apis[api_name] = id;
 	});
 	return apis;
 }
@@ -75,15 +86,24 @@ export async function resolve_config(
 		config.root = config_root;
 		return { ...config, path } as Config;
 	} else if (endpoint) {
-		const response = await this.fetch(`${endpoint}/${CONFIG_URL}`, {
-			headers
+		const config_url = join_urls(endpoint, CONFIG_URL);
+		const response = await this.fetch(config_url, {
+			headers,
+			credentials: "include"
 		});
 
+		if (response?.status === 401 && !this.options.auth) {
+			throw new Error(MISSING_CREDENTIALS_MSG);
+		} else if (response?.status === 401 && this.options.auth) {
+			throw new Error(INVALID_CREDENTIALS_MSG);
+		}
 		if (response?.status === 200) {
 			let config = await response.json();
 			config.path = config.path ?? "";
 			config.root = endpoint;
 			return config;
+		} else if (response?.status === 401) {
+			throw new Error(UNAUTHORIZED_MSG);
 		}
 		throw new Error(CONFIG_ERROR_MSG);
 	}
@@ -91,13 +111,70 @@ export async function resolve_config(
 	throw new Error(CONFIG_ERROR_MSG);
 }
 
+export async function resolve_cookies(this: Client): Promise<void> {
+	const { http_protocol, host } = await process_endpoint(
+		this.app_reference,
+		this.options.hf_token
+	);
+
+	try {
+		if (this.options.auth) {
+			const cookie_header = await get_cookie_header(
+				http_protocol,
+				host,
+				this.options.auth,
+				this.fetch,
+				this.options.hf_token
+			);
+
+			if (cookie_header) this.set_cookies(cookie_header);
+		}
+	} catch (e: unknown) {
+		throw Error((e as Error).message);
+	}
+}
+
+// separating this from client-bound resolve_cookies so that it can be used in duplicate
+export async function get_cookie_header(
+	http_protocol: string,
+	host: string,
+	auth: [string, string],
+	_fetch: typeof fetch,
+	hf_token?: `hf_${string}`
+): Promise<string | null> {
+	const formData = new FormData();
+	formData.append("username", auth?.[0]);
+	formData.append("password", auth?.[1]);
+
+	let headers: { Authorization?: string } = {};
+
+	if (hf_token) {
+		headers.Authorization = `Bearer ${hf_token}`;
+	}
+
+	const res = await _fetch(`${http_protocol}//${host}/${LOGIN_URL}`, {
+		headers,
+		method: "POST",
+		body: formData,
+		credentials: "include"
+	});
+
+	if (res.status === 200) {
+		return res.headers.get("set-cookie");
+	} else if (res.status === 401) {
+		throw new Error(INVALID_CREDENTIALS_MSG);
+	} else {
+		throw new Error(SPACE_METADATA_ERROR_MSG);
+	}
+}
+
 export function determine_protocol(endpoint: string): {
 	ws_protocol: "ws" | "wss";
 	http_protocol: "http:" | "https:";
 	host: string;
 } {
 	if (endpoint.startsWith("http")) {
-		const { protocol, host } = new URL(endpoint);
+		const { protocol, host, pathname } = new URL(endpoint);
 
 		if (host.endsWith("hf.space")) {
 			return {
@@ -109,7 +186,7 @@ export function determine_protocol(endpoint: string): {
 		return {
 			ws_protocol: protocol === "https:" ? "wss" : "ws",
 			http_protocol: protocol as "http:" | "https:",
-			host
+			host: host + (pathname !== "/" ? pathname : "")
 		};
 	} else if (endpoint.startsWith("file:")) {
 		// This case is only expected to be used for the Wasm mode (Gradio-lite),
@@ -128,3 +205,15 @@ export function determine_protocol(endpoint: string): {
 		host: endpoint
 	};
 }
+
+export const parse_and_set_cookies = (cookie_header: string): string[] => {
+	let cookies: string[] = [];
+	const parts = cookie_header.split(/,(?=\s*[^\s=;]+=[^\s=;]+)/);
+	parts.forEach((cookie) => {
+		const [cookie_name, cookie_value] = cookie.split(";")[0].split("=");
+		if (cookie_name && cookie_value) {
+			cookies.push(`${cookie_name.trim()}=${cookie_value.trim()}`);
+		}
+	});
+	return cookies;
+};

package/src/test/api_info.test.ts

@@ -1,16 +1,22 @@
-import { QUEUE_FULL_MSG, SPACE_METADATA_ERROR_MSG } from "../constants";
+import {
+	INVALID_URL_MSG,
+	QUEUE_FULL_MSG,
+	SPACE_METADATA_ERROR_MSG
+} from "../constants";
 import { beforeAll, afterEach, afterAll, it, expect, describe } from "vitest";
 import {
 	handle_message,
 	get_description,
 	get_type,
 	process_endpoint,
+	join_urls,
 	map_data_to_params
 } from "../helpers/api_info";
 import { initialise_server } from "./server";
 import { transformed_api_info } from "./test_data";
 
 const server = initialise_server();
+const IS_NODE = process.env.TEST_MODE === "node";
 
 beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());
@@ -435,9 +441,7 @@ describe("process_endpoint", () => {
 		try {
 			await process_endpoint(app_reference, hf_token);
 		} catch (error) {
-			expect(error.message).toEqual(
-				SPACE_METADATA_ERROR_MSG + "Unexpected end of JSON input"
-			);
+			expect(error.message).toEqual(SPACE_METADATA_ERROR_MSG);
 		}
 	});
 
@@ -455,6 +459,67 @@ describe("process_endpoint", () => {
 		const result = await process_endpoint("hmb/hello_world");
 		expect(result).toEqual(expected);
 	});
+
+	it("processes local server URLs correctly", async () => {
+		const local_url = "http://localhost:7860/gradio";
+		const response_local_url = await process_endpoint(local_url);
+		expect(response_local_url.space_id).toBe(false);
+		expect(response_local_url.host).toBe("localhost:7860/gradio");
+
+		const local_url_2 = "http://localhost:7860/gradio/";
+		const response_local_url_2 = await process_endpoint(local_url_2);
+		expect(response_local_url_2.space_id).toBe(false);
+		expect(response_local_url_2.host).toBe("localhost:7860/gradio");
+	});
+
+	it("handles hugging face space references", async () => {
+		const space_id = "hmb/hello_world";
+
+		const response = await process_endpoint(space_id);
+		expect(response.space_id).toBe(space_id);
+		expect(response.host).toContain("hf.space");
+	});
+
+	it("handles hugging face domain URLs", async () => {
+		const app_reference = "https://hmb-hello-world.hf.space/";
+		const response = await process_endpoint(app_reference);
+		expect(response.space_id).toBe("hmb-hello-world");
+		expect(response.host).toBe("hmb-hello-world.hf.space");
+	});
+});
+
+describe("join_urls", () => {
+	it("joins URLs correctly", () => {
+		expect(join_urls("http://localhost:7860", "/gradio")).toBe(
+			"http://localhost:7860/gradio"
+		);
+		expect(join_urls("http://localhost:7860/", "/gradio")).toBe(
+			"http://localhost:7860/gradio"
+		);
+		expect(join_urls("http://localhost:7860", "app/", "/gradio")).toBe(
+			"http://localhost:7860/app/gradio"
+		);
+		expect(join_urls("http://localhost:7860/", "/app/", "/gradio/")).toBe(
+			"http://localhost:7860/app/gradio/"
+		);
+
+		expect(join_urls("http://127.0.0.1:8000/app", "/config")).toBe(
+			"http://127.0.0.1:8000/app/config"
+		);
+
+		expect(join_urls("http://127.0.0.1:8000/app/gradio", "/config")).toBe(
+			"http://127.0.0.1:8000/app/gradio/config"
+		);
+	});
+	it("throws an error when the URLs are not valid", () => {
+		expect(() => join_urls("localhost:7860", "/gradio")).toThrowError(
+			INVALID_URL_MSG
+		);
+
+		expect(() => join_urls("localhost:7860", "/gradio", "app")).toThrowError(
+			INVALID_URL_MSG
+		);
+	});
 });
 
 describe("map_data_params", () => {

package/src/test/data.test.ts

@@ -195,7 +195,7 @@ describe("skip_queue", () => {
 
 	it("should not skip queue when global and dependency queue is enabled", () => {
 		config.enable_queue = true;
-		config.dependencies[id].queue = true;
+		config.dependencies.find((dep) => dep.id === id)!.queue = true;
 
 		const result = skip_queue(id, config_response);
 
@@ -204,7 +204,7 @@ describe("skip_queue", () => {
 
 	it("should not skip queue when global queue is disabled and dependency queue is enabled", () => {
 		config.enable_queue = false;
-		config.dependencies[id].queue = true;
+		config.dependencies.find((dep) => dep.id === id)!.queue = true;
 
 		const result = skip_queue(id, config_response);
 
@@ -213,7 +213,7 @@ describe("skip_queue", () => {
 
 	it("should should skip queue when global queue and dependency queue is disabled", () => {
 		config.enable_queue = false;
-		config.dependencies[id].queue = false;
+		config.dependencies.find((dep) => dep.id === id)!.queue = false;
 
 		const result = skip_queue(id, config_response);
 
@@ -222,7 +222,7 @@ describe("skip_queue", () => {
 
 	it("should should skip queue when global queue is enabled and dependency queue is disabled", () => {
 		config.enable_queue = true;
-		config.dependencies[id].queue = false;
+		config.dependencies.find((dep) => dep.id === id)!.queue = false;
 
 		const result = skip_queue(id, config_response);