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

Gradio app not working inside Next.js #2880

Closed
1 task done
krrishdholakia opened this issue Dec 23, 2022 · 17 comments · Fixed by #3065
Closed
1 task done

Gradio app not working inside Next.js #2880

krrishdholakia opened this issue Dec 23, 2022 · 17 comments · Fixed by #3065
Labels
bug Something isn't working svelte Frontend-related issue (JS)

Comments

@krrishdholakia
Copy link

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

@krrishdholakia krrishdholakia added the bug Something isn't working label Dec 23, 2022
@krrishdholakia
Copy link
Author

Any help here would be appreciated.

cc: @abidlabs

@krrishdholakia
Copy link
Author

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

Screen Shot 2022-12-24 at 5 58 26 PM

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

Screen Shot 2022-12-24 at 5 58 15 PM

@krrishdholakia
Copy link
Author

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

@krrishdholakia
Copy link
Author

This is not an error when I use the iframe.

Screen Shot 2022-12-24 at 6 02 33 PM

@fabiochiusano
Copy link

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
Copy link
Member

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

@greendra8
Copy link

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

@abidlabs abidlabs added the svelte Frontend-related issue (JS) label Jan 19, 2023
@pngwn
Copy link
Member

pngwn commented Jan 26, 2023

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

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

@pngwn
Copy link
Member

pngwn commented Jan 26, 2023

Can i see some code please?

@fabiochiusano
Copy link

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
Copy link
Member

pngwn commented Jan 27, 2023

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
Copy link
Member

pngwn commented Jan 27, 2023

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

@fabiochiusano
Copy link

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

@greendra8
Copy link

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
Copy link
Member

pngwn commented Jan 27, 2023

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

That solved it for me, thank you very much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working svelte Frontend-related issue (JS)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants