@gradio/client 0.20.0 → 1.1.0

package/src/types.ts

@@ -1,6 +1,8 @@
 // API Data Types
 
 import { hardware_types } from "./helpers/spaces";
+import type { SvelteComponent } from "svelte";
+import type { ComponentType } from "svelte";
 
 export interface ApiData {
 	label: string;
@@ -49,6 +51,27 @@ export interface BlobRef {
 
 export type DataType = string | Buffer | Record<string, any> | any[];
 
+// custom class used for uploading local files
+export class Command {
+	type: string;
+	command: string;
+	meta: {
+		path: string;
+		name: string;
+		orig_path: string;
+	};
+	fileData?: FileData;
+
+	constructor(
+		command: string,
+		meta: { path: string; name: string; orig_path: string }
+	) {
+		this.type = "command";
+		this.command = command;
+		this.meta = meta;
+	}
+}
+
 // Function Signature Types
 
 export type SubmitFunction = (
@@ -56,20 +79,13 @@ export type SubmitFunction = (
 	data: unknown[] | Record<string, unknown>,
 	event_data?: unknown,
 	trigger_id?: number | null
-) => SubmitReturn;
+) => SubmitIterable<GradioEvent>;
 
 export type PredictFunction = (
 	endpoint: string | number,
 	data: unknown[] | Record<string, unknown>,
 	event_data?: unknown
-) => Promise<SubmitReturn>;
-
-// Event and Submission Types
-
-type event = <K extends EventType>(
-	eventType: K,
-	listener: EventListener<K>
-) => SubmitReturn;
+) => Promise<PredictReturn>;
 
 export type client_return = {
 	config: Config | undefined;
@@ -83,11 +99,17 @@ export type client_return = {
 	view_api: (_fetch: typeof fetch) => Promise<ApiInfo<JsApiData>>;
 };
 
-export type SubmitReturn = {
-	on: event;
-	off: event;
+export interface SubmitIterable<T> extends AsyncIterable<T> {
+	[Symbol.asyncIterator](): AsyncIterator<T>;
 	cancel: () => Promise<void>;
-	destroy: () => void;
+}
+
+export type PredictReturn = {
+	type: EventType;
+	time: Date;
+	data: unknown;
+	endpoint: string;
+	fn_index: number;
 };
 
 // Space Status Types
@@ -128,7 +150,7 @@ export interface Config {
 	analytics_enabled: boolean;
 	connect_heartbeat: boolean;
 	auth_message: string;
-	components: any[];
+	components: ComponentMeta[];
 	css: string | null;
 	js: string | null;
 	head: string | null;
@@ -153,6 +175,45 @@ export interface Config {
 	max_file_size?: number;
 }
 
+// todo: DRY up types
+export interface ComponentMeta {
+	type: string;
+	id: number;
+	has_modes: boolean;
+	props: SharedProps;
+	instance: SvelteComponent;
+	component: ComponentType<SvelteComponent>;
+	documentation?: Documentation;
+	children?: ComponentMeta[];
+	parent?: ComponentMeta;
+	value?: any;
+	component_class_id: string;
+	key: string | number | null;
+	rendered_in?: number;
+}
+
+interface SharedProps {
+	elem_id?: string;
+	elem_classes?: string[];
+	components?: string[];
+	server_fns?: string[];
+	interactive: boolean;
+	[key: string]: unknown;
+	root_url?: string;
+}
+
+export interface Documentation {
+	type?: TypeDescription;
+	description?: TypeDescription;
+	example_data?: string;
+}
+
+interface TypeDescription {
+	input_payload?: string;
+	response_object?: string;
+	payload?: string;
+}
+
 export interface Dependency {
 	id: number;
 	targets: [number, string][];
@@ -186,6 +247,7 @@ export interface Dependency {
 export interface DependencyTypes {
 	continuous: boolean;
 	generator: boolean;
+	cancel: boolean;
 }
 
 export interface Payload {
@@ -218,6 +280,8 @@ export interface ClientOptions {
 	hf_token?: `hf_${string}`;
 	status_callback?: SpaceStatusCallback | null;
 	auth?: [string, string] | null;
+	with_null_state?: boolean;
+	events?: EventType[];
 }
 
 export interface FileData {
@@ -236,25 +300,21 @@ export interface FileData {
 export type EventType = "data" | "status" | "log" | "render";
 
 export interface EventMap {
-	data: Payload;
-	status: Status;
+	data: PayloadMessage;
+	status: StatusMessage;
 	log: LogMessage;
 	render: RenderMessage;
 }
 
-export type Event<K extends EventType> = {
-	[P in K]: EventMap[P] & { type: P; endpoint: string; fn_index: number };
-}[K];
-export type EventListener<K extends EventType> = (event: Event<K>) => void;
-export type ListenerMap<K extends EventType> = {
-	[P in K]?: EventListener<K>[];
-};
-export interface LogMessage {
+export type GradioEvent = {
+	[P in EventType]: EventMap[P];
+}[EventType];
+
+export interface Log {
 	log: string;
 	level: "warning" | "info";
 }
-export interface RenderMessage {
-	fn_index: number;
+export interface Render {
 	data: {
 		components: any[];
 		layout: any;
@@ -283,3 +343,27 @@ export interface Status {
 	time?: Date;
 	changed_state_ids?: number[];
 }
+
+export interface StatusMessage extends Status {
+	type: "status";
+	endpoint: string;
+	fn_index: number;
+}
+
+export interface PayloadMessage extends Payload {
+	type: "data";
+	endpoint: string;
+	fn_index: number;
+}
+
+export interface LogMessage extends Log {
+	type: "log";
+	endpoint: string;
+	fn_index: number;
+}
+
+export interface RenderMessage extends Render {
+	type: "render";
+	endpoint: string;
+	fn_index: number;
+}

package/src/utils/handle_blob.ts

@@ -1,7 +1,17 @@
 import { update_object, walk_and_store_blobs } from "../helpers/data";
-import type { ApiData, EndpointInfo, JsApiData } from "../types";
+import {
+	Command,
+	type ApiData,
+	type EndpointInfo,
+	type JsApiData
+} from "../types";
 import { FileData } from "../upload";
 import type { Client } from "..";
+import {
+	FILE_PROCESSING_ERROR_MSG,
+	NODEJS_FS_ERROR_MSG,
+	ROOT_URL_ERROR_MSG
+} from "../constants";
 
 export async function handle_blob(
 	this: Client,
@@ -11,6 +21,8 @@ export async function handle_blob(
 ): Promise<unknown[]> {
 	const self = this;
 
+	await process_local_file_commands(self, data);
+
 	const blobRefs = await walk_and_store_blobs(
 		data,
 		undefined,
@@ -45,3 +57,81 @@ export async function handle_blob(
 
 	return data;
 }
+
+export async function process_local_file_commands(
+	client: Client,
+	data: unknown[]
+): Promise<void> {
+	const root = client.config?.root || client.config?.root_url;
+
+	if (!root) {
+		throw new Error(ROOT_URL_ERROR_MSG);
+	}
+
+	await recursively_process_commands(client, data);
+}
+
+async function recursively_process_commands(
+	client: Client,
+	data: any,
+	path: string[] = []
+): Promise<void> {
+	for (const key in data) {
+		if (data[key] instanceof Command) {
+			await process_single_command(client, data, key);
+		} else if (typeof data[key] === "object" && data[key] !== null) {
+			await recursively_process_commands(client, data[key], [...path, key]);
+		}
+	}
+}
+
+async function process_single_command(
+	client: Client,
+	data: any,
+	key: string
+): Promise<void> {
+	let cmd_item = data[key] as Command;
+	const root = client.config?.root || client.config?.root_url;
+
+	if (!root) {
+		throw new Error(ROOT_URL_ERROR_MSG);
+	}
+
+	try {
+		let fileBuffer: Buffer;
+		let fullPath: string;
+
+		// check if running in a Node.js environment
+		if (
+			typeof process !== "undefined" &&
+			process.versions &&
+			process.versions.node
+		) {
+			const fs = await import("fs/promises");
+			const path = await import("path");
+
+			fullPath = path.resolve(process.cwd(), cmd_item.meta.path);
+			fileBuffer = await fs.readFile(fullPath); // Read file from disk
+		} else {
+			throw new Error(NODEJS_FS_ERROR_MSG);
+		}
+
+		const file = new Blob([fileBuffer], { type: "application/octet-stream" });
+
+		const response = await client.upload_files(root, [file]);
+
+		const file_url = response.files && response.files[0];
+
+		if (file_url) {
+			const fileData = new FileData({
+				path: file_url,
+				orig_name: cmd_item.meta.name || ""
+			});
+
+			// replace the command object with the fileData object
+			data[key] = fileData;
+		}
+	} catch (error) {
+		console.error(FILE_PROCESSING_ERROR_MSG, error);
+	}
+}

package/src/utils/predict.ts

@@ -1,11 +1,11 @@
 import { Client } from "../client";
-import type { Dependency, SubmitReturn } from "../types";
+import type { Dependency, PredictReturn } from "../types";
 
 export async function predict(
 	this: Client,
 	endpoint: string | number,
 	data: unknown[] | Record<string, unknown>
-): Promise<SubmitReturn> {
+): Promise<PredictReturn> {
 	let data_returned = false;
 	let status_complete = false;
 	let dependency: Dependency;
@@ -30,29 +30,28 @@ export async function predict(
 	}
 
 	return new Promise(async (resolve, reject) => {
-		const app = this.submit(endpoint, data);
+		const app = this.submit(endpoint, data, null, null, true);
 		let result: unknown;
 
-		app
-			.on("data", (d: unknown) => {
-				// if complete message comes before data, resolve here
+		for await (const message of app) {
+			if (message.type === "data") {
 				if (status_complete) {
-					app.destroy();
-					resolve(d as SubmitReturn);
+					resolve(result as PredictReturn);
 				}
 				data_returned = true;
-				result = d;
-			})
-			.on("status", (status) => {
-				if (status.stage === "error") reject(status);
-				if (status.stage === "complete") {
+				result = message;
+			}
+
+			if (message.type === "status") {
+				if (message.stage === "error") reject(message);
+				if (message.stage === "complete") {
 					status_complete = true;
 					// if complete message comes after data, resolve here
 					if (data_returned) {
-						app.destroy();
-						resolve(result as SubmitReturn);
+						resolve(result as PredictReturn);
 					}
 				}
-			});
+			}
+		}
 	});
 }

package/src/utils/stream.ts

@@ -1,5 +1,6 @@
 import { BROKEN_CONNECTION_MSG } from "../constants";
 import type { Client } from "../client";
+import { stream } from "fetch-event-stream";
 
 export async function open_stream(this: Client): Promise<void> {
 	let {
@@ -11,6 +12,8 @@ export async function open_stream(this: Client): Promise<void> {
 		jwt
 	} = this;
 
+	const that = this;
+
 	if (!config) {
 		throw new Error("Could not resolve app config");
 	}
@@ -28,7 +31,7 @@ export async function open_stream(this: Client): Promise<void> {
 		url.searchParams.set("__sign", jwt);
 	}
 
-	stream = await this.stream(url);
+	stream = this.stream(url);
 
 	if (!stream) {
 		console.warn("Cannot connect to SSE endpoint: " + url.toString());
@@ -38,7 +41,7 @@ export async function open_stream(this: Client): Promise<void> {
 	stream.onmessage = async function (event: MessageEvent) {
 		let _data = JSON.parse(event.data);
 		if (_data.msg === "close_stream") {
-			close_stream(stream_status, stream);
+			close_stream(stream_status, that.abort_controller);
 			return;
 		}
 		const event_id = _data.event_id;
@@ -51,19 +54,19 @@ export async function open_stream(this: Client): Promise<void> {
 		} else if (event_callbacks[event_id] && config) {
 			if (
 				_data.msg === "process_completed" &&
-				["sse", "sse_v1", "sse_v2", "sse_v2.1"].includes(config.protocol)
+				["sse", "sse_v1", "sse_v2", "sse_v2.1", "sse_v3"].includes(
+					config.protocol
+				)
 			) {
 				unclosed_events.delete(event_id);
-				if (unclosed_events.size === 0) {
-					close_stream(stream_status, stream);
-				}
 			}
 			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
+			if (typeof window !== "undefined" && typeof document !== "undefined") {
+				// fn(_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
+				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);
+				fn(_data);
 			}
 		} else {
 			if (!pending_stream_messages[event_id]) {
@@ -81,17 +84,16 @@ export async function open_stream(this: Client): Promise<void> {
 				})
 			)
 		);
-		close_stream(stream_status, stream);
 	};
 }
 
 export function close_stream(
 	stream_status: { open: boolean },
-	stream: EventSource | null
+	abort_controller: AbortController | null
 ): void {
-	if (stream_status && stream) {
+	if (stream_status) {
 		stream_status.open = false;
-		stream?.close();
+		abort_controller?.abort();
 	}
 }
 
@@ -173,3 +175,54 @@ function apply_edit(
 	}
 	return target;
 }
+
+export function readable_stream(
+	input: RequestInfo | URL,
+	init: RequestInit = {}
+): EventSource {
+	const instance: EventSource & { readyState: number } = {
+		close: () => {
+			throw new Error("Method not implemented.");
+		},
+		onerror: null,
+		onmessage: null,
+		onopen: null,
+		readyState: 0,
+		url: input.toString(),
+		withCredentials: false,
+		CONNECTING: 0,
+		OPEN: 1,
+		CLOSED: 2,
+		addEventListener: () => {
+			throw new Error("Method not implemented.");
+		},
+		dispatchEvent: () => {
+			throw new Error("Method not implemented.");
+		},
+		removeEventListener: () => {
+			throw new Error("Method not implemented.");
+		}
+	};
+
+	stream(input, init)
+		.then(async (res) => {
+			instance.readyState = instance.OPEN;
+			try {
+				for await (const chunk of res) {
+					//@ts-ignore
+					instance.onmessage && instance.onmessage(chunk);
+				}
+				instance.readyState = instance.CLOSED;
+			} catch (e) {
+				instance.onerror && instance.onerror(e as Event);
+				instance.readyState = instance.CLOSED;
+			}
+		})
+		.catch((e) => {
+			console.error(e);
+			instance.onerror && instance.onerror(e as Event);
+			instance.readyState = instance.CLOSED;
+		});
+
+	return instance as EventSource;
+}