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

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>