@gradio/client 0.19.4 → 0.20.0

package/src/test/handlers.ts

@@ -6,7 +6,8 @@ import {
 	RUNTIME_URL,
 	SLEEPTIME_URL,
 	UPLOAD_URL,
-	BROKEN_CONNECTION_MSG
+	BROKEN_CONNECTION_MSG,
+	LOGIN_URL
 } from "../constants";
 import {
 	response_api_info,
@@ -22,16 +23,24 @@ const root_url = "https://huggingface.co";
 
 const direct_space_url = "https://hmb-hello-world.hf.space";
 const private_space_url = "https://hmb-secret-world.hf.space";
+const private_auth_space_url = "https://hmb-private-auth-space.hf.space";
 
 const server_error_space_url = "https://hmb-server-error.hf.space";
 const upload_server_test_space_url = "https://hmb-server-test.hf.space";
-const server_error_reference = "hmb/server_error";
+const auth_app_space_url = "https://hmb-auth-space.hf.space";
+const unauth_app_space_url = "https://hmb-unauth-space.hf.space";
+const invalid_auth_space_url = "https://hmb-invalid-auth-space.hf.space";
 
+const server_error_reference = "hmb/server_error";
 const app_reference = "hmb/hello_world";
 const broken_app_reference = "hmb/bye_world";
 const duplicate_app_reference = "gradio/hello_world";
 const private_app_reference = "hmb/secret_world";
 const server_test_app_reference = "hmb/server_test";
+const auth_app_reference = "hmb/auth_space";
+const unauth_app_reference = "hmb/unauth_space";
+const invalid_auth_app_reference = "hmb/invalid_auth_space";
+const private_auth_app_reference = "hmb/private_auth_space";
 
 export const handlers: RequestHandler[] = [
 	// /host requests
@@ -58,6 +67,23 @@ export const handlers: RequestHandler[] = [
 			}
 		});
 	}),
+	http.get(
+		`${root_url}/api/spaces/${private_auth_app_reference}/${HOST_URL}`,
+		() => {
+			return new HttpResponse(
+				JSON.stringify({
+					subdomain: "hmb-private-auth-space",
+					host: "https://hmb-private-auth-space.hf.space"
+				}),
+				{
+					status: 200,
+					headers: {
+						"Content-Type": "application/json"
+					}
+				}
+			);
+		}
+	),
 	http.get(
 		`${root_url}/api/spaces/${private_app_reference}/${HOST_URL}`,
 		({ request }) => {
@@ -120,6 +146,68 @@ export const handlers: RequestHandler[] = [
 			);
 		}
 	),
+	http.get(`${root_url}/api/spaces/${auth_app_reference}/${HOST_URL}`, () => {
+		return new HttpResponse(
+			JSON.stringify({
+				subdomain: "hmb-auth-space",
+				host: "https://hmb-auth-space.hf.space"
+			}),
+			{
+				status: 200,
+				headers: {
+					"Content-Type": "application/json"
+				}
+			}
+		);
+	}),
+	http.get(
+		`${root_url}/api/spaces/${invalid_auth_app_reference}/${HOST_URL}`,
+		() => {
+			return new HttpResponse(
+				JSON.stringify({
+					subdomain: "hmb-invalid-auth-space",
+					host: "https://hmb-invalid-auth-space.hf.space"
+				}),
+				{
+					status: 200,
+					headers: {
+						"Content-Type": "application/json"
+					}
+				}
+			);
+		}
+	),
+	http.get(
+		`${root_url}/api/spaces/${duplicate_app_reference}/${HOST_URL}`,
+		() => {
+			return new HttpResponse(
+				JSON.stringify({
+					subdomain: "gradio-hello-world",
+					host: "https://gradio-hello-world.hf.space"
+				}),
+				{
+					status: 200,
+					headers: {
+						"Content-Type": "application/json"
+					}
+				}
+			);
+		}
+	),
+	http.get(`${root_url}/api/spaces/${unauth_app_reference}/${HOST_URL}`, () => {
+		return new HttpResponse(
+			JSON.stringify({
+				subdomain: "hmb-unath-space",
+				host: "https://hmb-unauth-space.hf.space"
+			}),
+			{
+				status: 200,
+				headers: {
+					"Content-Type": "application/json"
+				}
+			}
+		);
+	}),
 	// /info requests
 	http.get(`${direct_space_url}/${API_INFO_URL}`, () => {
 		return new HttpResponse(JSON.stringify(response_api_info), {
@@ -153,6 +241,22 @@ export const handlers: RequestHandler[] = [
 			}
 		});
 	}),
