fix space embeds using src attribute

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)
+* 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)
 
 ## Documentation Changes:
 * SEO improvements to guides by[@aliabd](https://github.com/aliabd) in [PR 2915](https://github.com/gradio-app/gradio/pull/2915)

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
 

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",

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();
 });

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();
 });

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();
 });

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`;

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;

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");
 

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')"),

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");
 

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();

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");
 

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/ });
 

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");

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: {

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 () => {