Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web component embed of Gradio app from HF Space #2883

Closed
1 task done
fabiochiusano opened this issue Dec 24, 2022 · 1 comment
Closed
1 task done

Web component embed of Gradio app from HF Space #2883

fabiochiusano opened this issue Dec 24, 2022 · 1 comment
Labels
bug Something isn't working

Comments

@fabiochiusano
Copy link

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

Screenshot 2022-12-24 at 17 58 27

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 fabiochiusano added the bug Something isn't working label Dec 24, 2022
@fabiochiusano
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant