@gradio/client 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @gradio/client
 
+## 0.1.1
+
+### Patch Changes
+
+- [#4201](https://github.com/gradio-app/gradio/pull/4201) [`da5b4ee1`](https://github.com/gradio-app/gradio/commit/da5b4ee11721175858ded96e5710225369097f74) Thanks [@pngwn](https://github.com/pngwn)! - Ensure semiver is bundled so CDN links work correctly.
+
+- [#4202](https://github.com/gradio-app/gradio/pull/4202) [`a26e9afd`](https://github.com/gradio-app/gradio/commit/a26e9afde319382993e6ddc77cc4e56337a31248) Thanks [@pngwn](https://github.com/pngwn)! - Ensure all URLs returned by the client are complete URLs with the correct host instead of an absolute path relative to a server.
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -7,7 +7,7 @@ A javascript (and typescript) client to call Gradio APIs.
 The Gradio JavaScript client is available on npm as `@gradio/client`. You can install it as below:
 
 ```sh
-npm i -D @gradio/client
+npm i @gradio/client
 ```
 
 ## Usage

package/dist/client.d.ts

@@ -1,5 +1,5 @@
 import { hardware_types } from "./utils.js";
-import type { EventType, EventListener, PostResponse, UploadResponse, SpaceStatusCallback } from "./types.js";
+import type { EventType, EventListener, PostResponse, UploadResponse, SpaceStatusCallback, FileData } from "./types.js";
 import type { Config } from "./types.js";
 declare type event = <K extends EventType>(eventType: K, listener: EventListener<K>) => SubmitReturn;
 declare type predict = (endpoint: string | number, data?: unknown[], event_data?: unknown) => Promise<unknown>;
@@ -12,7 +12,7 @@ declare type client_return = {
 declare type SubmitReturn = {
     on: event;
     off: event;
-    cancel: () => void;
+    cancel: () => Promise<void>;
     destroy: () => void;
 };
 export declare function post_data(url: string, body: unknown, token?: `hf_${string}`): Promise<[PostResponse, number]>;
@@ -28,7 +28,9 @@ export declare function duplicate(app_reference: string, options: {
 export declare function client(app_reference: string, options?: {
     hf_token?: `hf_${string}`;
     status_callback?: SpaceStatusCallback;
+    normalise_files?: boolean;
 }): Promise<client_return>;
+export declare function normalise_file(file: Array<FileData> | FileData | string | null, root: string, root_url: string | null): Array<FileData> | FileData | null;
 export declare function handle_blob(endpoint: string, data: unknown[], api_info: any, token?: `hf_${string}`): Promise<unknown[]>;
 export declare function walk_and_store_blobs(param: any, type?: any, path?: any[], root?: boolean, api_info?: any): Promise<any[]>;
 export {};

package/dist/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAEA,OAAO,EAQN,cAAc,EACd,MAAM,YAAY,CAAC;AAEpB,OAAO,KAAK,EACX,SAAS,EACT,aAAa,EAIb,YAAY,EACZ,cAAc,EAGd,mBAAmB,EACnB,MAAM,YAAY,CAAC;AAEpB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC,aAAK,KAAK,GAAG,CAAC,CAAC,SAAS,SAAS,EAChC,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,KACtB,YAAY,CAAC;AAClB,aAAK,OAAO,GAAG,CACd,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,IAAI,CAAC,EAAE,OAAO,EAAE,EAChB,UAAU,CAAC,EAAE,OAAO,KAChB,OAAO,CAAC,OAAO,CAAC,CAAC;AAEtB,aAAK,aAAa,GAAG;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,CACP,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,IAAI,CAAC,EAAE,OAAO,EAAE,EAChB,UAAU,CAAC,EAAE,OAAO,KAChB,YAAY,CAAC;IAClB,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;CACvD,CAAC;AAEF,aAAK,YAAY,GAAG;IACnB,EAAE,EAAE,KAAK,CAAC;IACV,GAAG,EAAE,KAAK,CAAC;IACX,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAKF,wBAAsB,SAAS,CAC9B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,OAAO,EACb,KAAK,CAAC,EAAE,MAAM,MAAM,EAAE,GACpB,OAAO,CAAC,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAmBjC;AAED,eAAO,IAAI,QAAQ,KAAA,CAAC;AAEpB,wBAAsB,YAAY,CACjC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,EAClB,KAAK,CAAC,EAAE,MAAM,MAAM,EAAE,GACpB,OAAO,CAAC,cAAc,CAAC,CAuBzB;AAED,wBAAsB,SAAS,CAC9B,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE;IACR,QAAQ,EAAE,MAAM,MAAM,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,mBAAmB,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,0BAyED;AAED,wBAAsB,MAAM,CAC3B,aAAa,EAAE,MAAM,EACrB,OAAO,GAAE;IACR,QAAQ,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAC1B,eAAe,CAAC,EAAE,mBAAmB,CAAC;CACjC,GACJ,OAAO,CAAC,aAAa,CAAC,CAucxB;AAyJD,wBAAsB,WAAW,CAChC,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,OAAO,EAAE,EACf,QAAQ,KAAA,EACR,KAAK,CAAC,EAAE,MAAM,MAAM,EAAE,GACpB,OAAO,CAAC,OAAO,EAAE,CAAC,CA0CpB;AAUD,wBAAsB,oBAAoB,CACzC,KAAK,KAAA,EACL,IAAI,MAAY,EAChB,IAAI,QAAK,EACT,IAAI,UAAQ,EACZ,QAAQ,MAAY,kBAyEpB"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,4 +1,9 @@
-import semiver from "semiver";
+var fn = new Intl.Collator(0, { numeric: 1 }).compare;
+function semiver(a, b, bool) {
+  a = a.split(".");
+  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 determine_protocol(endpoint) {
   if (endpoint.startsWith("http")) {
     const { protocol, host } = new URL(endpoint);
@@ -249,15 +254,16 @@ async function duplicate(app_reference, options) {
     throw new Error(e);
   }
 }
-async function client(app_reference, options = {}) {
+async function client(app_reference, options = { normalise_files: true }) {
   return new Promise(async (res) => {
-    const { status_callback, hf_token } = options;
+    const { status_callback, hf_token, normalise_files } = options;
     const return_obj = {
       predict,
       submit,
       view_api
       // duplicate
     };
+    let transform_files = normalise_files ?? true;
     if (typeof window === "undefined" || !("WebSocket" in window)) {
       const ws = await import("./wrapper-b7460963.js");
       NodeBlob = (await import("node:buffer")).Blob;
@@ -268,7 +274,6 @@ async function client(app_reference, options = {}) {
     const last_status = {};
     let config;
     let api_map = {};
-    const listener_map = {};
     let jwt = false;
     if (hf_token && space_id) {
       jwt = await get_jwt(space_id, hf_token);
@@ -307,13 +312,10 @@ async function client(app_reference, options = {}) {
         }
     }
     try {
-      console.log(`${http_protocol}//${host}`);
       config = await resolve_config(`${http_protocol}//${host}`, hf_token);
-      console.log(config);
       const _config = await config_success(config);
       res(_config);
     } catch (e) {
-      console.log(space_id, e);
       if (space_id) {
         check_space_status(
           space_id,
@@ -372,6 +374,8 @@ async function client(app_reference, options = {}) {
       let websocket;
       const _endpoint = typeof endpoint === "number" ? "/predict" : endpoint;
       let payload;
+      let complete = false;
+      const listener_map = {};
       handle_blob(
         `${http_protocol}//${host + config.path}`,
         data,
@@ -396,21 +400,27 @@ async function client(app_reference, options = {}) {
             },
             hf_token
           ).then(([output, status_code]) => {
+            transform_files ? transform_output(
+              output.data,
+              api_info,
+              config.root,
+              config.root_url
+            ) : output.data;
             if (status_code == 200) {
               fire_event({
-                type: "status",
+                type: "data",
                 endpoint: _endpoint,
                 fn_index,
-                stage: "complete",
-                eta: output.average_duration,
-                queue: false,
+                data: output.data,
                 time: /* @__PURE__ */ new Date()
               });
               fire_event({
-                type: "data",
+                type: "status",
                 endpoint: _endpoint,
                 fn_index,
-                data: output.data,
+                stage: "complete",
+                eta: output.average_duration,
+                queue: false,
                 time: /* @__PURE__ */ new Date()
               });
             } else {
@@ -469,7 +479,7 @@ async function client(app_reference, options = {}) {
               _data,
               last_status[fn_index]
             );
-            if (type === "update" && status) {
+            if (type === "update" && status && !complete) {
               fire_event({
                 type: "status",
                 endpoint: _endpoint,
@@ -486,16 +496,7 @@ async function client(app_reference, options = {}) {
             } else if (type === "data") {
               websocket.send(JSON.stringify({ ...payload, session_hash }));
             } else if (type === "complete") {
-              fire_event({
-                type: "status",
-                time: /* @__PURE__ */ new Date(),
-                ...status,
-                stage: status == null ? void 0 : status.stage,
-                queue: true,
-                endpoint: _endpoint,
-                fn_index
-              });
-              websocket.close();
+              complete = status;
             } else if (type === "generating") {
               fire_event({
                 type: "status",
@@ -511,10 +512,27 @@ async function client(app_reference, options = {}) {
               fire_event({
                 type: "data",
                 time: /* @__PURE__ */ new Date(),
-                data: data2.data,
+                data: transform_files ? transform_output(
+                  data2.data,
+                  api_info,
+                  config.root,
+                  config.root_url
+                ) : data2.data,
                 endpoint: _endpoint,
                 fn_index
               });
+              if (complete) {
+                fire_event({
+                  type: "status",
+                  time: /* @__PURE__ */ new Date(),
+                  ...complete,
+                  stage: status == null ? void 0 : status.stage,
+                  queue: true,
+                  endpoint: _endpoint,
+                  fn_index
+                });
+                websocket.close();
+              }
             }
           };
           if (semiver(config.version || "2.0.0", "3.6") < 0) {
@@ -545,37 +563,41 @@ async function client(app_reference, options = {}) {
         return { on, off, cancel, destroy };
       }
       async function cancel() {
-        fire_event({
-          type: "status",
-          endpoint: _endpoint,
-          fn_index,
+        const _status = {
           stage: "complete",
           queue: false,
           time: /* @__PURE__ */ new Date()
+        };
+        complete = _status;
+        fire_event({
+          ..._status,
+          type: "status",
+          endpoint: _endpoint,
+          fn_index
         });
+        if (websocket && websocket.readyState === 0) {
+          websocket.addEventListener("open", () => {
+            websocket.close();
+          });
+        } else {
+          websocket.close();
+        }
         try {
           await fetch(`${http_protocol}//${host + config.path}/reset`, {
+            headers: { "Content-Type": "application/json" },
             method: "POST",
-            body: JSON.stringify(session_hash)
+            body: JSON.stringify({ fn_index, session_hash })
           });
         } catch (e) {
           console.warn(
             "The `/reset` endpoint could not be called. Subsequent endpoint results may be unreliable."
           );
         }
-        if (websocket && websocket.readyState === 0) {
-          websocket.addEventListener("open", () => {
-            websocket.close();
-          });
-        } else {
-          websocket.close();
-        }
-        destroy();
       }
       function destroy() {
         for (const event_type in listener_map) {
-          listener_map[event_type].forEach((fn) => {
-            off(event_type, fn);
+          listener_map[event_type].forEach((fn2) => {
+            off(event_type, fn2);
           });
         }
       }
@@ -627,6 +649,50 @@ async function client(app_reference, options = {}) {
     }
   });
 }
+function transform_output(data, api_info, root_url, remote_url) {
+  let transformed_data = data.map((d, i) => {
+    var _a, _b, _c, _d;
+    if (((_b = (_a = api_info.returns) == null ? void 0 : _a[i]) == null ? void 0 : _b.component) === "File") {
+      return normalise_file(d, root_url, remote_url);
+    } else if (((_d = (_c = api_info.returns) == null ? void 0 : _c[i]) == null ? void 0 : _d.component) === "Gallery") {
+      return d.map((img) => {
+        return Array.isArray(img) ? [normalise_file(img[0], root_url, remote_url), img[1]] : [normalise_file(img, root_url, remote_url), null];
+      });
+    } else if (typeof d === "object" && d.is_file) {
+      return normalise_file(d, root_url, remote_url);
+    } else {
+      return d;
+    }
+  });
+  return transformed_data;
+}
+function normalise_file(file, root, root_url) {
+  if (file == null)
+    return null;
+  if (typeof file === "string") {
+    return {
+      name: "file_data",
+      data: file
+    };
+  } else if (Array.isArray(file)) {
+    const normalized_file = [];
+    for (const x of file) {
+      if (x === null) {
+        normalized_file.push(null);
+      } else {
+        normalized_file.push(normalise_file(x, root, root_url));
+      }
+    }
+    return normalized_file;
+  } else if (file.is_file) {
+    if (!root_url) {
+      file.data = root + "/file=" + file.name;
+    } else {
+      file.data = "/proxy=" + root_url + "/file=" + file.name;
+    }
+  }
+  return file;
+}
 function get_type(type, component, serializer, signature_type) {
   switch (type.type) {
     case "string":
@@ -841,9 +907,7 @@ async function resolve_config(endpoint, token) {
     config.root = endpoint + config.root;
     return { ...config, path };
   } else if (endpoint) {
-    console.log(`${endpoint}/config`, headers);
     let response = await fetch(`${endpoint}/config`, { headers });
-    console.log(response);
     if (response.status === 200) {
       const config = await response.json();
       config.path = config.path ?? "";

package/dist/types.d.ts

@@ -9,6 +9,7 @@ export interface Config {
     layout: any;
     mode: "blocks" | "interface";
     root: string;
+    root_url?: string;
     theme: string;
     title: string;
     version: string;
@@ -82,4 +83,14 @@ export declare type EventListener<K extends EventType> = (event: Event<K>) => vo
 export declare type ListenerMap<K extends EventType> = {
     [P in K]?: EventListener<K>[];
 };
+export interface FileData {
+    name: string;
+    orig_name?: string;
+    size?: number;
+    data: string;
+    blob?: File;
+    is_file?: boolean;
+    mime_type?: string;
+    alt_text?: string;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/client",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Gradio UI packages",
   "type": "module",
   "main": "dist/index.js",

package/src/client.ts

@@ -21,7 +21,8 @@ import type {
 	UploadResponse,
 	Status,
 	SpaceStatus,
-	SpaceStatusCallback
+	SpaceStatusCallback,
+	FileData
 } from "./types.js";
 
 import type { Config } from "./types.js";
@@ -50,7 +51,7 @@ type client_return = {
 type SubmitReturn = {
 	on: event;
 	off: event;
-	cancel: () => void;
+	cancel: () => Promise<void>;
 	destroy: () => void;
 };
 
@@ -201,10 +202,11 @@ export async function client(
 	options: {
 		hf_token?: `hf_${string}`;
 		status_callback?: SpaceStatusCallback;
-	} = {}
+		normalise_files?: boolean;
+	} = { normalise_files: true }
 ): Promise<client_return> {
 	return new Promise(async (res) => {
-		const { status_callback, hf_token } = options;
+		const { status_callback, hf_token, normalise_files } = options;
 		const return_obj = {
 			predict,
 			submit,
@@ -212,6 +214,7 @@ export async function client(
 			// duplicate
 		};
 
+		let transform_files = normalise_files ?? true;
 		if (typeof window === "undefined" || !("WebSocket" in window)) {
 			const ws = await import("ws");
 			NodeBlob = (await import("node:buffer")).Blob;
@@ -227,8 +230,6 @@ export async function client(
 		let config: Config;
 		let api_map: Record<string, number> = {};
 
-		const listener_map: ListenerMap<EventType> = {};
-
 		let jwt: false | string = false;
 
 		if (hf_token && space_id) {
@@ -271,13 +272,11 @@ export async function client(
 		}
 
 		try {
-			console.log(`${http_protocol}//${host}`);
 			config = await resolve_config(`${http_protocol}//${host}`, hf_token);
-			console.log(config);
+
 			const _config = await config_success(config);
 			res(_config);
 		} catch (e) {
-			console.log(space_id, e);
 			if (space_id) {
 				check_space_status(
 					space_id,
@@ -334,6 +333,7 @@ export async function client(
 		): SubmitReturn {
 			let fn_index: number;
 			let api_info;
+
 			if (typeof endpoint === "number") {
 				fn_index = endpoint;
 				api_info = api.unnamed_endpoints[fn_index];
@@ -354,6 +354,8 @@ export async function client(
 
 			const _endpoint = typeof endpoint === "number" ? "/predict" : endpoint;
 			let payload: Payload;
+			let complete: false | Record<string, any> = false;
+			const listener_map: ListenerMap<EventType> = {};
 
 			//@ts-ignore
 			handle_blob(
@@ -384,22 +386,30 @@ export async function client(
 						hf_token
 					)
 						.then(([output, status_code]) => {
+							const data = transform_files
+								? transform_output(
+										output.data,
+										api_info,
+										config.root,
+										config.root_url
+								  )
+								: output.data;
 							if (status_code == 200) {
 								fire_event({
-									type: "status",
+									type: "data",
 									endpoint: _endpoint,
 									fn_index,
-									stage: "complete",
-									eta: output.average_duration,
-									queue: false,
+									data: output.data,
 									time: new Date()
 								});
 
 								fire_event({
-									type: "data",
+									type: "status",
 									endpoint: _endpoint,
 									fn_index,
-									data: output.data,
+									stage: "complete",
+									eta: output.average_duration,
+									queue: false,
 									time: new Date()
 								});
 							} else {
@@ -465,7 +475,7 @@ export async function client(
 							last_status[fn_index]
 						);
 
-						if (type === "update" && status) {
+						if (type === "update" && status && !complete) {
 							// call 'status' listeners
 							fire_event({
 								type: "status",
@@ -483,16 +493,7 @@ export async function client(
 						} else if (type === "data") {
 							websocket.send(JSON.stringify({ ...payload, session_hash }));
 						} else if (type === "complete") {
-							fire_event({
-								type: "status",
-								time: new Date(),
-								...status,
-								stage: status?.stage!,
-								queue: true,
-								endpoint: _endpoint,
-								fn_index
-							});
-							websocket.close();
+							complete = status;
 						} else if (type === "generating") {
 							fire_event({
 								type: "status",
@@ -508,10 +509,30 @@ export async function client(
 							fire_event({
 								type: "data",
 								time: new Date(),
-								data: data.data,
+								data: transform_files
+									? transform_output(
+											data.data,
+											api_info,
+											config.root,
+											config.root_url
+									  )
+									: data.data,
 								endpoint: _endpoint,
 								fn_index
 							});
+
+							if (complete) {
+								fire_event({
+									type: "status",
+									time: new Date(),
+									...complete,
+									stage: status?.stage!,
+									queue: true,
+									endpoint: _endpoint,
+									fn_index
+								});
+								websocket.close();
+							}
 						}
 					};
 
@@ -556,35 +577,38 @@ export async function client(
 			}
 
 			async function cancel() {
-				fire_event({
-					type: "status",
-					endpoint: _endpoint,
-					fn_index: fn_index,
+				const _status: Status = {
 					stage: "complete",
 					queue: false,
 					time: new Date()
+				};
+				complete = _status;
+				fire_event({
+					..._status,
+					type: "status",
+					endpoint: _endpoint,
+					fn_index: fn_index
 				});
 
+				if (websocket && websocket.readyState === 0) {
+					websocket.addEventListener("open", () => {
+						websocket.close();
+					});
+				} else {
+					websocket.close();
+				}
+
 				try {
 					await fetch(`${http_protocol}//${host + config.path}/reset`, {
+						headers: { "Content-Type": "application/json" },
 						method: "POST",
-						body: JSON.stringify(session_hash)
+						body: JSON.stringify({ fn_index, session_hash })
 					});
 				} catch (e) {
 					console.warn(
 						"The `/reset` endpoint could not be called. Subsequent endpoint results may be unreliable."
 					);
 				}
-
-				if (websocket && websocket.readyState === 0) {
-					websocket.addEventListener("open", () => {
-						websocket.close();
-					});
-				} else {
-					websocket.close();
-				}
-
-				destroy();
 			}
 
 			function destroy() {
@@ -659,6 +683,65 @@ export async function client(
 	});
 }
 
+function transform_output(
+	data: any[],
+	api_info: any,
+	root_url: string,
+	remote_url?: string
+): unknown[] {
+	let transformed_data = data.map((d, i) => {
+		if (api_info.returns?.[i]?.component === "File") {
+			return normalise_file(d, root_url, remote_url);
+		} else if (api_info.returns?.[i]?.component === "Gallery") {
+			return d.map((img) => {
+				return Array.isArray(img)
+					? [normalise_file(img[0], root_url, remote_url), img[1]]
+					: [normalise_file(img, root_url, remote_url), null];
+			});
+		} else if (typeof d === "object" && d.is_file) {
+			return normalise_file(d, root_url, remote_url);
+		} else {
+			return d;
+		}
+	});
+
+	return transformed_data;
+}
+
+export function normalise_file(
+	file: Array<FileData> | FileData | string | null,
+	root: string,
+	root_url: string | null
+): Array<FileData> | FileData | null {
+	if (file == null) return null;
+	if (typeof file === "string") {
+		return {
+			name: "file_data",
+			data: file
+		};
+	} else if (Array.isArray(file)) {
+		const normalized_file: Array<FileData | null> = [];
+
+		for (const x of file) {
+			if (x === null) {
+				normalized_file.push(null);
+			} else {
+				//@ts-ignore
+				normalized_file.push(normalise_file(x, root, root_url));
+			}
+		}
+
+		return normalized_file as Array<FileData>;
+	} else if (file.is_file) {
+		if (!root_url) {
+			file.data = root + "/file=" + file.name;
+		} else {
+			file.data = "/proxy=" + root_url + "/file=" + file.name;
+		}
+	}
+	return file;
+}
+
 interface ApiData {
 	label: string;
 	type: {
@@ -981,9 +1064,8 @@ async function resolve_config(
 		config.root = endpoint + config.root;
 		return { ...config, path: path };
 	} else if (endpoint) {
-		console.log(`${endpoint}/config`, headers);
 		let response = await fetch(`${endpoint}/config`, { headers });
-		console.log(response);
+
 		if (response.status === 200) {
 			const config = await response.json();
 			config.path = config.path ?? "";

package/src/types.ts

@@ -9,6 +9,7 @@ export interface Config {
 	layout: any;
 	mode: "blocks" | "interface";
 	root: string;
+	root_url?: string;
 	theme: string;
 	title: string;
 	version: string;
@@ -91,3 +92,13 @@ export type EventListener<K extends EventType> = (event: Event<K>) => void;
 export type ListenerMap<K extends EventType> = {
 	[P in K]?: EventListener<K>[];
 };
+export interface FileData {
+	name: string;
+	orig_name?: string;
+	size?: number;
+	data: string;
+	blob?: File;
+	is_file?: boolean;
+	mime_type?: string;
+	alt_text?: string;
+}

package/vite.config.js

@@ -18,6 +18,6 @@ export default defineConfig({
 	ssr: {
 		target: "node",
 		format: "esm",
-		noExternal: "ws"
+		noExternal: ["ws", "semiver"]
 	}
 });