From 669ee42c8f11dd68a3e0ad9f15fff5c006dc2e22 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Fri, 27 Jan 2023 14:39:36 +0000
Subject: [PATCH] fix space embeds using `src` attribute (#3065)

* change ports in dev mode

* changelog

* correctly detect space embeds

* changelog

* formatting
---
 CHANGELOG.md                                          |  1 +
 guides/06_other-tutorials/creating-a-new-component.md |  2 +-
 ui/packages/_cdn-test/index.html                      |  6 +++---
 ui/packages/app/package.json                          |  2 +-
 ui/packages/app/snapshots/blocks_layout.spec.ts       |  2 +-
 ui/packages/app/snapshots/blocks_xray.spec.ts         |  2 +-
 ui/packages/app/snapshots/kitchen_sink.spec.ts        |  2 +-
 ui/packages/app/src/api.ts                            |  2 +-
 ui/packages/app/src/main.ts                           | 10 +++++++---
 ui/packages/app/test/blocks_inputs.spec.ts            |  2 +-
 ui/packages/app/test/blocks_kinematics.spec.ts        |  2 +-
 ui/packages/app/test/blocks_page_load.spec.ts         |  2 +-
 ui/packages/app/test/blocks_xray.spec.ts              |  4 ++--
 ui/packages/app/test/input_output.spec.ts             |  2 +-
 ui/packages/app/test/kitchen_sink.spec.ts             |  4 ++--
 ui/packages/app/test/outbreak_forecast.spec.ts        |  4 ++--
 ui/packages/app/vite.config.js                        |  2 +-
 ui/playwright-setup.js                                |  4 ++--
 18 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd576d97d6726..28cbb589ed639 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -56,6 +56,7 @@ By [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3014](https://github.
 * Adding missing embedded components on docs by [@aliabd](https://github.com/aliabd) in [PR 3027](https://github.com/gradio-app/gradio/pull/3027)
 * Fixes bug where app would crash if the `file_types` parameter of `gr.File` or `gr.UploadButton` was not a list by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3048](https://github.com/gradio-app/gradio/pull/3048)    
 * Fix bug where input component was not hidden in the frontend for `UploadButton` by  [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3053](https://github.com/gradio-app/gradio/pull/3053)
+* Ensure spaces embedded via the web component always use the correct URLs for server requests and change ports for testing to avoid strange collisions when users are working with embedded apps locally by [@pngwn](https://github.com/pngwn) in [PR 3065](https://github.com/gradio-app/gradio/pull/3065)
 * Preserve selected image of Gallery through updated by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3061](https://github.com/gradio-app/gradio/pull/3061) 
 * Fixes bug where tabs selected attribute not working if manually change tab by [@tomhang25](https://github.com/tomchang25) in [3055](https://github.com/gradio-app/gradio/pull/3055)
 
diff --git a/guides/06_other-tutorials/creating-a-new-component.md b/guides/06_other-tutorials/creating-a-new-component.md
index 0bf0f855fe5af..6256cecdea5d6 100644
--- a/guides/06_other-tutorials/creating-a-new-component.md
+++ b/guides/06_other-tutorials/creating-a-new-component.md
@@ -385,7 +385,7 @@ You can take a look at the [demo](https://github.com/gradio-app/gradio/tree/main
 To test the application:
 
 - run on a terminal `python path/demo/run.py` which starts the backend at the address [http://localhost:7860](http://localhost:7860);
-- in another terminal, from the ui folder, run `pnpm dev` to start the frontend at [http://localhost:3000](http://localhost:3000) with hot reload functionalities.
+- in another terminal, from the ui folder, run `pnpm dev` to start the frontend at [http://localhost:9876](http://localhost:9876) with hot reload functionalities.
 
 ## Conclusion
 
diff --git a/ui/packages/_cdn-test/index.html b/ui/packages/_cdn-test/index.html
index 59f774ae07b9e..1ae881a29f849 100644
--- a/ui/packages/_cdn-test/index.html
+++ b/ui/packages/_cdn-test/index.html
@@ -39,7 +39,7 @@ <h2>hello subtitle</h2>
 			Hello text. Hello text.
 		</p>
 		<gradio-app
-			space="nateraw/music-visualizer"
+			src="https://fabiochiu-sentiment-analysis-demo.hf.space"
 			initial_height="800px"
 		></gradio-app>
 		<h2>hello subtitle</h2>
@@ -58,11 +58,11 @@ <h2>hello subtitle</h2>
 			Hello text. Hello text. Hello text. Hello text. Hello text. Hello text.
 			Hello text. Hello text.
 		</p>
-		<gradio-app
+		<!-- <gradio-app
 			space="gradio/automatic-speech-recognition"
 			initial_height="400px"
 			control_page_title="true"
-		></gradio-app>
+		></gradio-app> -->
 
 		<iframe
 			id="myIframe"
diff --git a/ui/packages/app/package.json b/ui/packages/app/package.json
index 982140dfdb58c..f105052969d80 100644
--- a/ui/packages/app/package.json
+++ b/ui/packages/app/package.json
@@ -3,7 +3,7 @@
 	"version": "1.0.0",
 	"private": true,
 	"scripts": {
-		"dev": "vite",
+		"dev": "vite --port 9876",
 		"build:cdn": "vite build --mode production:cdn --emptyOutDir",
 		"build:website": "vite build --mode production:website --emptyOutDir",
 		"build:local": "vite build --mode production:local --emptyOutDir",
diff --git a/ui/packages/app/snapshots/blocks_layout.spec.ts b/ui/packages/app/snapshots/blocks_layout.spec.ts
index 990f7f3e3bd9a..2ad031705e853 100644
--- a/ui/packages/app/snapshots/blocks_layout.spec.ts
+++ b/ui/packages/app/snapshots/blocks_layout.spec.ts
@@ -13,6 +13,6 @@ function mock_demo(page: Page, demo: string) {
 
 test("blocks layout", async ({ page }) => {
 	await mock_demo(page, "blocks_layout");
-	await page.goto("http://localhost:3000");
+	await page.goto("http://localhost:9876");
 	await expect(page).toHaveScreenshot();
 });
diff --git a/ui/packages/app/snapshots/blocks_xray.spec.ts b/ui/packages/app/snapshots/blocks_xray.spec.ts
index 6b6cf16f14b41..00987bbbbf42c 100644
--- a/ui/packages/app/snapshots/blocks_xray.spec.ts
+++ b/ui/packages/app/snapshots/blocks_xray.spec.ts
@@ -13,6 +13,6 @@ function mock_demo(page: Page, demo: string) {
 
 test("blocks xray", async ({ page }) => {
 	await mock_demo(page, "blocks_xray");
-	await page.goto("http://localhost:3000");
+	await page.goto("http://localhost:9876");
 	await expect(page).toHaveScreenshot();
 });
diff --git a/ui/packages/app/snapshots/kitchen_sink.spec.ts b/ui/packages/app/snapshots/kitchen_sink.spec.ts
index 16ec00df7844a..713e31cd71cc8 100644
--- a/ui/packages/app/snapshots/kitchen_sink.spec.ts
+++ b/ui/packages/app/snapshots/kitchen_sink.spec.ts
@@ -13,6 +13,6 @@ function mock_demo(page: Page, demo: string) {
 
 test("kitchen sink", async ({ page }) => {
 	await mock_demo(page, "kitchen_sink");
-	await page.goto("http://localhost:3000");
+	await page.goto("http://localhost:9876");
 	await expect(page).toHaveScreenshot();
 });
diff --git a/ui/packages/app/src/api.ts b/ui/packages/app/src/api.ts
index 7e53d23f96d2a..ce7605d900854 100644
--- a/ui/packages/app/src/api.ts
+++ b/ui/packages/app/src/api.ts
@@ -130,7 +130,7 @@ export const fn =
 				var ws_protocol = ws_endpoint.startsWith("https") ? "wss:" : "ws:";
 				var ws_path = location.pathname === "/" ? "/" : location.pathname;
 				var ws_host =
-					BUILD_MODE === "dev" || location.origin === "http://localhost:3000"
+					BUILD_MODE === "dev" || location.origin === "http://localhost:9876"
 						? BACKEND_URL.replace("http://", "").slice(0, -1)
 						: location.host;
 				WS_ENDPOINT = `${ws_protocol}//${ws_host}${ws_path}queue/join`;
diff --git a/ui/packages/app/src/main.ts b/ui/packages/app/src/main.ts
index 303861da6685e..c4843a82b3e63 100644
--- a/ui/packages/app/src/main.ts
+++ b/ui/packages/app/src/main.ts
@@ -59,7 +59,7 @@ async function get_source_config(source: string): Promise<Config> {
 }
 
 async function get_config(source: string | null) {
-	if (BUILD_MODE === "dev" || location.origin === "http://localhost:3000") {
+	if (BUILD_MODE === "dev" || location.origin === "http://localhost:9876") {
 		let config = await fetch(BACKEND_URL + "config");
 		const result = await config.json();
 		return result;
@@ -243,6 +243,7 @@ function create_custom_element() {
 
 			const host = this.getAttribute("host");
 			const space = this.getAttribute("space");
+			const src = this.getAttribute("src");
 
 			const source = host
 				? `https://${host}`
@@ -252,7 +253,10 @@ function create_custom_element() {
 							await fetch(`https://huggingface.co/api/spaces/${space}/host`)
 						).json()
 				  ).host
-				: this.getAttribute("src");
+				: src;
+
+			const is_embed =
+				!!space || (source && new URL(source).host.endsWith("hf.space"));
 
 			const control_page_title = this.getAttribute("control_page_title");
 			const initial_height = this.getAttribute("initial_height");
@@ -277,7 +281,7 @@ function create_custom_element() {
 					this.wrapper,
 					this._id,
 					_autoscroll,
-					!!space
+					is_embed
 				);
 			}
 		}
diff --git a/ui/packages/app/test/blocks_inputs.spec.ts b/ui/packages/app/test/blocks_inputs.spec.ts
index 9eb3401d4da26..a7caf02251e89 100644
--- a/ui/packages/app/test/blocks_inputs.spec.ts
+++ b/ui/packages/app/test/blocks_inputs.spec.ts
@@ -28,7 +28,7 @@ function mock_api(page: Page, body: Array<unknown>) {
 test("renders the correct elements", async ({ page }) => {
 	await mock_demo(page, "blocks_inputs");
 	await mock_api(page, [["hi dawood"]]);
-	await page.goto("http://localhost:3000");
+	await page.goto("http://localhost:9876");
 
 	const textboxes = await page.getByLabel("Input");
 
diff --git a/ui/packages/app/test/blocks_kinematics.spec.ts b/ui/packages/app/test/blocks_kinematics.spec.ts
index 7943152b9e21a..306a832f48a77 100644
--- a/ui/packages/app/test/blocks_kinematics.spec.ts
+++ b/ui/packages/app/test/blocks_kinematics.spec.ts
@@ -28,7 +28,7 @@ function mock_api(page: Page, body: Array<unknown>) {
 test("renders the correct elements", async ({ page }) => {
 	await mock_demo(page, "blocks_kinematics");
 	await mock_api(page, [[25, 45]]);
-	await page.goto("http://localhost:3000");
+	await page.goto("http://localhost:9876");
 
 	await Promise.all([
 		page.click("button:has-text('Run')"),
diff --git a/ui/packages/app/test/blocks_page_load.spec.ts b/ui/packages/app/test/blocks_page_load.spec.ts
index 38cf8d1a01fb1..f92be22228cbd 100644
--- a/ui/packages/app/test/blocks_page_load.spec.ts
+++ b/ui/packages/app/test/blocks_page_load.spec.ts
@@ -28,7 +28,7 @@ function mock_api(page: Page, body: Array<unknown>) {
 test("renders the correct elements", async ({ page }) => {
 	await mock_demo(page, "blocks_page_load");
 	await mock_api(page, [["Welcome! This page has loaded for Frank"]]);
-	await page.goto("http://localhost:3000");
+	await page.goto("http://localhost:9876");
 
 	const textbox = await page.getByLabel("Name");
 
diff --git a/ui/packages/app/test/blocks_xray.spec.ts b/ui/packages/app/test/blocks_xray.spec.ts
index 966f0dc38e125..63a46f0f6de56 100644
--- a/ui/packages/app/test/blocks_xray.spec.ts
+++ b/ui/packages/app/test/blocks_xray.spec.ts
@@ -27,7 +27,7 @@ function mock_api(page: Page, body: Array<unknown>) {
 
 test("renders the correct elements", async ({ page }) => {
 	await mock_demo(page, "blocks_xray");
-	await page.goto("http://localhost:3000");
+	await page.goto("http://localhost:9876");
 
 	const description = await page.getByTestId("markdown");
 	await expect(description).toContainText("Detect Disease From Scan");
@@ -56,7 +56,7 @@ test("can run an api request and display the data", async ({ page }) => {
 		]
 	]);
 
-	await page.goto("http://localhost:3000");
+	await page.goto("http://localhost:9876");
 
 	await page.getByLabel("Covid").check();
 	await page.getByLabel("Lung Cancer").check();
diff --git a/ui/packages/app/test/input_output.spec.ts b/ui/packages/app/test/input_output.spec.ts
index 65104590ed89e..26f97f1cfe3a0 100644
--- a/ui/packages/app/test/input_output.spec.ts
+++ b/ui/packages/app/test/input_output.spec.ts
@@ -28,7 +28,7 @@ function mock_api(page: Page, body: Array<unknown>) {
 test("a component acts as both input and output", async ({ page }) => {
 	await mock_demo(page, "input_output");
 	await mock_api(page, [["tset"]]);
-	await page.goto("http://localhost:3000");
+	await page.goto("http://localhost:9876");
 
 	const textbox = await page.getByLabel("Input-Output");
 
diff --git a/ui/packages/app/test/kitchen_sink.spec.ts b/ui/packages/app/test/kitchen_sink.spec.ts
index c3cec72fad504..5d74d85de2ab8 100644
--- a/ui/packages/app/test/kitchen_sink.spec.ts
+++ b/ui/packages/app/test/kitchen_sink.spec.ts
@@ -28,7 +28,7 @@ function mock_api(page: Page, body: Array<unknown>) {
 
 test("test inputs", async ({ page }) => {
 	await mock_demo(page, "kitchen_sink");
-	await page.goto("http://localhost:3000");
+	await page.goto("http://localhost:9876");
 
 	const textbox = await page.getByLabel("Textbox").nth(0);
 	await expect(textbox).toHaveValue("Lorem ipsum");
@@ -209,7 +209,7 @@ test("test outputs", async ({ page }) => {
 		]
 	]);
 
-	await page.goto("http://localhost:3000");
+	await page.goto("http://localhost:9876");
 
 	const submit_button = await page.locator("button", { hasText: /Submit/ });
 
diff --git a/ui/packages/app/test/outbreak_forecast.spec.ts b/ui/packages/app/test/outbreak_forecast.spec.ts
index 60f50b46015bc..3184d83bec37e 100644
--- a/ui/packages/app/test/outbreak_forecast.spec.ts
+++ b/ui/packages/app/test/outbreak_forecast.spec.ts
@@ -29,7 +29,7 @@ function mock_api(page: Page, body: Array<unknown>) {
 test("matplotlib", async ({ page }) => {
 	await mock_demo(page, "outbreak_forecast");
 	await mock_api(page, [[{ type: "matplotlib", plot: BASE64_PLOT_IMG }]]);
-	await page.goto("http://localhost:3000");
+	await page.goto("http://localhost:9876");
 
 	await page.getByLabel("Plot Type").selectOption("Matplotlib");
 	await page.getByLabel("Month").selectOption("January");
@@ -55,7 +55,7 @@ test("plotly", async ({ page }) => {
 			}
 		]
 	]);
-	await page.goto("http://localhost:3000");
+	await page.goto("http://localhost:9876");
 
 	await page.getByLabel("Plot Type").selectOption("Plotly");
 	await page.getByLabel("Month").selectOption("January");
diff --git a/ui/packages/app/vite.config.js b/ui/packages/app/vite.config.js
index 2916e57469a17..09d32c781dee5 100644
--- a/ui/packages/app/vite.config.js
+++ b/ui/packages/app/vite.config.js
@@ -30,7 +30,7 @@ export default defineConfig(({ mode }) => {
 		base: is_cdn ? CDN_URL : "./",
 
 		server: {
-			port: 3000
+			port: 9876
 		},
 
 		build: {
diff --git a/ui/playwright-setup.js b/ui/playwright-setup.js
index dd78747558536..40bec486c4188 100644
--- a/ui/playwright-setup.js
+++ b/ui/playwright-setup.js
@@ -11,8 +11,8 @@ export default async function global_setup() {
 	const serve = sirv(template);
 	const app = polka()
 		.use(serve)
-		.listen("3000", () => {
-			console.log(`> Running on localhost: 3000`);
+		.listen("9876", () => {
+			console.log(`> Running on localhost: 9876`);
 		});
 
 	return () => {