mirror of
https://github.com/gradio-app/gradio.git
synced 2025-03-31 12:20:26 +08:00
changes
This commit is contained in:
Ali
parent
0e4931fbe2
commit
1121699cf1
@ -1,7 +1,5 @@
|
||||
# Quickstart
|
||||
|
||||
Docs: examples
|
||||
|
||||
**Prerequisite**: Gradio requires Python 3.7 or above, that's it!
|
||||
|
||||
## What does Gradio Do?
|
||||
|
||||
@ -112,3 +112,5 @@ with gr.Blocks() as demo2:
|
||||
lambda a, b: a * b, [num1, num2], output, queue=True)
|
||||
demo2.launch()
|
||||
```
|
||||
|
||||
Docs: Examples
|
||||
@ -18,17 +18,69 @@ Share links expire after 72 hours.
|
||||
|
||||
## Hosting on HF Spaces
|
||||
|
||||
If you'd like to have a permanent link to your Gradio demo on the internet, use Hugging Face Spaces. Hugging Face Spaces provides the infrastructure to permanently host your machine learning model for free!
|
||||
If you'd like to have a permanent link to your Gradio demo on the internet, use Hugging Face Spaces. [Hugging Face Spaces](http://huggingface.co/spaces/) provides the infrastructure to permanently host your machine learning model for free!
|
||||
|
||||
You can either drag and drop a folder containing your Gradio model and all related files, or you can point Spaces to your Git repository and Spaces will pull the Gradio app from there. See [Huggingface Spaces](http://huggingface.co/spaces/) for more information.
|
||||
You can either drag and drop a folder containing your Gradio model and all related files, or you can point Spaces to your Git repository and Spaces will pull the Gradio app from there. See [this guide how to host on Hugging Face Spaces](https://huggingface.co/blog/gradio-spaces) for more information.
|
||||
|
||||
|
||||
|
||||
## Embedding Hosted Spaces
|
||||
|
||||
Once you have hosted your app 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.
|
||||
|
||||
### Embedding with Web Components
|
||||
|
||||
Using web components is faster then iframes, and will automatically adjust to other content on your site. To embed with Web Components:
|
||||
|
||||
1. Import the gradio JS library into into your site by adding the script below in your site (replace {GRADIO_VERSION} in the URL with the library version of Gradio you are using).
|
||||
|
||||
```html
|
||||
<script type="module"
|
||||
src="https://gradio.s3-us-west-2.amazonaws.com/{GRADIO_VERSION}/gradio.js">
|
||||
</script>
|
||||
```
|
||||
|
||||
2. Add
|
||||
```html
|
||||
<gradio-app space="$user/$space_name"></gradio-app>
|
||||
```
|
||||
element where you want to place the app. Set the `space=` attribute with your user and space name. For example:
|
||||
|
||||
```html
|
||||
<gradio-app space="abidlabs/pytorch-image-classifier"></gradio-app>
|
||||
```
|
||||
|
||||
<script>
|
||||
fetch("https://pypi.org/pypi/gradio/json"
|
||||
).then(r => r.json()
|
||||
).then(obj => {
|
||||
let v = obj.info.version;
|
||||
content = document.querySelector('.prose');
|
||||
content.innerHTML = content.innerHTML.replaceAll("{GRADIO_VERSION}", v);
|
||||
});
|
||||
</script>
|
||||
|
||||
### Embedding with IFrames
|
||||
|
||||
To embed with IFrames instead, simply add this element:
|
||||
|
||||
```html
|
||||
<iframe src="https://hf.space/embed/$user/$space_name/+"></iframe>
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```html
|
||||
<iframe src="https://hf.space/embed/abidlabs/pytorch-image-classifier/+"></iframe>
|
||||
```
|
||||
|
||||
## API Page
|
||||
|
||||
$demo_hello_world
|
||||
|
||||
See the link to the "API" in the app above? This is a page that documents the REST API that users can use to query the `Interface` function. `Blocks` apps can also generate an API page, though the API has to be explicitly named for each event listener, such as
|
||||
See the "view api" link in footer of the app above? This is a page that documents the REST API that users can use to query the `Interface` function. `Blocks` apps can also generate an API page, though the API has to be explicitly named for each event listener, such as
|
||||
|
||||
```python
|
||||
btn.click(add, [num1, num2], output, api_name="addition")
|
||||
|
||||
@ -1,82 +0,0 @@
|
||||
<script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.0.18/gradio.js"></script>
|
||||
|
||||
# Embedding Gradio Demos on Websites
|
||||
|
||||
**Prerequisite**: This Guide builds on topics introduced in the Quickstart. Make sure to [read the Quickstart first](/getting_started).
|
||||
|
||||
### Introduction
|
||||
|
||||
Once you have created a Gradio demo and [hosted it on Hugging Face Spaces](https://huggingface.co/blog/gradio-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](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](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:
|
||||
|
||||
|
||||
`<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:
|
||||
|
||||
`<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
|
||||
|
||||
That's it! Here's what it looks like in action:
|
||||
|
||||
<gradio-app space="abidlabs/pytorch-image-classifier"> </gradio-app>
|
||||
|
||||
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:
|
||||
|
||||
```html
|
||||
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:
|
||||
|
||||
`<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:
|
||||
|
||||
<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>
|
||||
|
||||
--------
|
||||
|
||||
### 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](http://hf.space/) 🤗
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
<script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.0.24/gradio.js"></script>
|
||||
|
||||
# Using Gradio Blocks Like Functions
|
||||
Tags: TRANSLATION, HUB, SPACES
|
||||
|
||||
@ -22,20 +22,28 @@ for root, _, files in os.walk(pathlib.Path(GRADIO_DIR) / "gradio"):
|
||||
continue
|
||||
with open(source_file, "r") as comp_file:
|
||||
comp_text = comp_file.read()
|
||||
for demostr in re.findall(r'Demos:(.*)', comp_text):
|
||||
demos_to_run += re.findall(r'([a-zA-Z0-9_]+)', demostr)
|
||||
for demostr in re.findall(r"Demos:(.*)", comp_text):
|
||||
demos_to_run += re.findall(r"([a-zA-Z0-9_]+)", demostr)
|
||||
|
||||
DEMO_PATTERN = r'\$demo_([A-Za-z0-9_]+)'
|
||||
for guide_filename in os.listdir(GRADIO_GUIDES_DIR):
|
||||
if not os.path.isfile(os.path.join(GRADIO_GUIDES_DIR, guide_filename)):
|
||||
DEMO_PATTERN = r"\$demo_([A-Za-z0-9_]+)"
|
||||
for guide_folder in os.listdir(GRADIO_GUIDES_DIR):
|
||||
guide_folder = os.path.join(GRADIO_GUIDES_DIR, guide_folder)
|
||||
if os.path.isfile(guide_folder) or guide_folder.endswith("assets"):
|
||||
continue
|
||||
with open(os.path.join(GRADIO_GUIDES_DIR, guide_filename)) as guide_file:
|
||||
guide_content = guide_file.read()
|
||||
demos_to_run += re.findall(DEMO_PATTERN, guide_content)
|
||||
for guide_filename in os.listdir(guide_folder):
|
||||
guide_filename = os.path.join(guide_folder, guide_filename)
|
||||
if not os.path.isfile(guide_filename):
|
||||
continue
|
||||
with open(guide_filename) as guide_file:
|
||||
guide_content = guide_file.read()
|
||||
demos_to_run += re.findall(DEMO_PATTERN, guide_content)
|
||||
|
||||
# adding components to be embedded
|
||||
docs = generate_documentation()
|
||||
COMPONENT_SUFFIX = "_component"
|
||||
demos_to_run += [f"{component['name']}{COMPONENT_SUFFIX}" for component in docs["component"]]
|
||||
demos_to_run += [
|
||||
f"{component['name']}{COMPONENT_SUFFIX}" for component in docs["component"]
|
||||
]
|
||||
demos_to_run = list(set(demos_to_run))
|
||||
|
||||
|
||||
@ -75,4 +83,4 @@ with open("demos.json", "w") as demos_file:
|
||||
json.dump(demo_port_sets, demos_file)
|
||||
|
||||
print("failed", failed_demos)
|
||||
print("success", demo_port_sets)
|
||||
print("success", demo_port_sets)
|
||||
|
||||
16
website/homepage/package-lock.json
generated
16
website/homepage/package-lock.json
generated
@ -8,7 +8,7 @@
|
||||
"dependencies": {
|
||||
"@fullhuman/postcss-purgecss": "^4.0.3",
|
||||
"@tailwindcss/forms": "^0.5.0",
|
||||
"@tailwindcss/typography": "^0.5.0",
|
||||
"@tailwindcss/typography": "^0.5.4",
|
||||
"autoprefixer": "^10.4.0",
|
||||
"cssnano": "^5.0.8",
|
||||
"postcss-cli": "^9.0.1",
|
||||
@ -71,16 +71,16 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/typography": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.2.tgz",
|
||||
"integrity": "sha512-coq8DBABRPFcVhVIk6IbKyyHUt7YTEC/C992tatFB+yEx5WGBQrCgsSFjxHUr8AWXphWckadVJbominEduYBqw==",
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.4.tgz",
|
||||
"integrity": "sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==",
|
||||
"dependencies": {
|
||||
"lodash.castarray": "^4.4.0",
|
||||
"lodash.isplainobject": "^4.0.6",
|
||||
"lodash.merge": "^4.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || insiders"
|
||||
"tailwindcss": ">=3.0.0 || insiders"
|
||||
}
|
||||
},
|
||||
"node_modules/@trysound/sax": {
|
||||
@ -2112,9 +2112,9 @@
|
||||
}
|
||||
},
|
||||
"@tailwindcss/typography": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.2.tgz",
|
||||
"integrity": "sha512-coq8DBABRPFcVhVIk6IbKyyHUt7YTEC/C992tatFB+yEx5WGBQrCgsSFjxHUr8AWXphWckadVJbominEduYBqw==",
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.4.tgz",
|
||||
"integrity": "sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==",
|
||||
"requires": {
|
||||
"lodash.castarray": "^4.4.0",
|
||||
"lodash.isplainobject": "^4.0.6",
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@fullhuman/postcss-purgecss": "^4.0.3",
|
||||
"@tailwindcss/typography": "^0.5.0",
|
||||
"@tailwindcss/typography": "^0.5.4",
|
||||
"@tailwindcss/forms": "^0.5.0",
|
||||
"autoprefixer": "^10.4.0",
|
||||
"cssnano": "^5.0.8",
|
||||
|
||||
@ -136,7 +136,7 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if is_class %}
|
||||
<h4 class="my-2 font-semibold">Step-by-step Guides</h4>
|
||||
<h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
|
||||
{% if obj["guides"] %}
|
||||
<div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
|
||||
{% for guide in obj["guides"] %}
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="prose max-w-full">{% include "guides/temporary_template.html" %}</div>
|
||||
<div class="prose text-lg max-w-full">{% include "guides/temporary_template.html" %}</div>
|
||||
<div class="flex justify-between mt-4">
|
||||
{% if prev_guide is not none %}
|
||||
<a href="{{ prev_guide['url'] }}"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user