add option to control page title, default to false (#2400)

* add option to control page title, default to false

* changelog

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
pngwn 2022-10-07 15:32:40 +01:00 committed by GitHub
parent 7305a19a30
commit 8f43b6218b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 7 deletions

View File

@ -1,5 +1,9 @@
# Upcoming Release
## Bug Fixes:
* Ensure that Gradio does not take control of the HTML page title when embedding a gradio app as a web component, this behaviour flipped by adding `control_page_title="true"` to the webcomponent. [@pngwn](https://github.com/pngwn) in [PR 2400](https://github.com/gradio-app/gradio/pull/2400)
## New Features:
No changes to highlight.

View File

@ -59,8 +59,9 @@
Hello text. Hello text.
</p>
<gradio-app
space="gradio/Echocardiogram-Segmentation"
space="gradio/automatic-speech-recognition"
initial_height="400px"
control_page_title="true"
></gradio-app>
<iframe

View File

@ -55,7 +55,7 @@
</head>
<body style="width: 100%; margin: 0; padding: 0; height: 100%">
<gradio-app>
<gradio-app control_page_title="true">
<div
id="root"
style="display: flex; flex-direction: column; flex-grow: 1"

View File

@ -36,6 +36,8 @@
export let id: number = 0;
export let autoscroll: boolean = false;
export let show_api: boolean = true;
export let control_page_title = false;
let app_mode = window.__gradio_mode__ === "app";
let loading_status = create_loading_status_store();
@ -422,7 +424,9 @@
</script>
<svelte:head>
<title>{title}</title>
{#if control_page_title}
<title>{title}</title>
{/if}
{#if analytics_enabled}
<script
async

View File

@ -252,11 +252,13 @@ function create_custom_element() {
observer.observe(this.root, { childList: true });
const space = this.getAttribute("space");
const control_page_title = this.getAttribute("control_page_title");
const initial_height = this.getAttribute("initial_height");
let autoscroll = this.getAttribute("autoscroll");
let source = space
? `https://hf.space/embed/${space}/+/`
: this.getAttribute("src");
const initial_height = this.getAttribute("initial_height");
let autoscroll = this.getAttribute("autoscroll");
const _autoscroll = autoscroll === "true" ? true : false;
@ -266,7 +268,17 @@ function create_custom_element() {
if (config === null) {
this.wrapper.remove();
} else {
mount_app(config, this.root, this.wrapper, this._id, _autoscroll);
mount_app(
{
...config,
control_page_title:
control_page_title && control_page_title === "true" ? true : false
},
this.root,
this.wrapper,
this._id,
_autoscroll
);
}
}
}
@ -289,7 +301,7 @@ async function unscoped_mount() {
});
const config = await handle_config(target, null);
mount_app(config, false, target, 0);
mount_app({ ...config, control_page_title: true }, false, target, 0);
}
// dev mode or if inside an iframe