+	http.get(`${auth_app_space_url}/${API_INFO_URL}`, async () => {
+		return new HttpResponse(JSON.stringify(response_api_info), {
+			status: 200,
+			headers: {
+				"Content-Type": "application/json"
+			}
+		});
+	}),
+	http.get(`${private_auth_space_url}/${API_INFO_URL}`, async () => {
+		return new HttpResponse(JSON.stringify(response_api_info), {
+			status: 200,
+			headers: {
+				"Content-Type": "application/json"
+			}
+		});
+	}),
 	// /config requests
 	http.get(`${direct_space_url}/${CONFIG_URL}`, () => {
 		return new HttpResponse(JSON.stringify(config_response), {
@@ -190,6 +294,20 @@ export const handlers: RequestHandler[] = [
 			}
 		);
 	}),
+	http.get(`${private_auth_space_url}/${CONFIG_URL}`, () => {
+		return new HttpResponse(
+			JSON.stringify({
+				...config_response,
+				root: "https://hmb-private-auth-space.hf.space"
+			}),
+			{
+				status: 200,
+				headers: {
+					"Content-Type": "application/json"
+				}
+			}
+		);
+	}),
 	http.get(`${direct_space_url}/${CONFIG_URL}`, () => {
 		return new HttpResponse(JSON.stringify(config_response), {
 			status: 500,
@@ -206,6 +324,42 @@ export const handlers: RequestHandler[] = [
 			}
 		});
 	}),
+	http.get(`${invalid_auth_space_url}/${CONFIG_URL}`, () => {
+		return new HttpResponse(JSON.stringify({ detail: "Unauthorized" }), {
+			status: 401,
+			headers: {
+				"Content-Type": "application/json"
+			}
+		});
+	}),
+	http.get(`${auth_app_space_url}/${CONFIG_URL}`, ({ request }) => {
+		return new HttpResponse(
+			JSON.stringify({
+				...config_response,
+				root: "https://hmb-auth-space.hf.space",
+				space_id: "hmb/auth_space"
+			}),
+			{
+				status: 200,
+				headers: {
+					"Content-Type": "application/json"
+				}
+			}
+		);
+	}),
+	http.get(`${unauth_app_space_url}/${CONFIG_URL}`, () => {
+		return new HttpResponse(
+			JSON.stringify({
+				detail: "Unauthorized"
+			}),
+			{
+				status: 401,
+				headers: {
+					"Content-Type": "application/json"
+				}
+			}
+		);
+	}),
 	// /whoami requests
 	http.get(`${root_url}/api/whoami-v2`, () => {
 		return new HttpResponse(JSON.stringify(whoami_response), {
@@ -387,6 +541,20 @@ export const handlers: RequestHandler[] = [
 			}
 		});
 	}),
+	http.get(`${root_url}/api/spaces/${unauth_app_reference}`, () => {
+		return new HttpResponse(
+			JSON.stringify({
+				id: unauth_app_reference,
+				runtime: { ...runtime_response }
+			}),
+			{
+				status: 200,
+				headers: {
+					"Content-Type": "application/json"
+				}
+			}
+		);
+	}),
 	// jwt requests
 	http.get(`${root_url}/api/spaces/${app_reference}/jwt`, () => {
 		return new HttpResponse(
@@ -434,5 +602,84 @@ export const handlers: RequestHandler[] = [
 				"Content-Type": "application/json"
 			}
 		});
+	}),
+	// login requests
+	http.post(`${auth_app_space_url}/${LOGIN_URL}`, async ({ request }) => {
+		let username;
+		let password;
+
+		await request.formData().then((data) => {
+			username = data.get("username");
+			password = data.get("password");
+		});
+
+		if (username === "admin" && password === "pass1234") {
+			return new HttpResponse(
+				JSON.stringify({
+					success: true
+				}),
+				{
+					status: 200,
+					headers: {
+						"Content-Type": "application/json",
+						"Set-Cookie":
+							"access-token-123=abc; HttpOnly; Path=/; SameSite=none; Secure",
+						// @ts-ignore - multiple Set-Cookie headers are returned
+						"Set-Cookie":
+							"access-token-unsecure-123=abc; HttpOnly; Path=/; SameSite=none; Secure"
+					}
+				}
+			);
+		}
+
+		return new HttpResponse(null, {
+			status: 401,
+			headers: {
+				"Content-Type": "application/json"
+			}
+		});
+	}),
+	http.post(`${invalid_auth_space_url}/${LOGIN_URL}`, async () => {
+		return new HttpResponse(null, {
+			status: 401,
+			headers: {
+				"Content-Type": "application/json"
+			}
+		});
+	}),
+	http.post(`${private_auth_space_url}/${LOGIN_URL}`, async ({ request }) => {
+		let username;
+		let password;
+
+		await request.formData().then((data) => {
+			username = data.get("username");
+			password = data.get("password");
+		});
+
+		if (username === "admin" && password === "pass1234") {
+			return new HttpResponse(
+				JSON.stringify({
+					success: true
+				}),
+				{
+					status: 200,
+					headers: {
+						"Content-Type": "application/json",
+						"Set-Cookie":
+							"access-token-123=abc; HttpOnly; Path=/; SameSite=none; Secure",
+						// @ts-ignore - multiple Set-Cookie headers are returned
+						"Set-Cookie":
+							"access-token-unsecure-123=abc; HttpOnly; Path=/; SameSite=none; Secure"
+					}
+				}
+			);
+		}
+
+		return new HttpResponse(null, {
+			status: 401,
+			headers: {
+				"Content-Type": "application/json"
+			}
+		});
 	})
 ];

