@gradio/client 0.1.4 → 0.3.0

package/src/client.ts

@@ -66,10 +66,10 @@ export async function duplicate(
 		hf_token: `hf_${string}`;
 		private?: boolean;
 		status_callback: SpaceStatusCallback;
-		hardware?: typeof hardware_types[number];
+		hardware?: (typeof hardware_types)[number];
 		timeout?: number;
 	}
-) {
+): Promise<client_return> {
 	const { hf_token, private: _private, hardware, timeout } = options;
 
 	if (hardware && !hardware_types.includes(hardware)) {
@@ -115,38 +115,57 @@ export async function duplicate(
 
 		if (response.status === 409) {
 			return client(`${user}/${space_name}`, options);
-		} else {
-			const duplicated_space = await response.json();
+		}
+		const duplicated_space = await response.json();
 
-			let original_hardware;
+		let original_hardware;
 
-			if (!hardware) {
-				original_hardware = await get_space_hardware(app_reference, hf_token);
-			}
+		if (!hardware) {
+			original_hardware = await get_space_hardware(app_reference, hf_token);
+		}
 
-			const requested_hardware = hardware || original_hardware || "cpu-basic";
-			await set_space_hardware(
-				`${user}/${space_name}`,
-				requested_hardware,
-				hf_token
-			);
+		const requested_hardware = hardware || original_hardware || "cpu-basic";
+		await set_space_hardware(
+			`${user}/${space_name}`,
+			requested_hardware,
+			hf_token
+		);
 
-			await set_space_timeout(
-				`${user}/${space_name}`,
-				timeout || 300,
-				hf_token
-			);
-			return client(duplicated_space.url, options);
-		}
+		await set_space_timeout(`${user}/${space_name}`, timeout || 300, hf_token);
+		return client(duplicated_space.url, options);
 	} catch (e: any) {
 		throw new Error(e);
 	}
 }
 
