@gradio/client 0.17.0 → 0.18.0

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/stream.ts

@@ -7,7 +7,8 @@ export function open_stream(this: Client): void {
 		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 = this.stream_factory(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

@@ -31,7 +31,7 @@ export function submit(
 	try {
 		const { hf_token } = this.options;
 		const {
-			fetch_implementation,
+			fetch,
 			app_reference,
 			config,
 			session_hash,
@@ -56,7 +56,7 @@ export function submit(
 		);
 
 		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 +125,7 @@ export function submit(
 				}
 				cancel_request = { fn_index, session_hash };
 			} else {
-				event_source?.close();
+				stream?.close();
 				cancel_request = { event_id };
 			}
 
@@ -134,7 +134,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 +155,7 @@ export function submit(
 			}
 		}
 
-		this.handle_blob(`${config.root}`, data, endpoint_info).then(
+		this.handle_blob(config.root, data, endpoint_info).then(
 			async (_payload) => {
 				payload = {
 					data: _payload || [],
@@ -368,15 +368,19 @@ export function submit(
 						}${params}`
 					);
 
-					event_source = this.eventSource_factory(url);
+					if (this.jwt) {
+						url.searchParams.set("__sign", this.jwt);
+					}
 
-					if (!event_source) {
-						throw new Error(
-							"Cannot connect to sse endpoint: " + url.toString()
+					stream = this.stream_factory(url);
+
+					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 +397,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 +416,7 @@ export function submit(
 									fn_index,
 									time: new Date()
 								});
-								event_source?.close();
+								stream?.close();
 							}
 						} else if (type === "complete") {
 							complete = status;
@@ -456,7 +460,7 @@ export function submit(
 									endpoint: _endpoint,
 									fn_index
 								});
-								event_source?.close();
+								stream?.close();
 							}
 						}
 					};
@@ -476,7 +480,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}`
@@ -623,7 +631,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;
 									}
 								}

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",

package/src/utils/client.node-test.ts

@@ -1,173 +0,0 @@
-import { test, describe, assert } from "vitest";
-import { readFileSync } from "fs";
-import { join, dirname } from "path";
-import { fileURLToPath } from "url";
-import { Blob } from "node:buffer";
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const image_path = join(
-	__dirname,
-	"..",
-	"..",
-	"..",
-	"demo",
-	"kitchen_sink",
-	"files",
-	"lion.jpg"
-);
-
-import { walk_and_store_blobs } from "../helpers/data";
-import { Client } from "..";
-
-describe.skip("extract blob parts", () => {
-	test("convert Buffer to Blob", async () => {
-		const image = readFileSync(image_path);
-		await Client.connect("gradio/hello_world_main");
-		const parts = walk_and_store_blobs({
-			data: {
-				image
-			}
-		});
-
-		assert.isTrue(parts[0].blob instanceof Blob);
-	});
-
-	test("leave node Blob as Blob", async () => {
-		const image = new Blob([readFileSync(image_path)]);
-
-		await Client.connect("gradio/hello_world_main");
-		const parts = walk_and_store_blobs({
-			data: {
-				image
-			}
-		});
-
-		assert.isTrue(parts[0].blob instanceof Blob);
-	});
-
-	test("handle deep structures", async () => {
-		const image = new Blob([readFileSync(image_path)]);
-
-		await Client.connect("gradio/hello_world_main");
-		const parts = walk_and_store_blobs({
-			a: {
-				b: {
-					data: {
-						image
-					}
-				}
-			}
-		});
-
-		assert.isTrue(parts[0].blob instanceof Blob);
-	});
-
-	test("handle deep structures with arrays", async () => {
-		const image = new Blob([readFileSync(image_path)]);
-
-		await Client.connect("gradio/hello_world_main");
-		const parts = walk_and_store_blobs({
-			a: [
-				{
-					b: [
-						{
-							data: [
-								{
-									image
-								}
-							]
-						}
-					]
-				}
-			]
-		});
-
-		assert.isTrue(parts[0].blob instanceof Blob);
-	});
-
-	test("handle deep structures with arrays 2", async () => {
-		const image = new Blob([readFileSync(image_path)]);
-
-		await Client.connect("gradio/hello_world_main");
-		const obj = {
-			a: [
-				{
-					b: [
-						{
-							data: [[image], image, [image, [image]]]
-						}
-					]
-				}
-			]
-		};
-		const parts = walk_and_store_blobs(obj);
-
-		function map_path(
-			obj: Record<string, any>,
-			parts: { path: string[]; blob: any }[]
-		) {
-			const { path, blob } = parts[parts.length - 1];
-			let ref = obj;
-			path.forEach((p) => (ref = ref[p]));
-
-			return ref === blob;
-		}
-
-		assert.isTrue(parts[0].blob instanceof Blob);
-		// assert.isTrue(map_path(obj, parts));
-	});
-});
-
-describe("handle_blob", () => {
-	test("handle blobs", async () => {
-		const image = new Blob([readFileSync(image_path)]);
-
-		const app = await Client.connect("gradio/hello_world_main");
-		const obj = [
-			{
-				a: [
-					{
-						b: [
-							{
-								data: [[image], image, [image, [image]]]
-							}
-						]
-					}
-				]
-			}
-		];
-
-		const parts = await app.handle_blob(app.config.root, obj, undefined);
-		//@ts-ignore
-		// assert.isString(parts.data[0].a[0].b[0].data[0][0]);
-	});
-});
-
-describe.skip("private space", () => {
-	test("can access a private space", async () => {
-		const image = new Blob([readFileSync(image_path)]);
-
-		const app = await Client.connect("pngwn/hello_world", {
-			hf_token: "hf_"
-		});
-
-		console.log(app);
-		const obj = [
-			{
-				a: [
-					{
-						b: [
-							{
-								data: [[image], image, [image, [image]]]
-							}
-						]
-					}
-				]
-			}
-		];
-
-		const parts = await app.handle_blob(app.config.root, obj, undefined);
-		//@ts-ignore
-		assert.isString(parts.data[0].a[0].b[0].data[0][0]);
-	});
-});