@gradio/client 0.20.0 → 1.1.0

package/src/helpers/data.ts

@@ -1,12 +1,18 @@
-import { NodeBlob } from "../client";
-import type {
-	ApiData,
-	BlobRef,
-	Config,
-	EndpointInfo,
-	JsApiData,
-	DataType
+import {
+	type ApiData,
+	type BlobRef,
+	type Config,
+	type EndpointInfo,
+	type JsApiData,
+	type DataType,
+	Command,
+	type Dependency,
+	type ComponentMeta
 } from "../types";
+import { FileData } from "../upload";
+
+const is_node =
+	typeof process !== "undefined" && process.versions && process.versions.node;
 
 export function update_object(
 	object: { [x: string]: any },
@@ -64,11 +70,10 @@ export async function walk_and_store_blobs(
 		(globalThis.Buffer && data instanceof globalThis.Buffer) ||
 		data instanceof Blob
 	) {
-		const is_image = type === "Image";
 		return [
 			{
 				path: path,
-				blob: is_image ? false : new NodeBlob([data]),
+				blob: new Blob([data]),
 				type
 			}
 		];
@@ -118,3 +123,112 @@ export function post_message<Res = any>(
 		window.parent.postMessage(message, origin, [channel.port2]);
 	});
 }
+
+export function handle_file(
+	file_or_url: File | string | Blob | Buffer
+): FileData | Blob | Command {
+	if (typeof file_or_url === "string") {
+		if (
+			file_or_url.startsWith("http://") ||
+			file_or_url.startsWith("https://")
+		) {
+			return {
+				path: file_or_url,
+				url: file_or_url,
+				orig_name: file_or_url.split("/").pop() ?? "unknown",
+				meta: { _type: "gradio.FileData" }
+			};
+		}
+
+		if (is_node) {
+			// Handle local file paths
+			return new Command("upload_file", {
+				path: file_or_url,
+				name: file_or_url,
+				orig_path: file_or_url
+			});
+		}
+	} else if (typeof File !== "undefined" && file_or_url instanceof File) {
+		return {
+			path: file_or_url instanceof File ? file_or_url.name : "blob",
+			orig_name: file_or_url instanceof File ? file_or_url.name : "unknown",
+			// @ts-ignore
+			blob: file_or_url instanceof File ? file_or_url : new Blob([file_or_url]),
+			size:
+				file_or_url instanceof Blob
+					? file_or_url.size
+					: Buffer.byteLength(file_or_url as Buffer),
+			mime_type:
+				file_or_url instanceof File
+					? file_or_url.type
+					: "application/octet-stream", // Default MIME type for buffers
+			meta: { _type: "gradio.FileData" }
+		};
+	} else if (file_or_url instanceof Buffer) {
+		return new Blob([file_or_url]);
+	} else if (file_or_url instanceof Blob) {
+		return file_or_url;
+	}
+	throw new Error(
+		"Invalid input: must be a URL, File, Blob, or Buffer object."
+	);
+}
+
+/**
+ * Handles the payload by filtering out state inputs and returning an array of resolved payload values.
+ * We send null values for state inputs to the server, but we don't want to include them in the resolved payload.
+ *
+ * @param resolved_payload - The resolved payload values received from the client or the server
+ * @param dependency - The dependency object.
+ * @param components - The array of component metadata.
+ * @param with_null_state - Optional. Specifies whether to include null values for state inputs. Default is false.
+ * @returns An array of resolved payload values, filtered based on the dependency and component metadata.
+ */
+export function handle_payload(
+	resolved_payload: unknown[],
+	dependency: Dependency,
+	components: ComponentMeta[],
+	type: "input" | "output",
+	with_null_state = false
+): unknown[] {
+	if (type === "input" && !with_null_state) {
+		throw new Error("Invalid code path. Cannot skip state inputs for input.");
+	}
+	// data comes from the server with null state values so we skip
+	if (type === "output" && with_null_state) {
+		return resolved_payload;
+	}
+
+	let updated_payload: unknown[] = [];
+	let payload_index = 0;
+	for (let i = 0; i < dependency.inputs.length; i++) {
+		const input_id = dependency.inputs[i];
+		const component = components.find((c) => c.id === input_id);
+
+		if (component?.type === "state") {
+			// input + with_null_state needs us to fill state with null values
+			if (with_null_state) {
+				if (resolved_payload.length === dependency.inputs.length) {
+					const value = resolved_payload[payload_index];
+					updated_payload.push(value);
+					payload_index++;
+				} else {
+					updated_payload.push(null);
+				}
+			} else {
+				// this is output & !with_null_state, we skip state inputs
+				// the server payload always comes with null state values so we move along the payload index
+				payload_index++;
+				continue;
+			}
+			// input & !with_null_state isn't a case we care about, server needs null
+			continue;
+		} else {
+			const value = resolved_payload[payload_index];
+			updated_payload.push(value);
+			payload_index++;
+		}
+	}
+
+	return updated_payload;
+}

package/src/helpers/init_helpers.ts

@@ -101,6 +101,11 @@ export async function resolve_config(
 			let config = await response.json();
 			config.path = config.path ?? "";
 			config.root = endpoint;
+			config.dependencies?.forEach((dep: any, i: number) => {
+				if (dep.id === undefined) {
+					dep.id = i;
+				}
+			});
 			return config;
 		} else if (response?.status === 401) {
 			throw new Error(UNAUTHORIZED_MSG);

package/src/helpers/spaces.ts

@@ -106,9 +106,10 @@ export async function discussions_enabled(space_id: string): Promise<boolean> {
 				method: "HEAD"
 			}
 		);
+
 		const error = r.headers.get("x-error-message");
 
-		if (error && RE_DISABLED_DISCUSSION.test(error)) return false;
+		if (!r.ok || (error && RE_DISABLED_DISCUSSION.test(error))) return false;
 		return true;
 	} catch (e) {
 		return false;

package/src/index.ts

@@ -4,12 +4,17 @@ export { predict } from "./utils/predict";
 export { submit } from "./utils/submit";
 export { upload_files } from "./utils/upload_files";
 export { FileData, upload, prepare_files } from "./upload";
+export { handle_file } from "./helpers/data";
 
 export type {
 	SpaceStatus,
+	StatusMessage,
 	Status,
 	client_return,
-	UploadResponse
+	UploadResponse,
+	RenderMessage,
+	LogMessage,
+	Payload
 } from "./types";
 
 // todo: remove in @gradio/client v1.0

package/src/test/api_info.test.ts

@@ -16,7 +16,6 @@ import { initialise_server } from "./server";
 import { transformed_api_info } from "./test_data";
 
 const server = initialise_server();
-const IS_NODE = process.env.TEST_MODE === "node";
 
 beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());

