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")
1 Like

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>

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:

3 Likes