@gradio/client 0.1.3 → 0.2.1

package/src/client.ts

@@ -58,72 +58,18 @@ type SubmitReturn = {
 const QUEUE_FULL_MSG = "This application is too busy. Keep trying!";
 const BROKEN_CONNECTION_MSG = "Connection errored out.";
 
-export async function post_data(
-	url: string,
-	body: unknown,
-	token?: `hf_${string}`
-): Promise<[PostResponse, number]> {
-	const headers: {
-		Authorization?: string;
-		"Content-Type": "application/json";
-	} = { "Content-Type": "application/json" };
-	if (token) {
-		headers.Authorization = `Bearer ${token}`;
-	}
-	try {
-		var response = await fetch(url, {
-			method: "POST",
-			body: JSON.stringify(body),
-			headers
-		});
-	} catch (e) {
-		return [{ error: BROKEN_CONNECTION_MSG }, 500];
-	}
-	const output: PostResponse = await response.json();
-	return [output, response.status];
-}
-
 export let NodeBlob;
 
-export async function upload_files(
-	root: string,
-	files: Array<File>,
-	token?: `hf_${string}`
-): Promise<UploadResponse> {
-	const headers: {
-		Authorization?: string;
-	} = {};
-	if (token) {
-		headers.Authorization = `Bearer ${token}`;
-	}
-
-	const formData = new FormData();
-	files.forEach((file) => {
-		formData.append("files", file);
-	});
-	try {
-		var response = await fetch(`${root}/upload`, {
-			method: "POST",
-			body: formData,
-			headers
-		});
-	} catch (e) {
-		return { error: BROKEN_CONNECTION_MSG };
-	}
-	const output: UploadResponse["files"] = await response.json();
-	return { files: output };
-}
-
 export async function duplicate(
 	app_reference: string,
 	options: {
 		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)) {
@@ -169,517 +115,688 @@ 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);
 	}
 }
 
