gradio HTML component with javascript code don't work

Question

I'm trying to integrate HTML file (which contains javascript function) to gradio HTML 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.html file:

<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 run test.html it works fine (after clicking on "start" I can see "Hello" in demo id

The 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.onclick

How can I integrate the HTML file (with js) to gradio gr.HTML element ?

Did you ever figure this out? Did the solution below work? – Logan Price Jul 13 '23 at 00:25 — Logan Price, Jul 13 '23 at 00:25

score 0 · Answer 1 · answered Jun 14 '23 at 09:14

just use html code as string in python like this

htmlStr = '''<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>'''

...
input_mic = gr.HTML(lines)
...

gradio HTML component with javascript code don't work

1 Answers1