From 6c9c41b15d1a8b3f29d61b6bf172b6fc3a918ab2 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Fri, 3 Mar 2023 16:52:38 +0000
Subject: [PATCH] support domains (#3367)

* support domains

* changelog

* format

* handle invalid source/host/space

* format

* version

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
---
 CHANGELOG.md                     |   1 +
 gradio/version.txt               |   2 +-
 ui/packages/_cdn-test/index.html | 125 ++++++++++++++++---------------
 ui/packages/app/src/Index.svelte | 100 +++++++++++++++++--------
 ui/packages/app/src/Login.svelte |   1 -
 ui/packages/app/src/main.ts      |   4 +-
 6 files changed, 138 insertions(+), 95 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 024febf50b..0108046f9c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -60,6 +60,7 @@ By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3297](https://git
 - Ensure that the initial empty value for `gr.Dropdown(Multiselect=True)` is an empty list and the initial value for `gr.Dropdown(Multiselect=False)` is an empty string by [@pngwn](https://github.com/pngwn) in [PR 3338](https://github.com/gradio-app/gradio/pull/3338)
 - Ensure uploaded images respect the shape property when the canvas is also enabled by [@pngwn](https://github.com/pngwn) in [PR 3351](https://github.com/gradio-app/gradio/pull/3351)
 - Ensure that Google Analytics works correctly when gradio apps are created with `analytics_enabled=True` by [@abidlabs](https://github.com/abidlabs) in [PR 3349](https://github.com/gradio-app/gradio/pull/3349)
+- Support new embeds for huggingface spaces subdomains by [@pngwn](https://github.com/pngwn) in [PR 3367](https://github.com/gradio-app/gradio/pull/3367)
 
 ## Documentation Changes:
 - Added the `types` field to the dependency field in the config by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3315](https://github.com/gradio-app/gradio/pull/3315) 
diff --git a/gradio/version.txt b/gradio/version.txt
index 4f6817bc5c..78c6e856bb 100644
--- a/gradio/version.txt
+++ b/gradio/version.txt
@@ -1 +1 @@
-3.19.1
+3.20.0b2
diff --git a/ui/packages/_cdn-test/index.html b/ui/packages/_cdn-test/index.html
index f7dd33ddfa..ff8f6c1338 100644
--- a/ui/packages/_cdn-test/index.html
+++ b/ui/packages/_cdn-test/index.html
@@ -159,26 +159,21 @@
 			Hello text. Hello text.
 		</p>
 		<!-- https://huggingface.co/spaces/freddyaboulton/blocks-essay -->
-		<!-- <gradio-app
+		<gradio-app
 			space="freddyaboulton/timeseries-forecasting-with-prophet
     "
-			
-		></gradio-app> -->
+		></gradio-app>
 		<!-- -->
 		<!-- </p> -->
 
-		<!-- <gradio-app
-			space="awacke1/GradioAutoPlotFromCSV"
-			info="false"
-		></gradio-app>
+		<gradio-app space="awacke1/GradioAutoPlotFromCSV" info="false"></gradio-app>
 		<gradio-app
 			space="gradio/plot_component_main"
 			initial_height="400px"
 			control_page_title="true"
 		></gradio-app>
-		 -->
 
-		<!-- <gradio-app
+		<gradio-app
 			space="gradio/colorpicker_component_main"
 			initial_height="400px"
 			control_page_title="true"
@@ -188,13 +183,51 @@
 			space="gradio/live_with_vars_main"
 			initial_height="400px"
 			control_page_title="true"
-		></gradio-app> -->
+		></gradio-app>
+		<h2>no src</h2>
 		<gradio-app
-			space="freddyaboulton/Chat-GPT-LangChain
-			"
+			src=""
 			initial_height="400px"
 			control_page_title="true"
 		></gradio-app>
+		<h2>no host</h2>
+		<gradio-app
+			host=""
+			initial_height="400px"
+			control_page_title="true"
+		></gradio-app>
+		<h2>no space</h2>
+		<gradio-app
+			space=""
+			initial_height="400px"
+			control_page_title="true"
+		></gradio-app>
+
+		<h2>invalid src</h2>
+		<gradio-app
+			src="https://pngwn-mu123sic-visualizer.hf.space"
+			initial_height="400px"
+			control_page_title="true"
+		></gradio-app>
+		<h2>invalid host</h2>
+		<gradio-app
+			host="asd.com"
+			initial_height="400px"
+			control_page_title="true"
+		></gradio-app>
+		<h2>invalid space</h2>
+		<gradio-app
+			space="asd/asd"
+			initial_height="400px"
+			control_page_title="true"
+		></gradio-app>
+
+		<gradio-app
+			src="https://pngwn-music-visualizer.hf.space"
+			initial_height="400px"
+			control_page_title="true"
+		></gradio-app>
+		<h2>Error: runtime error</h2>
 
 		<gradio-app
 			space="gradio/titanic_survival_main"
@@ -202,70 +235,44 @@
 			control_page_title="true"
 		></gradio-app>
 
-		<gradio-app
-			space="gradio/text_analysis_main"
-			initial_height="400px"
-			control_page_title="true"
-		></gradio-app>
-
-		<gradio-app
-			space="gradio/neon-tts-plugin-coqui_main"
-			initial_height="400px"
-			control_page_title="true"
-		></gradio-app>
-
-		<gradio-app
-			space="gradio/scatterplot_component_main"
-			initial_height="400px"
-			control_page_title="true"
-		></gradio-app>
-
-		<gradio-app
-			space="gradio/image_classifier_main"
-			initial_height="400px"
-			control_page_title="true"
-		></gradio-app>
-
-		<gradio-app
-			space="gradio/reverse_audio_main"
-			initial_height="400px"
-			control_page_title="true"
-		></gradio-app>
-		<gradio-app
-			space="gradio/ner_pipeline_main"
-			initial_height="400px"
-			control_page_title="true"
-		></gradio-app>
-		<gradio-app
-			space="gradio/longest_word_main"
-			initial_height="400px"
-			control_page_title="true"
-		></gradio-app>
-
+		<h2>Error: no app file</h2>
 		<gradio-app
 			space="pngwn/AnimeGANv2_v3"
 			initial_height="400px"
 			control_page_title="true"
 		></gradio-app>
-
+		<h2>Error: no app file</h2>
+		<gradio-app
+			src="https://pngwn-animeganv2-v3.hf.space"
+			initial_height="400px"
+			control_page_title="true"
+		></gradio-app>
+		<h2>Error: build error</h2>
 		<gradio-app
 			space="pngwn/Stable-Diffusion-prompt-generator"
 			initial_height="400px"
 			control_page_title="true"
 		></gradio-app>
+		<h2>Error: build error</h2>
+		<gradio-app
+			src="https://pngwn-stable-diffusion-prompt-generato-85ff371.hf.space"
+			initial_height="400px"
+			control_page_title="true"
+		></gradio-app>
 
 		<!-- https://huggingface.co/spaces/ -->
-
-		<!-- <gradio-app
+		<h2>Config Error</h2>
+		<gradio-app
 			space="pngwn/clear-inputs"
 			initial_height="400px"
 			control_page_title="true"
 		></gradio-app>
+		<h2>Working</h2>
 		<gradio-app
-		space="gradio/live_with_vars"
-		initial_height="200px"
-		control_page_title="true"
-	></gradio-app> -->
+			space="gradio/live_with_vars"
+			initial_height="200px"
+			control_page_title="true"
+		></gradio-app>
 		<!-- <iframe
 			id="myIframe"
 			allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"
diff --git a/ui/packages/app/src/Index.svelte b/ui/packages/app/src/Index.svelte
index e5b183b8e0..8e203ce2bc 100644
--- a/ui/packages/app/src/Index.svelte
+++ b/ui/packages/app/src/Index.svelte
@@ -92,7 +92,6 @@
 
 	async function handle_config(target: HTMLElement, source: string | null) {
 		let config;
-
 		try {
 			let _config = await get_config(source);
 			config = _config;
@@ -130,8 +129,10 @@
 			}
 			const config = await get_source_config(source);
 			return config;
-		} else {
+		} else if (window.gradio_config) {
 			return window.gradio_config;
+		} else {
+			throw new Error("Config not found");
 		}
 	}
 
@@ -212,23 +213,39 @@
 		return "dark";
 	}
 
-	async function check_space_status(space_id: string, source: string) {
+	export const RE_SPACE_NAME = /^[^\/]*\/[^\/]*$/;
+	async function check_space_status(
+		space_id: string,
+		source: string,
+		cb: Function = () => {}
+	) {
+		const endpoint = RE_SPACE_NAME.test(space_id) ? "" : "by-subdomain/";
+		let _space_id = "";
 		let response;
 		let _status;
 		try {
-			response = await fetch(`https://huggingface.co/api/spaces/${space_id}`);
+			response = await fetch(
+				`https://huggingface.co/api/spaces/${endpoint}${space_id}`
+			);
 			_status = response.status;
+
 			if (_status !== 200) {
+				space = "";
+				source = "";
 				throw new Error();
 			}
 			response = await response.json();
+			_space_id = response.id;
+			cb(response.id);
 		} catch (e) {
+			space = "";
+			source = "";
 			status = "error";
 			error_detail = {
 				type: "space_error",
 				detail: {
 					description: "This space is experiencing an issue.",
-					discussions_enabled: await discussions_enabled(space_id)
+					discussions_enabled: await discussions_enabled(_space_id || space_id)
 				}
 			};
 
@@ -246,7 +263,7 @@
 				status = "pending";
 				loading_text = "Space is asleep. Waking it up...";
 				setTimeout(() => {
-					check_space_status(space_id, source);
+					check_space_status(_space_id, source);
 				}, 1000);
 				break;
 			// poll for status
@@ -260,7 +277,7 @@
 				status = "pending";
 				loading_text = "Space is building...";
 				setTimeout(() => {
-					check_space_status(space_id, source);
+					check_space_status(_space_id, source);
 				}, 1000);
 				break;
 
@@ -273,7 +290,7 @@
 					type: "space_error",
 					detail: {
 						description: "This space is experiencing an issue.",
-						discussions_enabled: await discussions_enabled(space_id),
+						discussions_enabled: await discussions_enabled(_space_id),
 						stage
 					}
 				};
@@ -284,7 +301,7 @@
 					type: "space_error",
 					detail: {
 						description: "This space is experiencing an issue.",
-						discussions_enabled: await discussions_enabled(space_id)
+						discussions_enabled: await discussions_enabled(_space_id)
 					}
 				};
 		}
@@ -322,20 +339,36 @@
 			theme = handle_darkmode(wrapper);
 		}
 
-		const source = host
-			? `https://${host.trim()}`
-			: space
-			? (
-					await (
-						await fetch(
-							`https://huggingface.co/api/spaces/${space.trim()}/host`
-						)
-					).json()
-			  ).host
-			: src?.trim();
+		let source;
+		if (space) {
+			try {
+				const r = await fetch(
+					`https://huggingface.co/api/spaces/${space.trim()}/host`
+				);
+
+				if (r.status !== 200) {
+					source = "";
+					space = "";
+				}
+
+				source = (await r.json()).host;
+			} catch (e) {
+				source = "";
+				space = "";
+			}
+		} else {
+			source = (host ? `https://${host}` : src)?.trim();
+		}
 
 		if (space) {
-			check_space_status(space.trim(), source);
+			check_space_status(space?.trim(), source);
+		} else if (src?.endsWith(".hf.space")) {
+			check_space_status(
+				src.replace(".hf.space", "").replace("https://", ""),
+				source,
+				(id: string) => (space = id)
+			);
+			space = " ";
 		}
 		load_config(source);
 	});
