Improve Embed and CDN handling and fix a couple of related bugs #6261

pngwn · 2023-11-02T18:54:23Z

Description

Please include a concise summary, in clear English, of the changes in this pull request. If it closes an issue, please mention it here.

Closes: #(issue)

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

Tests

PRs will only be merged if tests pass on CI. To run the tests locally, please set up your Gradio environment locally and run the tests: bash scripts/run_all_tests.sh
You may need to run the linters: bash scripts/format_backend.sh and bash scripts/format_frontend.sh

gradio-pr-bot · 2023-11-02T18:54:38Z

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
	Visual tests	all good!	Build review
🦄	Changes	detected!	Details

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/61deec0279f5dc613ee363ea7c3fcb0eca586b3a/gradio-4.0.2-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@61deec0279f5dc613ee363ea7c3fcb0eca586b3a#subdirectory=client/python"

gradio-pr-bot · 2023-11-02T18:55:19Z

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
`@gradio/app`	`minor`
`@gradio/preview`	`minor`
`gradio`	`minor`

Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Improve Embed and CDN handling and fix a couple of related bugs

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

Maintainers can change the version label to modify the version bump.
If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

abidlabs · 2023-11-02T19:31:53Z

@aliabd you wanna review this?

pngwn · 2023-11-02T19:50:12Z

build_pypi.sh

-GRADIO_VERSION=$new_version pnpm build:cdn
-aws s3 cp gradio/templates/cdn "s3://gradio/${new_version}/" --recursive --region us-west-2
-cp gradio/templates/cdn/index.html gradio/templates/frontend/share.html
+aws s3 cp gradio/templates/frontend "s3://gradio/${new_version}/" --recursive --region us-west-2


Since we use the same build for everything now, we only need to build once and we can upload the files to the server from the templates/frontend dir. It contains everything we need.

pngwn · 2023-11-02T19:50:23Z

.config/basevite.config.ts

-		mode === "production:cdn" ||
-		mode === "production:local" ||
-		mode === "production:website";
+	const production = mode === "production";


Dont need all of these modes anymore.

pngwn · 2023-11-02T19:52:33Z

js/app/build_plugins.ts

+			const transformed_html =
+				(bundle["index.html"].source as string).substring(0, script?.range[0]) +
+				`<script type="module" crossorigin src="${cdn_base}/${version}/gradio.js"></script>` +
+				(bundle["index.html"].source as string).substring(
+					script?.range[1],
+					source.length
+				);
+
+			const share_html_location = join(config.dir, "share.html");
+			writeFileSync(share_html_location, transformed_html);


This is for the share.html rather than copying it over like we used to, we created it directly from the index.html. What we are doing here is prepending the cdn_base to the scripts src. This is the only time we need to do this.

pngwn · 2023-11-02T19:55:18Z

js/app/build_plugins.ts

-	return `
-${make_script}
-make_script("${script}");
+	return `import("${script}");


I dunno why i chose the hard route previsouly.

The problem we always had was that anything that is requested from an html tag will always treat its own location as the base url from which to resolve files. With import it will use the files own location.

This gradio.js file will be request like: https://aws-etc.com/4.0.0/gradio.js so when we request./assets/index-asdasdasd.js it will be considered relative to that gradio.js url.

When we add a script to the page the 'file' in that case is the HTML file, which isn't where the cdn assets live.

pngwn · 2023-11-02T19:55:58Z

js/app/build_plugins.ts

+			const share_html_location = join(config.dir, "share.html");
+			const share_html = readFileSync(share_html_location, "utf8");
+			const share_tree = parse(share_html);
+			const node = Array.from(
+				share_tree.querySelectorAll("link[rel=stylesheet]")
+			).find((node) => /.*\/index(.*?)\.css/.test(node.attributes.href));
+
+			if (!node) return;
+			const transformed_html =
+				share_html.substring(0, node.range[0]) +
+				share_html.substring(node.range[1], share_html.length);
+
+			writeFileSync(share_html_location, transformed_html);


We are just stripping out the css file for the share.html, to prevent network errors. The CSS is loaded by the JS later anyway, so its no big deal.

pngwn · 2023-11-02T19:57:22Z

js/app/src/css.ts

