Improve URL handling in JS Client

.changeset/sad-feet-brush.md

@@ -0,0 +1,6 @@
+---
+"@gradio/client": patch
+"gradio": patch
+---
+
+fix:Improve URL handling in JS Client

client/js/src/helpers/api_info.ts

@@ -1,9 +1,9 @@
 import type { Status } from "../types";
-import { QUEUE_FULL_MSG } from "../constants";
+import { HOST_URL, QUEUE_FULL_MSG } from "../constants";
 import type { ApiData, ApiInfo, Config, JsApiData } from "../types";
 import { determine_protocol } from "./init_helpers";
 
-export const RE_SPACE_NAME = /^[^\/]*\/[^\/]*$/;
+export const RE_SPACE_NAME = /^[a-zA-Z0-9_\-]+\/[a-zA-Z0-9_\-]+$/;
 export const RE_SPACE_DOMAIN = /.*hf\.space\/{0,1}$/;
 
 export async function process_endpoint(
@@ -20,12 +20,13 @@ export async function process_endpoint(
 		headers.Authorization = `Bearer ${hf_token}`;
 	}
 
-	const _app_reference = app_reference.trim();
+	const _app_reference = app_reference.trim().replace(/\/$/, "");
 
 	if (RE_SPACE_NAME.test(_app_reference)) {
+		// app_reference is a HF space name
 		try {
 			const res = await fetch(
-				`https://huggingface.co/api/spaces/${_app_reference}/host`,
+				`https://huggingface.co/api/spaces/${_app_reference}/${HOST_URL}`,
 				{ headers }
 			);
 
@@ -43,6 +44,7 @@ export async function process_endpoint(
 	}
 
 	if (RE_SPACE_DOMAIN.test(_app_reference)) {
+		// app_reference is a direct HF space domain
 		const { ws_protocol, http_protocol, host } =
 			determine_protocol(_app_reference);
 
@@ -60,6 +62,12 @@ export async function process_endpoint(
 	};
 }
 
+export const join_urls = (...urls: string[]): string => {
+	return urls.reduce((base_url, part) => {
+		return `${base_url.replace(/\/+$/, "")}/${part.replace(/^\/+/, "")}`;
+	});
+};
+
 export function transform_api_info(
 	api_info: ApiInfo<ApiData>,
 	config: Config,

client/js/src/helpers/init_helpers.ts

@@ -1,6 +1,7 @@
 import type { Config } from "../types";
 import { CONFIG_ERROR_MSG, CONFIG_URL } from "../constants";
 import { Client } from "..";
+import { join_urls } from "./api_info";
 
 /**
  * This function is used to resolve the URL for making requests when the app has a root path.
@@ -75,7 +76,8 @@ export async function resolve_config(
 		config.root = config_root;
 		return { ...config, path } as Config;
 	} else if (endpoint) {
-		const response = await this.fetch(`${endpoint}/${CONFIG_URL}`, {
+		const config_url = join_urls(endpoint, CONFIG_URL);
+		const response = await this.fetch(config_url, {
 			headers
 		});
 
@@ -97,7 +99,7 @@ export function determine_protocol(endpoint: string): {
 	host: string;
 } {
 	if (endpoint.startsWith("http")) {
-		const { protocol, host } = new URL(endpoint);
+		const { protocol, host, pathname } = new URL(endpoint);
 
 		if (host.endsWith("hf.space")) {
 			return {
@@ -109,7 +111,7 @@ export function determine_protocol(endpoint: string): {
 		return {
 			ws_protocol: protocol === "https:" ? "wss" : "ws",
 			http_protocol: protocol as "http:" | "https:",
-			host
+			host: host + (pathname !== "/" ? pathname : "")
 		};
 	} else if (endpoint.startsWith("file:")) {
 		// This case is only expected to be used for the Wasm mode (Gradio-lite),

client/js/src/test/api_info.test.ts

@@ -5,12 +5,14 @@ import {
 	get_description,
 	get_type,
 	process_endpoint,
+	join_urls,
 	map_data_to_params
 } from "../helpers/api_info";
 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());
@@ -455,6 +457,51 @@ describe("process_endpoint", () => {
 		const result = await process_endpoint("hmb/hello_world");
 		expect(result).toEqual(expected);
 	});
+
+	it("processes local server URLs correctly", async () => {
+		if (!IS_NODE) {
+			const local_url = "http://localhost:7860/gradio";
+			const response_local_url = await process_endpoint(local_url);
+			expect(response_local_url.space_id).toBe(false);
+			expect(response_local_url.host).toBe("localhost:7860/gradio");
+
+			const local_url_2 = "http://localhost:7860/gradio/";
+			const response_local_url_2 = await process_endpoint(local_url_2);
+			expect(response_local_url_2.space_id).toBe(false);
+			expect(response_local_url_2.host).toBe("localhost:7860/gradio");
+		}
+	});
+
+	it("handles hugging face space references", async () => {
+		const space_id = "hmb/hello_world";
+
+		const response = await process_endpoint(space_id);
+		expect(response.space_id).toBe(space_id);
+		expect(response.host).toContain("hf.space");
+	});
+
+	it("handles hugging face domain URLs", async () => {
+		const app_reference = "https://hmb-hello-world.hf.space/";
+		const response = await process_endpoint(app_reference);
+		expect(response.space_id).toBe("hmb-hello-world");
+		expect(response.host).toBe("hmb-hello-world.hf.space");
+	});
+});
+
+describe("join_urls", () => {
+	it("joins URLs correctly", () => {
+		expect(join_urls("localhost:7860", "/gradio")).toBe(
+			"localhost:7860/gradio"
+		);
+
+		expect(join_urls("localhost:7860/", "/gradio")).toBe(
+			"localhost:7860/gradio"
+		);
+
+		expect(join_urls("localhost:7860/", "/app/", "/gradio/")).toBe(
+			"localhost:7860/app/gradio/"
+		);
+	});
 });
 
 describe("map_data_params", () => {

client/js/src/utils/view_api.ts

@@ -3,7 +3,7 @@ import semiver from "semiver";
 import { API_INFO_URL, BROKEN_CONNECTION_MSG } from "../constants";
 import { Client } from "../client";
 import { SPACE_FETCHER_URL } from "../constants";
-import { transform_api_info } from "../helpers/api_info";
+import { join_urls, transform_api_info } from "../helpers/api_info";
 
 export async function view_api(this: Client): Promise<any> {
 	if (this.api_info) return this.api_info;
@@ -37,7 +37,8 @@ export async function view_api(this: Client): Promise<any> {
 				headers
 			});
 		} else {
-			response = await this.fetch(`${config?.root}/${API_INFO_URL}`, {
+			const url = join_urls(config.root, API_INFO_URL);
+			response = await this.fetch(url, {
 				headers
 			});
 		}