mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-12 12:40:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve formatting of guide (#1789)

Browse Source
This commit is contained in:
Freddy Boulton 2022-07-14 10:27:18 -04:00 committed by GitHub
parent c323aac274
commit a180d41692
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
guides/embedding_gradio_demos.md
View File

@ -10,38 +10,37 @@ Once you have created a Gradio demo and [hosted it on Hugging Face Spaces](https
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
* (Preferred) **Web components**, using the `<gradio-app>` tag
* **Iframes**, using the \<iframe\> tag, in cases where you cannot add javascript to your page
* **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 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](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
In this guide, we will be embedding this image classification Space: [https://huggingface.co/spaces/abidlabs/pytorch-image-classifier](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:
1. Somewhere in your webpage, usually in the \<head\> tags, include the following javascript code, which imports the Gradio package:
1. Somewhere in your webpage, usually in the `<head>` tags, include the following javascript code, which imports the Gradio package:
```html
<script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.0.18/gradio.js"></script>
```
* Instead of <code>3.0.18</code>, you can put whichever version of `gradio`, you'd like to run (a safe choice is the [latest stable version of Gradio](https://pypi.org/project/gradio/)).
`<script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.0.18/gradio.js"></script>`
* Instead of <code>3.0.18</code>, you can put whichever version of `gradio`, you'd like to run (a safe choice is the [latest stable version of Gradio](https://pypi.org/project/gradio/)).
2. Wherever you'd like to put your demo on your webpage, insert the following code:
```html
<gradio-app space="abidlabs/pytorch-image-classifier"> </gradio-app>
```
`<gradio-app space="abidlabs/pytorch-image-classifier"> </gradio-app>`
* Instead of <code>abidlabs/pytorch-image-classifier</code>, you should, of course, put the path to your Space
* Instead of <code>abidlabs/pytorch-image-classifier</code>, you should, of course, put the path to your Space
That's it! Here's what it looks like in action:
@ -49,9 +48,7 @@ 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:
```html
<gradio-app space="abidlabs/pytorch-image-classifier" initial_height="500px"> </gradio-app>
```
`<gradio-app space="abidlabs/pytorch-image-classifier" initial_height="500px"> </gradio-app>`
### Embedding with Iframes
@ -69,9 +66,7 @@ https://hf.space/embed/PATH_TO_SPACE/+
Here is a complete example of the iframe tag:
```html
<iframe src="https://hf.space/embed/abidlabs/pytorch-image-classifier/+" frameBorder="0" width="1300px" height="660px" title="Gradio app" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
```
`<iframe src="https://hf.space/embed/abidlabs/pytorch-image-classifier/+" frameBorder="0" width="1300px" height="660px" title="Gradio app" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>`
A little long, but here's what it looks like embedded into this page: