@gradio/client 0.16.0 → 0.17.0

package/src/client.ts

@@ -1,1769 +1,366 @@
-//@ts-nocheck
-
-import semiver from "semiver";
-
-import {
-	process_endpoint,
-	RE_SPACE_NAME,
-	map_names_to_ids,
-	discussions_enabled,
-	get_space_hardware,
-	set_space_hardware,
-	set_space_timeout,
-	hardware_types,
-	resolve_root,
-	apply_diff,
-	post_message
-} from "./utils.js";
-
 import type {
-	EventType,
-	EventListener,
-	ListenerMap,
-	Event,
-	Payload,
-	PostResponse,
-	UploadResponse,
-	Status,
+	ApiData,
+	ApiInfo,
+	ClientOptions,
+	Config,
+	DuplicateOptions,
+	EndpointInfo,
+	JsApiData,
 	SpaceStatus,
-	SpaceStatusCallback
-} from "./types.js";
-
-import { FileData } from "./upload";
-
-import type { Config } from "./types.js";
-
-type event = <K extends EventType>(
-	eventType: K,
-	listener: EventListener<K>
-) => SubmitReturn;
-type predict = (
-	endpoint: string | number,
-	data?: unknown[],
-	event_data?: unknown
-) => Promise<unknown>;
-
-export type client_return = {
-	predict: predict;
-	config: Config;
-	submit: (
-		endpoint: string | number,
-		data?: unknown[],
-		event_data?: unknown,
-		trigger_id?: number | null
-	) => SubmitReturn;
-	component_server: (
-		component_id: number,
-		fn_name: string,
-		data: unknown[]
-	) => any;
-	view_api: (c?: Config) => Promise<ApiInfo<JsApiData>>;
-};
-
-type SubmitReturn = {
-	on: event;
-	off: event;
-	cancel: () => Promise<void>;
-	destroy: () => void;
-};
-
-const QUEUE_FULL_MSG = "This application is too busy. Keep trying!";
-const BROKEN_CONNECTION_MSG = "Connection errored out.";
-
-export let NodeBlob;
-
-export async function duplicate(
-	app_reference: string,
-	options: {
-		hf_token: `hf_${string}`;
-		private?: boolean;
-		status_callback: SpaceStatusCallback;
-		hardware?: (typeof hardware_types)[number];
-		timeout?: number;
-	}
-): Promise<client_return> {
-	const { hf_token, private: _private, hardware, timeout } = options;
-
-	if (hardware && !hardware_types.includes(hardware)) {
-		throw new Error(
-			`Invalid hardware type provided. Valid types are: ${hardware_types
-				.map((v) => `"${v}"`)
-				.join(",")}.`
-		);
+	Status,
+	SubmitReturn,
+	UploadResponse,
+	client_return
+} from "./types";
+import { view_api } from "./utils/view_api";
+import { upload_files } from "./utils/upload_files";
+import { handle_blob } from "./utils/handle_blob";
+import { post_data } from "./utils/post_data";
+import { predict } from "./utils/predict";
+import { duplicate } from "./utils/duplicate";
+import { submit } from "./utils/submit";
+import { RE_SPACE_NAME, process_endpoint } from "./helpers/api_info";
+import {
+	map_names_to_ids,
+	resolve_config,
+	get_jwt
+} from "./helpers/init_helpers";
+import { check_space_status } from "./helpers/spaces";
+import { open_stream } from "./utils/stream";
+
+export class NodeBlob extends Blob {
+	constructor(blobParts?: BlobPart[], options?: BlobPropertyBag) {
+		super(blobParts, options);
 	}
-	const headers = {
-		Authorization: `Bearer ${hf_token}`
-	};
-
-	const user = (
-		await (
-			await fetch(`https://huggingface.co/api/whoami-v2`, {
-				headers
-			})
-		).json()
-	).name;
-
-	const space_name = app_reference.split("/")[1];
-	const body: {
-		repository: string;
-		private?: boolean;
-	} = {
-		repository: `${user}/${space_name}`
-	};
+}
 
-	if (_private) {
-		body.private = true;
+export class Client {
+	app_reference: string;
+	options: ClientOptions;
+
+	config: Config | undefined;
+	api_info: ApiInfo<JsApiData> | undefined;
+	api_map: Record<string, number> = {};
+	session_hash: string = Math.random().toString(36).substring(2);
+	jwt: string | false = false;
+	last_status: Record<string, Status["stage"]> = {};
+
+	// streaming
+	stream_status = { open: false };
+	pending_stream_messages: Record<string, any[][]> = {};
+	pending_diff_streams: Record<string, any[][]> = {};
+	event_callbacks: Record<string, () => Promise<void>> = {};
+	unclosed_events: Set<string> = new Set();
+	heartbeat_event: EventSource | null = null;
+
+	fetch_implementation(
+		input: RequestInfo | URL,
+		init?: RequestInit
+	): Promise<Response> {
+		return fetch(input, init);
 	}
 
-	try {
-		const response = await fetch(
-			`https://huggingface.co/api/spaces/${app_reference}/duplicate`,
-			{
-				method: "POST",
-				headers: { "Content-Type": "application/json", ...headers },
-				body: JSON.stringify(body)
-			}
-		);
-
-		if (response.status === 409) {
-			return client(`${user}/${space_name}`, options);
-		}
-		const duplicated_space = await response.json();
-
-		let original_hardware;
-
-		if (!hardware) {
-			original_hardware = await get_space_hardware(app_reference, hf_token);
+	eventSource_factory(url: URL): EventSource | null {
+		if (typeof window !== undefined && typeof EventSource !== "undefined") {
+			return new EventSource(url.toString());
 		}
-
-		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);
-	} catch (e: any) {
-		throw new Error(e);
+		return null; // todo: polyfill eventsource for node envs
 	}
-}
 
-interface Client {
-	post_data: (
-		url: string,
-		body: unknown,
-		token?: `hf_${string}`
-	) => Promise<[PostResponse, number]>;
+	view_api: () => Promise<ApiInfo<JsApiData>>;
 	upload_files: (
-		root: string,
-		files: File[],
-		token?: `hf_${string}`,
+		root_url: string,
+		files: (Blob | File)[],
 		upload_id?: string
 	) => Promise<UploadResponse>;
-	client: (
-		app_reference: string,
-		options: {
-			hf_token?: `hf_${string}`;
-			status_callback?: SpaceStatusCallback;
-		}
-	) => Promise<client_return>;
 	handle_blob: (
 		endpoint: string,
 		data: unknown[],
-		api_info: ApiInfo<JsApiData>,
-		token?: `hf_${string}`
+		endpoint_info: EndpointInfo<ApiData | JsApiData>
 	) => Promise<unknown[]>;
-}
-
-export function api_factory(
-	fetch_implementation: typeof fetch,
-	EventSource_factory: (url: URL) => EventSource
-): Client {
-	return { post_data, upload_files, client, handle_blob };
-
-	async function post_data(
+	post_data: (
 		url: string,
 		body: unknown,
-		token?: `hf_${string}`,
-		additional_headers?: Record<string, 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: { ...headers, ...additional_headers }
-			});
-		} catch (e) {
-			return [{ error: BROKEN_CONNECTION_MSG }, 500];
-		}
-		let output: PostResponse;
-		let status: int;
-		try {
-			output = await response.json();
-			status = response.status;
-		} catch (e) {
-			output = { error: `Could not parse server response: ${e}` };
-			status = 500;
-		}
-		return [output, status];
+		additional_headers?: any
+	) => Promise<unknown[]>;
+	submit: (
+		endpoint: string | number,
+		data: unknown[],
+		event_data?: unknown,
+		trigger_id?: number | null
+	) => SubmitReturn;
+	predict: (
+		endpoint: string | number,
+		data?: unknown[],
+		event_data?: unknown
+	) => Promise<unknown>;
+	open_stream: () => void;
+	resolve_config: (endpoint: string) => Promise<Config | undefined>;
+	constructor(app_reference: string, options: ClientOptions = {}) {
+		this.app_reference = app_reference;
+		this.options = options;
+
+		this.view_api = view_api.bind(this);
+		this.upload_files = upload_files.bind(this);
+		this.handle_blob = handle_blob.bind(this);
+		this.post_data = post_data.bind(this);
+		this.submit = submit.bind(this);
+		this.predict = predict.bind(this);
+		this.open_stream = open_stream.bind(this);
+		this.resolve_config = resolve_config.bind(this);
 	}
 
-	async function upload_files(
-		root: string,
-		files: (Blob | File)[],
-		token?: `hf_${string}`,
-		upload_id?: 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 {
-				const upload_url = upload_id
-					? `${root}/upload?upload_id=${upload_id}`
-					: `${root}/upload`;
-				var response = await fetch_implementation(upload_url, {
-					method: "POST",
-					body: formData,
-					headers
-				});
-			} catch (e) {
-				return { error: BROKEN_CONNECTION_MSG };
-			}
-			const output: UploadResponse["files"] = await response.json();
-			uploadResponses.push(...output);
+	private async init(): Promise<void> {
+		if (
+			(typeof window === "undefined" || !("WebSocket" in window)) &&
+			!global.WebSocket
+		) {
+			const ws = await import("ws");
+			// @ts-ignore
+			NodeBlob = (await import("node:buffer")).Blob;
+			global.WebSocket = ws.WebSocket as unknown as typeof WebSocket;
 		}
-		return { files: uploadResponses };
-	}
-
-	async function client(
-		app_reference: string,
-		options: {
-			hf_token?: `hf_${string}`;
-			status_callback?: SpaceStatusCallback;
-		} = {}
-	): Promise<client_return> {
-		return new Promise(async (res) => {
-			const { status_callback, hf_token } = options;
-			const return_obj = {
-				predict,
-				submit,
-				view_api,
-				component_server
-			};
-
-			if (
-				(typeof window === "undefined" || !("WebSocket" in window)) &&
-				!global.Websocket
-			) {
-				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 stream_open = false;
-			let pending_stream_messages: Record<string, any[]> = {}; // Event messages may be received by the SSE stream before the initial data POST request is complete. To resolve this race condition, we store the messages in a dictionary and process them when the POST request is complete.
-			let pending_diff_streams: Record<string, any[][]> = {};
-			let event_stream: EventSource | null = null;
-			const event_callbacks: Record<string, () => Promise<void>> = {};
-			const unclosed_events: Set<string> = new Set();
-			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;
-				if (window.location.protocol === "https:") {
-					config.root = config.root.replace("http://", "https://");
-				}
-				api_map = map_names_to_ids(_config?.dependencies || []);
-				if (config.auth_required) {
-					return {
-						config,
-						...return_obj
-					};
-				}
-				try {
-					api = await view_api(config);
-				} catch (e) {
-					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
+		try {
+			await this._resolve_config().then(async ({ config }) => {
+				if (config) {
+					this.config = config;
+					if (this.config) {
+						// connect to the heartbeat endpoint via GET request
+						const heartbeat_url = new URL(
+							`${this.config.root}/heartbeat/${this.session_hash}`
 						);
+						this.heartbeat_event = this.eventSource_factory(heartbeat_url); // Just connect to the endpoint without parsing the response. Ref: https://github.com/gradio-app/gradio/pull/7974#discussion_r1557717540
 
-						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"
-							});
+						if (this.config.space_id && this.options.hf_token) {
+							this.jwt = await get_jwt(
+								this.config.space_id,
+								this.options.hf_token
+							);
 						}
 					}
-			}
-
-			try {
-				config = await resolve_config(
-					fetch_implementation,
-					`${http_protocol}//${host}`,
-					hf_token
-				);
-
-				const _config = await config_success(config);
-				// connect to the heartbeat endpoint via GET request
-				const heartbeat_url = new URL(
-					`${config.root}/heartbeat/${session_hash}`
-				);
-				EventSource_factory(heartbeat_url); // Just connect to the endpoint without parsing the response. Ref: https://github.com/gradio-app/gradio/pull/7974#discussion_r1557717540
-				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"
-						});
 				}
-			}
-
-			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) => {
-							// 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;
-								// if complete message comes after data, resolve here
-								if (data_returned) {
-									app.destroy();
-									res(result);
-								}
-							}
-						});
-				});
-			}
-
-			function submit(
-				endpoint: string | number,
-				data: unknown[],
-				event_data?: unknown,
-				trigger_id: number | null = null
-			): SubmitReturn {
-				let fn_index: number;
-				let api_info;
-				let dependency;
-
-				if (typeof endpoint === "number") {
-					fn_index = endpoint;
-					api_info = api.unnamed_endpoints[fn_index];
-					dependency = config.dependencies[endpoint];
-				} else {
-					const trimmed_endpoint = endpoint.replace(/^\//, "");
-
-					fn_index = api_map[trimmed_endpoint];
-					api_info = api.named_endpoints[endpoint.trim()];
-					dependency = config.dependencies[api_map[trimmed_endpoint]];
-				}
-
-				if (typeof fn_index !== "number") {
-					throw new Error(
-						"There is no endpoint matching that name of fn_index matching that number."
-					);
-				}
-
-				let websocket: WebSocket;
-				let eventSource: EventSource;
-				let protocol = config.protocol ?? "ws";
-
-				const _endpoint = typeof endpoint === "number" ? "/predict" : endpoint;
-				let payload: Payload;
-				let event_id: string | null = null;
-				let complete: false | Record<string, any> = false;
-				const listener_map: ListenerMap<EventType> = {};
-				let url_params = "";
-				if (typeof window !== "undefined") {
-					url_params = new URLSearchParams(window.location.search).toString();
-				}
-
-				handle_blob(`${config.root}`, data, api_info, hf_token).then(
-					(_payload) => {
-						payload = {
-							data: _payload || [],
-							event_data,
-							fn_index,
-							trigger_id
-						};
-						if (skip_queue(fn_index, config)) {
-							fire_event({
-								type: "status",
-								endpoint: _endpoint,
-								stage: "pending",
-								queue: false,
-								fn_index,
-								time: new Date()
-							});
-
-							post_data(
-								`${config.root}/run${
-									_endpoint.startsWith("/") ? _endpoint : `/${_endpoint}`
-								}${url_params ? "?" + url_params : ""}`,
-								{
-									...payload,
-									session_hash
-								},
-								hf_token
-							)
-								.then(([output, status_code]) => {
-									const data = 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,
-										queue: false,
-										time: new Date()
-									});
-								});
-						} else if (protocol == "ws") {
-							fire_event({
-								type: "status",
-								stage: "pending",
-								queue: true,
-								endpoint: _endpoint,
-								fn_index,
-								time: new Date()
-							});
-							let url = new URL(`${ws_protocol}://${resolve_root(
-								host,
-								config.path,
-								true
-							)}
-							/queue/join${url_params ? "?" + url_params : ""}`);
-
-							if (jwt) {
-								url.searchParams.set("__sign", jwt);
-							}
-
-							websocket = new WebSocket(url);
-
-							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()
-									});
-								}
-							};
-
-							websocket.onmessage = function (event) {
-								const _data = JSON.parse(event.data);
-								const { type, status, data } = handle_message(
-									_data,
-									last_status[fn_index]
-								);
-
-								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();
-									}
-								} 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
-									});
-								}
-								if (data) {
-									fire_event({
-										type: "data",
-										time: new Date(),
-										data: data.data,
-										endpoint: _endpoint,
-										fn_index
-									});
-
-									if (complete) {
-										fire_event({
-											type: "status",
-											time: new Date(),
-											...complete,
-											stage: status?.stage!,
-											queue: true,
-											endpoint: _endpoint,
-											fn_index
-										});
-										websocket.close();
-									}
-								}
-							};
+			});
+		} catch (e) {
+			throw Error(`Could not resolve config: ${e}`);
+		}
 
