fix spaces (#2567)

* fix spaces

* changelog

* tweak

* only mess with ws url in embed mode

* version

* always disregard embedding apps path when embedding

* version

* version

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

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Upcoming Release 
 
+## Bug Fixes:
+
+* Ensure gradio apps embedded via spaces use the correct endpoint for predictions. [@pngwn](https://github.com/pngwn) in [PR 2567](https://github.com/gradio-app/gradio/pull/2567)
+
+
 ## New Features:
 
 ### Running Events Continuously

gradio/version.txt

@@ -1 +1 @@
-3.8
+3.8.1

ui/packages/_cdn-test/index.html

@@ -39,7 +39,7 @@
 			Hello text. Hello text.
 		</p>
 		<gradio-app
-			space="nateraw/animegan-v2-for-videos"
+			space="nateraw/music-visualizer"
 			initial_height="800px"
 		></gradio-app>
 		<h2>hello subtitle</h2>

ui/packages/app/src/api.ts

@@ -68,7 +68,12 @@ type Output = {
 
 const ws_map = new Map<number, WebSocket>();
 export const fn =
-	(session_hash: string, api_endpoint: string, is_space: boolean) =>
+	(
+		session_hash: string,
+		api_endpoint: string,
+		is_space: boolean,
+		is_embed: boolean
+	) =>
 	async ({
 		action,
 		payload,
@@ -114,12 +119,19 @@ export const fn =
 			function send_message(fn: number, data: any) {
 				ws_map.get(fn)?.send(JSON.stringify(data));
 			}
-			var ws_endpoint = api_endpoint === "api/" ? location.href : api_endpoint;
+			var ws_endpoint = is_embed
+				? new URL(api_endpoint).host
+				: api_endpoint === "api/"
+				? location.href
+				: api_endpoint;
 			var ws_protocol = ws_endpoint.startsWith("https") ? "wss:" : "ws:";
-			var ws_path = location.pathname === "/" ? "/" : location.pathname;
+			var ws_path =
+				is_embed || location.pathname === "/" ? "/" : location.pathname;
 			var ws_host =
 				BUILD_MODE === "dev" || location.origin === "http://localhost:3000"
 					? BACKEND_URL.replace("http://", "").slice(0, -1)
+					: is_embed
+					? new URL(api_endpoint).host
 					: location.host;
 			const WS_ENDPOINT = `${ws_protocol}//${ws_host}${ws_path}queue/join`;
 

ui/packages/app/src/main.ts

@@ -169,7 +169,8 @@ function mount_app(
 	target: HTMLElement | ShadowRoot | false,
 	wrapper: HTMLDivElement,
 	id: number,
-	autoscroll?: boolean
+	autoscroll?: boolean,
+	is_embed = false
 ) {
 	//@ts-ignore
 	if (config.detail === "Not authenticated" || config.auth_required) {
@@ -184,7 +185,12 @@ function mount_app(
 		});
 	} else {
 		let session_hash = Math.random().toString(36).substring(2);
-		config.fn = fn(session_hash, config.root + "api/", config.is_space);
+		config.fn = fn(
+			session_hash,
+			config.root + "api/",
+			config.is_space,
+			is_embed
+		);
 
 		new Blocks({
 			target: wrapper,
@@ -257,7 +263,11 @@ function create_custom_element() {
 			let autoscroll = this.getAttribute("autoscroll");
 
 			let source = space
-				? `https://hf.space/embed/${space}/+/`
+				? (
+						await (
+							await fetch(`https://huggingface.co/api/spaces/${space}/host`)
+						).json()
+				  ).host
 				: this.getAttribute("src");
 
 			const _autoscroll = autoscroll === "true" ? true : false;
@@ -277,7 +287,8 @@ function create_custom_element() {
 					this.root,
 					this.wrapper,
 					this._id,
-					_autoscroll
+					_autoscroll,
+					!!space
 				);
 			}
 		}