package/src/test/init.test.ts

@@ -67,7 +67,7 @@ describe("Client class", () => {
 				Client.connect("hmb/secret_world", {
 					hf_token: "hf_bad_token"
 				})
-			).rejects.toThrow(CONFIG_ERROR_MSG);
+			).rejects.toThrowError(SPACE_METADATA_ERROR_MSG);
 		});
 
 		test("viewing the api info of a running app", async () => {
@@ -77,7 +77,7 @@ describe("Client class", () => {
 
 		test("viewing the api info of a non-existent app", async () => {
 			const app = Client.connect(broken_app_reference);
-			await expect(app).rejects.toThrow(CONFIG_ERROR_MSG);
+			await expect(app).rejects.toThrowError();
 		});
 	});
 

package/src/test/init_helpers.test.ts

@@ -1,10 +1,13 @@
 import {
 	resolve_root,
 	get_jwt,
-	determine_protocol
+	determine_protocol,
+	parse_and_set_cookies
 } from "../helpers/init_helpers";
 import { initialise_server } from "./server";
 import { beforeAll, afterEach, afterAll, it, expect, describe } from "vitest";
+import { Client } from "../client";
+import { INVALID_CREDENTIALS_MSG, MISSING_CREDENTIALS_MSG } from "../constants";
 
 const server = initialise_server();
 
@@ -92,3 +95,52 @@ describe("determine_protocol", () => {
 		});
 	});
 });
+
+describe("parse_and_set_cookies", () => {
+	it("should return an empty array when the cookie header is empty", () => {
+		const cookie_header = "";
+		const result = parse_and_set_cookies(cookie_header);
+		expect(result).toEqual([]);
+	});
+
+	it("should parse the cookie header and return an array of cookies", () => {
+		const cookie_header = "access-token-123=abc;access-token-unsecured-456=def";
+		const result = parse_and_set_cookies(cookie_header);
+		expect(result).toEqual(["access-token-123=abc"]);
+	});
+});
+
+describe("resolve_cookies", () => {
+	it("should set the cookies when correct auth credentials are provided", async () => {
+		const client = await Client.connect("hmb/auth_space", {
+			auth: ["admin", "pass1234"]
+		});
+
+		const api = client.view_api();
+		expect((await api).named_endpoints["/predict"]).toBeDefined();
+	});
+
+	it("should connect to a private and authenticated space", async () => {
+		const client = await Client.connect("hmb/private_auth_space", {
+			hf_token: "hf_123",
+			auth: ["admin", "pass1234"]
+		});
+
+		const api = client.view_api();
+		expect((await api).named_endpoints["/predict"]).toBeDefined();
+	});
+
+	it("should not set the cookies when auth credentials are invalid", async () => {
+		await expect(
+			Client.connect("hmb/invalid_auth_space", {
+				auth: ["admin", "wrong_password"]
+			})
+		).rejects.toThrowError(INVALID_CREDENTIALS_MSG);
+	});
+
+	it("should not set the cookies when auth option is not provided in an auth space", async () => {
+		await expect(Client.connect("hmb/unauth_space")).rejects.toThrowError(
+			MISSING_CREDENTIALS_MSG
+		);
+	});
+});