This file was actually the real problem. The CSS assets can only be loaded via a style tag, so we have the issues i mentioned earlier where the base URL was always the location of the HTML file. I fixed this by constructing a new URL based on the location of the file. This seems to work both for remote links (cdn) and for local (normal gradio).

pngwn · 2023-11-02T19:57:46Z

js/app/src/main.ts

+let _res: (value?: unknown) => void;
+let pending = new Promise((res) => {
+	_res = res;
+});
+async function get_index(): Promise<void> {
+	IndexComponent = (await import("./Index.svelte")).default;
+	_res();
+}
+


This is unrelated to the build changed but fixes a race condition I noticed.

pngwn · 2023-11-02T20:02:01Z

This can be tested locally.

You need to build gradio:

pnpm build

Start a local server to serve the gradio files:

pnpm preview:cdn-server

Then change js/_website/src/routes/+layout.svelte Line 77 to "http://localhost:4321/gradio.js"

The cd into js/_website and start the dev server:

cd js/_website
pnpm dev

aliabd

thanks @pngwn! tested locally and everything works great!

* fix embed * add changeset * fixes * remove final references to cdn * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

…roduced in #6261

…roduced in #6261 (#7852) * Revert the minify setting in vite.config.js which was mistakingly introduced in #6261 * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

fix embed

1e1969f

add changeset

712ae17

abidlabs requested a review from aliabd November 2, 2023 19:31

pngwn and others added 3 commits November 2, 2023 19:48

fixes

ddf0c1e

remove final references to cdn

5e80cb7

add changeset

2753397

pngwn commented Nov 2, 2023

View reviewed changes

pngwn changed the title ~~fix embed~~ Improve Embed and CDN handling and fix a couple of related bugs Nov 2, 2023

gradio-pr-bot and others added 2 commits November 2, 2023 20:03

add changeset

f7e22de

Merge branch 'main' into embed-v4-2

a6f1dd9

aliabd approved these changes Nov 2, 2023

View reviewed changes

pngwn merged commit 8bbeca0 into main Nov 2, 2023
20 checks passed

pngwn deleted the embed-v4-2 branch November 2, 2023 22:29

pngwn mentioned this pull request Nov 2, 2023

chore: update versions #6200

Merged

whitphx added a commit that referenced this pull request Mar 27, 2024

Revert the minify setting in vite.config.js which was mistakingly int…

239162c

…roduced in #6261

gradio-pr-bot mentioned this pull request Mar 27, 2024

Revert the minify setting in vite.config.js which was mistakingly introduced in #6261 #7852

Merged

pngwn mentioned this pull request Mar 27, 2024

chore: update versions #7826

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve Embed and CDN handling and fix a couple of related bugs #6261

Improve Embed and CDN handling and fix a couple of related bugs #6261

pngwn commented Nov 2, 2023

gradio-pr-bot commented Nov 2, 2023 •

edited

gradio-pr-bot commented Nov 2, 2023 •

edited

Something isn't right?

abidlabs commented Nov 2, 2023

pngwn Nov 2, 2023

freddyaboulton Nov 2, 2023

pngwn Nov 2, 2023

pngwn Nov 2, 2023

pngwn Nov 2, 2023

pngwn Nov 2, 2023

pngwn Nov 2, 2023

pngwn Nov 2, 2023

pngwn commented Nov 2, 2023 •

edited

aliabd left a comment

Improve Embed and CDN handling and fix a couple of related bugs #6261

Improve Embed and CDN handling and fix a couple of related bugs #6261

Conversation

pngwn commented Nov 2, 2023

Description

🎯 PRs Should Target Issues

Tests

gradio-pr-bot commented Nov 2, 2023 • edited

🪼 branch checks and previews

gradio-pr-bot commented Nov 2, 2023 • edited

🦄 change detected

This Pull Request includes changes to the following packages.

With the following changelog entry.

Something isn't right?

abidlabs commented Nov 2, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pngwn commented Nov 2, 2023 • edited

aliabd left a comment

Choose a reason for hiding this comment

gradio-pr-bot commented Nov 2, 2023 •

edited

gradio-pr-bot commented Nov 2, 2023 •

edited

pngwn commented Nov 2, 2023 •

edited