-/**
- * We need to inject a customized fetch implementation for the Wasm version.
- */
-export function api_factory(fetch_implementation: typeof fetch) {
+interface Client {
+	post_data: (
+		url: string,
+		body: unknown,
+		token?: `hf_${string}`
+	) => Promise<[PostResponse, number]>;
+	upload_files: (
+		root: string,
+		files: File[],
+		token?: `hf_${string}`
+	) => Promise<UploadResponse>;
+	client: (
+		app_reference: string,
+		options: {
+			hf_token?: `hf_${string}`;
+			status_callback?: SpaceStatusCallback;
+			normalise_files?: boolean;
+		}
+	) => Promise<client_return>;
+	handle_blob: (
+		endpoint: string,
+		data: unknown[],
+		api_info: ApiInfo<JsApiData>,
+		token?: `hf_${string}`
+	) => Promise<unknown[]>;
+}
+
+export function api_factory(fetch_implementation: typeof fetch): Client {
 	return { post_data, upload_files, client, handle_blob };
 
 	async function post_data(
@@ -176,7 +195,7 @@ export function api_factory(fetch_implementation: typeof fetch) {
 
 	async function upload_files(
 		root: string,
-		files: Array<File>,
+		files: (Blob | File)[],
 		token?: `hf_${string}`
 	): Promise<UploadResponse> {
 		const headers: {
@@ -185,22 +204,27 @@ export function api_factory(fetch_implementation: typeof fetch) {
 		if (token) {
 			headers.Authorization = `Bearer ${token}`;
 		}
-
-		const formData = new FormData();
-		files.forEach((file) => {
-			formData.append("files", file);
-		});
-		try {
-			var response = await fetch_implementation(`${root}/upload`, {
-				method: "POST",
-				body: formData,
-				headers
+		const chunkSize = 1000;
+		const uploadResponses = [];
+		for (let i = 0; i < files.length; i += chunkSize) {
+			const chunk = files.slice(i, i + chunkSize);
+			const formData = new FormData();
+			chunk.forEach((file) => {
+				formData.append("files", file);
 			});
-		} catch (e) {
-			return { error: BROKEN_CONNECTION_MSG };
+			try {
+				var response = await fetch_implementation(`${root}/upload`, {
+					method: "POST",
+					body: formData,
+					headers
+				});
+			} catch (e) {
+				return { error: BROKEN_CONNECTION_MSG };
+			}
+			const output: UploadResponse["files"] = await response.json();
+			uploadResponses.push(...output);
 		}
-		const output: UploadResponse["files"] = await response.json();
-		return { files: output };
+		return { files: uploadResponses };
 	}
 
 	async function client(
@@ -242,7 +266,7 @@ export function api_factory(fetch_implementation: typeof fetch) {
 				jwt = await get_jwt(space_id, hf_token);
 			}
 
-			async function config_success(_config: Config) {
+			async function config_success(_config: Config): Promise<client_return> {
 				config = _config;
 				api_map = map_names_to_ids(_config?.dependencies || []);
 				try {
@@ -257,7 +281,7 @@ export function api_factory(fetch_implementation: typeof fetch) {
 				};
 			}
 			let api: ApiInfo<JsApiData>;
-			async function handle_space_sucess(status: SpaceStatus) {
+			async function handle_space_sucess(status: SpaceStatus): Promise<void> {
 				if (status_callback) status_callback(status);
 				if (status.status === "running")
 					try {
@@ -310,37 +334,50 @@ export function api_factory(fetch_implementation: typeof fetch) {
 				}
 			}
 
-			/**
-			 * Run a prediction.
-			 * @param endpoint - The prediction endpoint to use.
-			 * @param status_callback - A function that is called with the current status of the prediction immediately and every time it updates.
-			 * @return Returns the data for the prediction or an error message.
-			 */
 			function predict(
 				endpoint: string,
 				data: unknown[],
 				event_data?: unknown
-			) {
+			): Promise<unknown> {
 				let data_returned = false;
 				let status_complete = false;
+				let dependency;
+				if (typeof endpoint === "number") {
+					dependency = config.dependencies[endpoint];
+				} else {
+					const trimmed_endpoint = endpoint.replace(/^\//, "");
+					dependency = config.dependencies[api_map[trimmed_endpoint]];
+				}
+
+				if (dependency.types.continuous) {
+					throw new Error(
+						"Cannot call predict on this function as it may run forever. Use submit instead"
+					);
+				}
+
 				return new Promise((res, rej) => {
 					const app = submit(endpoint, data, event_data);
+					let result;
 
 					app
 						.on("data", (d) => {
-							data_returned = true;
+							// if complete message comes before data, resolve here
 							if (status_complete) {
 								app.destroy();
+								res(d);
 							}
-							res(d);
+							data_returned = true;
+							result = d;
 						})
 						.on("status", (status) => {
 							if (status.stage === "error") rej(status);
-							if (status.stage === "complete" && data_returned) {
-								app.destroy();
-							}
 							if (status.stage === "complete") {
 								status_complete = true;
+								app.destroy();
+								// if complete message comes after data, resolve here
+								if (data_returned) {
+									res(result);
+								}
 							}
 						});
 				});
@@ -478,6 +515,7 @@ export function api_factory(fetch_implementation: typeof fetch) {
 								fire_event({
 									type: "status",
 									stage: "error",
+									broken: true,
 									message: BROKEN_CONNECTION_MSG,
 									queue: true,
 									endpoint: _endpoint,
@@ -513,6 +551,14 @@ export function api_factory(fetch_implementation: typeof fetch) {
 								websocket.send(JSON.stringify({ ...payload, session_hash }));
 							} else if (type === "complete") {
 								complete = status;
+							} else if (type === "log") {
+								fire_event({
+									type: "log",
+									log: data.log,
+									level: data.level,
+									endpoint: _endpoint,
+									fn_index
+								});
 							} else if (type === "generating") {
 								fire_event({
 									type: "status",
@@ -565,7 +611,7 @@ export function api_factory(fetch_implementation: typeof fetch) {
 					}
 				});
 
-				function fire_event<K extends EventType>(event: Event<K>) {
+				function fire_event<K extends EventType>(event: Event<K>): void {
 					const narrowed_listener_map: ListenerMap<K> = listener_map;
 					const listeners = narrowed_listener_map[event.type] || [];
 					listeners?.forEach((l) => l(event));
@@ -574,7 +620,7 @@ export function api_factory(fetch_implementation: typeof fetch) {
 				function on<K extends EventType>(
 					eventType: K,
 					listener: EventListener<K>
-				) {
+				): SubmitReturn {
 					const narrowed_listener_map: ListenerMap<K> = listener_map;
 					const listeners = narrowed_listener_map[eventType] || [];
 					narrowed_listener_map[eventType] = listeners;
@@ -586,7 +632,7 @@ export function api_factory(fetch_implementation: typeof fetch) {
 				function off<K extends EventType>(
 					eventType: K,
 					listener: EventListener<K>
-				) {
+				): SubmitReturn {
 					const narrowed_listener_map: ListenerMap<K> = listener_map;
 					let listeners = narrowed_listener_map[eventType] || [];
 					listeners = listeners?.filter((l) => l !== listener);
@@ -595,7 +641,7 @@ export function api_factory(fetch_implementation: typeof fetch) {
 					return { on, off, cancel, destroy };
 				}
 
-				async function cancel() {
+				async function cancel(): Promise<void> {
 					const _status: Status = {
 						stage: "complete",
 						queue: false,
@@ -633,7 +679,7 @@ export function api_factory(fetch_implementation: typeof fetch) {
 					}
 				}
 
-				function destroy() {
+				function destroy(): void {
 					for (const event_type in listener_map) {
 						listener_map[event_type as "data" | "status"].forEach((fn) => {
 							off(event_type as "data" | "status", fn);
@@ -706,7 +752,7 @@ export function api_factory(fetch_implementation: typeof fetch) {
 	async function handle_blob(
 		endpoint: string,
 		data: unknown[],
-		api_info,
+		api_info: ApiInfo<JsApiData>,
 		token?: `hf_${string}`
 	): Promise<unknown[]> {
 		const blob_refs = await walk_and_store_blobs(
@@ -723,9 +769,8 @@ export function api_factory(fetch_implementation: typeof fetch) {
 					const file_url = (await upload_files(endpoint, [blob], token))
 						.files[0];
 					return { path, file_url, type };
-				} else {
-					return { path, base64: data, type };
 				}
+				return { path, base64: data, type };
 			})
 		).then((r) => {
 			r.forEach(({ path, file_url, base64, type }) => {
@@ -759,27 +804,26 @@ function transform_output(
 	remote_url?: string
 ): unknown[] {
 	return data.map((d, i) => {
-		if (api_info.returns?.[i]?.component === "File") {
+		if (api_info?.returns?.[i]?.component === "File") {
 			return normalise_file(d, root_url, remote_url);
-		} else if (api_info.returns?.[i]?.component === "Gallery") {
+		} else if (api_info?.returns?.[i]?.component === "Gallery") {
 			return d.map((img) => {
 				return Array.isArray(img)
 					? [normalise_file(img[0], root_url, remote_url), img[1]]
 					: [normalise_file(img, root_url, remote_url), null];
 			});
-		} else if (typeof d === "object" && d.is_file) {
+		} else if (typeof d === "object" && d?.is_file) {
 			return normalise_file(d, root_url, remote_url);
-		} else {
-			return d;
 		}
+		return d;
 	});
 }
 
 function normalise_file(
-	file: Array<FileData>,
+	file: FileData[],
 	root: string,
 	root_url: string | null
-): Array<FileData>;
+): FileData[];
 function normalise_file(
 	file: FileData | string,
 	root: string,
@@ -790,11 +834,7 @@ function normalise_file(
 	root: string,
 	root_url: string | null
 ): null;
-function normalise_file(
-	file,
-	root,
-	root_url
-): Array<FileData> | FileData | null {
+function normalise_file(file, root, root_url): FileData[] | FileData | null {
 	if (file == null) return null;
 	if (typeof file === "string") {
 		return {
@@ -802,7 +842,7 @@ function normalise_file(
 			data: file
 		};
 	} else if (Array.isArray(file)) {
-		const normalized_file: Array<FileData | null> = [];
+		const normalized_file: (FileData | null)[] = [];
 
 		for (const x of file) {
 			if (x === null) {
@@ -812,7 +852,7 @@ function normalise_file(
 			}
 		}
 
-		return normalized_file as Array<FileData>;
+		return normalized_file as FileData[];
 	} else if (file.is_file) {
 		if (!root_url) {
 			file.data = root + "/file=" + file.name;
@@ -858,7 +898,7 @@ function get_type(
 	component: string,
 	serializer: string,
 	signature_type: "return" | "parameter"
-) {
+): string {
 	switch (type.type) {
 		case "string":
 			return "string";
@@ -882,11 +922,10 @@ function get_type(
 			return signature_type === "parameter"
 				? "(Blob | File | Buffer)[]"
 				: `{ name: string; data: string; size?: number; is_file?: boolean; orig_name?: string}[]`;
-		} else {
-			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)][]"
@@ -897,16 +936,15 @@ function get_type(
 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";
-	} else {
-		return type.description;
 	}
+	return type.description;
 }
 
 function transform_api_info(
@@ -974,7 +1012,7 @@ async function get_jwt(
 	}
 }
 
-function update_object(object, newValue, stack) {
+function update_object(object, newValue, stack): void {
 	while (stack.length > 1) {
 		object = object[stack.shift()];
 	}
@@ -988,7 +1026,14 @@ export async function walk_and_store_blobs(
 	path = [],
 	root = false,
 	api_info = undefined
-) {
+): Promise<
+	{
+		path: string[];
+		data: string | false;
+		type: string;
+		blob: Blob | false;
+	}[]
+> {
 	if (Array.isArray(param)) {
 		let blob_refs = [];
 
@@ -1035,10 +1080,9 @@ export async function walk_and_store_blobs(
 				data = Buffer.from(buffer).toString("base64");
 			}
 
-			return [{ path, data, type }];
-		} else {
-			return [{ path: path, blob: param, type }];
+			return [{ path, data, type, blob: false }];
 		}
+		return [{ path: path, blob: param, type, data: false }];
 	} else if (typeof param === "object") {
 		let blob_refs = [];
 		for (let key in param) {
@@ -1057,12 +1101,11 @@ export async function walk_and_store_blobs(
 			}
 		}
 		return blob_refs;
-	} else {
-		return [];
 	}
+	return [];
 }
 
-function image_to_data_uri(blob: Blob) {
+function image_to_data_uri(blob: Blob): Promise<string | ArrayBuffer> {
 	return new Promise((resolve, _) => {
 		const reader = new FileReader();
 		reader.onloadend = () => resolve(reader.result);
@@ -1070,7 +1113,7 @@ function image_to_data_uri(blob: Blob) {
 	});
 }
 
-function skip_queue(id: number, config: Config) {
+function skip_queue(id: number, config: Config): boolean {
 	return (
 		!(config?.dependencies?.[id]?.queue === null
 			? config.enable_queue
@@ -1090,7 +1133,8 @@ async function resolve_config(
 	if (
 		typeof window !== "undefined" &&
 		window.gradio_config &&
-		location.origin !== "http://localhost:9876"
+		location.origin !== "http://localhost:9876" &&
+		!window.gradio_config.dev_mode
 	) {
 		const path = window.gradio_config.root;
 		const config = window.gradio_config;
@@ -1106,9 +1150,8 @@ async function resolve_config(
 			config.path = config.path ?? "";
 			config.root = endpoint;
 			return config;
-		} else {
-			throw new Error("Could not get config.");
 		}
+		throw new Error("Could not get config.");
 	}
 
 	throw new Error("No config or app endpoint found");
@@ -1118,7 +1161,7 @@ async function check_space_status(
 	id: string,
 	type: "subdomain" | "space_name",
 	status_callback: SpaceStatusCallback
-) {
+): Promise<void> {
 	let endpoint =
 		type === "subdomain"
 			? `https://huggingface.co/api/spaces/by-subdomain/${id}`
@@ -1211,7 +1254,7 @@ function handle_message(
 	data: any,
 	last_status: Status["stage"]
 ): {
-	type: "hash" | "data" | "update" | "complete" | "generating" | "none";
+	type: "hash" | "data" | "update" | "complete" | "generating" | "log" | "none";
 	data?: any;
 	status?: Status;
 } {
@@ -1256,6 +1299,8 @@ function handle_message(
 					success: data.success
 				}
 			};
+		case "log":
+			return { type: "log", data: data };
 		case "process_generating":
 			return {
 				type: "generating",
@@ -1281,20 +1326,19 @@ function handle_message(
 						success: data.success
 					}
 				};
-			} else {
-				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,
-						eta: data.output.average_duration
-					},
-					data: data.success ? data.output : null
-				};
 			}
+			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,
+					eta: data.output.average_duration
+				},
+				data: data.success ? data.output : null
+			};
 
 		case "process_starts":
 			return {

package/src/globals.d.ts

@@ -1,11 +1,9 @@
 declare global {
 	interface Window {
 		__gradio_mode__: "app" | "website";
-		launchGradio: Function;
-		launchGradioFromSpaces: Function;
 		gradio_config: Config;
-		scoped_css_attach: (link: HTMLLinkElement) => void;
 		__is_colab__: boolean;
+		__gradio_space__: string | null;
 	}
 }
 

package/src/types.ts

@@ -21,7 +21,7 @@ export interface Config {
 }
 
 export interface Payload {
-	data: Array<unknown>;
+	data: unknown[];
 	fn_index?: number;
 	event_data?: unknown;
 	time?: Date;
@@ -33,7 +33,7 @@ export interface PostResponse {
 }
 export interface UploadResponse {
 	error?: string;
-	files?: Array<string>;
+	files?: string[];
 }
 
 export interface Status {
@@ -41,20 +41,26 @@ export interface Status {
 	code?: string;
 	success?: boolean;
 	stage: "pending" | "error" | "complete" | "generating";
+	broken?: boolean;
 	size?: number;
 	position?: number;
 	eta?: number;
 	message?: string;
-	progress_data?: Array<{
+	progress_data?: {
 		progress: number | null;
 		index: number | null;
 		length: number | null;
 		unit: string | null;
 		desc: string | null;
-	}>;
+	}[];
 	time?: Date;
 }
 
+export interface LogMessage {
+	log: string;
+	level: "warning" | "info";
+}
+
 export interface SpaceStatusNormal {
 	status: "sleeping" | "running" | "building" | "error" | "stopped";
 	detail:
@@ -83,11 +89,12 @@ export type SpaceStatus = SpaceStatusNormal | SpaceStatusError;
 export type status_callback_function = (a: Status) => void;
 export type SpaceStatusCallback = (a: SpaceStatus) => void;
 
-export type EventType = "data" | "status";
+export type EventType = "data" | "status" | "log";
 
 export interface EventMap {
 	data: Payload;
 	status: Status;
+	log: LogMessage;
 }
 
 export type Event<K extends EventType> = {

package/src/utils.ts

@@ -14,13 +14,12 @@ export function determine_protocol(endpoint: string): {
 				host: host,
 				http_protocol: protocol as "http:" | "https:"
 			};
-		} else {
-			return {
-				ws_protocol: protocol === "https:" ? "wss" : "ws",
-				http_protocol: protocol as "http:" | "https:",
-				host
-			};
 		}
+		return {
+			ws_protocol: protocol === "https:" ? "wss" : "ws",
+			http_protocol: protocol as "http:" | "https:",
+			host
+		};
 	}
 
 	// default to secure if no protocol is provided
@@ -87,7 +86,9 @@ export async function process_endpoint(
 	};
 }
 
-export function map_names_to_ids(fns: Config["dependencies"]) {
+export function map_names_to_ids(
+	fns: Config["dependencies"]
+): Record<string, number> {
 	let apis: Record<string, number> = {};
 
 	fns.forEach(({ api_name }, i) => {
@@ -99,7 +100,7 @@ export function map_names_to_ids(fns: Config["dependencies"]) {
 
 const RE_DISABLED_DISCUSSION =
 	/^(?=[^]*\b[dD]iscussions{0,1}\b)(?=[^]*\b[dD]isabled\b)[^]*$/;
-export async function discussions_enabled(space_id: string) {
+export async function discussions_enabled(space_id: string): Promise<boolean> {
 	try {
 		const r = await fetch(
 			`https://huggingface.co/api/spaces/${space_id}/discussions`,
@@ -110,7 +111,7 @@ export async function discussions_enabled(space_id: string) {
 		const error = r.headers.get("x-error-message");
 
 		if (error && RE_DISABLED_DISCUSSION.test(error)) return false;
-		else return true;
+		return true;
 	} catch (e) {
 		return false;
 	}
@@ -119,7 +120,7 @@ export async function discussions_enabled(space_id: string) {
 export async function get_space_hardware(
 	space_id: string,
 	token: `hf_${string}`
-) {
+): Promise<(typeof hardware_types)[number]> {
 	const headers: { Authorization?: string } = {};
 	if (token) {
 		headers.Authorization = `Bearer ${token}`;
@@ -144,9 +145,9 @@ export async function get_space_hardware(
 
 export async function set_space_hardware(
 	space_id: string,
-	new_hardware: typeof hardware_types[number],
+	new_hardware: (typeof hardware_types)[number],
 	token: `hf_${string}`
-) {
+): Promise<(typeof hardware_types)[number]> {
 	const headers: { Authorization?: string } = {};
 	if (token) {
 		headers.Authorization = `Bearer ${token}`;
@@ -175,7 +176,7 @@ export async function set_space_timeout(
 	space_id: string,
 	timeout: number,
 	token: `hf_${string}`
-) {
+): Promise<number> {
 	const headers: { Authorization?: string } = {};
 	if (token) {
 		headers.Authorization = `Bearer ${token}`;