@gradio/client 0.16.0 → 0.17.0

package/src/constants.ts

@@ -0,0 +1,20 @@
+// endpoints
+export const HOST_URL = "host";
+export const API_URL = "api/predict/";
+export const SSE_URL_V0 = "queue/join";
+export const SSE_DATA_URL_V0 = "queue/data";
+export const SSE_URL = "queue/data";
+export const SSE_DATA_URL = "queue/join";
+export const UPLOAD_URL = "upload";
+export const LOGIN_URL = "login";
+export const CONFIG_URL = "config";
+export const API_INFO_URL = "info";
+export const RAW_API_INFO_URL = "info?serialize=False";
+export const SPACE_FETCHER_URL =
+	"https://gradio-space-api-fetcher-v2.hf.space/api";
+export const RESET_URL = "reset";
+export const SPACE_URL = "https://hf.space/{}";
+
+// messages
+export const QUEUE_FULL_MSG = "This application is too busy. Keep trying!";
+export const BROKEN_CONNECTION_MSG = "Connection errored out.";

package/src/globals.d.ts

@@ -1,3 +1,5 @@
+import { Config } from "./types";
+
 declare global {
 	interface Window {
 		__gradio_mode__: "app" | "website";
@@ -6,24 +8,3 @@ declare global {
 		__gradio_space__: string | null;
 	}
 }
-
-export interface Config {
-	auth_required: boolean | undefined;
-	auth_message: string;
-	components: any[];
-	css: string | null;
-	dependencies: any[];
-	dev_mode: boolean;
-	enable_queue: boolean;
-	layout: any;
-	mode: "blocks" | "interface";
-	root: string;
-	theme: string;
-	title: string;
-	version: string;
-	space_id: string | null;
-	is_colab: boolean;
-	show_api: boolean;
-	stylesheets: string[];
-	path: string;
-}

package/src/helpers/api_info.ts

@@ -0,0 +1,300 @@
+import type { Status } from "../types";
+import { QUEUE_FULL_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_DOMAIN = /.*hf\.space\/{0,1}$/;
+
+export async function process_endpoint(
+	app_reference: string,
+	hf_token?: `hf_${string}`
+): Promise<{
+	space_id: string | false;
+	host: string;
+	ws_protocol: "ws" | "wss";
+	http_protocol: "http:" | "https:";
+}> {
+	const headers: { Authorization?: string } = {};
+	if (hf_token) {
+		headers.Authorization = `Bearer ${hf_token}`;
+	}
+
+	const _app_reference = app_reference.trim();
+
+	if (RE_SPACE_NAME.test(_app_reference)) {
+		try {
+			const res = await fetch(
+				`https://huggingface.co/api/spaces/${_app_reference}/host`,
+				{ headers }
+			);
+
+			if (res.status !== 200)
+				throw new Error("Space metadata could not be loaded.");
+			const _host = (await res.json()).host;
+
+			return {
+				space_id: app_reference,
+				...determine_protocol(_host)
+			};
+		} catch (e: any) {
+			throw new Error("Space metadata could not be loaded." + e.message);
+		}
+	}
+
+	if (RE_SPACE_DOMAIN.test(_app_reference)) {
+		const { ws_protocol, http_protocol, host } =
+			determine_protocol(_app_reference);
+
+		return {
+			space_id: host.replace(".hf.space", ""),
+			ws_protocol,
+			http_protocol,
+			host
+		};
+	}
+
+	return {
+		space_id: false,
+		...determine_protocol(_app_reference)
+	};
+}
+
+export function transform_api_info(
+	api_info: ApiInfo<ApiData>,
+	config: Config,
+	api_map: Record<string, number>
+): ApiInfo<JsApiData> {
+	const transformed_info: ApiInfo<JsApiData> = {
+		named_endpoints: {},
+		unnamed_endpoints: {}
+	};
+
+	Object.keys(api_info).forEach((category) => {
+		if (category === "named_endpoints" || category === "unnamed_endpoints") {
+			transformed_info[category] = {};
+
+			Object.entries(api_info[category]).forEach(
+				([endpoint, { parameters, returns }]) => {
+					const dependencyIndex =
+						config.dependencies.findIndex((dep) => dep.api_name === endpoint) ||
+						api_map[endpoint.replace("/", "")] ||
+						-1;
+
+					const dependencyTypes =
+						dependencyIndex !== -1
+							? config.dependencies[dependencyIndex].types
+							: { continuous: false, generator: false };
+
+					const transform_type = (
+						data: ApiData,
+						component: string,
+						serializer: string,
+						signature_type: "return" | "parameter"
+					): JsApiData => ({
+						...data,
+						description: get_description(data.type, serializer),
+						type:
+							get_type(data.type, component, serializer, signature_type) || ""
+					});
+
+					transformed_info[category][endpoint] = {
+						parameters: parameters.map((p: ApiData) =>
+							transform_type(p, p.component, p.serializer, "parameter")
+						),
+						returns: returns.map((r: ApiData) =>
+							transform_type(r, r.component, r.serializer, "return")
+						),
+						type: dependencyTypes
+					};
+				}
+			);
+		}
+	});
+
+	return transformed_info;
+}
+
+export function get_type(
+	type: { type: any; description: string },
+	component: string,
+	serializer: string,
+	signature_type: "return" | "parameter"
+): string | undefined {
+	switch (type.type) {
+		case "string":
+			return "string";
+		case "boolean":
+			return "boolean";
+		case "number":
+			return "number";
+	}
+
+	if (
+		serializer === "JSONSerializable" ||
+		serializer === "StringSerializable"
+	) {
+		return "any";
+	} else if (serializer === "ListStringSerializable") {
+		return "string[]";
+	} else if (component === "Image") {
+		return signature_type === "parameter" ? "Blob | File | Buffer" : "string";
+	} else if (serializer === "FileSerializable") {
+		if (type?.type === "array") {
+			return signature_type === "parameter"
+				? "(Blob | File | Buffer)[]"
+				: `{ name: string; data: string; size?: number; is_file?: boolean; orig_name?: string}[]`;
+		}
+		return signature_type === "parameter"
+			? "Blob | File | Buffer"
+			: `{ name: string; data: string; size?: number; is_file?: boolean; orig_name?: string}`;
+	} else if (serializer === "GallerySerializable") {
+		return signature_type === "parameter"
+			? "[(Blob | File | Buffer), (string | null)][]"
+			: `[{ name: string; data: string; size?: number; is_file?: boolean; orig_name?: string}, (string | null))][]`;
+	}
+}
+
+export function get_description(
+	type: { type: any; description: string },
+	serializer: string
+): string {
+	if (serializer === "GallerySerializable") {
+		return "array of [file, label] tuples";
+	} else if (serializer === "ListStringSerializable") {
+		return "array of strings";
+	} else if (serializer === "FileSerializable") {
+		return "array of files or single file";
+	}
+	return type.description;
+}
+
+export function handle_message(
+	data: any,
+	last_status: Status["stage"]
+): {
+	type:
+		| "hash"
+		| "data"
+		| "update"
+		| "complete"
+		| "generating"
+		| "log"
+		| "none"
+		| "heartbeat"
+		| "unexpected_error";
+	data?: any;
+	status?: Status;
+} {
+	const queue = true;
+	switch (data.msg) {
+		case "send_data":
+			return { type: "data" };
+		case "send_hash":
+			return { type: "hash" };
+		case "queue_full":
+			return {
+				type: "update",
+				status: {
+					queue,
+					message: QUEUE_FULL_MSG,
+					stage: "error",
+					code: data.code,
+					success: data.success
+				}
+			};
+		case "heartbeat":
+			return {
+				type: "heartbeat"
+			};
+		case "unexpected_error":
+			return {
+				type: "unexpected_error",
+				status: {
+					queue,
+					message: data.message,
+					stage: "error",
+					success: false
+				}
+			};
+		case "estimation":
+			return {
+				type: "update",
+				status: {
+					queue,
+					stage: last_status || "pending",
+					code: data.code,
+					size: data.queue_size,
+					position: data.rank,
+					eta: data.rank_eta,
+					success: data.success
+				}
+			};
+		case "progress":
+			return {
+				type: "update",
+				status: {
+					queue,
+					stage: "pending",
+					code: data.code,
+					progress_data: data.progress_data,
+					success: data.success
+				}
+			};
+		case "log":
+			return { type: "log", data: data };
+		case "process_generating":
+			return {
+				type: "generating",
+				status: {
+					queue,
+					message: !data.success ? data.output.error : null,
+					stage: data.success ? "generating" : "error",
+					code: data.code,
+					progress_data: data.progress_data,
+					eta: data.average_duration
+				},
+				data: data.success ? data.output : null
+			};
+		case "process_completed":
+			if ("error" in data.output) {
+				return {
+					type: "update",
+					status: {
+						queue,
+						message: data.output.error as string,
+						stage: "error",
+						code: data.code,
+						success: data.success
+					}
+				};
+			}
+			return {
+				type: "complete",
+				status: {
+					queue,
+					message: !data.success ? data.output.error : undefined,
+					stage: data.success ? "complete" : "error",
+					code: data.code,
+					progress_data: data.progress_data
+				},
+				data: data.success ? data.output : null
+			};
+
+		case "process_starts":
+			return {
+				type: "update",
+				status: {
+					queue,
+					stage: "pending",
+					code: data.code,
+					size: data.rank,
+					position: 0,
+					success: data.success,
+					eta: data.eta
+				}
+			};
+	}
+
+	return { type: "none", status: { stage: "error", queue } };
+}

package/src/helpers/data.ts

@@ -0,0 +1,115 @@
+import { NodeBlob } from "../client";
+import type {
+	ApiData,
+	BlobRef,
+	Config,
+	EndpointInfo,
+	JsApiData,
+	ParamType
+} from "../types";
+
+export function update_object(
+	object: { [x: string]: any },
+	newValue: any,
+	stack: (string | number)[]
+): void {
+	while (stack.length > 1) {
+		const key = stack.shift();
+		if (typeof key === "string" || typeof key === "number") {
+			object = object[key];
+		} else {
+			throw new Error("Invalid key type");
+		}
+	}
+
+	const key = stack.shift();
+	if (typeof key === "string" || typeof key === "number") {
+		object[key] = newValue;
+	} else {
+		throw new Error("Invalid key type");
+	}
+}
+
+export async function walk_and_store_blobs(
+	param: ParamType,
+	type: string | undefined = undefined,
+	path: string[] = [],
+	root = false,
+	endpoint_info: EndpointInfo<ApiData | JsApiData> | undefined = undefined
+): Promise<BlobRef[]> {
+	if (Array.isArray(param)) {
+		let blob_refs: BlobRef[] = [];
+
+		await Promise.all(
+			param.map(async (item) => {
+				let new_path = path.slice();
+				new_path.push(item);
+
+				const array_refs = await walk_and_store_blobs(
+					param[item],
+					root ? endpoint_info?.parameters[item]?.component || undefined : type,
+					new_path,
+					false,
+					endpoint_info
+				);
+
+				blob_refs = blob_refs.concat(array_refs);
+			})
+		);
+
+		return blob_refs;
+	} else if (globalThis.Buffer && param instanceof globalThis.Buffer) {
+		const is_image = type === "Image";
+		return [
+			{
+				path: path,
+				blob: is_image ? false : new NodeBlob([param]),
+				type
+			}
+		];
+	} else if (typeof param === "object") {
+		let blob_refs: BlobRef[] = [];
+		for (let key in param) {
+			if (param.hasOwnProperty(key)) {
+				let new_path = path.slice();
+				new_path.push(key);
+				blob_refs = blob_refs.concat(
+					await walk_and_store_blobs(
+						// @ts-ignore
+						param[key],
+						undefined,
+						new_path,
+						false,
+						endpoint_info
+					)
+				);
+			}
+		}
+		return blob_refs;
+	}
+	return [];
+}
+
+export function skip_queue(id: number, config: Config): boolean {
+	return (
+		!(config?.dependencies?.[id]?.queue === null
+			? config.enable_queue
+			: config?.dependencies?.[id]?.queue) || false
+	);
+}
+
+// todo: add jsdoc for this function
+
+export function post_message<Res = any>(
+	message: any,
+	origin: string
+): Promise<Res> {
+	return new Promise((res, _rej) => {
+		const channel = new MessageChannel();
+		channel.port1.onmessage = (({ data }) => {
+			channel.port1.close();
+			res(data);
+		}) as (ev: MessageEvent<Res>) => void;
+		window.parent.postMessage(message, origin, [channel.port2]);
+	});
+}

package/src/helpers/init_helpers.ts

@@ -0,0 +1,134 @@
+import type { Config } from "../types";
+import { CONFIG_URL } from "../constants";
+import { Client } from "..";
+
+/**
+ * This function is used to resolve the URL for making requests when the app has a root path.
+ * The root path could be a path suffix like "/app" which is appended to the end of the base URL. Or
+ * it could be a full URL like "https://abidlabs-test-client-replica--gqf2x.hf.space" which is used when hosting
+ * Gradio apps on Hugging Face Spaces.
+ * @param {string} base_url The base URL at which the Gradio server is hosted
+ * @param {string} root_path The root path, which could be a path suffix (e.g. mounted in FastAPI app) or a full URL (e.g. hosted on Hugging Face Spaces)
+ * @param {boolean} prioritize_base Whether to prioritize the base URL over the root path. This is used when both the base path and root paths are full URLs. For example, for fetching files the root path should be prioritized, but for making requests, the base URL should be prioritized.
+ * @returns {string} the resolved URL
+ */
+export function resolve_root(
+	base_url: string,
+	root_path: string,
+	prioritize_base: boolean
+): string {
+	if (root_path.startsWith("http://") || root_path.startsWith("https://")) {
+		return prioritize_base ? base_url : root_path;
+	}
+	return base_url + root_path;
+}
+
+export async function get_jwt(
+	space: string,
+	token: `hf_${string}`
+): Promise<string | false> {
+	try {
+		const r = await fetch(`https://huggingface.co/api/spaces/${space}/jwt`, {
+			headers: {
+				Authorization: `Bearer ${token}`
+			}
+		});
+
+		const jwt = (await r.json()).token;
+
+		return jwt || false;
+	} catch (e) {
+		console.error(e);
+		return false;
+	}
+}
+
+export function map_names_to_ids(
+	fns: Config["dependencies"]
+): Record<string, number> {
+	let apis: Record<string, number> = {};
+
+	fns.forEach(({ api_name }, i: number) => {
+		if (api_name) apis[api_name] = i;
+	});
+	return apis;
+}
+
+export async function resolve_config(
+	this: Client,
+	endpoint: string
+): Promise<Config | undefined> {
+	const headers: Record<string, string> = this.options.hf_token
+		? { Authorization: `Bearer ${this.options.hf_token}` }
+		: {};
+
+	headers["Content-Type"] = "application/json";
+
+	if (
+		typeof window !== "undefined" &&
+		window.gradio_config &&
+		location.origin !== "http://localhost:9876" &&
+		!window.gradio_config.dev_mode
+	) {
+		const path = window.gradio_config.root;
+		const config = window.gradio_config;
+		let config_root = resolve_root(endpoint, config.root, false);
+		config.root = config_root;
+		return { ...config, path };
+	} else if (endpoint) {
+		const response = await this.fetch_implementation(
+			`${endpoint}/${CONFIG_URL}`,
+			{
+				headers
+			}
+		);
+
+		if (response?.status === 200) {
+			let config = await response.json();
+			config.path = config.path ?? "";
+			config.root = endpoint;
+			return config;
+		}
+		throw new Error("Could not get config.");
+	}
+
+	throw new Error("No config or app endpoint found");
+}
+
+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);
+
+		if (host.endsWith("hf.space")) {
+			return {
+				ws_protocol: "wss",
+				host: host,
+				http_protocol: protocol as "http:" | "https:"
+			};
+		}
+		return {
+			ws_protocol: protocol === "https:" ? "wss" : "ws",
+			http_protocol: protocol as "http:" | "https:",
+			host
+		};
+	} else if (endpoint.startsWith("file:")) {
+		// This case is only expected to be used for the Wasm mode (Gradio-lite),
+		// where users can create a local HTML file using it and open the page in a browser directly via the `file:` protocol.
+		return {
+			ws_protocol: "ws",
+			http_protocol: "http:",
+			host: "lite.local" // Special fake hostname only used for this case. This matches the hostname allowed in `is_self_host()` in `js/wasm/network/host.ts`.
+		};
+	}
+
+	// default to secure if no protocol is provided
+	return {
+		ws_protocol: "wss",
+		http_protocol: "https:",
+		host: endpoint
+	};
+}