Fix loading css and api when mounted in subpath (#3482)

* Implementation

* Lint + CHANGELOG

* Remove log + / typo

* Fix embedding

* Minor fix

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

CHANGELOG.md

@@ -10,6 +10,7 @@ By [@aliabid94](https://github.com/aliabid94) in [PR 3466](https://github.com/gr
 
 - Fixes the File.upload() event trigger which broke as part of the change in how we uploaded files by [@abidlabs](https://github.com/abidlabs) in [PR 3462](https://github.com/gradio-app/gradio/pull/3462)
 - Fixed issue with `gr.Request` object failing to handle dictionaries when nested keys couldn't be converted to variable names [#3454](https://github.com/gradio-app/gradio/issues/3454) by [@radames](https://github.com/radames) in [PR 3459](https://github.com/gradio-app/gradio/pull/3459)
+- Fixed bug where css and client api was not working properly when mounted in a subpath by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3482](https://github.com/gradio-app/gradio/pull/3482) 
 
 ## Documentation Changes:
 

gradio/blocks.py

@@ -71,6 +71,7 @@ def __init__(
         self._skip_init_processing = _skip_init_processing
         self._style = {}
         self.parent: BlockContext | None = None
+        self.root = ""
 
         if render:
             self.render()
@@ -1102,6 +1103,7 @@ def get_config_file(self):
             "show_error": getattr(self, "show_error", False),
             "show_api": self.show_api,
             "is_colab": utils.colab_check(),
+            "root": self.root
         }
 
         def getLayout(block):

gradio/routes.py

@@ -755,6 +755,7 @@ def read_main():
         # Then run `uvicorn run:app` from the terminal and navigate to http://localhost:8000/gradio.
     """
     blocks.dev_mode = False
+    blocks.root = path[:-1] if path.endswith("/") else path
     blocks.config = blocks.get_config_file()
     gradio_app = App.create_app(blocks)
 

ui/packages/client/src/client.ts

@@ -201,7 +201,7 @@ export async function client(
 					});
 
 					post_data(
-						`${http_protocol}//${host}/run${
+						`${http_protocol}//${host + config.path}/run${
 							endpoint.startsWith("/") ? endpoint : `/${endpoint}`
 						}`,
 						{
@@ -257,7 +257,9 @@ export async function client(
 						fn_index
 					});
 
-					const ws_endpoint = `${ws_protocol}://${host}/queue/join`;
+					const ws_endpoint = `${ws_protocol}://${
+						host + config.path
+					}/queue/join`;
 
 					const websocket = new WebSocket(ws_endpoint);
 
@@ -350,12 +352,16 @@ function skip_queue(id: number, config: Config) {
 
 async function resolve_config(endpoint?: string): Promise<Config> {
 	if (window.gradio_config && location.origin !== "http://localhost:9876") {
-		return { ...window.gradio_config, root: endpoint };
+		const path = window.gradio_config.root;
+		const config = window.gradio_config;
+		config.root = endpoint + config.root;
+		return { ...config, path: path };
 	} else if (endpoint) {
 		let response = await fetch(`${endpoint}/config`);
 
 		if (response.status === 200) {
 			const config = await response.json();
+			config.path = config.path ?? "";
 			config.root = endpoint;
 			return config;
 		} else {

ui/packages/client/src/types.ts

@@ -15,6 +15,7 @@ export interface Config {
 	is_space: boolean;
 	is_colab: boolean;
 	show_api: boolean;
+	path: string;
 }
 
 export interface Payload {