Gradio iframe embedding

hi all,

hf spaces gradio iframe embedding appears useful, seems to work fine but does not seem to be documented well.

are there plans to expland the gradio documentation for hf spaces?

if yes, is there a place to make suggestions?

in good spirits,
luis

Hi @luisoala, one of the developers of Gradio here. Thanks for your question - the Gradio website has some documentation on hosting on Spaces (Gradio), but we can definitely improve it.

What improvements would you like to see?

hi @abidlabs thanks for quick response.

gradio docs and also getting started with hf spaces + gradio (Documentation for Spaces) is great

what i meant with “Gradio iframe embedding” is the following use case:

  1. i host a gradio demo on hf space, in my case raw2logit - a Hugging Face Space by luisoala
  2. i want to embed the demo in a website, in my case a project site “A”

to me, it was not obvious which url should be used for the iframe embed. after doing ctl+c on hf space i found “B” which is different from the default spaces url for the demo “C”. also, the first url provides some further fromatting options with “?_”, e.g. dark mode etc.

if there is documentation explaining how hf spaces are to embedded it could be linked in the “gradio+hf spaces” guide.

let me know if this was clear or further context is needed.

in good spirits,
luis

p.s. the forum does not allow me to put more than two links into the post, so here the variables
A = aiaudit .org | Dataset Drift Controls Using Raw Image Data and Differentiable ISPs
B = static pipeline demo

C = raw2logit - a Hugging Face Space by luisoala

Yes you have great timing, since we actually just implemented this feature! You can now use native embeddings instead of iframes for a better experience and better UI. We’ll be announcing this shortly along with instructions, but in the meantime, you can take a look at our landing page where we have used the new native embeddings for all 4 of the demos: https://www.gradio.app/

We haven’t officially added docs yet, but unofficially, here’s how you do it :wink:

// import this in HTML file
<script defer="defer" id="gradio-library" src="www.gradio.app/gradio_static/bundle.js">

// in script tags:
launchGradioFromSpaces("path/to/spaces", "#div")
2 Likes

excellent, saw the twitter announcement, too. will give it a spin :slight_smile:

1 Like

Hey @luisoala here’s the complete minimum working example in order to embed a Gradio interface. Thanks!

<html>
<head>
<link rel="stylesheet" href="https://gradio.s3-us-west-2.amazonaws.com/2.6.2/static/bundle.css">
</head>
<body>
<div id="target"></div>
<script src="https://gradio.s3-us-west-2.amazonaws.com/2.6.2/static/bundle.js"></script>
<script>
launchGradioFromSpaces("abidlabs/question-answering", "#target")
</script>
</body>
</html>
1 Like

I find that clicking on an example image (image segmentation tab) for inference does not work on https://www.gradio.app/. Is there any way we can make it work?

Thanks @dnth for bringing this up! We have an open issue to fix this and we’ll get on it soon: Website Improvements and Fixes · Issue #562 · gradio-app/gradio (github.com)

If you find any other issues with the website, you can comment in that issue :hugs:

2 Likes

FYI I found that I needed to pin my SDK version to before 3.0 on Hugging Face (e.g. 2.9.4) in order for embedding to work, even on an identical copy of the Space.

This was a tricky one to debug, because the SDK versions are not pinned on the example Spaces. I believe there’s implicit state here, where the SDK version is set when the Space is built, so cloning a Space is not enough to get the same behavior.

Didn’t fully root cause, but noticed that the “view the API” link doesn’t appear if you have gradio>2.9.4 and the associated endpoints, e.g. https://hf.space/embed/{entity}/{project}/api give 500 errors. Could be due to a cross-origin issue, based on error output below, but I’m out of my web dev depth here:

4 Likes

UPDATE: please use the following approach to embed Spaces: Sharing Your App (gradio.app)

1 Like

embedding is now broken. getting CORS error on all my embeds.

Yes, I also have this problem

Hi @tomaseo2022, is the Space you are trying to embed a private Space or a public Space? If it’s a public Space, can you link it here?

1 Like

Yes, they are public spaces.

Hi @tomaseo2022 I’m getting 404s when I visit your Spaces. Can you try factory rebooting them?

A factory reboot seems to have fixed the problem. Thank you very much for your time!

1 Like

Hi, I’m looking for recommendations for website hosts that can handle ML app embeds like those for HF-Gradio.

I’ve been trying Squarespace for a bit, and can’t seem to get the embed right, even after taking up a “business” account that allows iframes and JS.

I don’t have web design skills so would rather use a host that has ready-made templates. Would folks who have successfully embedded their apps on their own website have any recommendations?