package/src/test/test_data.ts

@@ -376,6 +376,7 @@ export const config_response: Config = {
 	},
 	dependencies: [
 		{
+			id: 0,
 			targets: [
 				[9, "click"],
 				[1, "submit"]
@@ -404,6 +405,7 @@ export const config_response: Config = {
 			zerogpu: false
 		},
 		{
+			id: 1,
 			targets: [[8, "click"]],
 			inputs: [],
 			outputs: [1, 2],
@@ -429,6 +431,7 @@ export const config_response: Config = {
 			zerogpu: false
 		},
 		{
+			id: 2,
 			targets: [[8, "click"]],
 			inputs: [],
 			outputs: [5],

package/src/types.ts

@@ -154,6 +154,7 @@ export interface Config {
 }
 
 export interface Dependency {
+	id: number;
 	targets: [number, string][];
 	inputs: number[];
 	outputs: number[];
@@ -179,6 +180,7 @@ export interface Dependency {
 	final_event: Payload | null;
 	show_api: boolean;
 	zerogpu?: boolean;
+	rendered_in: number | null;
 }
 
 export interface DependencyTypes {
@@ -215,6 +217,7 @@ export interface DuplicateOptions extends ClientOptions {
 export interface ClientOptions {
 	hf_token?: `hf_${string}`;
 	status_callback?: SpaceStatusCallback | null;
+	auth?: [string, string] | null;
 }
 
 export interface FileData {
@@ -255,6 +258,8 @@ export interface RenderMessage {
 	data: {
 		components: any[];
 		layout: any;
+		dependencies: Dependency[];
+		render_id: number;
 	};
 }
 
@@ -276,4 +281,5 @@ export interface Status {
 		desc: string | null;
 	}[];
 	time?: Date;
+	changed_state_ids?: number[];
 }

package/src/utils/duplicate.ts

@@ -6,12 +6,17 @@ import {
 import type { DuplicateOptions } from "../types";
 import { Client } from "../client";
 import { SPACE_METADATA_ERROR_MSG } from "../constants";
+import {
+	get_cookie_header,
+	parse_and_set_cookies
+} from "../helpers/init_helpers";
+import { process_endpoint } from "../helpers/api_info";
 
 export async function duplicate(
 	app_reference: string,
 	options: DuplicateOptions
 ): Promise<Client> {
-	const { hf_token, private: _private, hardware, timeout } = options;
+	const { hf_token, private: _private, hardware, timeout, auth } = options;
 
 	if (hardware && !hardware_types.includes(hardware)) {
 		throw new Error(
@@ -20,9 +25,29 @@ export async function duplicate(
 				.join(",")}.`
 		);
 	}
+
+	const { http_protocol, host } = await process_endpoint(
+		app_reference,
+		hf_token
+	);
+
+	let cookies: string[] | null = null;
+
+	if (auth) {
+		const cookie_header = await get_cookie_header(
+			http_protocol,
+			host,
+			auth,
+			fetch
+		);
+
+		if (cookie_header) cookies = parse_and_set_cookies(cookie_header);
+	}
+
 	const headers = {
 		Authorization: `Bearer ${hf_token}`,
-		"Content-Type": "application/json"
+		"Content-Type": "application/json",
+		...(cookies ? { Cookie: cookies.join("; ") } : {})
 	};
 
 	const user = (

package/src/utils/post_data.ts

@@ -19,7 +19,8 @@ export async function post_data(
 		var response = await this.fetch(url, {
 			method: "POST",
 			body: JSON.stringify(body),
-			headers: { ...headers, ...additional_headers }
+			headers: { ...headers, ...additional_headers },
+			credentials: "include"
 		});
 	} catch (e) {
 		return [{ error: BROKEN_CONNECTION_MSG }, 500];

package/src/utils/predict.ts

@@ -15,10 +15,12 @@ export async function predict(
 	}
 
 	if (typeof endpoint === "number") {
-		dependency = this.config.dependencies[endpoint];
+		dependency = this.config.dependencies.find((dep) => dep.id == endpoint)!;
 	} else {
 		const trimmed_endpoint = endpoint.replace(/^\//, "");
-		dependency = this.config.dependencies[this.api_map[trimmed_endpoint]];
+		dependency = this.config.dependencies.find(
+			(dep) => dep.id == this.api_map[trimmed_endpoint]
+		)!;
 	}
 
 	if (dependency?.types.continuous) {

package/src/utils/submit.ts

@@ -162,6 +162,35 @@ export function submit(
 			}
 		}
 
+		const resolve_heartbeat = async (config: Config): Promise<void> => {
+			await this._resolve_hearbeat(config);
+		};
+
+		async function handle_render_config(render_config: any): Promise<void> {
+			if (!config) return;
+			let render_id: number = render_config.render_id;
+			config.components = [
+				...config.components.filter((c) => c.props.rendered_in !== render_id),
+				...render_config.components
+			];
+			config.dependencies = [
+				...config.dependencies.filter((d) => d.rendered_in !== render_id),
+				...render_config.dependencies
+			];
+			const any_state = config.components.some((c) => c.type === "state");
+			const any_unload = config.dependencies.some((d) =>
+				d.targets.some((t) => t[1] === "unload")
+			);
+			config.connect_heartbeat = any_state || any_unload;
+			await resolve_heartbeat(config);
+			fire_event({
+				type: "render",
+				data: render_config,
+				endpoint: _endpoint,
+				fn_index
+			});
+		}
+
 		this.handle_blob(config.root, resolved_data, endpoint_info).then(
 			async (_payload) => {
 				payload = {
@@ -201,6 +230,9 @@ export function submit(
 									event_data,
 									trigger_id
 								});
+								if (output.render_config) {
+									handle_render_config(output.render_config);
+								}
 
 								fire_event({
 									type: "status",
@@ -606,12 +638,7 @@ export function submit(
 											fn_index
 										});
 										if (data.render_config) {
-											fire_event({
-												type: "render",
-												data: data.render_config,
-												endpoint: _endpoint,
-												fn_index
-											});
+											await handle_render_config(data.render_config);
 										}
 
 										if (complete) {
@@ -698,13 +725,15 @@ function get_endpoint_info(
 	if (typeof endpoint === "number") {
 		fn_index = endpoint;
 		endpoint_info = api_info.unnamed_endpoints[fn_index];
-		dependency = config.dependencies[endpoint];
+		dependency = config.dependencies.find((dep) => dep.id == endpoint)!;
 	} else {
 		const trimmed_endpoint = endpoint.replace(/^\//, "");
 
 		fn_index = api_map[trimmed_endpoint];
 		endpoint_info = api_info.named_endpoints[endpoint.trim()];
-		dependency = config.dependencies[api_map[trimmed_endpoint]];
+		dependency = config.dependencies.find(
+			(dep) => dep.id == api_map[trimmed_endpoint]
+		)!;
 	}
 
 	if (typeof fn_index !== "number") {

package/src/utils/upload_files.ts

@@ -33,7 +33,8 @@ export async function upload_files(
 			response = await this.fetch(upload_url, {
 				method: "POST",
 				body: formData,
-				headers
+				headers,
+				credentials: "include"
 			});
 		} catch (e) {
 			throw new Error(BROKEN_CONNECTION_MSG + (e as Error).message);

package/src/utils/view_api.ts

@@ -3,7 +3,7 @@ import semiver from "semiver";
 import { API_INFO_URL, BROKEN_CONNECTION_MSG } from "../constants";
 import { Client } from "../client";
 import { SPACE_FETCHER_URL } from "../constants";
-import { transform_api_info } from "../helpers/api_info";
+import { join_urls, transform_api_info } from "../helpers/api_info";
 
 export async function view_api(this: Client): Promise<any> {
 	if (this.api_info) return this.api_info;
@@ -34,11 +34,14 @@ export async function view_api(this: Client): Promise<any> {
 					serialize: false,
 					config: JSON.stringify(config)
 				}),
-				headers
+				headers,
+				credentials: "include"
 			});
 		} else {
-			response = await this.fetch(`${config?.root}/${API_INFO_URL}`, {
-				headers
+			const url = join_urls(config.root, API_INFO_URL);
+			response = await this.fetch(url, {
+				headers,
+				credentials: "include"
 			});
 		}