@gradio/client 0.17.0 → 0.19.0

package/src/types.ts

@@ -4,6 +4,9 @@ import { hardware_types } from "./helpers/spaces";
 
 export interface ApiData {
 	label: string;
+	parameter_name: string;
+	parameter_default?: any;
+	parameter_has_default?: boolean;
 	type: {
 		type: any;
 		description: string;
@@ -16,6 +19,9 @@ export interface ApiData {
 
 export interface JsApiData {
 	label: string;
+	parameter_name: string;
+	parameter_default?: any;
+	parameter_has_default?: boolean;
 	type: string;
 	description: string;
 	component: string;
@@ -38,10 +44,25 @@ export interface ApiInfo<T extends ApiData | JsApiData> {
 export interface BlobRef {
 	path: string[];
 	type: string | undefined;
-	blob: Blob | false;
+	blob: Blob | File | false;
 }
 
-export type ParamType = string | Buffer | Record<string, any> | any[];
+export type DataType = string | Buffer | Record<string, any> | any[];
+
+// Function Signature Types
+
+export type SubmitFunction = (
+	endpoint: string | number,
+	data: unknown[] | Record<string, unknown>,
+	event_data?: unknown,
+	trigger_id?: number | null
+) => SubmitReturn;
+
+export type PredictFunction = (
+	endpoint: string | number,
+	data: unknown[] | Record<string, unknown>,
+	event_data?: unknown
+) => Promise<SubmitReturn>;
 
 // Event and Submission Types
 
@@ -50,27 +71,16 @@ type event = <K extends EventType>(
 	listener: EventListener<K>
 ) => SubmitReturn;
 
-type predict = (
-	endpoint: string | number,
-	data?: unknown[],
-	event_data?: unknown
-) => Promise<unknown>;
-
 export type client_return = {
 	config: Config | undefined;
-	predict: predict;
-	submit: (
-		endpoint: string | number,
-		data: unknown[],
-		event_data?: unknown,
-		trigger_id?: number | null
-	) => SubmitReturn;
+	predict: PredictFunction;
+	submit: SubmitFunction;
 	component_server: (
 		component_id: number,
 		fn_name: string,
 		data: unknown[]
 	) => any;
-	view_api: (fetch_implementation: typeof fetch) => Promise<ApiInfo<JsApiData>>;
+	view_api: (_fetch: typeof fetch) => Promise<ApiInfo<JsApiData>>;
 };
 
 export type SubmitReturn = {
@@ -116,6 +126,7 @@ export type SpaceStatusCallback = (a: SpaceStatus) => void;
 export interface Config {
 	auth_required: boolean;
 	analytics_enabled: boolean;
+	connect_heartbeat: boolean;
 	auth_message: string;
 	components: any[];
 	css: string | null;
@@ -219,12 +230,13 @@ export interface FileData {
 
 // Event and Listener Types
 
-export type EventType = "data" | "status" | "log";
+export type EventType = "data" | "status" | "log" | "render";
 
 export interface EventMap {
 	data: Payload;
 	status: Status;
 	log: LogMessage;
+	render: RenderMessage;
 }
 
 export type Event<K extends EventType> = {
@@ -238,6 +250,13 @@ export interface LogMessage {
 	log: string;
 	level: "warning" | "info";
 }
+export interface RenderMessage {
+	fn_index: number;
+	data: {
+		components: any[];
+		layout: any;
+	};
+}
 
 export interface Status {
 	queue: boolean;

package/src/upload.ts

@@ -1,16 +1,12 @@
 import type { UploadResponse } from "./types";
-import { upload_files } from ".";
+import type { Client } from "./client";
 
 export async function upload(
+	this: Client,
 	file_data: FileData[],
 	root_url: string,
 	upload_id?: string,
-	max_file_size?: number,
-	upload_fn: (
-		root_url: string,
-		files: (Blob | File)[],
-		upload_id?: string
-	) => Promise<UploadResponse> = upload_files
+	max_file_size?: number
 ): Promise<(FileData | null)[] | null> {
 	let files = (Array.isArray(file_data) ? file_data : [file_data]).map(
 		(file_data) => file_data.blob!
@@ -28,7 +24,7 @@ export async function upload(
 	}
 
 	return await Promise.all(
-		await upload_fn(root_url, files, upload_id).then(
+		await this.upload_files(root_url, files, upload_id).then(
 			async (response: { files?: string[]; error?: string }) => {
 				if (response.error) {
 					throw new Error(response.error);

package/src/utils/duplicate.ts

@@ -5,6 +5,7 @@ import {
 } from "../helpers/spaces";
 import type { DuplicateOptions } from "../types";
 import { Client } from "../client";
+import { SPACE_METADATA_ERROR_MSG } from "../constants";
 
 export async function duplicate(
 	app_reference: string,
@@ -47,8 +48,12 @@ export async function duplicate(
 
 	let original_hardware;
 
-	if (!hardware) {
-		original_hardware = await get_space_hardware(app_reference, hf_token);
+	try {
+		if (!hardware) {
+			original_hardware = await get_space_hardware(app_reference, hf_token);
+		}
+	} catch (e) {
+		throw Error(SPACE_METADATA_ERROR_MSG + (e as Error).message);
 	}
 
 	const requested_hardware = hardware || original_hardware || "cpu-basic";
@@ -80,8 +85,20 @@ export async function duplicate(
 		const duplicated_space = await response.json();
 
 		await set_space_timeout(`${user}/${space_name}`, timeout || 300, hf_token);
-		return await Client.connect(duplicated_space.url, options);
+
+		return await Client.connect(
+			get_space_reference(duplicated_space.url),
+			options
+		);
 	} catch (e: any) {
 		throw new Error(e);
 	}
 }
+
+function get_space_reference(url: string): any {
+	const regex = /https:\/\/huggingface.co\/spaces\/([^/]+\/[^/]+)/;
+	const match = url.match(regex);
+	if (match) {
+		return match[1];
+	}
+}

package/src/utils/handle_blob.ts

@@ -29,7 +29,7 @@ export async function handle_blob(
 				path,
 				file_url,
 				type,
-				name: blob?.name
+				name: blob instanceof File ? blob?.name : undefined
 			};
 		})
 	);

package/src/utils/post_data.ts

@@ -16,7 +16,7 @@ export async function post_data(
 		headers.Authorization = `Bearer ${this.options.hf_token}`;
 	}
 	try {
-		var response = await this.fetch_implementation(url, {
+		var response = await this.fetch(url, {
 			method: "POST",
 			body: JSON.stringify(body),
 			headers: { ...headers, ...additional_headers }

package/src/utils/predict.ts

@@ -4,7 +4,7 @@ import type { Dependency, SubmitReturn } from "../types";
 export async function predict(
 	this: Client,
 	endpoint: string | number,
-	data?: unknown[]
+	data: unknown[] | Record<string, unknown>
 ): Promise<SubmitReturn> {
 	let data_returned = false;
 	let status_complete = false;
@@ -28,7 +28,7 @@ export async function predict(
 	}
 
 	return new Promise(async (resolve, reject) => {
-		const app = this.submit(endpoint, data || []);
+		const app = this.submit(endpoint, data);
 		let result: unknown;
 
 		app

package/src/utils/stream.ts

@@ -1,13 +1,14 @@
 import { BROKEN_CONNECTION_MSG } from "../constants";
 import type { Client } from "../client";
 
-export function open_stream(this: Client): void {
+export async function open_stream(this: Client): Promise<void> {
 	let {
 		event_callbacks,
 		unclosed_events,
 		pending_stream_messages,
 		stream_status,
-		config
+		config,
+		jwt
 	} = this;
 
 	if (!config) {
@@ -16,31 +17,35 @@ export function open_stream(this: Client): void {
 
 	stream_status.open = true;
 
-	let event_source: EventSource | null = null;
+	let stream: EventSource | null = null;
 	let params = new URLSearchParams({
 		session_hash: this.session_hash
 	}).toString();
 
 	let url = new URL(`${config.root}/queue/data?${params}`);
-	event_source = this.eventSource_factory(url);
 
-	if (!event_source) {
-		throw new Error("Cannot connect to sse endpoint: " + url.toString());
+	if (jwt) {
+		url.searchParams.set("__sign", jwt);
 	}
 
-	event_source.onmessage = async function (event) {
+	stream = await this.stream(url);
+
+	if (!stream) {
+		console.warn("Cannot connect to SSE endpoint: " + url.toString());
+		return;
+	}
+
+	stream.onmessage = async function (event: MessageEvent) {
 		let _data = JSON.parse(event.data);
 		if (_data.msg === "close_stream") {
-			close_stream(stream_status, event_source);
+			close_stream(stream_status, stream);
 			return;
 		}
 		const event_id = _data.event_id;
 		if (!event_id) {
 			await Promise.all(
-				Object.keys(event_callbacks).map(
-					(event_id) =>
-						// @ts-ignore
-						event_callbacks[event_id](_data) // todo: check event_callbacks
+				Object.keys(event_callbacks).map((event_id) =>
+					event_callbacks[event_id](_data)
 				)
 			);
 		} else if (event_callbacks[event_id] && config) {
@@ -50,11 +55,16 @@ export function open_stream(this: Client): void {
 			) {
 				unclosed_events.delete(event_id);
 				if (unclosed_events.size === 0) {
-					close_stream(stream_status, event_source);
+					close_stream(stream_status, 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
+			let fn: (data: any) => void = event_callbacks[event_id];
+
+			if (typeof window !== "undefined") {
+				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 {
+				setImmediate(fn, _data);
+			}
 		} else {
 			if (!pending_stream_messages[event_id]) {
 				pending_stream_messages[event_id] = [];
@@ -62,27 +72,26 @@ export function open_stream(this: Client): void {
 			pending_stream_messages[event_id].push(_data);
 		}
 	};
-	event_source.onerror = async function () {
+	stream.onerror = async function () {
 		await Promise.all(
 			Object.keys(event_callbacks).map((event_id) =>
-				// @ts-ignore
 				event_callbacks[event_id]({
 					msg: "unexpected_error",
 					message: BROKEN_CONNECTION_MSG
 				})
 			)
 		);
-		close_stream(stream_status, event_source);
+		close_stream(stream_status, stream);
 	};
 }
 
 export function close_stream(
 	stream_status: { open: boolean },
-	event_source: EventSource | null
+	stream: EventSource | null
 ): void {
-	if (stream_status && event_source) {
+	if (stream_status && stream) {
 		stream_status.open = false;
-		event_source?.close();
+		stream?.close();
 	}
 }
 

package/src/utils/submit.ts

@@ -16,7 +16,12 @@ import type {
 
 import { skip_queue, post_message } from "../helpers/data";
 import { resolve_root } from "../helpers/init_helpers";
-import { handle_message, process_endpoint } from "../helpers/api_info";
+import {
+	handle_message,
+	map_data_to_params,
+	process_endpoint
+} from "../helpers/api_info";
+import semiver from "semiver";
 import { BROKEN_CONNECTION_MSG, QUEUE_FULL_MSG } from "../constants";
 import { apply_diff_stream, close_stream } from "./stream";
 import { Client } from "../client";
@@ -24,14 +29,14 @@ import { Client } from "../client";
 export function submit(
 	this: Client,
 	endpoint: string | number,
-	data: unknown[],
+	data: unknown[] | Record<string, unknown>,
 	event_data?: unknown,
 	trigger_id?: number | null
 ): SubmitReturn {
 	try {
 		const { hf_token } = this.options;
 		const {
-			fetch_implementation,
+			fetch,
 			app_reference,
 			config,
 			session_hash,
@@ -55,8 +60,10 @@ export function submit(
 			config
 		);
 
+		let resolved_data = map_data_to_params(data, api_info);
+
 		let websocket: WebSocket;
-		let event_source: EventSource | null;
+		let stream: EventSource | null;
 		let protocol = config.protocol ?? "ws";
 
 		const _endpoint = typeof endpoint === "number" ? "/predict" : endpoint;
@@ -125,7 +132,7 @@ export function submit(
 				}
 				cancel_request = { fn_index, session_hash };
 			} else {
-				event_source?.close();
+				stream?.close();
 				cancel_request = { event_id };
 			}
 
@@ -134,7 +141,7 @@ export function submit(
 					throw new Error("Could not resolve app config");
 				}
 
-				await fetch_implementation(`${config.root}/reset`, {
+				await fetch(`${config.root}/reset`, {
 					headers: { "Content-Type": "application/json" },
 					method: "POST",
 					body: JSON.stringify(cancel_request)
@@ -155,7 +162,7 @@ export function submit(
 			}
 		}
 
-		this.handle_blob(`${config.root}`, data, endpoint_info).then(
+		this.handle_blob(config.root, resolved_data, endpoint_info).then(
 			async (_payload) => {
 				payload = {
 					data: _payload || [],
@@ -368,15 +375,19 @@ export function submit(
 						}${params}`
 					);
 
-					event_source = this.eventSource_factory(url);
+					if (this.jwt) {
+						url.searchParams.set("__sign", this.jwt);
+					}
+
+					stream = await this.stream(url);
 
-					if (!event_source) {
-						throw new Error(
-							"Cannot connect to sse endpoint: " + url.toString()
+					if (!stream) {
+						return Promise.reject(
+							new Error("Cannot connect to SSE endpoint: " + url.toString())
 						);
 					}
 
-					event_source.onmessage = async function (event) {
+					stream.onmessage = async function (event: MessageEvent) {
 						const _data = JSON.parse(event.data);
 						const { type, status, data } = handle_message(
 							_data,
@@ -393,7 +404,7 @@ export function submit(
 								...status
 							});
 							if (status.stage === "error") {
-								event_source?.close();
+								stream?.close();
 							}
 						} else if (type === "data") {
 							event_id = _data.event_id as string;
@@ -412,7 +423,7 @@ export function submit(
 									fn_index,
 									time: new Date()
 								});
-								event_source?.close();
+								stream?.close();
 							}
 						} else if (type === "complete") {
 							complete = status;
@@ -456,7 +467,7 @@ export function submit(
 									endpoint: _endpoint,
 									fn_index
 								});
-								event_source?.close();
+								stream?.close();
 							}
 						}
 					};
@@ -476,7 +487,11 @@ export function submit(
 						fn_index,
 						time: new Date()
 					});
-					let hostname = window.location.hostname;
+					let hostname = "";
+					if (typeof window !== "undefined") {
+						hostname = window?.location?.hostname;
+					}
+
 					let hfhubdev = "dev.spaces.huggingface.tech";
 					const origin = hostname.includes(".dev.")
 						? `https://moon-${hostname.split(".")[1]}.${hfhubdev}`
@@ -495,7 +510,7 @@ export function submit(
 							headers
 						);
 					});
-					post_data_promise.then(([response, status]: any) => {
+					post_data_promise.then(async ([response, status]: any) => {
 						if (status === 503) {
 							fire_event({
 								type: "status",
@@ -586,6 +601,14 @@ export function submit(
 											endpoint: _endpoint,
 											fn_index
 										});
+										if (data.render_config) {
+											fire_event({
+												type: "render",
+												data: data.render_config,
+												endpoint: _endpoint,
+												fn_index
+											});
+										}
 
 										if (complete) {
 											fire_event({
@@ -623,7 +646,7 @@ export function submit(
 										time: new Date()
 									});
 									if (["sse_v2", "sse_v2.1"].includes(protocol)) {
-										close_stream(stream_status, event_source);
+										close_stream(stream_status, stream);
 										stream_status.open = false;
 									}
 								}
@@ -639,7 +662,7 @@ export function submit(
 							event_callbacks[event_id] = callback;
 							unclosed_events.add(event_id);
 							if (!stream_status.open) {
-								this.open_stream();
+								await this.open_stream();
 							}
 						}
 					});

package/src/utils/upload_files.ts

@@ -1,5 +1,5 @@
 import type { Client } from "..";
-import { BROKEN_CONNECTION_MSG } from "../constants";
+import { BROKEN_CONNECTION_MSG, UPLOAD_URL } from "../constants";
 import type { UploadResponse } from "../types";
 
 export async function upload_files(
@@ -11,11 +11,14 @@ export async function upload_files(
 	const headers: {
 		Authorization?: string;
 	} = {};
-	if (this.options.hf_token) {
+	if (this?.options?.hf_token) {
 		headers.Authorization = `Bearer ${this.options.hf_token}`;
 	}
+
 	const chunkSize = 1000;
 	const uploadResponses = [];
+	let response: Response;
+
 	for (let i = 0; i < files.length; i += chunkSize) {
 		const chunk = files.slice(i, i + chunkSize);
 		const formData = new FormData();
@@ -25,17 +28,19 @@ export async function upload_files(
 		try {
 			const upload_url = upload_id
 				? `${root_url}/upload?upload_id=${upload_id}`
-				: `${root_url}/upload`;
-			var response = await this.fetch_implementation(upload_url, {
+				: `${root_url}/${UPLOAD_URL}`;
+
+			response = await this.fetch(upload_url, {
 				method: "POST",
 				body: formData,
 				headers
 			});
 		} catch (e) {
-			return { error: BROKEN_CONNECTION_MSG };
+			throw new Error(BROKEN_CONNECTION_MSG + (e as Error).message);
 		}
 		if (!response.ok) {
-			return { error: await response.text() };
+			const error_text = await response.text();
+			return { error: `HTTP ${response.status}: ${error_text}` };
 		}
 		const output: UploadResponse["files"] = await response.json();
 		if (output) {

package/src/utils/view_api.ts

@@ -28,7 +28,7 @@ export async function view_api(this: Client): Promise<any> {
 		let response: Response;
 
 		if (semiver(config?.version || "2.0.0", "3.30") < 0) {
-			response = await this.fetch_implementation(SPACE_FETCHER_URL, {
+			response = await this.fetch(SPACE_FETCHER_URL, {
 				method: "POST",
 				body: JSON.stringify({
 					serialize: false,
@@ -37,12 +37,9 @@ export async function view_api(this: Client): Promise<any> {
 				headers
 			});
 		} else {
-			response = await this.fetch_implementation(
-				`${config?.root}/${API_INFO_URL}`,
-				{
-					headers
-				}
-			);
+			response = await this.fetch(`${config?.root}/${API_INFO_URL}`, {
+				headers
+			});
 		}
 
 		if (!response.ok) {

package/vite.config.js

@@ -1,6 +1,8 @@
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 
+const TEST_MODE = process.env.TEST_MODE || "happy-dom";
+
 export default defineConfig({
 	build: {
 		lib: {
@@ -17,6 +19,11 @@ export default defineConfig({
 	},
 	plugins: [svelte()],
 
+	mode: process.env.MODE || "development",
+	test: {
+		include: ["./src/test/*.test.*"],
+		environment: TEST_MODE
+	},
 	ssr: {
 		target: "node",
 		format: "esm",