Gradio app not working inside Next.js

[krrishdholakia]

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.

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

[krrishdholakia]

Any help here would be appreciated.

cc: @abidlabs

[krrishdholakia]

Update,

It seems like when I use this inside a Next.js project, it looks for a queue/join endpoint with the website name as the hostname

vs. when i have it wrapped in a normal html file, it looks for it with the gradio/hf space name as the hostname

[krrishdholakia]

For context this is happening when i'm using the gradio webcomponent in Next.js

[krrishdholakia]

This is not an error when I use the iframe.

[fabiochiusano]

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.

[abidlabs]

Thanks for creating the issue folks. We'll look into it! cc @aliabid94

[greendra8]

Having same issue when using html tag. Happening on all gradio versions I try.

[pngwn]

Is this still present? I can't reproduce it.

https://2880-gradio-next-pngwn.vercel.app/

https://github.com/pngwn/2880-gradio-next
https://github.com/pngwn/2880-gradio-next/blob/main/src/pages/index.tsx

There is a problem in dev mode however, that I have a fix for in #3065.

[greendra8]

All my embeds are still broken when using tag. Iframe works. Frustrating!

[pngwn]

Can i see some code please?

[fabiochiusano]

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.

[pngwn]

I tried using your space and it works fine for me: https://2880-gradio-next.vercel.app/

Can you show the whole file please, or the whole project if it is public?

[pngwn]

Oh the embedding is slightly different here, let me check that.

[fabiochiusano]

Ok! Let me know if having a public page can help you, I can set it up quickly

[greendra8]

I tried using your space and it works fine for me: https://2880-gradio-next.vercel.app/

Can you show the whole file please, or the whole project if it is public?

The demo you linked doesn't work for me and produces the error.

[pngwn]

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!

[fabiochiusano]

That solved it for me, thank you very much!