fix space embeds using src attribute (#3065)

* change ports in dev mode * changelog * correctly detect space embeds * changelog * formatting
gradio-app · Jan 27, 2023 · 669ee42 · 669ee42
1 parent 243b400
commit 669ee42
Show file tree

Hide file tree

Showing 18 changed files with 30 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 () => {