mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-11-21 01:01:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

support changing the custom element src attributes (#4461)

Browse Source 
* suppor changing the custom element src attributes

* changelog

* changelog again

* fix

* some fixes
This commit is contained in:
pngwn 2023-06-20 11:36:10 +01:00 committed by GitHub
parent 1068371b9f
commit 2b91d716c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 146 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -2,7 +2,7 @@
## New Features:
No changes to highlight.
- Allow the web component `space`, `src`, and `host` attributes to be updated dynamically by [@pngwn](https://github.com/pngwn) in [PR 4461](https://github.com/gradio-app/gradio/pull/4461)
## Bug Fixes:

50
js/_cdn-test/index.html
View File

@ -19,7 +19,7 @@
<title>Vite App</title>
</head>
<body>
<h1>Hello title</h1>
<!-- <h1>Hello title</h1>
<h2>hello subtitle</h2>
<p>
Hello text. Hello text. Hello text. Hello text. Hello text. Hello text.
@ -157,16 +157,16 @@
Hello text. Hello text. Hello text. Hello text. Hello text. Hello text.
Hello text. Hello text. Hello text. Hello text. Hello text. Hello text.
Hello text. Hello text.
</p>
</p> -->
<!-- https://huggingface.co/spaces/freddyaboulton/blocks-essay -->
<gradio-app
<!-- <gradio-app
space="freddyaboulton/timeseries-forecasting-with-prophet
"
></gradio-app>
></gradio-app> -->
<!-- -->
<!-- </p> -->
<gradio-app space="awacke1/GradioAutoPlotFromCSV" info="false"></gradio-app>
<!-- <gradio-app space="awacke1/GradioAutoPlotFromCSV" info="false"></gradio-app>
<gradio-app
space="gradio/plot_component_main"
initial_height="400px"
@ -260,7 +260,7 @@
control_page_title="true"
></gradio-app>
<!-- https://huggingface.co/spaces/ -->
<h2>Config Error</h2>
<gradio-app
space="pngwn/clear-inputs"
@ -276,7 +276,9 @@
></gradio-app>
<h2>Working</h2>
<gradio-app
-->
<gradio-app
space="gradio/live_with_vars"
initial_height="200px"
control_page_title="true"
@ -287,15 +289,29 @@
src="http://127.0.0.1:7860/"
frameborder="0"
></iframe> -->
<!-- <script>
iFrameResize(
{
log: false,
checkOrigin: false,
heightCalculationMethod: "lowestElement"
},
"#myIframe"
);
</script> -->
<button>Toggle Space</button>
<script>
// iFrameResize(
// {
// log: false,
// checkOrigin: false,
// heightCalculationMethod: "lowestElement"
// },
// "#myIframe"
// );
let spaces = ['gradio/live_with_vars', 'gradio/colorpicker_component_main']
const b = document.getElementsByTagName('button')[0];
b.addEventListener('click', update_space)
function update_space() {
const g = document.getElementsByTagName('gradio-app')[0];
g.setAttribute('space', spaces[1])
const [_old, _new] = spaces;
spaces = [_new, _old]
}
</script>
</body>
</html>

136
js/app/src/main.ts
View File

@ -14,11 +14,46 @@ FONTS = "__FONTS_CSS__";
function create_custom_element() {
class GradioApp extends HTMLElement {
control_page_title: string | null;
initial_height: string;
is_embed: string;
container: string;
info: string | true;
autoscroll: string | null;
eager: string | null;
theme_mode: ThemeMode | null;
host: string | null;
space: string | null;
src: string | null;
app?: Index;
loading: boolean;
updating: { name: string; value: string } | false;
constructor() {
super();
this.host = this.getAttribute("host");
this.space = this.getAttribute("space");
this.src = this.getAttribute("src");
this.control_page_title = this.getAttribute("control_page_title");
this.initial_height = this.getAttribute("initial_height") ?? "300px"; // default: 300px
this.is_embed = this.getAttribute("embed") ?? "true"; // default: true
this.container = this.getAttribute("container") ?? "true"; // default: true
this.info = this.getAttribute("info") ?? true; // default: true
this.autoscroll = this.getAttribute("autoscroll");
this.eager = this.getAttribute("eager");
this.theme_mode = this.getAttribute("theme_mode") as ThemeMode | null;
this.updating = false;
this.loading = false;
}
async connectedCallback() {
this.loading = true;
if (this.app) {
this.app.$destroy();
}
if (typeof FONTS !== "string") {
FONTS.forEach((f) => mount_css(f, document.head));
}
@ -37,43 +72,96 @@ function create_custom_element() {
observer.observe(this, { childList: true });
const host = this.getAttribute("host");
const space = this.getAttribute("space");
const src = this.getAttribute("src");
// if (this.)
const control_page_title = this.getAttribute("control_page_title");
const initial_height = this.getAttribute("initial_height") ?? "300px"; // default: 300px
const is_embed = this.getAttribute("embed") ?? "true"; // default: true
const container = this.getAttribute("container") ?? "true"; // default: true
const info = this.getAttribute("info") ?? true; // default: true
const autoscroll = this.getAttribute("autoscroll");
const eager = this.getAttribute("eager");
const theme_mode = this.getAttribute("theme_mode") as ThemeMode | null;
const app = new Index({
this.app = new Index({
target: this,
props: {
// embed source
space: space ? space.trim() : space,
src: src ? src.trim() : src,
host: host ? host.trim() : host,
space: this.space ? this.space.trim() : this.space,
src: this.src ? this.src.trim() : this.src,
host: this.host ? this.host.trim() : this.host,
// embed info
info: info === "false" ? false : true,
container: container === "false" ? false : true,
is_embed: is_embed === "false" ? false : true,
initial_height,
eager: eager === "true" ? true : false,
info: this.info === "false" ? false : true,
container: this.container === "false" ? false : true,
is_embed: this.is_embed === "false" ? false : true,
initial_height: this.initial_height,
eager: this.eager === "true" ? true : false,
// gradio meta info
version: GRADIO_VERSION,
theme_mode,
theme_mode: this.theme_mode,
// misc global behaviour
autoscroll: autoscroll === "true" ? true : false,
control_page_title: control_page_title === "true" ? true : false,
autoscroll: this.autoscroll === "true" ? true : false,
control_page_title: this.control_page_title === "true" ? true : false,
// for gradio docs
// TODO: Remove -- i think this is just for autoscroll behavhiour, app vs embeds
app_mode: window.__gradio_mode__ === "app"
}
});
if (this.updating) {
this.setAttribute(this.updating.name, this.updating.value);
}
this.loading = false;
}
static get observedAttributes() {
return ["src", "space", "host"];
}
attributeChangedCallback(name: string, old_val: string, new_val: string) {
if (
(name === "host" || name === "space" || name === "src") &&
new_val !== old_val
) {
this.updating = { name, value: new_val };
if (this.loading) return;
if (this.app) {
this.app.$destroy();
}
this.space = null;
this.host = null;
this.src = null;
if (name === "host") {
this.host = new_val;
} else if (name === "space") {
this.space = new_val;
} else if (name === "src") {
this.src = new_val;
}
this.app = new Index({
target: this,
props: {
// embed source
space: this.space ? this.space.trim() : this.space,
src: this.src ? this.src.trim() : this.src,
host: this.host ? this.host.trim() : this.host,
// embed info
info: this.info === "false" ? false : true,
container: this.container === "false" ? false : true,
is_embed: this.is_embed === "false" ? false : true,
initial_height: this.initial_height,
eager: this.eager === "true" ? true : false,
// gradio meta info
version: GRADIO_VERSION,
theme_mode: this.theme_mode,
// misc global behaviour
autoscroll: this.autoscroll === "true" ? true : false,
control_page_title:
this.control_page_title === "true" ? true : false,
// for gradio docs
// TODO: Remove -- i think this is just for autoscroll behavhiour, app vs embeds
app_mode: window.__gradio_mode__ === "app"
}
});
this.updating = false;
}
}
}
if (!customElements.get("gradio-app"))