-							// 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 }))
-								);
-							}
-						} else if (protocol == "sse") {
-							fire_event({
-								type: "status",
-								stage: "pending",
-								queue: true,
-								endpoint: _endpoint,
-								fn_index,
-								time: new Date()
-							});
-							var params = new URLSearchParams({
-								fn_index: fn_index.toString(),
-								session_hash: session_hash
-							}).toString();
-							let url = new URL(
-								`${config.root}/queue/join?${
-									url_params ? url_params + "&" : ""
-								}${params}`
-							);
+		this.api_info = await this.view_api();
+		this.api_map = map_names_to_ids(this.config?.dependencies || []);
+	}
 
-							eventSource = EventSource_factory(url);
+	static async connect(
+		app_reference: string,
+		options: ClientOptions = {}
+	): Promise<Client> {
+		const client = new this(app_reference, options); // this refers to the class itself, not the instance
+		await client.init();
+		return client;
+	}
 
-							eventSource.onmessage = async function (event) {
-								const _data = JSON.parse(event.data);
-								const { type, status, data } = handle_message(
-									_data,
-									last_status[fn_index]
-								);
+	close(): void {
+		this.heartbeat_event?.close();
+	}
 
-								if (type === "update" && status && !complete) {
-									// call 'status' listeners
-									fire_event({
-										type: "status",
-										endpoint: _endpoint,
-										fn_index,
-										time: new Date(),
-										...status
-									});
-									if (status.stage === "error") {
-										eventSource.close();
-									}
-								} else if (type === "data") {
-									event_id = _data.event_id as string;
-									let [_, status] = await post_data(
-										`${config.root}/queue/data`,
-										{
-											...payload,
-											session_hash,
-											event_id
-										},
-										hf_token
-									);
-									if (status !== 200) {
-										fire_event({
-											type: "status",
-											stage: "error",
-											message: BROKEN_CONNECTION_MSG,
-											queue: true,
-											endpoint: _endpoint,
-											fn_index,
-											time: new Date()
-										});
-										eventSource.close();
-									}
-								} 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
-									});
-								}
-								if (data) {
-									fire_event({
-										type: "data",
-										time: new Date(),
-										data: data.data,
-										endpoint: _endpoint,
-										fn_index
-									});
+	static async duplicate(
+		app_reference: string,
+		options: DuplicateOptions = {}
+	): Promise<Client> {
+		return duplicate(app_reference, options);
+	}
 
-									if (complete) {
-										fire_event({
-											type: "status",
-											time: new Date(),
-											...complete,
-											stage: status?.stage!,
-											queue: true,
-											endpoint: _endpoint,
-											fn_index
-										});
-										eventSource.close();
-									}
-								}
-							};
-						} else if (
-							protocol == "sse_v1" ||
-							protocol == "sse_v2" ||
-							protocol == "sse_v2.1" ||
-							protocol == "sse_v3"
-						) {
-							// latest API format. v2 introduces sending diffs for intermediate outputs in generative functions, which makes payloads lighter.
-							// v3 only closes the stream when the backend sends the close stream message.
-							fire_event({
-								type: "status",
-								stage: "pending",
-								queue: true,
-								endpoint: _endpoint,
-								fn_index,
-								time: new Date()
-							});
-							let hostname = window.location.hostname;
-							let hfhubdev = "dev.spaces.huggingface.tech";
-							const origin = hostname.includes(".dev.")
-								? `https://moon-${hostname.split(".")[1]}.${hfhubdev}`
-								: `https://huggingface.co`;
-							const zerogpu_auth_promise =
-								dependency.zerogpu && window.parent != window && config.space_id
-									? post_message<Headers>("zerogpu-headers", origin)
-									: Promise.resolve(null);
-							const post_data_promise = zerogpu_auth_promise.then((headers) => {
-								return post_data(
-									`${config.root}/queue/join?${url_params}`,
-									{
-										...payload,
-										session_hash
-									},
-									hf_token,
-									headers
-								);
-							});
-							post_data_promise.then(([response, status]) => {
-								if (status === 503) {
-									fire_event({
-										type: "status",
-										stage: "error",
-										message: QUEUE_FULL_MSG,
-										queue: true,
-										endpoint: _endpoint,
-										fn_index,
-										time: new Date()
-									});
-								} else if (status !== 200) {
-									fire_event({
-										type: "status",
-										stage: "error",
-										message: BROKEN_CONNECTION_MSG,
-										queue: true,
-										endpoint: _endpoint,
-										fn_index,
-										time: new Date()
-									});
-								} else {
-									event_id = response.event_id as string;
-									let callback = async function (_data: object): void {
-										try {
-											const { type, status, data } = handle_message(
-												_data,
-												last_status[fn_index]
-											);
+	private async _resolve_config(): Promise<any> {
+		const { http_protocol, host, space_id } = await process_endpoint(
+			this.app_reference,
+			this.options.hf_token
+		);
 
-											if (type == "heartbeat") {
-												return;
-											}
+		const { status_callback } = this.options;
+		let config: Config | undefined;
 
-											if (type === "update" && status && !complete) {
-												// call 'status' listeners
-												fire_event({
-													type: "status",
-													endpoint: _endpoint,
-													fn_index,
-													time: new Date(),
-													...status
-												});
-											} else if (type === "complete") {
-												complete = status;
-											} else if (type == "unexpected_error") {
-												console.error("Unexpected error", status?.message);
-												fire_event({
-													type: "status",
-													stage: "error",
-													message:
-														status?.message || "An Unexpected Error Occurred!",
-													queue: true,
-													endpoint: _endpoint,
-													fn_index,
-													time: new Date()
-												});
-											} else if (type === "log") {
-												fire_event({
-													type: "log",
-													log: data.log,
-													level: data.level,
-													endpoint: _endpoint,
-													fn_index
-												});
-												return;
-											} else if (type === "generating") {
-												fire_event({
-													type: "status",
-													time: new Date(),
-													...status,
-													stage: status?.stage!,
-													queue: true,
-													endpoint: _endpoint,
-													fn_index
-												});
-												if (
-													data &&
-													["sse_v2", "sse_v2.1", "sse_v3"].includes(protocol)
-												) {
-													apply_diff_stream(event_id!, data);
-												}
-											}
-											if (data) {
-												fire_event({
-													type: "data",
-													time: new Date(),
-													data: data.data,
-													endpoint: _endpoint,
-													fn_index
-												});
+		try {
+			config = await this.resolve_config(`${http_protocol}//${host}`);
 
-												if (complete) {
-													fire_event({
-														type: "status",
-														time: new Date(),
-														...complete,
-														stage: status?.stage!,
-														queue: true,
-														endpoint: _endpoint,
-														fn_index
-													});
-												}
-											}
+			if (!config) {
+				throw new Error("Could not resolve app config");
+			}
 
-											if (
-												status?.stage === "complete" ||
-												status?.stage === "error"
-											) {
-												if (event_callbacks[event_id]) {
-													delete event_callbacks[event_id];
-												}
-												if (event_id in pending_diff_streams) {
-													delete pending_diff_streams[event_id];
-												}
-											}
-										} catch (e) {
-											console.error("Unexpected client exception", e);
-											fire_event({
-												type: "status",
-												stage: "error",
-												message: "An Unexpected Error Occurred!",
-												queue: true,
-												endpoint: _endpoint,
-												fn_index,
-												time: new Date()
-											});
-											if (["sse_v2", "sse_v2.1"].includes(protocol)) {
-												close_stream();
-											}
-										}
-									};
-									if (event_id in pending_stream_messages) {
-										pending_stream_messages[event_id].forEach((msg) =>
-											callback(msg)
-										);
-										delete pending_stream_messages[event_id];
-									}
-									event_callbacks[event_id] = callback;
-									unclosed_events.add(event_id);
-									if (!stream_open) {
-										open_stream();
-									}
-								}
-							});
-						}
-					}
+			return this.config_success(config);
+		} catch (e) {
+			console.error(e);
+			if (space_id) {
+				check_space_status(
+					space_id,
+					RE_SPACE_NAME.test(space_id) ? "space_name" : "subdomain",
+					this.handle_space_success
 				);
-
-				function apply_diff_stream(event_id: string, data: any): void {
-					let is_first_generation = !pending_diff_streams[event_id];
-					if (is_first_generation) {
-						pending_diff_streams[event_id] = [];
-						data.data.forEach((value: any, i: number) => {
-							pending_diff_streams[event_id][i] = value;
-						});
-					} else {
-						data.data.forEach((value: any, i: number) => {
-							let new_data = apply_diff(
-								pending_diff_streams[event_id][i],
-								value
-							);
-							pending_diff_streams[event_id][i] = new_data;
-							data.data[i] = new_data;
-						});
-					}
-				}
-
-				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>
-				): 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 };
-				}
-
-				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 };
-				}
-
-				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
+			} else {
+				if (status_callback)
+					status_callback({
+						status: "error",
+						message: "Could not load this space.",
+						load_status: "error",
+						detail: "NOT_FOUND"
 					});
-
-					let cancel_request = {};
-					if (protocol === "ws") {
-						if (websocket && websocket.readyState === 0) {
-							websocket.addEventListener("open", () => {
-								websocket.close();
-							});
-						} else {
-							websocket.close();
-						}
-						cancel_request = { fn_index, session_hash };
-					} else {
-						eventSource.close();
-						cancel_request = { event_id };
-					}
-
-					try {
-						await fetch_implementation(`${config.root}/reset`, {
-							headers: { "Content-Type": "application/json" },
-							method: "POST",
-							body: JSON.stringify(cancel_request)
-						});
-					} 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 open_stream(): void {
-				stream_open = true;
-				let params = new URLSearchParams({
-					session_hash: session_hash
-				}).toString();
-				let url = new URL(`${config.root}/queue/data?${params}`);
-				event_stream = EventSource_factory(url);
-				event_stream.onmessage = async function (event) {
-					let _data = JSON.parse(event.data);
-					if (_data.msg === "close_stream") {
-						close_stream();
-						return;
-					}
-					const event_id = _data.event_id;
-					if (!event_id) {
-						await Promise.all(
-							Object.keys(event_callbacks).map((event_id) =>
-								event_callbacks[event_id](_data)
-							)
-						);
-					} else if (event_callbacks[event_id]) {
-						if (
-							_data.msg === "process_completed" &&
-							["sse", "sse_v1", "sse_v2", "sse_v2.1"].includes(config.protocol)
-						) {
-							unclosed_events.delete(event_id);
-							if (unclosed_events.size === 0) {
-								close_stream();
-							}
-						}
-						let fn = event_callbacks[event_id];
-						window.setTimeout(fn, 0, _data); // need to do this to put the event on the end of the event loop, so the browser can refresh between callbacks and not freeze in case of quick generations. See https://github.com/gradio-app/gradio/pull/7055
-					} else {
-						if (!pending_stream_messages[event_id]) {
-							pending_stream_messages[event_id] = [];
-						}
-						pending_stream_messages[event_id].push(_data);
-					}
-				};
-				event_stream.onerror = async function (event) {
-					await Promise.all(
-						Object.keys(event_callbacks).map((event_id) =>
-							event_callbacks[event_id]({
-								msg: "unexpected_error",
-								message: BROKEN_CONNECTION_MSG
-							})
-						)
-					);
-					close_stream();
-				};
-			}
+	private async config_success(
+		_config: Config
+	): Promise<Config | client_return> {
+		this.config = _config;
 
-			function close_stream(): void {
-				stream_open = false;
-				event_stream?.close();
+		if (typeof window !== "undefined") {
+			if (window.location.protocol === "https:") {
+				this.config.root = this.config.root.replace("http://", "https://");
 			}
+		}
 
-			async function component_server(
-				component_id: number,
-				fn_name: string,
-				data: unknown[] | { binary: boolean; data: Record<string, any> }
-			): Promise<any> {
-				const headers: {
-					Authorization?: string;
-					"Content-Type": "application/json";
-				} = {};
-
-				let root_url: string;
-				let component = config.components.find(
-					(comp) => comp.id === component_id
-				);
-				if (component?.props?.root_url) {
-					root_url = component.props.root_url;
-				} else {
-					root_url = config.root;
-				}
-
-				let body: FormData | string;
-				if (data.binary) {
-					body = new FormData();
-					for (const key in data.data) {
-						if (key === "binary") continue;
-						body.append(key, data.data[key]);
-					}
-					body.set("component_id", component_id);
-					body.set("fn_name", fn_name);
-					body.set("session_hash", session_hash);
-				} else {
-					body = JSON.stringify({
-						data: data,
-						component_id,
-						fn_name,
-						session_hash
-					});
-
-					headers["Content-Type"] = "application/json";
-				}
-				if (hf_token) {
-					headers.Authorization = `Bearer ${hf_token}`;
-				}
+		if (this.config.auth_required) {
+			return this.prepare_return_obj();
+		}
 
-				try {
-					const response = await fetch_implementation(
-						`${root_url}/component_server/`,
-						{
-							method: "POST",
-							body: body,
-							headers
-						}
-					);
+		try {
+			this.api_info = await this.view_api();
+		} catch (e) {
+			console.error(`Could not get API details: ${(e as Error).message}`);
+		}
 
-					if (!response.ok) {
-						// console.warn(await response.text());
-						throw new Error(
-							"Could not connect to component server: " + response.statusText
-						);
-					}
+		return this.prepare_return_obj();
+	}
 
-					const output = await response.json();
-					return output;
-				} catch (e) {
-					console.warn(e);
+	async handle_space_success(status: SpaceStatus): Promise<Config | void> {
+		const { status_callback } = this.options;
+		if (status_callback) status_callback(status);
+		if (status.status === "running") {
+			try {
+				this.config = await this._resolve_config();
+				if (!this.config) {
+					throw new Error("Could not resolve app config");
 				}
-			}
 
-			async function view_api(config?: Config): Promise<ApiInfo<JsApiData>> {
-				if (api) return api;
+				const _config = await this.config_success(this.config);
 
-				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 _config as 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"
 					});
 				}
-
-				if (!response.ok) {
-					throw new Error(BROKEN_CONNECTION_MSG);
-				}
-
-				let api_info = (await response.json()) as
-					| ApiInfo<ApiData>
-					| { api: ApiInfo<ApiData> };
-				if ("api" in api_info) {
-					api_info = api_info.api;
-				}
-
-				if (
-					api_info.named_endpoints["/predict"] &&
-					!api_info.unnamed_endpoints["0"]
-				) {
-					api_info.unnamed_endpoints[0] = api_info.named_endpoints["/predict"];
-				}
-
-				const x = transform_api_info(api_info, config, api_map);
-				return x;
 			}
-		});
-	}
-
-	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
-		);
-
-		return Promise.all(
-			blob_refs.map(async ({ path, blob, type }) => {
-				if (blob) {
-					const file_url = (await upload_files(endpoint, [blob], token))
-						.files[0];
-					return { path, file_url, type, name: blob?.name };
-				}
-				return { path, type };
-			})
-		).then((r) => {
-			r.forEach(({ path, file_url, type, name }) => {
-				if (type === "Gallery") {
-					update_object(data, file_url, path);
-				} else if (file_url) {
-					const file = new FileData({ path: file_url, orig_name: name });
-					update_object(data, file, path);
-				}
-			});
-
-			return data;
-		});
-	}
-}
-
-export const { post_data, upload_files, client, handle_blob } = api_factory(
-	fetch,
-	(...args) => new EventSource(...args)
-);
-
-interface ApiData {
-	label: string;
-	type: {
-		type: any;
-		description: string;
-	};
-	component: string;
-	example_input?: any;
-}
-
-interface JsApiData {
-	label: string;
-	type: string;
-	component: string;
-	example_input: any;
-}
-
-interface EndpointInfo<T extends ApiData | JsApiData> {
-	parameters: T[];
-	returns: T[];
-}
-interface ApiInfo<T extends ApiData | JsApiData> {
-	named_endpoints: {
-		[key: string]: EndpointInfo<T>;
-	};
-	unnamed_endpoints: {
-		[key: string]: EndpointInfo<T>;
-	};
-}
-
-function get_type(
-	type: { [key: string]: any },
-	component: string,
-	serializer: string,
-	signature_type: "return" | "parameter"
-): string {
-	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))][]`;
 	}
-}
 
-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;
-}
+	public async component_server(
+		component_id: number,
+		fn_name: string,
+		data: unknown[] | { binary: boolean; data: Record<string, any> }
+	): Promise<unknown> {
+		if (!this.config) {
+			throw new Error("Could not resolve app config");
+		}
 
-function transform_api_info(
-	api_info: ApiInfo<ApiData>,
-	config: Config,
-	api_map: Record<string, number>
-): ApiInfo<JsApiData> {
-	const new_data = {
-		named_endpoints: {},
-		unnamed_endpoints: {}
-	};
-	for (const key in api_info) {
-		const cat = api_info[key];
+		const headers: {
+			Authorization?: string;
+			"Content-Type"?: "application/json";
+		} = {};
 
-		for (const endpoint in cat) {
-			const dep_index = config.dependencies[endpoint]
-				? endpoint
-				: api_map[endpoint.replace("/", "")];
+		const { hf_token } = this.options;
+		const { session_hash } = this;
 
-			const info = cat[endpoint];
-			new_data[key][endpoint] = {};
-			new_data[key][endpoint].parameters = {};
-			new_data[key][endpoint].returns = {};
-			new_data[key][endpoint].type = config.dependencies[dep_index].types;
-			new_data[key][endpoint].parameters = info.parameters.map(
-				({ label, component, type, serializer }) => ({
-					label,
-					component,
-					type: get_type(type, component, serializer, "parameter"),
-					description: get_description(type, serializer)
-				})
-			);
+		if (hf_token) {
+			headers.Authorization = `Bearer ${this.options.hf_token}`;
+		}
 
-			new_data[key][endpoint].returns = info.returns.map(
-				({ label, component, type, serializer }) => ({
-					label,
-					component,
-					type: get_type(type, component, serializer, "return"),
-					description: get_description(type, serializer)
-				})
-			);
+		let root_url: string;
+		let component = this.config.components.find(
+			(comp) => comp.id === component_id
+		);
+		if (component?.props?.root_url) {
+			root_url = component.props.root_url;
+		} else {
+			root_url = this.config.root;
 		}
-	}
 
-	return new_data;
-}
+		let body: FormData | string;
 
-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}`
+		if ("binary" in data) {
+			body = new FormData();
+			for (const key in data.data) {
+				if (key === "binary") continue;
+				body.append(key, data.data[key]);
 			}
-		});
-
-		const jwt = (await r.json()).token;
-
-		return jwt || false;
-	} catch (e) {
-		console.error(e);
-		return false;
-	}
-}
-
-function update_object(object, newValue, stack): void {
-	while (stack.length > 1) {
-		object = object[stack.shift()];
-	}
-
-	object[stack.shift()] = newValue;
-}
-
-export async function walk_and_store_blobs(
-	param,
-	type = undefined,
-	path = [],
-	root = false,
-	api_info = undefined
-): Promise<
-	{
-		path: string[];
-		type: string;
-		blob: Blob | false;
-	}[]
-> {
-	if (Array.isArray(param)) {
-		let blob_refs = [];
+			body.set("component_id", component_id.toString());
+			body.set("fn_name", fn_name);
+			body.set("session_hash", session_hash);
+		} else {
+			body = JSON.stringify({
+				data: data,
+				component_id,
+				fn_name,
+				session_hash
+			});
 
-		await Promise.all(
-			param.map(async (v, i) => {
-				let new_path = path.slice();
-				new_path.push(i);
+			headers["Content-Type"] = "application/json";
+		}
 
-				const array_refs = await walk_and_store_blobs(
-					param[i],
-					root ? api_info?.parameters[i]?.component || undefined : type,
-					new_path,
-					false,
-					api_info
-				);
+		if (hf_token) {
+			headers.Authorization = `Bearer ${hf_token}`;
+		}
 
-				blob_refs = blob_refs.concat(array_refs);
-			})
-		);
+		try {
+			const response = await this.fetch_implementation(
+				`${root_url}/component_server/`,
+				{
+					method: "POST",
+					body: body,
+					headers
+				}
+			);
 
-		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 = [];
-		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(
-						param[key],
-						undefined,
-						new_path,
-						false,
-						api_info
-					)
+			if (!response.ok) {
+				throw new Error(
+					"Could not connect to component server: " + response.statusText
 				);
 			}
-		}
-		return blob_refs;
-	}
-	return [];
-}
-
-function image_to_data_uri(blob: Blob): Promise<string | ArrayBuffer> {
-	return new Promise((resolve, _) => {
-		const reader = new FileReader();
-		reader.onloadend = () => resolve(reader.result);
-		reader.readAsDataURL(blob);
-	});
-}
-
-function skip_queue(id: number, config: Config): boolean {
-	return (
-		!(config?.dependencies?.[id]?.queue === null
-			? config.enable_queue
-			: config?.dependencies?.[id]?.queue) || false
-	);
-}
 
