New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve Embed and CDN handling and fix a couple of related bugs #6261
Changes from 4 commits
1e1969f
712ae17
ddf0c1e
5e80cb7
2753397
f7e22de
a6f1dd9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
"@gradio/app": minor | ||
"gradio": minor | ||
--- | ||
|
||
feat:fix embed |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,12 +9,9 @@ new_version=$(python -c "import json; f = open('$FILE', 'r'); data = json.load(f | |
GRADIO_VERSION=$new_version | ||
|
||
rm -rf gradio/templates/frontend | ||
rm -rf gradio/templates/cdn | ||
pnpm i --frozen-lockfile --ignore-scripts | ||
GRADIO_VERSION=$new_version pnpm build | ||
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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh nice |
||
|
||
rm -rf dist/* | ||
rm -rf build/* | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,70 +17,47 @@ export function inject_ejs(): Plugin { | |
}; | ||
} | ||
|
||
interface PatchDynamicImportOptionms { | ||
mode: "cdn" | "local"; | ||
gradio_version: string; | ||
cdn_url: string; | ||
} | ||
|
||
export function patch_dynamic_import({ | ||
mode, | ||
gradio_version, | ||
cdn_url | ||
}: PatchDynamicImportOptionms): Plugin { | ||
return { | ||
name: "patch-dynamic-import", | ||
enforce: "post", | ||
writeBundle(config, bundle) { | ||
// const import_re = /import\(((?:'|")[\.\/a-zA-Z0-9]*(?:'|"))\)/g; | ||
// const import_meta = `${"import"}.${"meta"}.${"url"}`; | ||
// for (const file in bundle) { | ||
// const chunk = bundle[file]; | ||
// if (chunk.type === "chunk") { | ||
// if (chunk.code.indexOf("import(") > -1) { | ||
// const fix_fn = `const VERSION_RE = new RegExp("${gradio_version}\/", "g");function import_fix(mod, base) {const url = new URL(mod, base); return import(\`${cdn_url}\${url.pathname?.startsWith('/') ? url.pathname.substring(1).replace(VERSION_RE, "") : url.pathname.replace(VERSION_RE, "")}\`);}`; | ||
// chunk.code = | ||
// fix_fn + | ||
// chunk.code.replace(import_re, `import_fix($1, ${import_meta})`); | ||
// if (!config.dir) break; | ||
// const output_location = join(config.dir, chunk.fileName); | ||
// writeFileSync(output_location, chunk.code); | ||
// } | ||
// } | ||
// } | ||
} | ||
}; | ||
} | ||
|
||
export function generate_cdn_entry({ | ||
enable, | ||
cdn_url | ||
version, | ||
cdn_base | ||
}: { | ||
enable: boolean; | ||
cdn_url: string; | ||
version: string; | ||
cdn_base: string; | ||
}): Plugin { | ||
return { | ||
name: "generate-cdn-entry", | ||
enforce: "post", | ||
writeBundle(config, bundle) { | ||
if (!enable) return; | ||
|
||
if ( | ||
!config.dir || | ||
!bundle["index.html"] || | ||
bundle["index.html"].type !== "asset" | ||
) | ||
return; | ||
|
||
const tree = parse(bundle["index.html"].source as string); | ||
const script = | ||
Array.from(tree.querySelectorAll("script[type=module]")).find( | ||
(node) => node.attributes.src?.startsWith(cdn_url) | ||
)?.attributes.src || ""; | ||
const source = bundle["index.html"].source as string; | ||
const tree = parse(source); | ||
|
||
const script = Array.from( | ||
tree.querySelectorAll("script[type=module]") | ||
).find((node) => node.attributes.src?.includes("assets")); | ||
|
||
const output_location = join(config.dir, "gradio.js"); | ||
|
||
writeFileSync(output_location, make_entry(script)); | ||
writeFileSync(output_location, make_entry(script?.attributes.src || "")); | ||
|
||
if (!script) return; | ||
|
||
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); | ||
Comment on lines
+51
to
+60
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is for the |
||
} | ||
}; | ||
} | ||
|
@@ -93,6 +70,7 @@ export function generate_dev_entry({ enable }: { enable: boolean }): Plugin { | |
name: "generate-dev-entry", | ||
transform(code, id) { | ||
if (!enable) return; | ||
|
||
const new_code = code.replace(RE_SVELTE_IMPORT, (str, $1, $2) => { | ||
return `const ${$1.replace( | ||
" as ", | ||
|
@@ -109,18 +87,7 @@ export function generate_dev_entry({ enable }: { enable: boolean }): Plugin { | |
} | ||
|
||
function make_entry(script: string): string { | ||
const make_script = ` | ||
function make_script(src) { | ||
const script = document.createElement('script'); | ||
script.type = 'module'; | ||
script.setAttribute("crossorigin", ""); | ||
script.src = src; | ||
document.head.appendChild(script); | ||
}`; | ||
|
||
return ` | ||
${make_script} | ||
make_script("${script}"); | ||
return `import("${script}"); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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 This 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. |
||
`; | ||
} | ||
|
||
|
@@ -174,14 +141,6 @@ export function handle_ce_css(): Plugin { | |
} | ||
); | ||
|
||
const transformed_html = | ||
(bundle["index.html"].source as string).substring(0, style!.range[0]) + | ||
(bundle["index.html"].source as string).substring( | ||
style!.range[1], | ||
bundle["index.html"].source.length | ||
); | ||
const html_location = join(config.dir, "index.html"); | ||
|
||
writeFileSync( | ||
file_to_insert.filename, | ||
file_to_insert.source | ||
|
@@ -192,7 +151,19 @@ export function handle_ce_css(): Plugin { | |
) | ||
); | ||
|
||
writeFileSync(html_location, transformed_html); | ||
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); | ||
Comment on lines
+154
to
+166
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We are just stripping out the css file for the |
||
} | ||
}; | ||
} | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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). |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -21,6 +21,15 @@ let FONTS: string | []; | |
FONTS = "__FONTS_CSS__"; | ||
|
||
let IndexComponent: typeof Index; | ||
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(); | ||
} | ||
|
||
Comment on lines
+24
to
+32
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is unrelated to the build changed but fixes a race condition I noticed. |
||
function create_custom_element(): void { | ||
const o = { | ||
SvelteComponent: svelte.SvelteComponent | ||
|
@@ -72,7 +81,7 @@ function create_custom_element(): void { | |
} | ||
|
||
async connectedCallback(): Promise<void> { | ||
IndexComponent = (await import("./Index.svelte")).default; | ||
await get_index(); | ||
this.loading = true; | ||
|
||
if (this.app) { | ||
|
@@ -136,11 +145,12 @@ function create_custom_element(): void { | |
return ["src", "space", "host"]; | ||
} | ||
|
||
attributeChangedCallback( | ||
async attributeChangedCallback( | ||
name: string, | ||
old_val: string, | ||
new_val: string | ||
): void { | ||
): Promise<void> { | ||
await pending; | ||
if ( | ||
(name === "host" || name === "space" || name === "src") && | ||
new_val !== old_val | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Dont need all of these modes anymore.