@gradio/client 0.4.2 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @gradio/client
 
+## 0.5.0
+
+### Highlights
+
+#### new `FileExplorer` component ([#5672](https://github.com/gradio-app/gradio/pull/5672) [`e4a307ed6`](https://github.com/gradio-app/gradio/commit/e4a307ed6cde3bbdf4ff2f17655739addeec941e))
+
+Thanks to a new capability that allows components to communicate directly with the server _without_ passing data via the value, we have created a new `FileExplorer` component.
+
+This component allows you to populate the explorer by passing a glob, but only provides the selected file(s) in your prediction function. 
+
+Users can then navigate the virtual filesystem and select files which will be accessible in your predict function. This component will allow developers to build more complex spaces, with more flexible input options.
+
+![output](https://github.com/pngwn/MDsveX/assets/12937446/ef108f0b-0e84-4292-9984-9dc66b3e144d)
+
+For more information check the [`FileExplorer` documentation](https://gradio.app/docs/fileexplorer).
+
+ Thanks [@aliabid94](https://github.com/aliabid94)!
+
+### Features
+
+- [#5787](https://github.com/gradio-app/gradio/pull/5787) [`caeee8bf7`](https://github.com/gradio-app/gradio/commit/caeee8bf7821fd5fe2f936ed82483bed00f613ec) - ensure the client does not depend on `window` when running in a node environment.  Thanks [@gibiee](https://github.com/gibiee)!
+
+### Fixes
+
+- [#5776](https://github.com/gradio-app/gradio/pull/5776) [`c0fef4454`](https://github.com/gradio-app/gradio/commit/c0fef44541bfa61568bdcfcdfc7d7d79869ab1df) - Revert replica proxy logic and instead implement using the `root` variable.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+
 ## 0.4.2
 
 ### Features

package/dist/client.d.ts

@@ -7,6 +7,7 @@ type client_return = {
     predict: predict;
     config: Config;
     submit: (endpoint: string | number, data?: unknown[], event_data?: unknown) => SubmitReturn;
+    component_server: (component_id: number, fn_name: string, data: unknown[]) => any;
     view_api: (c?: Config) => Promise<ApiInfo<JsApiData>>;
 };
 type SubmitReturn = {

package/dist/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -4,6 +4,12 @@ function semiver(a, b, bool) {
   b = b.split(".");
   return fn(a[0], b[0]) || fn(a[1], b[1]) || (b[2] = b.slice(2).join("."), bool = /[.-]/.test(a[2] = a.slice(2).join(".")), bool == /[.-]/.test(b[2]) ? fn(a[2], b[2]) : bool ? -1 : 1);
 }
+function resolve_root(base_url, root_path, prioritize_base) {
+  if (root_path.startsWith("http://") || root_path.startsWith("https://")) {
+    return prioritize_base ? base_url : root_path;
+  }
+  return base_url + root_path;
+}
 function determine_protocol(endpoint) {
   if (endpoint.startsWith("http")) {
     const { protocol, host } = new URL(endpoint);
@@ -261,7 +267,8 @@ function api_factory(fetch_implementation, WebSocket_factory) {
       const return_obj = {
         predict,
         submit,
-        view_api
+        view_api,
+        component_server
         // duplicate
       };
       const transform_files = normalise_files ?? true;
@@ -408,11 +415,14 @@ function api_factory(fetch_implementation, WebSocket_factory) {
         let payload;
         let complete = false;
         const listener_map = {};
-        const url_params = new URLSearchParams(
-          window.location.search
-        ).toString();
+        let url_params = "";
+        if (typeof window !== "undefined") {
+          url_params = new URLSearchParams(
+            window.location.search
+          ).toString();
+        }
         handle_blob2(
-          `${http_protocol}//${host + config.path}`,
+          `${http_protocol}//${resolve_root(host, config.path, true)}`,
           data,
           api_info,
           hf_token
@@ -428,7 +438,7 @@ function api_factory(fetch_implementation, WebSocket_factory) {
               time: /* @__PURE__ */ new Date()
             });
             post_data2(
-              `${http_protocol}//${host + config.path}/run${_endpoint.startsWith("/") ? _endpoint : `/${_endpoint}`}${url_params ? "?" + url_params : ""}`,
+              `${http_protocol}//${resolve_root(host, config.path, true)}/run${_endpoint.startsWith("/") ? _endpoint : `/${_endpoint}`}${url_params ? "?" + url_params : ""}`,
               {
                 ...payload,
                 session_hash
@@ -489,7 +499,11 @@ function api_factory(fetch_implementation, WebSocket_factory) {
               fn_index,
               time: /* @__PURE__ */ new Date()
             });
-            let url = new URL(`${ws_protocol}://${host}${config.path}
+            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);
@@ -628,7 +642,11 @@ function api_factory(fetch_implementation, WebSocket_factory) {
           }
           try {
             await fetch_implementation(
-              `${http_protocol}//${host + config.path}/reset`,
+              `${http_protocol}//${resolve_root(
+                host,
+                config.path,
+                true
+              )}/reset`,
               {
                 headers: { "Content-Type": "application/json" },
                 method: "POST",
@@ -655,6 +673,42 @@ function api_factory(fetch_implementation, WebSocket_factory) {
           destroy
         };
       }
+      async function component_server(component_id, fn_name, data) {
+        var _a;
+        const headers = { "Content-Type": "application/json" };
+        if (hf_token) {
+          headers.Authorization = `Bearer ${hf_token}`;
+        }
+        let root_url;
+        let component = config.components.find(
+          (comp) => comp.id === component_id
+        );
+        if ((_a = component == null ? void 0 : component.props) == null ? void 0 : _a.root_url) {
+          root_url = component.props.root_url;
+        } else {
+          root_url = `${http_protocol}//${host + config.path}/`;
+        }
+        const response = await fetch_implementation(
+          `${root_url}component_server/`,
+          {
+            method: "POST",
+            body: JSON.stringify({
+              data,
+              component_id,
+              fn_name,
+              session_hash
+            }),
+            headers
+          }
+        );
+        if (!response.ok) {
+          throw new Error(
+            "Could not connect to component server: " + response.statusText
+          );
+        }
+        const output = await response.json();
+        return output;
+      }
       async function view_api(config2) {
         if (api)
           return api;
@@ -946,7 +1000,7 @@ async function resolve_config(fetch_implementation, endpoint, 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 = endpoint + config.root;
+    config.root = resolve_root(endpoint, config.root, false);
     return { ...config, path };
   } else if (endpoint) {
     let response = await fetch_implementation(`${endpoint}/config`, {

package/dist/utils.d.ts

@@ -1,4 +1,15 @@
 import type { Config } from "./types.js";
+/**
+ * This function is used to resolve the URL for making requests when the app has a root path.
+ * The root path could be a path suffix like "/app" which is appended to the end of the base URL. Or
+ * it could be a full URL like "https://abidlabs-test-client-replica--gqf2x.hf.space" which is used when hosting
+ * Gradio apps on Hugging Face Spaces.
+ * @param {string} base_url The base URL at which the Gradio server is hosted
+ * @param {string} root_path The root path, which could be a path suffix (e.g. mounted in FastAPI app) or a full URL (e.g. hosted on Hugging Face Spaces)
+ * @param {boolean} prioritize_base Whether to prioritize the base URL over the root path. This is used when both the base path and root paths are full URLs. For example, for fetching files the root path should be prioritized, but for making request, the base URL should be prioritized.
+ * @returns {string} the resolved URL
+ */
+export declare function resolve_root(base_url: string, root_path: string, prioritize_base: boolean): string;
 export declare function determine_protocol(endpoint: string): {
     ws_protocol: "ws" | "wss";
     http_protocol: "http:" | "https:";

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG;IACrD,WAAW,EAAE,IAAI,GAAG,KAAK,CAAC;IAC1B,aAAa,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;CACb,CAwBA;AAED,eAAO,MAAM,aAAa,QAAqB,CAAC;AAChD,eAAO,MAAM,eAAe,QAAwB,CAAC;AACrD,wBAAsB,gBAAgB,CACrC,aAAa,EAAE,MAAM,EACrB,KAAK,CAAC,EAAE,MAAM,MAAM,EAAE,GACpB,OAAO,CAAC;IACV,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,IAAI,GAAG,KAAK,CAAC;IAC1B,aAAa,EAAE,OAAO,GAAG,QAAQ,CAAC;CAClC,CAAC,CA4CD;AAED,wBAAgB,gBAAgB,CAC/B,GAAG,EAAE,MAAM,CAAC,cAAc,CAAC,GACzB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAQxB;AAID,wBAAsB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAe5E;AAED,wBAAsB,kBAAkB,CACvC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,MAAM,EAAE,GACnB,OAAO,CAAC,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAqB1C;AAED,wBAAsB,kBAAkB,CACvC,QAAQ,EAAE,MAAM,EAChB,YAAY,EAAE,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,EAC7C,KAAK,EAAE,MAAM,MAAM,EAAE,GACnB,OAAO,CAAC,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAuB1C;AAED,wBAAsB,iBAAiB,CACtC,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,MAAM,EAAE,GACnB,OAAO,CAAC,MAAM,CAAC,CAuBjB;AAED,eAAO,MAAM,cAAc,0GAQjB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC3B,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,EACjB,eAAe,EAAE,OAAO,GACtB,MAAM,CAKR;AAED,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG;IACrD,WAAW,EAAE,IAAI,GAAG,KAAK,CAAC;IAC1B,aAAa,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;CACb,CAwBA;AAED,eAAO,MAAM,aAAa,QAAqB,CAAC;AAChD,eAAO,MAAM,eAAe,QAAwB,CAAC;AACrD,wBAAsB,gBAAgB,CACrC,aAAa,EAAE,MAAM,EACrB,KAAK,CAAC,EAAE,MAAM,MAAM,EAAE,GACpB,OAAO,CAAC;IACV,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,IAAI,GAAG,KAAK,CAAC;IAC1B,aAAa,EAAE,OAAO,GAAG,QAAQ,CAAC;CAClC,CAAC,CA4CD;AAED,wBAAgB,gBAAgB,CAC/B,GAAG,EAAE,MAAM,CAAC,cAAc,CAAC,GACzB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAQxB;AAID,wBAAsB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAe5E;AAED,wBAAsB,kBAAkB,CACvC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,MAAM,EAAE,GACnB,OAAO,CAAC,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAqB1C;AAED,wBAAsB,kBAAkB,CACvC,QAAQ,EAAE,MAAM,EAChB,YAAY,EAAE,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,EAC7C,KAAK,EAAE,MAAM,MAAM,EAAE,GACnB,OAAO,CAAC,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAuB1C;AAED,wBAAsB,iBAAiB,CACtC,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,MAAM,EAAE,GACnB,OAAO,CAAC,MAAM,CAAC,CAuBjB;AAED,eAAO,MAAM,cAAc,0GAQjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/client",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Gradio API client",
   "type": "module",
   "main": "dist/index.js",

package/src/client.ts

@@ -8,7 +8,8 @@ import {
 	get_space_hardware,
 	set_space_hardware,
 	set_space_timeout,
-	hardware_types
+	hardware_types,
+	resolve_root
 } from "./utils.js";
 
 import type {
@@ -45,6 +46,11 @@ type client_return = {
 		data?: unknown[],
 		event_data?: unknown
 	) => SubmitReturn;
+	component_server: (
+		component_id: number,
+		fn_name: string,
+		data: unknown[]
+	) => any;
 	view_api: (c?: Config) => Promise<ApiInfo<JsApiData>>;
 };
 
@@ -243,7 +249,8 @@ export function api_factory(
 			const return_obj = {
 				predict,
 				submit,
-				view_api
+				view_api,
+				component_server
 				// duplicate
 			};
 
@@ -422,12 +429,15 @@ export function api_factory(
 				let payload: Payload;
 				let complete: false | Record<string, any> = false;
 				const listener_map: ListenerMap<EventType> = {};
-				const url_params = new URLSearchParams(
-					window.location.search
-				).toString();
+				let url_params = ""
+				if (typeof(window) !== "undefined") {
+					url_params = new URLSearchParams(
+						window.location.search
+					).toString();
+				}
 
 				handle_blob(
-					`${http_protocol}//${host + config.path}`,
+					`${http_protocol}//${resolve_root(host, config.path, true)}`,
 					data,
 					api_info,
 					hf_token
@@ -444,7 +454,7 @@ export function api_factory(
 						});
 
 						post_data(
-							`${http_protocol}//${host + config.path}/run${
+							`${http_protocol}//${resolve_root(host, config.path, true)}/run${
 								_endpoint.startsWith("/") ? _endpoint : `/${_endpoint}`
 							}${url_params ? "?" + url_params : ""}`,
 							{
@@ -512,8 +522,11 @@ export function api_factory(
 							fn_index,
 							time: new Date()
 						});
-
-						let url = new URL(`${ws_protocol}://${host}${config.path}
+						let url = new URL(`${ws_protocol}://${resolve_root(
+							host,
+							config.path,
+							true
+						)}
 							/queue/join${url_params ? "?" + url_params : ""}`);
 
 						if (jwt) {
@@ -677,7 +690,11 @@ export function api_factory(
 
 					try {
 						await fetch_implementation(
-							`${http_protocol}//${host + config.path}/reset`,
+							`${http_protocol}//${resolve_root(
+								host,
+								config.path,
+								true
+							)}/reset`,
 							{
 								headers: { "Content-Type": "application/json" },
 								method: "POST",
@@ -707,6 +724,51 @@ export function api_factory(
 				};
 			}
 
+			async function component_server(
+				component_id: number,
+				fn_name: string,
+				data: unknown[]
+			): Promise<any> {
+				const headers: {
+					Authorization?: string;
+					"Content-Type": "application/json";
+				} = { "Content-Type": "application/json" };
+				if (hf_token) {
+					headers.Authorization = `Bearer ${hf_token}`;
+				}
+				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 = `${http_protocol}//${host + config.path}/`;
+				}
+				const response = await fetch_implementation(
+					`${root_url}component_server/`,
+					{
+						method: "POST",
+						body: JSON.stringify({
+							data: data,
+							component_id: component_id,
+							fn_name: fn_name,
+							session_hash: session_hash
+						}),
+						headers
+					}
+				);
+
+				if (!response.ok) {
+					throw new Error(
+						"Could not connect to component server: " + response.statusText
+					);
+				}
+
+				const output = await response.json();
+				return output;
+			}
+
 			async function view_api(config?: Config): Promise<ApiInfo<JsApiData>> {
 				if (api) return api;
 
@@ -1152,7 +1214,7 @@ async function resolve_config(
 	) {
 		const path = window.gradio_config.root;
 		const config = window.gradio_config;
-		config.root = endpoint + config.root;
+		config.root = resolve_root(endpoint, config.root, false);
 		return { ...config, path: path };
 	} else if (endpoint) {
 		let response = await fetch_implementation(`${endpoint}/config`, {

package/src/utils.ts

@@ -1,5 +1,26 @@
 import type { Config } from "./types.js";
 
+/**
+ * This function is used to resolve the URL for making requests when the app has a root path.
+ * The root path could be a path suffix like "/app" which is appended to the end of the base URL. Or
+ * it could be a full URL like "https://abidlabs-test-client-replica--gqf2x.hf.space" which is used when hosting
+ * Gradio apps on Hugging Face Spaces.
+ * @param {string} base_url The base URL at which the Gradio server is hosted
+ * @param {string} root_path The root path, which could be a path suffix (e.g. mounted in FastAPI app) or a full URL (e.g. hosted on Hugging Face Spaces)
+ * @param {boolean} prioritize_base Whether to prioritize the base URL over the root path. This is used when both the base path and root paths are full URLs. For example, for fetching files the root path should be prioritized, but for making request, the base URL should be prioritized.
+ * @returns {string} the resolved URL
+ */
+export function resolve_root(
+	base_url: string,
+	root_path: string,
+	prioritize_base: boolean
+): string {
+	if (root_path.startsWith("http://") || root_path.startsWith("https://")) {
+		return prioritize_base ? base_url : root_path;
+	}
+	return base_url + root_path;
+}
+
 export function determine_protocol(endpoint: string): {
 	ws_protocol: "ws" | "wss";
 	http_protocol: "http:" | "https:";