gradio: Gradio app not working inside Next.js

Describe the bug

Hi,

I’m embedding my Gradio app inside Next.js.

When I do this, while the component loads - it is not functional. Screen Shot 2022-12-23 at 3 00 47 PM

This is the error thrown in console log:

WebSocket connection to ‘wss://nextmagictemplateappv2.krrishdholakia.repl.co/queue/join’ failed:

I’m not sure why it would be making a queue/join request to my next.js app, when the gradio app is hosted on hf and just being wrapped by the next.js app.

Any help here would be appreciated.

Is there an existing issue for this?

I have searched the existing issues

Reproduction

https://nextmagictemplateappv2.krrishdholakia.repl.co/

Screenshot

No response

Logs

index.4ac6a7e7.js:34 WebSocket connection to 'wss://nextmagictemplateappv2.krrishdholakia.repl.co/queue/join' failed: 
(anonymous) @ index.4ac6a7e7.js:34
(anonymous) @ index.4ac6a7e7.js:76
(anonymous) @ index.4ac6a7e7.js:4
ie @ index.4ac6a7e7.js:4
P @ index.4ac6a7e7.js:77
(anonymous) @ index.4ac6a7e7.js:4
(anonymous) @ index.4ac6a7e7.js:4
h @ index.4ac6a7e7.js:76

System Info

src="https://gradio.s3-us-west-2.amazonaws.com/3.12.0/gradio.js"

Severity

blocking all usage of gradio

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 17 (6 by maintainers)

Most upvoted comments

Hi, I have the same problem with a Gradio app hosted on HF and embedded using Web components. The app works fine on the HF Space, works when embedded using an iframe, and doesn’t work when embedded using Web components.

As @krrishdholakia said, also in my case there’s a GET call to queue/join with my website as the hostname instead of the HF Space.

fabiochiusano on Dec 24, 2022

Yeah sorry, I changed it again. I’m now able to reproduce the error.

The reason is basically that we have a number of different ways to link to a space in order to embed a gradio app on a page (too many ways really). There was some logic that incorrectly utilising the URL of the embedding page for certain requests (only when using the src attribute of the web component).

I’ve fixed this in #3065 now and it should go out soon.

In the meantime if you use the space attribute instead of src it should work. So:

<gradio-app 
  space="fabiochiu/sentiment-analysis-demo"
></gradio-app>

Or you can use the host attribute:

<gradio-app 
  host="fabiochiu-sentiment-analysis-demo.hf.space"
></gradio-app>

We have space, host and src as ways of embedding a space and all are slightly different (see what i mean by too many). And I’ve just realised the only version of this that we give an example of on the space (“Embed this space”) is the only one that doesn’t work.

So for now use one of the other methods, the fix for this will be in soon, and we will need to clean up the API for this in the future. I think we can just have one attribute that figures things out rather than 3.

Thanks for your help with this one, was sneaky!

pngwn on Jan 27, 2023

Hi! The problem is still present for me too.

The HF space I’m trying to embed: https://huggingface.co/spaces/fabiochiu/sentiment-analysis-demo/blob/main/app.py The embed code (I tried with 3.16.2 too):

<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>

The embedded app raises an error after trying to call the model hosted on HF.

fabiochiusano on Jan 27, 2023