package/src/test/data.test.ts

@@ -3,11 +3,15 @@ import {
 	update_object,
 	walk_and_store_blobs,
 	skip_queue,
-	post_message
+	post_message,
+	handle_file,
+	handle_payload
 } from "../helpers/data";
-import { NodeBlob } from "../client";
 import { config_response, endpoint_info } from "./test_data";
-import { BlobRef } from "../types";
+import { BlobRef, Command } from "../types";
+import { FileData } from "../upload";
+
+const IS_NODE = process.env.TEST_MODE === "node";
 
 describe("walk_and_store_blobs", () => {
 	it("should convert a Buffer to a Blob", async () => {
@@ -15,7 +19,7 @@ describe("walk_and_store_blobs", () => {
 		const parts = await walk_and_store_blobs(buffer, "text");
 
 		expect(parts).toHaveLength(1);
-		expect(parts[0].blob).toBeInstanceOf(NodeBlob);
+		expect(parts[0].blob).toBeInstanceOf(Blob);
 	});
 
 	it("should return a Blob when passed a Blob", async () => {
@@ -28,19 +32,7 @@ describe("walk_and_store_blobs", () => {
 			endpoint_info
 		);
 
-		expect(parts[0].blob).toBeInstanceOf(NodeBlob);
-	});
-
-	it("should return blob: false when passed an image", async () => {
-		const blob = new Blob([]);
-		const parts = await walk_and_store_blobs(
-			blob,
-			"Image",
-			[],
-			true,
-			endpoint_info
-		);
-		expect(parts[0].blob).toBe(false);
+		expect(parts[0].blob).toBeInstanceOf(Blob);
 	});
 
 	it("should handle arrays", async () => {
@@ -48,7 +40,7 @@ describe("walk_and_store_blobs", () => {
 		const parts = await walk_and_store_blobs([image]);
 
 		expect(parts).toHaveLength(1);
-		expect(parts[0].blob).toBeInstanceOf(NodeBlob);
+		expect(parts[0].blob).toBeInstanceOf(Blob);
 		expect(parts[0].path).toEqual(["0"]);
 	});
 
@@ -57,7 +49,7 @@ describe("walk_and_store_blobs", () => {
 		const parts = await walk_and_store_blobs({ a: { b: { data: { image } } } });
 
 		expect(parts).toHaveLength(1);
-		expect(parts[0].blob).toBeInstanceOf(NodeBlob);
+		expect(parts[0].blob).toBeInstanceOf(Blob);
 		expect(parts[0].path).toEqual(["a", "b", "data", "image"]);
 	});
 
@@ -79,7 +71,7 @@ describe("walk_and_store_blobs", () => {
 			]
 		});
 
-		expect(parts[0].blob).toBeInstanceOf(NodeBlob);
+		expect(parts[0].blob).toBeInstanceOf(Blob);
 	});
 
 	it("should handle deep structures with arrays (with equality check)", async () => {
@@ -103,8 +95,8 @@ describe("walk_and_store_blobs", () => {
 			let ref = obj;
 			path.forEach((p) => (ref = ref[p]));
 
-			// since ref is a Blob and blob is a NodeBlob, we deep equal check the two buffers instead
-			if (ref instanceof Blob && blob instanceof NodeBlob) {
+			// since ref is a Blob and blob is a Blob, we deep equal check the two buffers instead
+			if (ref instanceof Blob && blob instanceof Blob) {
 				const refBuffer = Buffer.from(await ref.arrayBuffer());
 				const blobBuffer = Buffer.from(await blob.arrayBuffer());
 				return refBuffer.equals(blobBuffer);
@@ -113,7 +105,7 @@ describe("walk_and_store_blobs", () => {
 			return ref === blob;
 		}
 
-		expect(parts[0].blob).toBeInstanceOf(NodeBlob);
+		expect(parts[0].blob).toBeInstanceOf(Blob);
 		expect(map_path(obj, parts)).toBeTruthy();
 	});
 
@@ -122,7 +114,7 @@ describe("walk_and_store_blobs", () => {
 		const parts = await walk_and_store_blobs(buffer, undefined, ["blob"]);
 
 		expect(parts).toHaveLength(1);
-		expect(parts[0].blob).toBeInstanceOf(NodeBlob);
+		expect(parts[0].blob).toBeInstanceOf(Blob);
 		expect(parts[0].path).toEqual(["blob"]);
 	});
 
@@ -132,7 +124,7 @@ describe("walk_and_store_blobs", () => {
 
 		expect(parts).toHaveLength(1);
 		expect(parts[0].path).toEqual([]);
-		expect(parts[0].blob).toBeInstanceOf(NodeBlob);
+		expect(parts[0].blob).toBeInstanceOf(Blob);
 	});
 
 	it("should convert an object with deep structures to BlobRefs", async () => {
@@ -149,7 +141,7 @@ describe("walk_and_store_blobs", () => {
 
 		expect(parts).toHaveLength(1);
 		expect(parts[0].path).toEqual(["a", "b", "data", "image"]);
-		expect(parts[0].blob).toBeInstanceOf(NodeBlob);
+		expect(parts[0].blob).toBeInstanceOf(Blob);
 	});
 });
 describe("update_object", () => {
@@ -276,3 +268,186 @@ describe("post_message", () => {
 		]);
 	});
 });
+
+describe("handle_file", () => {
+	it("should handle a Blob object and return the blob", () => {
+		const blob = new Blob(["test data"], { type: "image/png" });
+		const result = handle_file(blob) as FileData;
+
+		expect(result).toBe(blob);
+	});
+
+	it("should handle a Buffer object and return it as a blob", () => {
+		const buffer = Buffer.from("test data");
+		const result = handle_file(buffer) as FileData;
+		expect(result).toBeInstanceOf(Blob);
+	});
+	it("should handle a local file path and return a Command object", () => {
+		const file_path = "./owl.png";
+		const result = handle_file(file_path) as Command;
+		expect(result).toBeInstanceOf(Command);
+		expect(result).toEqual({
+			type: "command",
+			command: "upload_file",
+			meta: { path: "./owl.png", name: "./owl.png", orig_path: "./owl.png" },
+			fileData: undefined
+		});
+	});
+
+	it("should handle a File object and return it as FileData", () => {
+		if (IS_NODE) {
+			return;
+		}
+		const file = new File(["test image"], "test.png", { type: "image/png" });
+		const result = handle_file(file) as FileData;
+		expect(result.path).toBe("test.png");
+		expect(result.orig_name).toBe("test.png");
+		expect(result.blob).toBeInstanceOf(Blob);
+		expect(result.size).toBe(file.size);
+		expect(result.mime_type).toBe("image/png");
+		expect(result.meta).toEqual({ _type: "gradio.FileData" });
+	});
+
+	it("should throw an error for invalid input", () => {
+		const invalid_input = 123;
+
+		expect(() => {
+			// @ts-ignore
+			handle_file(invalid_input);
+		}).toThrowError(
+			"Invalid input: must be a URL, File, Blob, or Buffer object."
+		);
+	});
+});
+
+describe("handle_payload", () => {
+	it("should return an input payload with null in place of `state` when with_null_state is true", () => {
+		const resolved_payload = [2];
+		const dependency = {
+			inputs: [1, 2]
+		};
+		const components = [
+			{ id: 1, type: "number" },
+			{ id: 2, type: "state" }
+		];
+		const with_null_state = true;
+		const result = handle_payload(
+			resolved_payload,
+			// @ts-ignore
+			dependency,
+			components,
+			"input",
+			with_null_state
+		);
+		expect(result).toEqual([2, null]);
+	});
+	it("should return an input payload with null in place of two `state` components when with_null_state is true", () => {
+		const resolved_payload = ["hello", "goodbye"];
+		const dependency = {
+			inputs: [1, 2, 3, 4]
+		};
+		const components = [
+			{ id: 1, type: "textbox" },
+			{ id: 2, type: "state" },
+			{ id: 3, type: "textbox" },
+			{ id: 4, type: "state" }
+		];
+		const with_null_state = true;
+		const result = handle_payload(
+			resolved_payload,
+			// @ts-ignore
+			dependency,
+			components,
+			"input",
+			with_null_state
+		);
+		expect(result).toEqual(["hello", null, "goodbye", null]);
+	});
+
+	it("should return an output payload without the state component value when with_null_state is false", () => {
+		const resolved_payload = ["hello", null];
+		const dependency = {
+			inputs: [2, 3]
+		};
+		const components = [
+			{ id: 2, type: "textbox" },
+			{ id: 3, type: "state" }
+		];
+		const with_null_state = false;
+		const result = handle_payload(
+			resolved_payload,
+			// @ts-ignore
+			dependency,
+			components,
+			"output",
+			with_null_state
+		);
+		expect(result).toEqual(["hello"]);
+	});
+
+	it("should return an ouput payload without the two state component values when with_null_state is false", () => {
+		const resolved_payload = ["hello", null, "world", null];
+		const dependency = {
+			inputs: [2, 3, 4, 5]
+		};
+		const components = [
+			{ id: 2, type: "textbox" },
+			{ id: 3, type: "state" },
+			{ id: 4, type: "textbox" },
+			{ id: 5, type: "state" }
+		];
+		const with_null_state = false;
+		const result = handle_payload(
+			resolved_payload,
+			// @ts-ignore
+			dependency,
+			components,
+			"output",
+			with_null_state
+		);
+		expect(result).toEqual(["hello", "world"]);
+	});
+
+	it("should return an ouput payload with the two state component values when with_null_state is true", () => {
+		const resolved_payload = ["hello", null, "world", null];
+		const dependency = {
+			inputs: [2, 3, 4, 5]
+		};
+		const components = [
+			{ id: 2, type: "textbox" },
+			{ id: 3, type: "state" },
+			{ id: 4, type: "textbox" },
+			{ id: 5, type: "state" }
+		];
+		const with_null_state = true;
+		const result = handle_payload(
+			resolved_payload,
+			// @ts-ignore
+			dependency,
+			components,
+			"output",
+			with_null_state
+		);
+		expect(result).toEqual(["hello", null, "world", null]);
+	});
+
+	it("should return the same payload where no state components are defined", () => {
+		const resolved_payload = ["hello", "world"];
+		const dependency = {
+			inputs: [2, 3]
+		};
+		const components = [
+			{ id: 2, type: "textbox" },
+			{ id: 3, type: "textbox" }
+		];
+		const with_null_state = true;
+		const result = handle_payload(
+			resolved_payload,
+			// @ts-ignore
+			dependency,
+			components,
+			with_null_state
+		);
+		expect(result).toEqual(["hello", "world"]);
+	});
+});

package/src/test/handlers.ts

@@ -21,7 +21,7 @@ import {
 
 const root_url = "https://huggingface.co";
 
-const direct_space_url = "https://hmb-hello-world.hf.space";
+export const direct_space_url = "https://hmb-hello-world.hf.space";
 const private_space_url = "https://hmb-secret-world.hf.space";
 const private_auth_space_url = "https://hmb-private-auth-space.hf.space";
 
@@ -431,6 +431,14 @@ export const handlers: RequestHandler[] = [
 		});
 	}),
 	// queue requests
+	http.get(`${direct_space_url}/queue/data`, () => {
+		return new HttpResponse(JSON.stringify({ event_id: "123" }), {
+			status: 200,
+			headers: {
+				"Content-Type": "application/json"
+			}
+		});
+	}),
 	http.post(`${direct_space_url}/queue/join`, () => {
 		return new HttpResponse(JSON.stringify({ event_id: "123" }), {
 			status: 200,

package/src/test/stream.test.ts

@@ -1,6 +1,8 @@
 import { vi, type Mock } from "vitest";
 import { Client } from "../client";
+import { readable_stream } from "../utils/stream";
 import { initialise_server } from "./server";
+import { direct_space_url } from "./handlers.ts";
 
 import {
 	describe,
@@ -11,27 +13,23 @@ import {
 	afterAll,
 	beforeEach
 } from "vitest";
-import "./mock_eventsource.ts";
-import NodeEventSource from "eventsource";
 
 const server = initialise_server();
-const IS_NODE = process.env.TEST_MODE === "node";
 
 beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
 describe("open_stream", () => {
-	let mock_eventsource: any;
 	let app: Client;
 
 	beforeEach(async () => {
 		app = await Client.connect("hmb/hello_world");
 		app.stream = vi.fn().mockImplementation(() => {
-			mock_eventsource = IS_NODE
-				? new NodeEventSource("")
-				: new EventSource("");
-			return mock_eventsource;
+			app.stream_instance = readable_stream(
+				new URL(`${direct_space_url}/queue/data`)
+			);
+			return app.stream_instance;
 		});
 	});
 
@@ -58,8 +56,12 @@ describe("open_stream", () => {
 
 		expect(app.stream).toHaveBeenCalledWith(eventsource_mock_call);
 
-		const onMessageCallback = mock_eventsource.onmessage;
-		const onErrorCallback = mock_eventsource.onerror;
+		if (!app.stream_instance?.onmessage || !app.stream_instance?.onerror) {
+			throw new Error("stream instance is not defined");
+		}
+
+		const onMessageCallback = app.stream_instance.onmessage.bind(app);
+		const onErrorCallback = app.stream_instance.onerror.bind(app);
 
 		const message = { msg: "hello jerry" };
 

package/src/test/test_data.ts

@@ -46,7 +46,7 @@ export const transformed_api_info: ApiInfo<ApiData> = {
 					component: "Textbox"
 				}
 			],
-			type: { continuous: false, generator: false }
+			type: { continuous: false, generator: false, cancel: false }
 		}
 	},
 	unnamed_endpoints: {
@@ -68,7 +68,7 @@ export const transformed_api_info: ApiInfo<ApiData> = {
 					component: "Textbox"
 				}
 			],
-			type: { continuous: false, generator: false }
+			type: { continuous: false, generator: false, cancel: false }
 		}
 	}
 };
@@ -395,7 +395,8 @@ export const config_response: Config = {
 			cancels: [],
 			types: {
 				continuous: false,
-				generator: false
+				generator: false,
+				cancel: false
 			},
 			collects_event_data: false,
 			trigger_after: null,
@@ -421,7 +422,8 @@ export const config_response: Config = {
 			cancels: [],
 			types: {
 				continuous: false,
-				generator: false
+				generator: false,
+				cancel: false
 			},
 			collects_event_data: false,
 			trigger_after: null,
@@ -447,7 +449,8 @@ export const config_response: Config = {
 			cancels: [],
 			types: {
 				continuous: false,
-				generator: false
+				generator: false,
+				cancel: false
 			},
 			collects_event_data: false,
 			trigger_after: null,

package/src/test/upload_files.test.ts

@@ -29,7 +29,7 @@ describe("upload_files", () => {
 		expect(response.files[0]).toBe("lion.jpg");
 	});
 
-	it("should handle a server error when connected to a running app and uploading files", async () => {
+	it.skip("should handle a server error when connected to a running app and uploading files", async () => {
 		const client = await Client.connect("hmb/server_test");
 
 		const root_url = "https://hmb-server-test.hf.space";