Spaces:
Runtime error
Runtime error
File size: 2,708 Bytes
f304b7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
import gradio as gr
import altair as alt
from vega_datasets import data
import re
CLEAN_RE = r"<(\/*head|\/*html|\/*body|!DOCTYPE html)>"
SELECT_RE = r"document.getElementById\('vis'\)"
SELECT_RE_TWO = r"vegaEmbed\(\"#vis\", spec, embedOpt\)"
x = r".catch\(error => showError\(el, error\)\)"
def give_chart():
source = data.cars()
alt.Chart(source).mark_circle().encode(
x='Horsepower',
y='Miles_per_Gallon',
color='Origin',
).interactive().save('chart.html')
f = open("chart.html", "r").read()
f = re.sub(CLEAN_RE, "", f, flags=re.IGNORECASE)
f = re.sub(
SELECT_RE, "document.getElementsByTagName(\"gradio-app\")[0].shadowRoot.querySelectorAll(\"#vis\")[0]", f, flags=re.IGNORECASE)
f = re.sub(
SELECT_RE_TWO, "vegaEmbed(document.getElementsByTagName(\"gradio-app\")[0].shadowRoot.querySelectorAll(\"#vis\")[0], spec, embedOpt)", f, flags=re.IGNORECASE)
return f
with gr.Blocks(css=".output-html \{ display: flex;justify-content: center;\} ") as demo:
html = gr.HTML()
btn = gr.Button("Give me chart")
btn.click(give_chart, inputs=None, outputs=html,
_js="""
(x) => {
const html_wrapper = document.getElementsByTagName("gradio-app")[0].shadowRoot.querySelectorAll(".output-html")[0]
const head = document.getElementsByTagName("head")[0];
const callback = (mutationList, observer) => {
for (const mutation of mutationList) {
if (mutation.type === 'childList') {
observer.disconnect();
const scripts = Array.from(html_wrapper.querySelectorAll("script"))
.map(e => [e.type, e.src, e.textContent])
const wait = [];
const last = scripts.splice(scripts.length - 1)[0];
scripts.forEach(([type, src, inner], i, arr) => {
let r;
wait.push(new Promise((success) => r = success))
const s = document.createElement("script")
if (type) s.type = type;
if (src) s.src = src;
s.onload = () => r();
html_wrapper.appendChild(s);
s.remove();
})
Promise.all(wait).then(() => {
const s = document.createElement("script")
s.innerHTML = last[2]
html_wrapper.appendChild(s);
s.remove();
})
}
}
};
const observer = new MutationObserver(callback);
observer.observe(
html_wrapper, { attributes: false, childList: true, subtree: true }
);
}
""")
demo.launch()
|