@@ -352,17 +385,21 @@
 				is_embed
 			);
 			config = _config;
-		} else if (!space) {
-			status = "error";
-			error_detail = {
-				type: "not_found",
-				detail: {
-					description: "This gradio app is experiencing an issue."
-				}
-			};
+		} else {
+			create_not_found_error();
 		}
 	}
 
+	function create_not_found_error() {
+		status = "error";
+		error_detail = {
+			type: "not_found",
+			detail: {
+				description: "This gradio app is experiencing an issue."
+			}
+		};
+	}
+
 	$: status = ready ? "success" : status;
 
 	$: config && (eager || $intersecting[_id]) && load_demo();
@@ -417,9 +454,9 @@
 </script>
 
 <Embed
-	display={!container && is_embed && !!space}
+	display={container && is_embed}
 	{is_embed}
-	{info}
+	info={!!space && info}
 	{version}
 	{initial_height}
 	{space}
@@ -460,7 +497,6 @@
 			auth_message={config.auth_message}
 			root={config.root}
 			is_space={config.is_space}
-			id={_id}
 			{app_mode}
 		/>
 	{/if}
diff --git a/ui/packages/app/src/Login.svelte b/ui/packages/app/src/Login.svelte
index a09a137492..9474839089 100644
--- a/ui/packages/app/src/Login.svelte
+++ b/ui/packages/app/src/Login.svelte
@@ -3,7 +3,6 @@
 	import { Component as Textbox } from "./components/Textbox";
 	import { Button } from "@gradio/button";
 	export let root: string;
