Gradio HTML component with javascript code don't work
I’m trying to integrateHTMLfile (which containsjavascriptfunction) togradioHTML component (gr.HTML) and it seems not to work together:Gradio app:import gradio as gr

with open("test.html") as f:
    lines = f.readlines()

with gr.Blocks() as demo:   
    input_mic = gr.HTML(lines)
    out_text  = gr.Textbox()

if __name__ == "__main__":   
    demo.launch()test.htmlfile:<html>
  <body>

      <script type = "text/JavaScript">
        function test() {
          document.getElementById('demo').innerHTML = "Hello"
          }
      </script>

    <h1>My First JavaScript</h1>
    <button type="testButton" onclick="test()"> Start </button>

    <p id="demo"></p>

  </body>
</html>When I runtest.htmlit works fine (after clicking on “start” I can see “Hello” in demo idThe HTML seems weird (the button doesn’t look like a button):And when I click on “start” I’m getting an error on the console:Uncaught ReferenceError: test is not defined     at HTMLButtonElement.onclickHow can I integrate the HTML file (with js) to gradio gr.HTML element ?
2023-04-21T21:56:58Z
hello@laro1You can’t load scripts viagr.HTML, but you can run a JavaScript function on page load and thus set your JavaScript code toglobalThis, thus visible to the entire pageimport gradio as gr

html = """
<html>
  <body>
    <h1>My First JavaScript</h1>
    <button type="testButton" onclick="testFn()"> Start </button>
    <p id="demo"></p>

  </body>
</html>
"""

scripts = """
async () => {
   // set testFn() function on globalThis, so you html onlclick can access it
    globalThis.testFn = () => {
      document.getElementById('demo').innerHTML = "Hello"
    }
}
"""

with gr.Blocks() as demo:   
    input_mic = gr.HTML(html)
    out_text  = gr.Textbox()
    # run script function on load,
    demo.load(None,None,None,_js=scripts)

if __name__ == "__main__":   
    demo.launch()
2023-09-08T10:53:17Z
Ok cool, but what if the js script needs external “script src=”  references?
2023-09-08T21:51:45Z
hi@MaxHype, I strongly recommend loading ESM modules, here is an example with two optionsimport gradio as gr

html = """
<html>
  <body>
    <h1>My First JavaScript</h1>
    <button type="testButton" onclick="testFn()"> Start </button>
    <p id="demo"></p>

  </body>
</html>
"""

scripts = """
async () => {
    // set testFn() function on globalThis, so you html onlclick can access it
    // const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7/+esm");
    // globalThis.d3 = d3;
    // or
    const script = document.createElement("script");
    script.onload = () =>  console.log("d3 loaded") ;
    script.src = "https://cdn.jsdelivr.net/npm/d3@7";
    document.head.appendChild(script)

    globalThis.testFn = () => {
      document.getElementById('demo').innerHTML = "Hello"
    }
}
"""

with gr.Blocks() as demo:   
    input_mic = gr.HTML(html)
    out_text  = gr.Textbox()
    # run script function on load,
    demo.load(None,None,None,_js=scripts)

demo.launch()
2023-09-09T12:45:02Z
Awesome, thank you@radamesI’ll try this asap!