Lite: Support opening the entrypoint HTML page directly in browser via the file: protocol (#5972)

* Use a special fake hostname for the API access when the page is opened via the `file:` protocol

* Move js/app/src/lite/url.ts -> js/wasm/svelte/host.ts

* Add a comment

* Move js/wasm/svelte/host.ts -> js/wasm/network/host.ts

* add changeset

* Add a comment

* add changeset

* Update js/wasm/package.json adding a ESM subpath

* Fix `is_self_host()`

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

.changeset/hot-turkeys-deny.md

@@ -0,0 +1,8 @@
+---
+"@gradio/app": minor
+"@gradio/client": minor
+"@gradio/wasm": minor
+"gradio": minor
+---
+
+feat:Lite: Support opening the entrypoint HTML page directly in browser via the `file:` protocol

client/js/src/utils.ts

@@ -41,6 +41,14 @@ export function determine_protocol(endpoint: string): {
 			http_protocol: protocol as "http:" | "https:",
 			host
 		};
+	} else if (endpoint.startsWith("file:")) {
+		// This case is only expected to be used for the Wasm mode (Gradio-lite),
+		// where users can create a local HTML file using it and open the page in a browser directly via the `file:` protocol.
+		return {
+			ws_protocol: "ws",
+			http_protocol: "http:",
+			host: "lite.local" // Special fake hostname only used for this case. This matches the hostname allowed in `is_self_host()` in `js/wasm/network/host.ts`.
+		};
 	}
 
 	// default to secure if no protocol is provided

js/app/src/lite/css.ts

@@ -1,5 +1,5 @@
 import type { WorkerProxy } from "@gradio/wasm";
-import { is_self_host } from "./url";
+import { is_self_host } from "@gradio/wasm/network";
 import { mount_css as default_mount_css } from "../css";
 
 // In the Wasm mode, we use a prebuilt CSS file `/static/css/theme.css` to apply the styles in the initialization phase,

js/app/src/lite/fetch.ts

@@ -1,5 +1,5 @@
 import type { WorkerProxy } from "@gradio/wasm";
-import { is_self_host } from "./url";
+import { is_self_host } from "@gradio/wasm/network";
 
 /**
  * A fetch() function that proxies HTTP requests to the worker,

js/app/src/lite/url.ts

@@ -1,7 +0,0 @@
-export function is_self_host(url: URL): boolean {
-	return (
-		url.host === window.location.host ||
-		url.host === "localhost:7860" ||
-		url.host === "127.0.0.1:7860" // Ref: https://github.com/gradio-app/gradio/blob/v3.32.0/js/app/src/Index.svelte#L194
-	);
-}

js/app/src/lite/websocket.ts

@@ -1,5 +1,5 @@
 import type { WorkerProxy } from "@gradio/wasm";
-import { is_self_host } from "./url";
+import { is_self_host } from "@gradio/wasm/network";
 
 /**
  * A WebSocket factory that proxies requests to the worker,

js/wasm/network/host.ts

@@ -0,0 +1,8 @@
+export function is_self_host(url: URL): boolean {
+	return (
+		url.host === window.location.host ||
+		url.host === "localhost:7860" ||
+		url.host === "127.0.0.1:7860" || // Ref: https://github.com/gradio-app/gradio/blob/v3.32.0/js/app/src/Index.svelte#L194
+		url.host === "lite.local" // A special hostname set when the endpoint is a local file (`file:/*`). See `determine_protocol()` in `client/js/src/utils.ts`
+	);
+}

js/wasm/network/index.ts

@@ -0,0 +1 @@
+export * from "./host";

js/wasm/package.json

@@ -7,7 +7,8 @@
 	"exports": {
 		".": "./dist/index.js",
 		"./package.json": "./package.json",
-		"./svelte": "./svelte/index.ts"
+		"./svelte": "./svelte/index.ts",
+		"./network": "./network/index.ts"
 	},
 	"keywords": [],
 	"author": "",

js/wasm/svelte/file-url.ts

@@ -1,4 +1,5 @@
 import { getWorkerProxyContext } from "./context";
+import { is_self_host } from "../network/host";
 
 type MediaSrc = string | undefined | null;
 
@@ -8,11 +9,7 @@ export async function resolve_wasm_src(src: MediaSrc): Promise<MediaSrc> {
 	}
 
 	const url = new URL(src);
-	if (
-		url.host !== window.location.host &&
-		url.host !== "localhost:7860" &&
-		url.host !== "127.0.0.1:7860" // Ref: https://github.com/gradio-app/gradio/blob/v3.32.0/js/app/src/Index.svelte#L194
-	) {
+	if (!is_self_host(url)) {
 		// `src` is not accessing a local server resource, so we don't need to proxy this request to the Wasm worker.
 		return src;
 	}