-	export let id: number;
 	export let auth_message: string | null;
 	export let app_mode: boolean;
 	export let is_space: boolean;
diff --git a/ui/packages/app/src/main.ts b/ui/packages/app/src/main.ts
index 6a6d80262b..10caecb74b 100644
--- a/ui/packages/app/src/main.ts
+++ b/ui/packages/app/src/main.ts
@@ -67,7 +67,7 @@ function create_custom_element() {
 			const control_page_title = this.getAttribute("control_page_title");
 			const initial_height = this.getAttribute("initial_height") ?? "300px"; // default: 300px
 			const is_embed = this.getAttribute("embed") ?? "true"; // default: true
-			const container = this.getAttribute("container");
+			const container = this.getAttribute("container") ?? "true"; // default: true
 			const info = this.getAttribute("info") ?? true; // default: true
 			const autoscroll = this.getAttribute("autoscroll");
 			const eager = this.getAttribute("eager");
@@ -81,7 +81,7 @@ function create_custom_element() {
 					host: host ? host.trim() : host,
 					// embed info
 					info: info === "false" ? false : true,
-					container: !!container,
+					container: container === "false" ? false : true,
 					is_embed: is_embed === "false" ? false : true,
 					initial_height: initial_height ?? undefined,
 					eager: eager === "true" ? true : false,