-export async function client(
-	app_reference: string,
-	options: {
-		hf_token?: `hf_${string}`;
-		status_callback?: SpaceStatusCallback;
-		normalise_files?: boolean;
-	} = { normalise_files: true }
-): Promise<client_return> {
-	return new Promise(async (res) => {
-		const { status_callback, hf_token, normalise_files } = options;
-		const return_obj = {
-			predict,
-			submit,
-			view_api
-			// duplicate
-		};
-
-		const transform_files = normalise_files ?? true;
-		if (typeof window === "undefined" || !("WebSocket" in window)) {
-			const ws = await import("ws");
-			NodeBlob = (await import("node:buffer")).Blob;
-			//@ts-ignore
-			global.WebSocket = ws.WebSocket;
+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[]>;
+}
 
-		const { ws_protocol, http_protocol, host, space_id } =
-			await process_endpoint(app_reference, hf_token);
-
-		const session_hash = Math.random().toString(36).substring(2);
-		const last_status: Record<string, Status["stage"]> = {};
-		let config: Config;
-		let api_map: Record<string, number> = {};
-
-		let jwt: false | string = false;
-
-		if (hf_token && space_id) {
-			jwt = await get_jwt(space_id, hf_token);
+export function api_factory(fetch_implementation: typeof fetch): Client {
+	return { post_data, upload_files, client, handle_blob };
+
+	async function post_data(
+		url: string,
+		body: unknown,
+		token?: `hf_${string}`
+	): Promise<[PostResponse, number]> {
+		const headers: {
+			Authorization?: string;
+			"Content-Type": "application/json";
+		} = { "Content-Type": "application/json" };
+		if (token) {
+			headers.Authorization = `Bearer ${token}`;
+		}
+		try {
+			var response = await fetch_implementation(url, {
+				method: "POST",
+				body: JSON.stringify(body),
+				headers
+			});
+		} catch (e) {
+			return [{ error: BROKEN_CONNECTION_MSG }, 500];
 		}
+		const output: PostResponse = await response.json();
+		return [output, response.status];
+	}
 
-		async function config_success(_config: Config) {
-			config = _config;
-			api_map = map_names_to_ids(_config?.dependencies || []);
+	async function upload_files(
+		root: string,
+		files: (Blob | File)[],
+		token?: `hf_${string}`
+	): Promise<UploadResponse> {
+		const headers: {
+			Authorization?: string;
+		} = {};
+		if (token) {
+			headers.Authorization = `Bearer ${token}`;
+		}
+		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);
+			});
 			try {
-				api = await view_api(config);
+				var response = await fetch_implementation(`${root}/upload`, {
+					method: "POST",
+					body: formData,
+					headers
+				});
 			} catch (e) {
-				console.error(`Could not get api details: ${e.message}`);
+				return { error: BROKEN_CONNECTION_MSG };
 			}
+			const output: UploadResponse["files"] = await response.json();
+			uploadResponses.push(...output);
+		}
+		return { files: uploadResponses };
+	}
 
-			return {
-				config,
-				...return_obj
+	async function client(
+		app_reference: string,
+		options: {
+			hf_token?: `hf_${string}`;
+			status_callback?: SpaceStatusCallback;
+			normalise_files?: boolean;
+		} = { normalise_files: true }
+	): Promise<client_return> {
+		return new Promise(async (res) => {
+			const { status_callback, hf_token, normalise_files } = options;
+			const return_obj = {
+				predict,
+				submit,
+				view_api
+				// duplicate
 			};
-		}
-		let api: ApiInfo<JsApiData>;
-		async function handle_space_sucess(status: SpaceStatus) {
-			if (status_callback) status_callback(status);
-			if (status.status === "running")
-				try {
-					config = await resolve_config(`${http_protocol}//${host}`, hf_token);
 
-					const _config = await config_success(config);
-					res(_config);
+			const transform_files = normalise_files ?? true;
+			if (typeof window === "undefined" || !("WebSocket" in window)) {
+				const ws = await import("ws");
+				NodeBlob = (await import("node:buffer")).Blob;
+				//@ts-ignore
+				global.WebSocket = ws.WebSocket;
+			}
+
+			const { ws_protocol, http_protocol, host, space_id } =
+				await process_endpoint(app_reference, hf_token);
+
+			const session_hash = Math.random().toString(36).substring(2);
+			const last_status: Record<string, Status["stage"]> = {};
+			let config: Config;
+			let api_map: Record<string, number> = {};
+
+			let jwt: false | string = false;
+
+			if (hf_token && space_id) {
+				jwt = await get_jwt(space_id, hf_token);
+			}
+
+			async function config_success(_config: Config): Promise<client_return> {
+				config = _config;
+				api_map = map_names_to_ids(_config?.dependencies || []);
+				try {
+					api = await view_api(config);
 				} catch (e) {
-					if (status_callback) {
+					console.error(`Could not get api details: ${e.message}`);
+				}
+
+				return {
+					config,
+					...return_obj
+				};
+			}
+			let api: ApiInfo<JsApiData>;
+			async function handle_space_sucess(status: SpaceStatus): Promise<void> {
+				if (status_callback) status_callback(status);
+				if (status.status === "running")
+					try {
+						config = await resolve_config(
+							fetch_implementation,
+							`${http_protocol}//${host}`,
+							hf_token
+						);
+
+						const _config = await config_success(config);
+						res(_config);
+					} catch (e) {
+						console.error(e);
+						if (status_callback) {
+							status_callback({
+								status: "error",
+								message: "Could not load this space.",
+								load_status: "error",
+								detail: "NOT_FOUND"
+							});
+						}
+					}
+			}
+
+			try {
+				config = await resolve_config(
+					fetch_implementation,
+					`${http_protocol}//${host}`,
+					hf_token
+				);
+
+				const _config = await config_success(config);
+				res(_config);
+			} catch (e) {
+				console.error(e);
+				if (space_id) {
+					check_space_status(
+						space_id,
+						RE_SPACE_NAME.test(space_id) ? "space_name" : "subdomain",
+						handle_space_sucess
+					);
+				} else {
+					if (status_callback)
 						status_callback({
 							status: "error",
 							message: "Could not load this space.",
 							load_status: "error",
 							detail: "NOT_FOUND"
 						});
-					}
 				}
-		}
-
-		try {
-			config = await resolve_config(`${http_protocol}//${host}`, hf_token);
-
-			const _config = await config_success(config);
-			res(_config);
-		} catch (e) {
-			if (space_id) {
-				check_space_status(
-					space_id,
-					RE_SPACE_NAME.test(space_id) ? "space_name" : "subdomain",
-					handle_space_sucess
-				);
-			} else {
-				if (status_callback)
-					status_callback({
-						status: "error",
-						message: "Could not load this space.",
-						load_status: "error",
-						detail: "NOT_FOUND"
-					});
 			}
-		}
 
-		/**
-		 * 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) {
-			let data_returned = false;
-			let status_complete = false;
-			return new Promise((res, rej) => {
-				const app = submit(endpoint, data, event_data);
-
-				app
-					.on("data", (d) => {
-						data_returned = true;
-						if (status_complete) {
-							app.destroy();
-						}
-						res(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;
-						}
-					});
-			});
-		}
+			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]];
+				}
 
-		function submit(
-			endpoint: string | number,
-			data: unknown[],
-			event_data?: unknown
-		): SubmitReturn {
-			let fn_index: number;
-			let api_info;
-
-			if (typeof endpoint === "number") {
-				fn_index = endpoint;
-				api_info = api.unnamed_endpoints[fn_index];
-			} else {
-				const trimmed_endpoint = endpoint.replace(/^\//, "");
+				if (dependency.types.continuous) {
+					throw new Error(
+						"Cannot call predict on this function as it may run forever. Use submit instead"
+					);
+				}
 
-				fn_index = api_map[trimmed_endpoint];
-				api_info = api.named_endpoints[endpoint.trim()];
-			}
+				return new Promise((res, rej) => {
+					const app = submit(endpoint, data, event_data);
+					let result;
 
-			if (typeof fn_index !== "number") {
-				throw new Error(
-					"There is no endpoint matching that name of fn_index matching that number."
-				);
+					app
+						.on("data", (d) => {
+							// if complete message comes before data, resolve here
+							if (status_complete) {
+								app.destroy();
+								res(d);
+							}
+							data_returned = true;
+							result = d;
+						})
+						.on("status", (status) => {
+							if (status.stage === "error") rej(status);
+							if (status.stage === "complete") {
+								status_complete = true;
+								app.destroy();
+								// if complete message comes after data, resolve here
+								if (data_returned) {
+									res(result);
+								}
+							}
+						});
+				});
 			}
 
-			let websocket: WebSocket;
-
-			const _endpoint = typeof endpoint === "number" ? "/predict" : endpoint;
-			let payload: Payload;
-			let complete: false | Record<string, any> = false;
-			const listener_map: ListenerMap<EventType> = {};
-
-			handle_blob(
-				`${http_protocol}//${host + config.path}`,
-				data,
-				api_info,
-				hf_token
-			).then((_payload) => {
-				payload = { data: _payload || [], event_data, fn_index };
-				if (skip_queue(fn_index, config)) {
-					fire_event({
-						type: "status",
-						endpoint: _endpoint,
-						stage: "pending",
-						queue: false,
-						fn_index,
-						time: new Date()
-					});
+			function submit(
+				endpoint: string | number,
+				data: unknown[],
+				event_data?: unknown
+			): SubmitReturn {
+				let fn_index: number;
+				let api_info;
+
+				if (typeof endpoint === "number") {
+					fn_index = endpoint;
+					api_info = api.unnamed_endpoints[fn_index];
+				} else {
+					const trimmed_endpoint = endpoint.replace(/^\//, "");
 
-					post_data(
-						`${http_protocol}//${host + config.path}/run${
-							_endpoint.startsWith("/") ? _endpoint : `/${_endpoint}`
-						}`,
-						{
-							...payload,
-							session_hash
-						},
-						hf_token
-					)
-						.then(([output, status_code]) => {
-							const data = transform_files
-								? transform_output(
-										output.data,
-										api_info,
-										config.root,
-										config.root_url
-								  )
-								: output.data;
-							if (status_code == 200) {
-								fire_event({
-									type: "data",
-									endpoint: _endpoint,
-									fn_index,
-									data: data,
-									time: new Date()
-								});
+					fn_index = api_map[trimmed_endpoint];
+					api_info = api.named_endpoints[endpoint.trim()];
+				}
 
-								fire_event({
-									type: "status",
-									endpoint: _endpoint,
-									fn_index,
-									stage: "complete",
-									eta: output.average_duration,
-									queue: false,
-									time: new Date()
-								});
-							} else {
+				if (typeof fn_index !== "number") {
+					throw new Error(
+						"There is no endpoint matching that name of fn_index matching that number."
+					);
+				}
+
+				let websocket: WebSocket;
+
+				const _endpoint = typeof endpoint === "number" ? "/predict" : endpoint;
+				let payload: Payload;
+				let complete: false | Record<string, any> = false;
+				const listener_map: ListenerMap<EventType> = {};
+
+				handle_blob(
+					`${http_protocol}//${host + config.path}`,
+					data,
+					api_info,
+					hf_token
+				).then((_payload) => {
+					payload = { data: _payload || [], event_data, fn_index };
+					if (skip_queue(fn_index, config)) {
+						fire_event({
+							type: "status",
+							endpoint: _endpoint,
+							stage: "pending",
+							queue: false,
+							fn_index,
+							time: new Date()
+						});
+
+						post_data(
+							`${http_protocol}//${host + config.path}/run${
+								_endpoint.startsWith("/") ? _endpoint : `/${_endpoint}`
+							}`,
+							{
+								...payload,
+								session_hash
+							},
+							hf_token
+						)
+							.then(([output, status_code]) => {
+								const data = transform_files
+									? transform_output(
+											output.data,
+											api_info,
+											config.root,
+											config.root_url
+									  )
+									: output.data;
+								if (status_code == 200) {
+									fire_event({
+										type: "data",
+										endpoint: _endpoint,
+										fn_index,
+										data: data,
+										time: new Date()
+									});
+
+									fire_event({
+										type: "status",
+										endpoint: _endpoint,
+										fn_index,
+										stage: "complete",
+										eta: output.average_duration,
+										queue: false,
+										time: new Date()
+									});
+								} else {
+									fire_event({
+										type: "status",
+										stage: "error",
+										endpoint: _endpoint,
+										fn_index,
+										message: output.error,
+										queue: false,
+										time: new Date()
+									});
+								}
+							})
+							.catch((e) => {
 								fire_event({
 									type: "status",
 									stage: "error",
+									message: e.message,
 									endpoint: _endpoint,
 									fn_index,
-									message: output.error,
 									queue: false,
 									time: new Date()
 								});
-							}
-						})
-						.catch((e) => {
-							fire_event({
-								type: "status",
-								stage: "error",
-								message: e.message,
-								endpoint: _endpoint,
-								fn_index,
-								queue: false,
-								time: new Date()
 							});
+					} else {
+						fire_event({
+							type: "status",
+							stage: "pending",
+							queue: true,
+							endpoint: _endpoint,
+							fn_index,
+							time: new Date()
 						});
-				} else {
-					fire_event({
-						type: "status",
-						stage: "pending",
-						queue: true,
-						endpoint: _endpoint,
-						fn_index,
-						time: new Date()
-					});
 
-					let url = new URL(`${ws_protocol}://${host}${config.path}
-						/queue/join`);
+						let url = new URL(`${ws_protocol}://${host}${config.path}
+							/queue/join`);
 
-					if (jwt) {
-						url.searchParams.set("__sign", jwt);
-					}
-
-					websocket = new WebSocket(url);
-
-					websocket.onclose = (evt) => {
-						if (!evt.wasClean) {
-							fire_event({
-								type: "status",
-								stage: "error",
-								message: BROKEN_CONNECTION_MSG,
-								queue: true,
-								endpoint: _endpoint,
-								fn_index,
-								time: new Date()
-							});
+						if (jwt) {
+							url.searchParams.set("__sign", jwt);
 						}
-					};
 
-					websocket.onmessage = function (event) {
-						const _data = JSON.parse(event.data);
-						const { type, status, data } = handle_message(
-							_data,
-							last_status[fn_index]
-						);
+						websocket = new WebSocket(url);
 
-						if (type === "update" && status && !complete) {
-							// call 'status' listeners
-							fire_event({
-								type: "status",
-								endpoint: _endpoint,
-								fn_index,
-								time: new Date(),
-								...status
-							});
-							if (status.stage === "error") {
-								websocket.close();
+						websocket.onclose = (evt) => {
+							if (!evt.wasClean) {
+								fire_event({
+									type: "status",
+									stage: "error",
+									broken: true,
+									message: BROKEN_CONNECTION_MSG,
+									queue: true,
+									endpoint: _endpoint,
+									fn_index,
+									time: new Date()
+								});
 							}
-						} else if (type === "hash") {
-							websocket.send(JSON.stringify({ fn_index, session_hash }));
-							return;
-						} else if (type === "data") {
-							websocket.send(JSON.stringify({ ...payload, session_hash }));
-						} else if (type === "complete") {
-							complete = status;
-						} else if (type === "generating") {
-							fire_event({
-								type: "status",
-								time: new Date(),
-								...status,
-								stage: status?.stage!,
-								queue: true,
-								endpoint: _endpoint,
-								fn_index
-							});
-						}
-						if (data) {
-							fire_event({
-								type: "data",
-								time: new Date(),
-								data: transform_files
-									? transform_output(
-											data.data,
-											api_info,
-											config.root,
-											config.root_url
-									  )
-									: data.data,
-								endpoint: _endpoint,
-								fn_index
-							});
+						};
+
+						websocket.onmessage = function (event) {
+							const _data = JSON.parse(event.data);
+							const { type, status, data } = handle_message(
+								_data,
+								last_status[fn_index]
+							);
 
-							if (complete) {
+							if (type === "update" && status && !complete) {
+								// call 'status' listeners
 								fire_event({
 									type: "status",
+									endpoint: _endpoint,
+									fn_index,
 									time: new Date(),
-									...complete,
+									...status
+								});
+								if (status.stage === "error") {
+									websocket.close();
+								}
+							} else if (type === "hash") {
+								websocket.send(JSON.stringify({ fn_index, session_hash }));
+								return;
+							} else if (type === "data") {
+								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",
+									time: new Date(),
+									...status,
 									stage: status?.stage!,
 									queue: true,
 									endpoint: _endpoint,
 									fn_index
 								});
-								websocket.close();
 							}
-						}
-					};
+							if (data) {
+								fire_event({
+									type: "data",
+									time: new Date(),
+									data: transform_files
+										? transform_output(
+												data.data,
+												api_info,
+												config.root,
+												config.root_url
+										  )
+										: data.data,
+									endpoint: _endpoint,
+									fn_index
+								});
 
-					// different ws contract for gradio versions older than 3.6.0
-					//@ts-ignore
-					if (semiver(config.version || "2.0.0", "3.6") < 0) {
-						addEventListener("open", () =>
-							websocket.send(JSON.stringify({ hash: session_hash }))
-						);
+								if (complete) {
+									fire_event({
+										type: "status",
+										time: new Date(),
+										...complete,
+										stage: status?.stage!,
+										queue: true,
+										endpoint: _endpoint,
+										fn_index
+									});
+									websocket.close();
+								}
+							}
+						};
+
+						// different ws contract for gradio versions older than 3.6.0
+						//@ts-ignore
+						if (semiver(config.version || "2.0.0", "3.6") < 0) {
+							addEventListener("open", () =>
+								websocket.send(JSON.stringify({ hash: session_hash }))
+							);
+						}
 					}
-				}
-			});
+				});
 
-			function fire_event<K extends EventType>(event: Event<K>) {
-				const narrowed_listener_map: ListenerMap<K> = listener_map;
-				const listeners = narrowed_listener_map[event.type] || [];
-				listeners?.forEach((l) => l(event));
-			}
+				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));
+				}
 
-			function on<K extends EventType>(
-				eventType: K,
-				listener: EventListener<K>
-			) {
-				const narrowed_listener_map: ListenerMap<K> = listener_map;
-				const listeners = narrowed_listener_map[eventType] || [];
-				narrowed_listener_map[eventType] = listeners;
-				listeners?.push(listener);
+				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;
+					listeners?.push(listener);
 
-				return { on, off, cancel, destroy };
-			}
+					return { on, off, cancel, destroy };
+				}
 
-			function off<K extends EventType>(
-				eventType: K,
-				listener: EventListener<K>
-			) {
-				const narrowed_listener_map: ListenerMap<K> = listener_map;
-				let listeners = narrowed_listener_map[eventType] || [];
-				listeners = listeners?.filter((l) => l !== listener);
-				narrowed_listener_map[eventType] = listeners;
+				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);
+					narrowed_listener_map[eventType] = listeners;
 
-				return { on, off, cancel, destroy };
-			}
+					return { on, off, cancel, destroy };
+				}
 
-			async function cancel() {
-				const _status: Status = {
-					stage: "complete",
-					queue: false,
-					time: new Date()
-				};
-				complete = _status;
-				fire_event({
-					..._status,
-					type: "status",
-					endpoint: _endpoint,
-					fn_index: fn_index
-				});
+				async function cancel(): Promise<void> {
+					const _status: Status = {
+						stage: "complete",
+						queue: false,
+						time: new Date()
+					};
+					complete = _status;
+					fire_event({
+						..._status,
+						type: "status",
+						endpoint: _endpoint,
+						fn_index: fn_index
+					});
 
-				if (websocket && websocket.readyState === 0) {
-					websocket.addEventListener("open", () => {
+					if (websocket && websocket.readyState === 0) {
+						websocket.addEventListener("open", () => {
+							websocket.close();
+						});
+					} else {
 						websocket.close();
-					});
-				} else {
-					websocket.close();
+					}
+
+					try {
+						await fetch_implementation(
+							`${http_protocol}//${host + config.path}/reset`,
+							{
+								headers: { "Content-Type": "application/json" },
+								method: "POST",
+								body: JSON.stringify({ fn_index, session_hash })
+							}
+						);
+					} catch (e) {
+						console.warn(
+							"The `/reset` endpoint could not be called. Subsequent endpoint results may be unreliable."
+						);
+					}
 				}
 
-				try {
-					await fetch(`${http_protocol}//${host + config.path}/reset`, {
-						headers: { "Content-Type": "application/json" },
-						method: "POST",
-						body: JSON.stringify({ fn_index, session_hash })
-					});
-				} catch (e) {
-					console.warn(
-						"The `/reset` endpoint could not be called. Subsequent endpoint results may be unreliable."
-					);
+				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);
+						});
+					}
 				}
+
+				return {
+					on,
+					off,
+					cancel,
+					destroy
+				};
 			}
 
-			function destroy() {
-				for (const event_type in listener_map) {
-					listener_map[event_type as "data" | "status"].forEach((fn) => {
-						off(event_type as "data" | "status", fn);
+			async function view_api(config?: Config): Promise<ApiInfo<JsApiData>> {
+				if (api) return api;
+
+				const headers: {
+					Authorization?: string;
+					"Content-Type": "application/json";
+				} = { "Content-Type": "application/json" };
+				if (hf_token) {
+					headers.Authorization = `Bearer ${hf_token}`;
+				}
+				let response: Response;
+				// @ts-ignore
+				if (semiver(config.version || "2.0.0", "3.30") < 0) {
+					response = await fetch_implementation(
+						"https://gradio-space-api-fetcher-v2.hf.space/api",
+						{
+							method: "POST",
+							body: JSON.stringify({
+								serialize: false,
+								config: JSON.stringify(config)
+							}),
+							headers
+						}
+					);
+				} else {
+					response = await fetch_implementation(`${config.root}/info`, {
+						headers
 					});
 				}
-			}
 
-			return {
-				on,
-				off,
-				cancel,
-				destroy
-			};
-		}
+				if (!response.ok) {
+					throw new Error(BROKEN_CONNECTION_MSG);
+				}
 
-		async function view_api(config?: Config): Promise<ApiInfo<JsApiData>> {
-			if (api) return api;
+				let api_info = (await response.json()) as
+					| ApiInfo<ApiData>
+					| { api: ApiInfo<ApiData> };
+				if ("api" in api_info) {
+					api_info = api_info.api;
+				}
 
-			const headers: {
-				Authorization?: string;
-				"Content-Type": "application/json";
-			} = { "Content-Type": "application/json" };
-			if (hf_token) {
-				headers.Authorization = `Bearer ${hf_token}`;
-			}
-			let response: Response;
-			// @ts-ignore
-			if (semiver(config.version || "2.0.0", "3.30") < 0) {
-				response = await fetch(
-					"https://gradio-space-api-fetcher-v2.hf.space/api",
-					{
-						method: "POST",
-						body: JSON.stringify({
-							serialize: false,
-							config: JSON.stringify(config)
-						}),
-						headers
-					}
-				);
-			} else {
-				response = await fetch(`${config.root}/info`, {
-					headers
-				});
-			}
+				if (
+					api_info.named_endpoints["/predict"] &&
+					!api_info.unnamed_endpoints["0"]
+				) {
+					api_info.unnamed_endpoints[0] = api_info.named_endpoints["/predict"];
+				}
 
-			if (!response.ok) {
-				throw new Error(BROKEN_CONNECTION_MSG);
+				const x = transform_api_info(api_info, config, api_map);
+				return x;
 			}
+		});
+	}
 
-			let api_info = (await response.json()) as
-				| ApiInfo<ApiData>
-				| { api: ApiInfo<ApiData> };
-			if ("api" in api_info) {
-				api_info = api_info.api;
-			}
+	async function handle_blob(
+		endpoint: string,
+		data: unknown[],
+		api_info: ApiInfo<JsApiData>,
+		token?: `hf_${string}`
+	): Promise<unknown[]> {
+		const blob_refs = await walk_and_store_blobs(
+			data,
+			undefined,
+			[],
+			true,
+			api_info
+		);
 
-			if (
-				api_info.named_endpoints["/predict"] &&
-				!api_info.unnamed_endpoints["0"]
-			) {
-				api_info.unnamed_endpoints[0] = api_info.named_endpoints["/predict"];
-			}
+		return Promise.all(
+			blob_refs.map(async ({ path, blob, data, type }) => {
+				if (blob) {
+					const file_url = (await upload_files(endpoint, [blob], token))
+						.files[0];
+					return { path, file_url, type };
+				}
+				return { path, base64: data, type };
+			})
+		).then((r) => {
+			r.forEach(({ path, file_url, base64, type }) => {
+				if (base64) {
+					update_object(data, base64, path);
+				} else if (type === "Gallery") {
+					update_object(data, file_url, path);
+				} else if (file_url) {
+					const o = {
+						is_file: true,
+						name: `${file_url}`,
+						data: null
+						// orig_name: "file.csv"
+					};
+					update_object(data, o, path);
+				}
+			});
 
-			const x = transform_api_info(api_info, config, api_map);
-			return x;
-		}
-	});
+			return data;
+		});
+	}
 }
 
+export const { post_data, upload_files, client, handle_blob } =
+	api_factory(fetch);
+
 function transform_output(
 	data: any[],
 	api_info: any,
@@ -687,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,
@@ -718,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 {
@@ -730,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) {
@@ -740,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;
@@ -786,7 +898,7 @@ function get_type(
 	component: string,
 	serializer: string,
 	signature_type: "return" | "parameter"
-) {
+): string {
 	switch (type.type) {
 		case "string":
 			return "string";
@@ -810,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)][]"
@@ -825,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(
@@ -902,51 +1012,7 @@ async function get_jwt(
 	}
 }
 
-export async function handle_blob(
-	endpoint: string,
-	data: unknown[],
-	api_info,
-	token?: `hf_${string}`
-): Promise<unknown[]> {
-	const blob_refs = await walk_and_store_blobs(
-		data,
-		undefined,
-		[],
-		true,
-		api_info
-	);
-
-	return Promise.all(
-		blob_refs.map(async ({ path, blob, data, type }) => {
-			if (blob) {
-				const file_url = (await upload_files(endpoint, [blob], token)).files[0];
-				return { path, file_url, type };
-			} else {
-				return { path, base64: data, type };
-			}
-		})
-	).then((r) => {
-		r.forEach(({ path, file_url, base64, type }) => {
-			if (base64) {
-				update_object(data, base64, path);
-			} else if (type === "Gallery") {
-				update_object(data, file_url, path);
-			} else if (file_url) {
-				const o = {
-					is_file: true,
-					name: `${file_url}`,
-					data: null
-					// orig_name: "file.csv"
-				};
-				update_object(data, o, path);
-			}
-		});
-
-		return data;
-	});
-}
-
-function update_object(object, newValue, stack) {
+function update_object(object, newValue, stack): void {
 	while (stack.length > 1) {
 		object = object[stack.shift()];
 	}
@@ -960,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 = [];
 
@@ -1007,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) {
@@ -1029,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);
@@ -1042,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
@@ -1051,6 +1122,7 @@ function skip_queue(id: number, config: Config) {
 }
 
 async function resolve_config(
+	fetch_implementation: typeof fetch,
 	endpoint?: string,
 	token?: `hf_${string}`
 ): Promise<Config> {
@@ -1068,16 +1140,17 @@ async function resolve_config(
 		config.root = endpoint + config.root;
 		return { ...config, path: path };
 	} else if (endpoint) {
-		let response = await fetch(`${endpoint}/config`, { headers });
+		let response = await fetch_implementation(`${endpoint}/config`, {
+			headers
+		});
 
 		if (response.status === 200) {
 			const config = await response.json();
 			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");
@@ -1087,7 +1160,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}`
@@ -1180,7 +1253,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;
 } {
@@ -1225,6 +1298,8 @@ function handle_message(
 					success: data.success
 				}
 			};
+		case "log":
+			return { type: "log", data: data };
 		case "process_generating":
 			return {
 				type: "generating",
@@ -1250,20 +1325,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 {