mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-11-21 01:01:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

A new face for the Sultan of ML deployment (#1943)

Browse Source 
* File to display citation in the repo

* The README template updated

* Quickstart guide updated

* Smart code for smart rendering

* The new face of the king

* Typo fix and making executable

* `PIP` to lower case and knowing sentences

* Updating the CircleCI and Codecov badges

* Fix missing commas

* Replacing single quotes with double quotes
This commit is contained in:
Artin Mohammadi 2022-08-04 22:18:17 +04:30 committed by GitHub
parent c316cda746
commit 3aacc4b3a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 233 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
CITATION.cff Normal file
View File

@ -0,0 +1,45 @@
cff-version: 1.2.0
message: Please cite this project using these metadata.
title: "Gradio: Hassle-free sharing and testing of ML models in the wild"
abstract: >-
Accessibility is a major challenge of machine learning (ML).
Typical ML models are built by specialists and require
specialized hardware/software as well as ML experience to
validate. This makes it challenging for non-technical
collaborators and endpoint users (e.g. physicians) to easily
provide feedback on model development and to gain trust in
ML. The accessibility challenge also makes collaboration
more difficult and limits the ML researcher's exposure to
realistic data and scenarios that occur in the wild. To
improve accessibility and facilitate collaboration, we
developed an open-source Python package, Gradio, which
allows researchers to rapidly generate a visual interface
for their ML models. Gradio makes accessing any ML model as
easy as sharing a URL. Our development of Gradio is informed
by interviews with a number of machine learning researchers
who participate in interdisciplinary collaborations. Their
feedback identified that Gradio should support a variety of
interfaces and frameworks, allow for easy sharing of the
interface, allow for input manipulation and interactive
inference by the domain expert, as well as allow embedding
the interface in iPython notebooks. We developed these
features and carried out a case study to understand Gradio's
usefulness and usability in the setting of a machine
learning collaboration between a researcher and a
cardiologist.
authors:
- family-names: Abid
given-names: Abubakar
- family-names: Abdalla
given-names: Ali
- family-names: Abid
given-names: Ali
- family-names: Khan
given-names: Dawood
- family-names: Alfozan
given-names: Abdulrahman
- family-names: Zou
given-names: James
doi: 10.48550/arXiv.1906.02569
date-released: 2019-06-06
url: https://arxiv.org/abs/1906.02569

176
README.md
View File

@ -1,27 +1,23 @@
<!-- DO NOT EDIT THIS FILE DIRECTLY. INSTEAD PLEASE EDIT: "readme_template.md" or
"guides/getting_started.md", AND THEN RUN: "python render_readme.py" -->
<p align="center">
<a href="https://gradio.app"><img src="readme_files/gradio.svg" alt="gradio" width=300></a>
</p>
<p align="center">
<em>Build & share delightful machine learning apps easily</em>
<p align="center">
<a href="https://circleci.com/gh/gradio-app/gradio" target="_blank">
<img src="https://circleci.com/gh/gradio-app/gradio.svg?style=svg" alt="circleci">
</a>
<a href="https://badge.fury.io/py/gradio" target="_blank">
<img src="https://badge.fury.io/py/gradio.svg" alt="pypi">
</a>
<a href="https://codecov.io/gh/gradio-app/gradio/branch/master/graph/badge.svg?token=NNVPX9KEGS" target="_blank">
<img src="https://codecov.io/gh/gradio-app/gradio/branch/master/graph/badge.svg?token=NNVPX9KEGS" alt="Codecov">
</a>
<a href="https://pypi.org/project/gradio/" target="_blank">
<img src="https://img.shields.io/pypi/dm/gradio" alt="pypi">
</a>
<a href="https://twitter.com/gradio " target="_blank">
<img src="https://img.shields.io/twitter/follow/gradio.svg?style=social&label=Follow" alt="twitter">
</a>
</p>
<!-- DO NOT EDIT THIS FILE DIRECTLY. INSTEAD EDIT THE `readme_template.md` OR `guides/1)getting_started/1)quickstart.md` TEMPLATES AND THEN RUN `render_readme.py` SCRIPT. -->
<div align="center">
[<img src="readme_files/gradio.svg" alt="gradio" width=300>](https://gradio.app)<br>
<em>Build & share delightful machine learning apps easily</em>
[<img src="https://circleci.com/gh/gradio-app/gradio.svg?style=svg" alt="circleci">](https://circleci.com/gh/gradio-app/gradio)
[<img src="https://codecov.io/gh/gradio-app/gradio/branch/master/graph/badge.svg" alt="codecov">](https://app.codecov.io/gh/gradio-app/gradio)
[![PyPI](https://img.shields.io/pypi/v/gradio)](https://pypi.org/project/gradio/)
[![PyPI downloads](https://img.shields.io/pypi/dm/gradio)](https://pypi.org/project/gradio/)
![Python version](https://img.shields.io/badge/python-3.7+-important)
[![Twitter follow](https://img.shields.io/twitter/follow/gradio?style=social&label=follow)](https://twitter.com/gradio)
[Website](https://gradio.app)
| [Documentation](https://gradio.app/docs/)
| [Guides](https://gradio.app/guides/)
| [Getting Started](https://gradio.app/getting_started/)
| [Examples](demo/)
</div>
# Gradio: Build Machine Learning Web Apps — in Python
@ -34,37 +30,33 @@ pasting text, recording their own voice, and interacting with your demo, all thr
Gradio is useful for:
* **Demoing** your machine learning models for clients / collaborators / users / students
- **Demoing** your machine learning models for clients/collaborators/users/students.
* **Deploying** your models quickly with automatic shareable links and getting feedback on model performance
- **Deploying** your models quickly with automatic shareable links and getting feedback on model performance.
* **Debugging** your model interactively during development using built-in manipulation and interpretation tools
- **Debugging** your model interactively during development using built-in manipulation and interpretation tools.
**You can find an interactive version of the following Getting Started at [https://gradio.app/getting_started](https://gradio.app/getting_started).**
## Quickstart
# Quickstart
**Prerequisite**: Gradio requires Python 3.7 or higher, that's all!
Docs: examples
**Prerequisite**: Gradio requires Python 3.7 or above, that's it!
## What does Gradio Do?
### What Does Gradio Do?
One of the *best ways to share* your machine learning model, API, or data science workflow with others is to create an **interactive app** that allows your users or colleagues to try out the demo in their browsers.
Gradio allows you to **build demos and share them, all in Python.** And usually in just a few lines of code! So let's get started.
## Hello, World
### Hello, World
To get Gradio running with a simple "Hello, World" example, follow these three steps:
<span>1.</span> Install Gradio from pip. Note, the minimal supported Python version is 3.7.
1\. Install Gradio using pip:
```bash
pip install gradio
```
<span>2.</span> Run the code below as a Python script or in a Python notebook (or in a [colab notebook](https://colab.research.google.com/drive/18ODkJvyxHutTN0P5APWyGFO_xwNcgHDZ?usp=sharing)).
2\. Run the code below as a Python script or in a Jupyter Notebook (or [Google Colab](https://colab.research.google.com/drive/18ODkJvyxHutTN0P5APWyGFO_xwNcgHDZ?usp=sharing)):
```python
import gradio as gr
@ -74,32 +66,30 @@ def greet(name):
demo = gr.Interface(fn=greet, inputs="text", outputs="text")
demo.launch()
```
<span>3.</span> The demo below will appear automatically within the Python notebook, or pop in a browser on [http://localhost:7860](http://localhost:7860/) if running from a script.
![hello_world interface](demo/hello_world/screenshot.gif)
3\. The demo below will appear automatically within the Jupyter Notebook, or pop in a browser on [http://localhost:7860](http://localhost:7860) if running from a script:
## The `Interface` Class
![`hello_world` demo](demo/hello_world/screenshot.gif)
You'll notice that in order to make the demo, we created a `gradio.Interface`. This `Interface` class can wrap any Python function with a user interface. In the example above, we saw a simple text-based function. But the function could be anything from music generator to a tax calculator to the prediction function of a pretrained machine learning model.
### The `Interface` Class
You'll notice that in order to make the demo, we created a `gradio.Interface`. This `Interface` class can wrap any Python function with a user interface. In the example above, we saw a simple text-based function, but the function could be anything from music generator to a tax calculator to the prediction function of a pretrained machine learning model.
The core `Interface` class is initialized with three required parameters:
- `fn`: the function to wrap a UI around
- `inputs`: which component(s) to use for the input, e.g. `"text"` or `"image"` or `"audio"`
- `outputs`: which component(s) to use for the output, e.g. `"text"` or `"image"` `"label"`
- `fn`: the function to wrap a UI around
- `inputs`: which component(s) to use for the input (e.g. `"text"`, `"image"` or `"audio"`)
- `outputs`: which component(s) to use for the output (e.g. `"text"`, `"image"` or `"label"`)
Let's take a closer look at these Components used to provide input and output.
## Components
Let's take a closer look at these components used to provide input and output.
### Components Attributes
We saw some simple Textbox components in the previous example. But what if you want to change how the UI components look or behave?
We saw some simple `Textbox` components in the previous examples, but what if you want to change how the UI components look or behave?
Let's say you want to customize the input text field - for example, you wanted it to be larger and have a text placeholder. If we use the actual class for `Textbox` instead of using the string shortcut, you have access to much more customizability through component attributes.
Let's say you want to customize the input text field — for example, you wanted it to be larger and have a text placeholder. If we use the actual class for `Textbox` instead of using the string shortcut, you have access to much more customizability through component attributes.
```python
import gradio as gr
@ -113,13 +103,13 @@ demo = gr.Interface(
outputs="text",
)
demo.launch()
```
![hello_world_2 interface](demo/hello_world_2/screenshot.gif)
![`hello_world_2` demo](demo/hello_world_2/screenshot.gif)
### Multiple Input and Output Components
Let's say you had a more complex function, with multiple inputs and outputs. In the example below, we define a function that takes a string, boolean, and number, and returns a string and number. Take a look how you pass a list of input and output components.
Suppose you had a more complex function, with multiple inputs and outputs. In the example below, we define a function that takes a string, boolean, and number, and returns a string and number. Take a look how you pass a list of input and output components.
```python
import gradio as gr
@ -136,15 +126,15 @@ demo = gr.Interface(
outputs=["text", "number"],
)
demo.launch()
```
![hello_world_3 interface](demo/hello_world_3/screenshot.gif)
![`hello_world_3` demo](demo/hello_world_3/screenshot.gif)
You simply wrap the components in a list. Each component in the `inputs` list corresponds to one of the parameters of the function, in order. Each component in the `outputs` list corresponds to one of the values returned by the function, again in order.
### An Image Example
Gradio supports many types of Components, such as `Image`, `DataFrame`, `Video`, or `Label`. Let's try an image-to-image function to get a feel for these!
Gradio supports many types of components, such as `Image`, `DataFrame`, `Video`, or `Label`. Let's try an image-to-image function to get a feel for these!
```python
import numpy as np
@ -162,29 +152,29 @@ def sepia(input_img):
demo = gr.Interface(sepia, gr.Image(shape=(200, 200)), "image")
demo.launch()
```
![sepia_filter interface](demo/sepia_filter/screenshot.gif)
When using the `Image` Component as input, your function will receive a numpy array with the shape `(width, height, 3)`, where the last dimension represents the RGB values. We'll return an image as well in the form of a numpy array. You can learn the Python datatype used by each Component in the [Docs](https://gradio.app/docs).
![`sepia_filter` demo](demo/sepia_filter/screenshot.gif)
You can also set the datatype used by the Component with the `type=` keyword argument. For example, if you wanted your function to take a filepath to an image instead of a numpy array, the input `Image` component could be written as
When using the `Image` component as input, your function will receive a NumPy array with the shape `(width, height, 3)`, where the last dimension represents the RGB values. We'll return an image as well in the form of a NumPy array.
You can also set the datatype used by the component with the `type=` keyword argument. For example, if you wanted your function to take a file path to an image instead of a NumPy array, the input `Image` component could be written as:
```python
gr.Image(type='filepath', shape=...)
gr.Image(type="filepath", shape=...)
```
Also note that our input `Image` Component comes with an 'edit' button, which allows for cropping and zooming into images. Manipulating images in this way can help reveal biases or hidden flaws in a machine learning model!
Also note that our input `Image` component comes with an edit button 🖉, which allows for cropping and zooming into images. Manipulating images in this way can help reveal biases or hidden flaws in a machine learning model!
Read more about the many Components and how to use them in the [Docs](https://gradio.app/docs).
You can read more about the many components and how to use them in the [Gradio docs](https://gradio.app/docs).
## Blocks: More Flexibility and Control
### Blocks: More Flexibility and Control
Gradio offers two classes to build apps:
(1) **Interface**, a high level abstraction for creating demos (that we've been discussing so far), and
1\. **Interface**, that provides a high-level abstraction for creating demos that we've been discussing so far.
(2) **Blocks**, a low-level API for designing web apps with more flexible layouts and data flows. Blocks allows you to do things like: feature multiple data flows and demos, control where components appear on the page, handle complex data flows (e.g. outputs can serve as inputs to other functions), and update properties/visibility of components based on user interaction -- still all in Python. If this customizability is what you need, try `Blocks` instead!
2\. **Blocks**, a low-level API for designing web apps with more flexible layouts and data flows. Blocks allows you to do things like feature multiple data flows and demos, control where components appear on the page, handle complex data flows (e.g. outputs can serve as inputs to other functions), and update properties/visibility of components based on user interaction — still all in Python. If this customizability is what you need, try `Blocks` instead!
### Hello, Blocks
@ -204,17 +194,18 @@ with gr.Blocks() as demo:
demo.launch()
```
![hello_blocks interface](demo/hello_blocks/screenshot.gif)
A couple things to note:
![`hello_blocks` demo](demo/hello_blocks/screenshot.gif)
- a `Blocks` is created with a `with` clause, and any Component created inside this clause is automatically added to the app.
Things to note:
- `Blocks` are made with a `with` clause, and any component created inside this clause is automatically added to the app.
- Components appear vertically in the app in the order they are created. (Later we will cover customizing layouts!)
- a `Button` was created, and then a `click` event-listener was added to this button. The API for this should look familiar! Like an `Interface`, the `click` method takes (1) a python function, (2) input components, and (3) output components.
- A `Button` was created, and then a `click` event-listener was added to this button. The API for this should look familiar! Like an `Interface`, the `click` method takes a Python function, input components, and output components.
### More Complexity
Here's an app to give you a taste of what's possible with Blocks.
Here's an app to give you a taste of what's possible with `Blocks`:
```python
import numpy as np
@ -244,45 +235,40 @@ with gr.Blocks() as demo:
demo.launch()
```
![blocks_flipper interface](demo/blocks_flipper/screenshot.gif)
A lot more going on here! We'll cover how to create complex `Blocks` apps like this in the [Building with Blocks](/building_with_blocks) section of the guides.
![`blocks_flipper` demo](demo/blocks_flipper/screenshot.gif)
Congrats, you're now familiar with the basics of Gradio 🥳. Onto the [next guide](https://gradio.app/key_features) - or skip around the curriculum if you wish!
A lot more going on here! We'll cover how to create complex `Blocks` apps like this in the [building with blocks](https://github.com/gradio-app/gradio/tree/main/guides/3\)building_with_blocks) section for you.
## System Requirements:
Congrats, you're now familiar with the basics of Gradio! 🥳 Go to our [next guide](https://gradio.app/key_features) to learn more about the key features of Gradio.
- Python 3.7+
## Open Source Stack
Gradio is built with many wonderful open-source libraries, please support them as well!
<p>
<a href="https://hf.co/"><img src="readme_files/huggingface_mini.svg" alt="huggingface" height=40></a>
<a href="https://www.python.org/"><img src="readme_files/python.svg" alt="python" height=40></a>
<a href="https://fastapi.tiangolo.com/"><img src="readme_files/fastapi.svg" alt="fastapi" height=40></a>
<a href="https://github.com/encode/"><img src="readme_files/encode.svg" alt="encode" height=40></a>
<a href="https://svelte.dev"><img src="readme_files/svelte.svg" alt="svelte" height=40></a>
<a href="https://vitejs.dev/"><img src="readme_files/vite.svg" alt="vite" height=40></a>
<a href="https://pnpm.io/"><img src="readme_files/pnpm.svg" alt="pnpm" height=40></a>
<a href="https://tailwindcss.com/"><img src="readme_files/tailwind.svg" alt="tailwind" height=40></a>
</p>
## License:
[<img src="readme_files/huggingface_mini.svg" alt="huggingface" height=40>](https://huggingface.co)
[<img src="readme_files/python.svg" alt="python" height=40>](https://www.python.org)
[<img src="readme_files/fastapi.svg" alt="fastapi" height=40>](https://fastapi.tiangolo.com)
[<img src="readme_files/encode.svg" alt="encode" height=40>](https://www.encode.io)
[<img src="readme_files/svelte.svg" alt="svelte" height=40>](https://svelte.dev)
[<img src="readme_files/vite.svg" alt="vite" height=40>](https://vitejs.dev)
[<img src="readme_files/pnpm.svg" alt="pnpm" height=40>](https://pnpm.io)
[<img src="readme_files/tailwind.svg" alt="tailwind" height=40>](https://tailwindcss.com)
Gradio is licensed under the Apache License 2.0
## License
## See more:
Gradio is licensed under the Apache License 2.0 found in the [LICENSE](LICENSE) file in the root directory of this repository.
You can find many more examples as well as more info on usage on our website: https://gradio.app
## Citation
See, also, the accompanying paper: ["Gradio: Hassle-Free Sharing and Testing of ML Models in the Wild"](https://arxiv.org/pdf/1906.02569.pdf), *ICML HILL 2019*, and please use the citation below.
Also check out the paper *[Gradio: Hassle-Free Sharing and Testing of ML Models in the Wild](https://arxiv.org/abs/1906.02569), ICML HILL 2019*, and please cite it if you use Gradio in your work.
```
@article{abid2019gradio,
title={Gradio: Hassle-Free Sharing and Testing of ML Models in the Wild},
author={Abid, Abubakar and Abdalla, Ali and Abid, Ali and Khan, Dawood and Alfozan, Abdulrahman and Zou, James},
journal={arXiv preprint arXiv:1906.02569},
year={2019}
title = {Gradio: Hassle-Free Sharing and Testing of ML Models in the Wild},
author = {Abid, Abubakar and Abdalla, Ali and Abid, Ali and Khan, Dawood and Alfozan, Abdulrahman and Zou, James},
journal = {arXiv preprint arXiv:1906.02569},
year = {2019},
}
```

66
guides/1)getting_started/1)quickstart.md
View File

@ -1,8 +1,8 @@
# Quickstart
**Prerequisite**: Gradio requires Python 3.7 or above, that's it!
**Prerequisite**: Gradio requires Python 3.7 or higher, that's all!
## What does Gradio Do?
## What Does Gradio Do?
One of the *best ways to share* your machine learning model, API, or data science workflow with others is to create an **interactive app** that allows your users or colleagues to try out the demo in their browsers.
@ -12,99 +12,97 @@ Gradio allows you to **build demos and share them, all in Python.** And usually
To get Gradio running with a simple "Hello, World" example, follow these three steps:
<span>1.</span> Install Gradio from pip. Note, the minimal supported Python version is 3.7.
1\. Install Gradio using pip:
```bash
pip install gradio
```
<span>2.</span> Run the code below as a Python script or in a Python notebook (or in a [colab notebook](https://colab.research.google.com/drive/18ODkJvyxHutTN0P5APWyGFO_xwNcgHDZ?usp=sharing)).
2\. Run the code below as a Python script or in a Jupyter Notebook (or [Google Colab](https://colab.research.google.com/drive/18ODkJvyxHutTN0P5APWyGFO_xwNcgHDZ?usp=sharing)):
$code_hello_world
<span>3.</span> The demo below will appear automatically within the Python notebook, or pop in a browser on [http://localhost:7860](http://localhost:7860/) if running from a script.
3\. The demo below will appear automatically within the Jupyter Notebook, or pop in a browser on [http://localhost:7860](http://localhost:7860) if running from a script:
$demo_hello_world
## The `Interface` Class
You'll notice that in order to make the demo, we created a `gradio.Interface`. This `Interface` class can wrap any Python function with a user interface. In the example above, we saw a simple text-based function. But the function could be anything from music generator to a tax calculator to the prediction function of a pretrained machine learning model.
You'll notice that in order to make the demo, we created a `gradio.Interface`. This `Interface` class can wrap any Python function with a user interface. In the example above, we saw a simple text-based function, but the function could be anything from music generator to a tax calculator to the prediction function of a pretrained machine learning model.
The core `Interface` class is initialized with three required parameters:
- `fn`: the function to wrap a UI around
- `inputs`: which component(s) to use for the input, e.g. `"text"` or `"image"` or `"audio"`
- `outputs`: which component(s) to use for the output, e.g. `"text"` or `"image"` `"label"`
- `fn`: the function to wrap a UI around
- `inputs`: which component(s) to use for the input (e.g. `"text"`, `"image"` or `"audio"`)
- `outputs`: which component(s) to use for the output (e.g. `"text"`, `"image"` or `"label"`)
Let's take a closer look at these Components used to provide input and output.
Let's take a closer look at these components used to provide input and output.
## Components
## Components Attributes
### Components Attributes
We saw some simple `Textbox` components in the previous examples, but what if you want to change how the UI components look or behave?
We saw some simple Textbox components in the previous example. But what if you want to change how the UI components look or behave?
Let's say you want to customize the input text field - for example, you wanted it to be larger and have a text placeholder. If we use the actual class for `Textbox` instead of using the string shortcut, you have access to much more customizability through component attributes.
Let's say you want to customize the input text field — for example, you wanted it to be larger and have a text placeholder. If we use the actual class for `Textbox` instead of using the string shortcut, you have access to much more customizability through component attributes.
$code_hello_world_2
$demo_hello_world_2
### Multiple Input and Output Components
## Multiple Input and Output Components
Let's say you had a more complex function, with multiple inputs and outputs. In the example below, we define a function that takes a string, boolean, and number, and returns a string and number. Take a look how you pass a list of input and output components.
Suppose you had a more complex function, with multiple inputs and outputs. In the example below, we define a function that takes a string, boolean, and number, and returns a string and number. Take a look how you pass a list of input and output components.
$code_hello_world_3
$demo_hello_world_3
You simply wrap the components in a list. Each component in the `inputs` list corresponds to one of the parameters of the function, in order. Each component in the `outputs` list corresponds to one of the values returned by the function, again in order.
### An Image Example
## An Image Example
Gradio supports many types of Components, such as `Image`, `DataFrame`, `Video`, or `Label`. Let's try an image-to-image function to get a feel for these!
Gradio supports many types of components, such as `Image`, `DataFrame`, `Video`, or `Label`. Let's try an image-to-image function to get a feel for these!
$code_sepia_filter
$demo_sepia_filter
When using the `Image` Component as input, your function will receive a numpy array with the shape `(width, height, 3)`, where the last dimension represents the RGB values. We'll return an image as well in the form of a numpy array. You can learn the Python datatype used by each Component in the [Docs](https://gradio.app/docs).
When using the `Image` component as input, your function will receive a NumPy array with the shape `(width, height, 3)`, where the last dimension represents the RGB values. We'll return an image as well in the form of a NumPy array.
You can also set the datatype used by the Component with the `type=` keyword argument. For example, if you wanted your function to take a filepath to an image instead of a numpy array, the input `Image` component could be written as
You can also set the datatype used by the component with the `type=` keyword argument. For example, if you wanted your function to take a file path to an image instead of a NumPy array, the input `Image` component could be written as:
```python
gr.Image(type='filepath', shape=...)
gr.Image(type="filepath", shape=...)
```
Also note that our input `Image` Component comes with an 'edit' button, which allows for cropping and zooming into images. Manipulating images in this way can help reveal biases or hidden flaws in a machine learning model!
Also note that our input `Image` component comes with an edit button 🖉, which allows for cropping and zooming into images. Manipulating images in this way can help reveal biases or hidden flaws in a machine learning model!
Read more about the many Components and how to use them in the [Docs](https://gradio.app/docs).
You can read more about the many components and how to use them in the [Gradio docs](https://gradio.app/docs).
## Blocks: More Flexibility and Control
Gradio offers two classes to build apps:
(1) **Interface**, a high level abstraction for creating demos (that we've been discussing so far), and
1\. **Interface**, that provides a high-level abstraction for creating demos that we've been discussing so far.
(2) **Blocks**, a low-level API for designing web apps with more flexible layouts and data flows. Blocks allows you to do things like: feature multiple data flows and demos, control where components appear on the page, handle complex data flows (e.g. outputs can serve as inputs to other functions), and update properties/visibility of components based on user interaction -- still all in Python. If this customizability is what you need, try `Blocks` instead!
2\. **Blocks**, a low-level API for designing web apps with more flexible layouts and data flows. Blocks allows you to do things like feature multiple data flows and demos, control where components appear on the page, handle complex data flows (e.g. outputs can serve as inputs to other functions), and update properties/visibility of components based on user interaction — still all in Python. If this customizability is what you need, try `Blocks` instead!
### Hello, Blocks
## Hello, Blocks
Let's take a look at a simple example. Note how the API here differs from `Interface`.
$code_hello_blocks
$demo_hello_blocks
A couple things to note:
Things to note:
- a `Blocks` is created with a `with` clause, and any Component created inside this clause is automatically added to the app.
- `Blocks` are made with a `with` clause, and any component created inside this clause is automatically added to the app.
- Components appear vertically in the app in the order they are created. (Later we will cover customizing layouts!)
- a `Button` was created, and then a `click` event-listener was added to this button. The API for this should look familiar! Like an `Interface`, the `click` method takes (1) a python function, (2) input components, and (3) output components.
- A `Button` was created, and then a `click` event-listener was added to this button. The API for this should look familiar! Like an `Interface`, the `click` method takes a Python function, input components, and output components.
### More Complexity
## More Complexity
Here's an app to give you a taste of what's possible with Blocks.
Here's an app to give you a taste of what's possible with `Blocks`:
$code_blocks_flipper
$demo_blocks_flipper
A lot more going on here! We'll cover how to create complex `Blocks` apps like this in the [Building with Blocks](/building_with_blocks) section of the guides.
A lot more going on here! We'll cover how to create complex `Blocks` apps like this in the [building with blocks](https://github.com/gradio-app/gradio/tree/main/guides/3\)building_with_blocks) section for you.
Congrats, you're now familiar with the basics of Gradio 🥳. Onto the [next guide](https://gradio.app/key_features) - or skip around the curriculum if you wish!
Congrats, you're now familiar with the basics of Gradio! 🥳 Go to our [next guide](https://gradio.app/key_features) to learn more about the key features of Gradio.

87
readme_template.md
View File

@ -1,25 +1,21 @@
<p align="center">
<a href="https://gradio.app"><img src="readme_files/gradio.svg" alt="gradio" width=300></a>
</p>
<p align="center">
<em>Build & share delightful machine learning apps easily</em>
<p align="center">
<a href="https://circleci.com/gh/gradio-app/gradio" target="_blank">
<img src="https://circleci.com/gh/gradio-app/gradio.svg?style=svg" alt="circleci">
</a>
<a href="https://badge.fury.io/py/gradio" target="_blank">
<img src="https://badge.fury.io/py/gradio.svg" alt="pypi">
</a>
<a href="https://codecov.io/gh/gradio-app/gradio/branch/master/graph/badge.svg?token=NNVPX9KEGS" target="_blank">
<img src="https://codecov.io/gh/gradio-app/gradio/branch/master/graph/badge.svg?token=NNVPX9KEGS" alt="Codecov">
</a>
<a href="https://pypi.org/project/gradio/" target="_blank">
<img src="https://img.shields.io/pypi/dm/gradio" alt="pypi">
</a>
<a href="https://twitter.com/gradio " target="_blank">
<img src="https://img.shields.io/twitter/follow/gradio.svg?style=social&label=Follow" alt="twitter">
</a>
</p>
<div align="center">
[<img src="readme_files/gradio.svg" alt="gradio" width=300>](https://gradio.app)<br>
<em>Build & share delightful machine learning apps easily</em>
[<img src="https://circleci.com/gh/gradio-app/gradio.svg?style=svg" alt="circleci">](https://circleci.com/gh/gradio-app/gradio)
[<img src="https://codecov.io/gh/gradio-app/gradio/branch/master/graph/badge.svg" alt="codecov">](https://app.codecov.io/gh/gradio-app/gradio)
[![PyPI](https://img.shields.io/pypi/v/gradio)](https://pypi.org/project/gradio/)
[![PyPI downloads](https://img.shields.io/pypi/dm/gradio)](https://pypi.org/project/gradio/)
![Python version](https://img.shields.io/badge/python-3.7+-important)
[![Twitter follow](https://img.shields.io/twitter/follow/gradio?style=social&label=follow)](https://twitter.com/gradio)
[Website](https://gradio.app)
| [Documentation](https://gradio.app/docs/)
| [Guides](https://gradio.app/guides/)
| [Getting Started](https://gradio.app/getting_started/)
| [Examples](demo/)
</div>
# Gradio: Build Machine Learning Web Apps — in Python
@ -32,49 +28,40 @@ pasting text, recording their own voice, and interacting with your demo, all thr
Gradio is useful for:
* **Demoing** your machine learning models for clients / collaborators / users / students
- **Demoing** your machine learning models for clients/collaborators/users/students.
* **Deploying** your models quickly with automatic shareable links and getting feedback on model performance
- **Deploying** your models quickly with automatic shareable links and getting feedback on model performance.
* **Debugging** your model interactively during development using built-in manipulation and interpretation tools
**You can find an interactive version of the following Getting Started at [https://gradio.app/getting_started](https://gradio.app/getting_started).**
- **Debugging** your model interactively during development using built-in manipulation and interpretation tools.
$getting_started
## System Requirements:
- Python 3.7+
## Open Source Stack
Gradio is built with many wonderful open-source libraries, please support them as well!
<p>
<a href="https://hf.co/"><img src="readme_files/huggingface_mini.svg" alt="huggingface" height=40></a>
<a href="https://www.python.org/"><img src="readme_files/python.svg" alt="python" height=40></a>
<a href="https://fastapi.tiangolo.com/"><img src="readme_files/fastapi.svg" alt="fastapi" height=40></a>
<a href="https://github.com/encode/"><img src="readme_files/encode.svg" alt="encode" height=40></a>
<a href="https://svelte.dev"><img src="readme_files/svelte.svg" alt="svelte" height=40></a>
<a href="https://vitejs.dev/"><img src="readme_files/vite.svg" alt="vite" height=40></a>
<a href="https://pnpm.io/"><img src="readme_files/pnpm.svg" alt="pnpm" height=40></a>
<a href="https://tailwindcss.com/"><img src="readme_files/tailwind.svg" alt="tailwind" height=40></a>
</p>
## License:
[<img src="readme_files/huggingface_mini.svg" alt="huggingface" height=40>](https://huggingface.co)
[<img src="readme_files/python.svg" alt="python" height=40>](https://www.python.org)
[<img src="readme_files/fastapi.svg" alt="fastapi" height=40>](https://fastapi.tiangolo.com)
[<img src="readme_files/encode.svg" alt="encode" height=40>](https://www.encode.io)
[<img src="readme_files/svelte.svg" alt="svelte" height=40>](https://svelte.dev)
[<img src="readme_files/vite.svg" alt="vite" height=40>](https://vitejs.dev)
[<img src="readme_files/pnpm.svg" alt="pnpm" height=40>](https://pnpm.io)
[<img src="readme_files/tailwind.svg" alt="tailwind" height=40>](https://tailwindcss.com)
Gradio is licensed under the Apache License 2.0
## License
## See more:
Gradio is licensed under the Apache License 2.0 found in the [LICENSE](LICENSE) file in the root directory of this repository.
You can find many more examples as well as more info on usage on our website: https://gradio.app
## Citation
See, also, the accompanying paper: ["Gradio: Hassle-Free Sharing and Testing of ML Models in the Wild"](https://arxiv.org/pdf/1906.02569.pdf), *ICML HILL 2019*, and please use the citation below.
Also check out the paper *[Gradio: Hassle-Free Sharing and Testing of ML Models in the Wild](https://arxiv.org/abs/1906.02569), ICML HILL 2019*, and please cite it if you use Gradio in your work.
```
@article{abid2019gradio,
title={Gradio: Hassle-Free Sharing and Testing of ML Models in the Wild},
author={Abid, Abubakar and Abdalla, Ali and Abid, Ali and Khan, Dawood and Alfozan, Abdulrahman and Zou, James},
journal={arXiv preprint arXiv:1906.02569},
year={2019}
title = {Gradio: Hassle-Free Sharing and Testing of ML Models in the Wild},
author = {Abid, Abubakar and Abdalla, Ali and Abid, Ali and Khan, Dawood and Alfozan, Abdulrahman and Zou, James},
journal = {arXiv preprint arXiv:1906.02569},
year = {2019},
}
```

69
render_readme.py Normal file → Executable file
View File

@ -1,48 +1,39 @@
#!/usr/bin/env python
import re
from os.path import exists, getmtime, join
from pathlib import Path
from jinja2 import BaseLoader, Environment, TemplateNotFound
README_TEMPLATE_FILEPATH = "readme_template.md"
GETTING_STARTED_TEMPLATE_FILEPATH = "guides/1)getting_started/1)quickstart.md"
README_TEMPLATE = "readme_template.md"
GETTING_STARTED_TEMPLATE = "guides/1)getting_started/1)quickstart.md"
readme_template = Path(README_TEMPLATE_FILEPATH).read_text()
getting_started_template = Path(GETTING_STARTED_TEMPLATE_FILEPATH).read_text()
with open(GETTING_STARTED_TEMPLATE, encoding="utf-8") as getting_started_file:
getting_started = getting_started_file.read()
# Extract all the code and demo tags from the getting started template
code_tags = re.findall(r"\$code_([^\s]+)", getting_started_template)
demo_tags = re.findall(r"\$demo_([^\s]+)", getting_started_template)
codes = {}
demos = {}
code_tags = re.findall(r'\$code_([^\s]+)', getting_started)
demo_tags = re.findall(r'\$demo_([^\s]+)', getting_started)
code, demos = {}, {}
for src in code_tags:
context = Path(f"demo/{src}/run.py").read_text()
# Replace the condition to run the demo directly with actual launch code
context = re.sub(r"if __name__(.*[\n$]*)*", "demo.launch()", context)
codes[src] = f"```python\n{context}\n```\n" # Convert to Markdown code block
for code_src in code_tags:
with open(join("demo", code_src, "run.py")) as code_file:
python_code = code_file.read()
python_code = python_code.replace(
'if __name__ == "__main__":\n demo.launch()', "demo.launch()"
)
code[code_src] = "```python\n" + python_code + "\n```"
for src in demo_tags:
demos[src] = f"![`{src}` demo](demo/{src}/screenshot.gif)"
for demo_src in demo_tags:
demos[demo_src] = (
"![" + demo_src + " interface](demo/" + demo_src + "/screenshot.gif)"
)
# Replace the headers in the getting started template with a smaller header (e.g. H3 instead of H2) to
# make the README more readable and less cluttered.
getting_started_template = re.sub(r"^(#+)", r"#\1", getting_started_template, flags=re.MULTILINE)
readme_template = readme_template.replace("$getting_started", getting_started_template)
with open(README_TEMPLATE) as readme_template_md:
readme = readme_template_md.read()
readme = readme.replace("$getting_started", getting_started)
readme = re.sub(
r"\$code_([a-z _\-0-9]+)",
lambda x: code[x.group(1)],
readme
)
readme = re.sub(
r"\$demo_([a-z _\-0-9]+)",
lambda x: demos[x.group(1)],
readme
)
# Now put the codes and the screenshots in the README template
readme_template = re.sub(r"\$code_([^\s]+)", lambda x: codes[x.group(1)], readme_template)
readme_template = re.sub(r"\$demo_([^\s]+)", lambda x: demos[x.group(1)], readme_template)
readme = readme.replace("(/assets/", "(guides/assets/")
with open("README.md", "w", encoding="utf-8") as readme_md:
readme = """<!-- DO NOT EDIT THIS FILE DIRECTLY. INSTEAD PLEASE EDIT: "readme_template.md" or
"guides/getting_started.md", AND THEN RUN: "python render_readme.py" --> """ + "\n" + readme
readme_md.write(readme)
# Save the README template to the actual README.md file (with a note about the editing)
EDITING_NOTE = ("<!-- DO NOT EDIT THIS FILE DIRECTLY. INSTEAD EDIT THE `readme_template.md` OR "
"`guides/1)getting_started/1)quickstart.md` TEMPLATES AND THEN RUN `render_readme.py` SCRIPT. -->")
Path("README.md").write_text(f"{EDITING_NOTE}\n\n{readme_template}")