Embedding Gradio Demos on Websites

Prerequisite: This Guide builds on topics introduced in the Quickstart. Make sure to read the Quickstart first.

Introduction

Once you have created a Gradio demo and hosted it on Hugging Face Spaces, you may want to embed the demo on a different website, such as your blog or your portfolio. Embedding an interactive demo allows people to try out the machine learning model that you have built, without needing to download or install anything — right in their browser! The best part is that you can embed interative demos even in static websites, such as GitHub pages.

There are two ways to embed your Gradio demos, hosted on Hugging Face Spaces, into your websites:

(Preferred) Web components, using the <gradio-app> tag
Iframes, using the <iframe> tag, in cases where you cannot add javascript to your page

In either case, the first step is to create your Gradio demo and host it on Hugging Face Spaces, a process which is described in this blog post: https://huggingface.co/blog/gradio-spaces

In this guide, we will be embedding this image classification Space: https://huggingface.co/spaces/abidlabs/pytorch-image-classifier using both web components and iframes.

Embedding with Web Components

Embedding with web components has a number of advantages over traditional iframes:

It's easy! All you need is the name of the Space
It's faster to load than iframes
The embedded demo takes up just the right width and height for the demo

How do you embed your Gradio demo with web components? There are two steps:

Somewhere in your webpage, usually in the <head> tags, include the following javascript code, which imports the Gradio package:

<script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.0.18/gradio.js"></script>
- Instead of 3.0.18, you can put whichever version of gradio, you'd like to run (a safe choice is the latest stable version of Gradio).
Wherever you'd like to put your demo on your webpage, insert the following code:

<gradio-app space="abidlabs/pytorch-image-classifier"> </gradio-app>
- Instead of abidlabs/pytorch-image-classifier, you should, of course, put the path to your Space

That's it! Here's what it looks like in action:

Note: you can provide an initial height for your embedded demo by using the initial_height parameter. This height (which is 300px by default) is used to render the page appropriately until the demo loads, at which point the embedded demo takes up the height it needs for the demo. This would look like:

<gradio-app space="abidlabs/pytorch-image-classifier" initial_height="500px"> </gradio-app>

Embedding with Iframes

Notice that using web components requires importing javascript. If you cannot do this on your website, you can use Iframes instead. There are a few things to keep in mind:

The URL to the iframe should be:

https://hf.space/embed/PATH_TO_SPACE/+

Iframes require a specified width and height to render correctly, so you should set the width and height attributes based on the size of the demo you are embedding.
You must request the permissions that are needed for your demo to work. While different demos require different permissions, you could request all permissions as a catch all using the allow and sandbox attributes.

Here is a complete example of the iframe tag:

A little long, but here's what it looks like embedded into this page:

Next Steps

Now that you know two different ways how to embed Gradio demos in your own portfolios, blog, or website, start building your own demo!

If you are looking for inspiration, try exploring demos other people have built with Gradio, browse public Hugging Face Spaces 🤗

5.3 KiB Raw Blame History

Embedding Gradio Demos on Websites

Introduction

Embedding with Web Components

Embedding with Iframes

Next Steps

5.3 KiB

Raw Blame History