Web component embed of Gradio app from HF Space

[fabiochiusano]

Describe the bug

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.

Thanks!

Is there an existing issue for this?

• I have searched the existing issues

Reproduction

Embed the following code on a sample website and run a sample prediction on the app to raise the error.

<script
	type="module"
	src="https://gradio.s3-us-west-2.amazonaws.com/3.14.0/gradio.js"
></script>

<gradio-app src="https://fabiochiu-sentiment-analysis-demo.hf.space"></gradio-app>

Note how the same error doesn't happen if the app comes from an iframe...

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

... or if the prediction is run from the HF Space directly at https://huggingface.co/spaces/fabiochiu/sentiment-analysis-demo.

Screenshot

Logs

Here's the error raised on the browser console when I try to make a prediction using the model on the Gradio app. Note that the file where the Gradio app is embedded is "/users/fabio/Desktop/PracticalNLP/website/course-practical-nlp/01-intro-to-nlp/02-nlp-tasks.html".

=================================================================================

WebSocket connection to 'wss://users/fabio/Desktop/PracticalNLP/website/course-practical-nlp/01-intro-to-nlp/02-nlp-tasks.htmlqueue/join' failed: 
(anonymous)	@	index.cb50929e.js:34
(anonymous)	@	index.cb50929e.js:76
(anonymous)	@	index.cb50929e.js:4
ae	@	index.cb50929e.js:4
_	@	Button.svelte:10
(anonymous)	@	index.cb50929e.js:4
ae	@	index.cb50929e.js:4
B	@	Button.svelte:9

System Info

gradio==3.14.0

Severity

annoying

[fabiochiusano]

I'm closing it as I noticed that it's a duplicate of #2880.