Web component embed of Gradio app from HF Space

Spaces
1

Hello!

I’m trying to embed a Gradio app that I deployed on an HF Space using Web components. The embed initially works fine, as I can see the Gradio app embedded on my website. However, when I’m on my website and try using the app to compute the sentiment of a sentence (using a model hosted on HF), the app raises the error “Connection errored out.” The app works fine if used directly from the HF Space, or if embedded using iframes.

Some additional info and investigating:

  • The space can be found at “https://fabiochiu-sentiment-analysis-demo.hf.space”.
  • I’ve noticed that upon using the model from the HF Space there happens a GET request at “wss://fabiochiu-sentiment-analysis-demo.hf.space/queue/join”. If I use the app from a Web component embed, the same GET request goes to “my-website-address/queue/join”, which raises an error. If I use the app from an iframe, that request goes to “wss://fabiochiu-sentiment-analysis-demo.hf.space/queue/join” and everything works fine.

Do you know why I may get this error?

Thanks!

2

hi @fabiochiu, indeed you’re right, I think there is is bug when using the gradio web-component since the WSS endpoint should be to the original hf.space. You can report on Issues · gradio-app/gradio · GitHub otherwise I can do that.

Meanwhile, you can use the iframe version

    <iframe
      src="https://fabiochiu-sentiment-analysis-demo.hf.space"
      frameborder="0"
      width="850"
      height="645"
    ></iframe>

Thanks

3

Hi @radames, thanks for your answer. I’m opening an issue on the repo, I’ll use the iframe in the meanwhile.

Have a nice day!

4

This hasn’t been fixed yet in 2 years?
Please tell me the correct way to embed files with gradio app. You can’t manipulate the html with an iframe.