-async function resolve_config(
-	fetch_implementation: typeof fetch,
-	endpoint?: string,
-	token?: `hf_${string}`
-): Promise<Config> {
-	const headers: { Authorization?: string } = {};
-	if (token) {
-		headers.Authorization = `Bearer ${token}`;
-	}
-	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;
-		config.root = resolve_root(endpoint, config.root, false);
-		return { ...config, path: path };
-	} else if (endpoint) {
-		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;
-		}
-		throw new Error("Could not get config.");
-	}
-
-	throw new Error("No config or app endpoint found");
-}
-
-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}`
-			: `https://huggingface.co/api/spaces/${id}`;
-	let response;
-	let _status;
-	try {
-		response = await fetch(endpoint);
-		_status = response.status;
-		if (_status !== 200) {
-			throw new Error();
+			const output = await response.json();
+			return output;
+		} catch (e) {
+			console.warn(e);
 		}
-		response = await response.json();
-	} catch (e) {
-		status_callback({
-			status: "error",
-			load_status: "error",
-			message: "Could not get space status",
-			detail: "NOT_FOUND"
-		});
-		return;
 	}
 
-	if (!response || _status !== 200) return;
-	const {
-		runtime: { stage },
-		id: space_name
-	} = response;
-
-	switch (stage) {
-		case "STOPPED":
-		case "SLEEPING":
-			status_callback({
-				status: "sleeping",
-				load_status: "pending",
-				message: "Space is asleep. Waking it up...",
-				detail: stage
-			});
-
-			setTimeout(() => {
-				check_space_status(id, type, status_callback);
-			}, 1000); // poll for status
-			break;
-		case "PAUSED":
-			status_callback({
-				status: "paused",
-				load_status: "error",
-				message:
-					"This space has been paused by the author. If you would like to try this demo, consider duplicating the space.",
-				detail: stage,
-				discussions_enabled: await discussions_enabled(space_name)
-			});
-			break;
-		case "RUNNING":
-		case "RUNNING_BUILDING":
-			status_callback({
-				status: "running",
-				load_status: "complete",
-				message: "",
-				detail: stage
-			});
-			// load_config(source);
-			//  launch
-			break;
-		case "BUILDING":
-			status_callback({
-				status: "building",
-				load_status: "pending",
-				message: "Space is building...",
-				detail: stage
-			});
-
-			setTimeout(() => {
-				check_space_status(id, type, status_callback);
-			}, 1000);
-			break;
-		default:
-			status_callback({
-				status: "space_error",
-				load_status: "error",
-				message: "This space is experiencing an issue.",
-				detail: stage,
-				discussions_enabled: await discussions_enabled(space_name)
-			});
-			break;
+	private prepare_return_obj(): client_return {
+		return {
+			config: this.config,
+			predict: this.predict,
+			submit: this.submit,
+			view_api: this.view_api,
+			component_server: this.component_server
+		};
 	}
 }
 
-function handle_message(
-	data: any,
-	last_status: Status["stage"]
-): {
-	type: "hash" | "data" | "update" | "complete" | "generating" | "log" | "none";
-	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 } };
+/**
+ * @deprecated This method will be removed in v1.0. Use `Client.connect()` instead.
+ * Creates a client instance for interacting with Gradio apps.
+ *
+ * @param {string} app_reference - The reference or URL to a Gradio space or app.
+ * @param {ClientOptions} options - Configuration options for the client.
+ * @returns {Promise<Client>} A promise that resolves to a `Client` instance.
+ */
+export async function client(
+	app_reference: string,
+	options: ClientOptions = {}
+): Promise<Client> {
+	return await Client.connect(app_reference, options);
 }
+
+export type ClientInstance = Client;