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

Merge branch 'master' into Blocks-Events

Browse Source
This commit is contained in:
Ömer Faruk Özdemir 2022-03-02 18:08:07 +03:00
commit 3448dc95ae
8 changed files with 274 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gradio/external.py
View File

@ -294,7 +294,7 @@ def get_spaces_interface(model_name, api_key, alias):
r = requests.get(iframe_url)
result = re.search(
"window.gradio_config = (.*?);</script>", r.text
r"window.gradio_config = (.*?);[\s]*</script>", r.text
) # some basic regex to extract the config
try:
config = json.loads(result.group(1))

28
gradio/inputs.py
View File

@ -123,6 +123,7 @@ class Textbox(InputComponent):
numeric: Optional[bool] = False,
type: Optional[str] = "str",
label: Optional[str] = None,
optional: bool = False,
):
"""
Parameters:
@ -132,6 +133,7 @@ class Textbox(InputComponent):
numeric (bool): DEPRECATED. Whether the input should be parsed as a number instead of a string.
type (str): DEPRECATED. Type of value to be returned by component. "str" returns a string, "number" returns a float value. Use Number component in place of number type.
label (str): component name in interface.
optional (bool): this parameter is ignored.
"""
self.lines = lines
self.placeholder = placeholder
@ -356,6 +358,7 @@ class Slider(InputComponent):
step: Optional[float] = None,
default: Optional[float] = None,
label: Optional[str] = None,
optional: bool = False,
):
"""
Parameters:
@ -364,6 +367,7 @@ class Slider(InputComponent):
step (float): increment between slider values.
default (float): default value.
label (str): component name in interface.
optional (bool): this parameter is ignored.
"""
self.minimum = minimum
self.maximum = maximum
@ -443,11 +447,17 @@ class Checkbox(InputComponent):
Demos: sentence_builder, titanic_survival
"""
def __init__(self, default: bool = False, label: Optional[str] = None):
def __init__(
self,
default: bool = False,
label: Optional[str] = None,
optional: bool = False,
):
"""
Parameters:
label (str): component name in interface.
default (bool): if True, checked by default.
optional (bool): this parameter is ignored.
"""
self.test_input = True
self.default = default
@ -515,6 +525,7 @@ class CheckboxGroup(InputComponent):
default: List[str] = [],
type: str = "value",
label: Optional[str] = None,
optional: bool = False,
):
"""
Parameters:
@ -522,6 +533,7 @@ class CheckboxGroup(InputComponent):
default (List[str]): default selected list of options.
type (str): Type of value to be returned by component. "value" returns the list of strings of the choices selected, "index" returns the list of indicies of the choices selected.
label (str): component name in interface.
optional (bool): this parameter is ignored.
"""
self.choices = choices
self.default = default
@ -612,6 +624,7 @@ class Radio(InputComponent):
type: str = "value",
default: Optional[str] = None,
label: Optional[str] = None,
optional: bool = False,
):
"""
Parameters:
@ -619,6 +632,7 @@ class Radio(InputComponent):
type (str): Type of value to be returned by component. "value" returns the string of the choice selected, "index" returns the index of the choice selected.
default (str): the button selected by default. If None, no button is selected by default.
label (str): component name in interface.
optional (bool): this parameter is ignored.
"""
self.choices = choices
self.type = type
@ -688,6 +702,7 @@ class Dropdown(InputComponent):
type: str = "value",
default: Optional[str] = None,
label: Optional[str] = None,
optional: bool = False,
):
"""
Parameters:
@ -695,6 +710,7 @@ class Dropdown(InputComponent):
type (str): Type of value to be returned by component. "value" returns the string of the choice selected, "index" returns the index of the choice selected.
default (str): default value selected in dropdown. If None, no value is selected by default.
label (str): component name in interface.
optional (bool): this parameter is ignored.
"""
self.choices = choices
self.type = type
@ -1401,6 +1417,7 @@ class Dataframe(InputComponent):
default: Optional[List[List[Any]]] = None,
type: str = "pandas",
label: Optional[str] = None,
optional: bool = False,
):
"""
Parameters:
@ -1412,6 +1429,7 @@ class Dataframe(InputComponent):
default (List[List[Any]]): Default value
type (str): Type of value to be returned by component. "pandas" for pandas dataframe, "numpy" for numpy array, or "array" for a Python array.
label (str): component name in interface.
optional (bool): this parameter is ignored.
"""
self.headers = headers
self.datatype = datatype
@ -1579,11 +1597,17 @@ class State(InputComponent):
Demos: chatbot
"""
def __init__(self, label: str = None, default: Any = None):
def __init__(
self,
label: str = None,
default: Any = None,
optional: bool = False,
):
"""
Parameters:
label (str): component name in interface (not used).
default (Any): the initial value of the state.
optional (bool): this parameter is ignored.
"""
self.default = default

90
guides/image_classification_in_pytorch.md Normal file
View File

@ -0,0 +1,90 @@
# Image Classification in PyTorch
related_spaces: https://huggingface.co/spaces/abidlabs/pytorch-image-classifier, https://huggingface.co/spaces/pytorch/ResNet, https://huggingface.co/spaces/pytorch/ResNext, https://huggingface.co/spaces/pytorch/SqueezeNet
tags: VISION, RESNET, PYTORCH
## Introduction
Image classification is a central task in computer vision. Building better classifiers to classify what object is present in a picture is an active area of research, as it has applications stretching from autonomous vehicles to medical imaging.
Such models are perfect to use with Gradio's *image* input component, so in this tutorial we will build a web demo to classify images using Gradio. We will be able to build the whole web application in Python, and it will look like this (try one of the examples!):
<iframe src="https://hf.space/gradioiframe/abidlabs/pytorch-image-classifier/+" frameBorder="0" height="660" title="Gradio app" class="container p-0 flex-grow space-iframe" 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>
Let's get started!
### Prerequisites
Make sure you have the `gradio` Python package already [installed](/getting_started). We will be using a pretrained image classification model, so you should also have `torch` installed.
## Step 1 — Setting up the Image Classification Model
First, we will need an image classification model. For this tutorial, we will use a pretrained Resnet-18 model, as it is easily downloadable from [PyTorch Hub](https://pytorch.org/hub/pytorch_vision_resnet/). You can use a different pretrained model or train your own.
```python
import torch
model = torch.hub.load('pytorch/vision:v0.6.0', 'resnet18', pretrained=True).eval()
```
Because we will be using the model for inference, we have called the `.eval()` method.
## Step 2 — Defining a `predict` function
Next, we will need to define a function that takes in the *user input*, which in this case is an image, and returns the prediction. The prediction should be returned as a dictionary whose keys are class name and values are confidence probabilities. We will load the class names from this [text file](https://git.io/JJkYN).
In the case of our pretrained model, it will look like this:
```python
import requests
from PIL import Image
from torchvision import transforms
# Download human-readable labels for ImageNet.
response = requests.get("https://git.io/JJkYN")
labels = response.text.split("\n")
def predict(inp):
inp = transforms.ToTensor()(inp).unsqueeze(0)
with torch.no_grad():
prediction = torch.nn.functional.softmax(model(inp)[0], dim=0)
confidences = {labels[i]: float(prediction[i]) for i in range(1000)}
return confidences
```
Let's break this down. The function takes one parameter:
* `inp`: the input image as a `PIL` image
Then, the function converts the image to a PIL Image and then eventually a PyTorch `tensor`, passes it through the model, and returns:
* `confidences`: the predictions, as a dictionary whose keys are class labels and whose values are confidence probabilities
## Step 3 — Creating a Gradio Interface
Now that we have our predictive function set up, we can create a Gradio Interface around it.
In this case, the input component is a drag-and-drop image component. To create this input, we use `Image(type="pil")` which creates the component and handles the preprocessing to convert that to a `PIL` image.
The output component will be a `Label`, which displays the top labels in a nice form. Since we don't want to show all 1,000 class labels, we will customize it to show only the top 3 images by constructing it as `Label(num_top_classes=3)`.
Finally, we'll add one more parameter, the `examples`, which allows us to prepopulate our interfaces with a few predefined examples. The code for Gradio looks like this:
```python
import gradio as gr
gr.Interface(fn=predict,
inputs=gr.inputs.Image(type="pil"),
outputs=gr.outputs.Label(num_top_classes=3),
examples=["lion.jpg", "cheetah.jpg"]).launch()
```
This produces the following interface, which you can try right here in your browser (try uploading your own examples!):
<iframe src="https://hf.space/gradioiframe/abidlabs/pytorch-image-classifier/+" frameBorder="0" height="660" title="Gradio app" class="container p-0 flex-grow space-iframe" 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>
----------
And you're done! That's all the code you need to build a web demo for an image classifier. If you'd like to share with others, try setting `share=True` when you `launch()` the Interface!

88
guides/image_classification_in_tensorflow.md Normal file
View File

@ -0,0 +1,88 @@
# Image Classification in TensorFlow and Keras
related_spaces: https://huggingface.co/spaces/abidlabs/keras-image-classifier
tags: VISION, MOBILENET, TENSORFLOW
## Introduction
Image classification is a central task in computer vision. Building better classifiers to classify what object is present in a picture is an active area of research, as it has applications stretching from traffic control systems to satellite imaging.
Such models are perfect to use with Gradio's *image* input component, so in this tutorial we will build a web demo to classify images using Gradio. We will be able to build the whole web application in Python, and it will look like this (try one of the examples!):
<iframe src="https://hf.space/gradioiframe/abidlabs/keras-image-classifier/+" frameBorder="0" height="660" title="Gradio app" class="container p-0 flex-grow space-iframe" 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>
Let's get started!
### Prerequisites
Make sure you have the `gradio` Python package already [installed](/getting_started). We will be using a pretrained Keras image classification model, so you should also have `tensorflow` installed.
## Step 1 — Setting up the Image Classification Model
First, we will need an image classification model. For this tutorial, we will use a pretrained Mobile Net model, as it is easily downloadable from [Keras](https://keras.io/api/applications/mobilenet/). You can use a different pretrained model or train your own.
```python
import tensorflow as tf
inception_net = tf.keras.applications.MobileNetV2()
```
This line automatically downloads the MobileNet model and weights using the Keras library.
## Step 2 — Defining a `predict` function
Next, we will need to define a function that takes in the *user input*, which in this case is an image, and returns the prediction. The prediction should be returned as a dictionary whose keys are class name and values are confidence probabilities. We will load the class names from this [text file](https://git.io/JJkYN).
In the case of our pretrained model, it will look like this:
```python
import requests
# Download human-readable labels for ImageNet.
response = requests.get("https://git.io/JJkYN")
labels = response.text.split("\n")
def classify_image(inp):
inp = inp.reshape((-1, 224, 224, 3))
inp = tf.keras.applications.mobilenet_v2.preprocess_input(inp)
prediction = inception_net.predict(inp).flatten()
confidences = {labels[i]: float(prediction[i]) for i in range(1000)}
return confidences
```
Let's break this down. The function takes one parameter:
* `inp`: the input image as a `numpy` array
Then, the function adds a batch dimension, passes it through the model, and returns:
* `confidences`: the predictions, as a dictionary whose keys are class labels and whose values are confidence probabilities
## Step 3 — Creating a Gradio Interface
Now that we have our predictive function set up, we can create a Gradio Interface around it.
In this case, the input component is a drag-and-drop image component. To create this input, we can use the `"gradio.inputs.Image"` class, which creates the component and handles the preprocessing to convert that to a numpy array. We will instantiate the class with a parameter that automatically preprocesses the input image to be 224 pixels by 224 pixels, which is the size that MobileNet expects.
The output component will be a `"label"`, which displays the top labels in a nice form. Since we don't want to show all 1,000 class labels, we will customize it to show only the top 3 images.
Finally, we'll add one more parameter, the `examples`, which allows us to prepopulate our interfaces with a few predefined examples. The code for Gradio looks like this:
```python
import gradio as gr
gr.Interface(fn=classify_image,
inputs=gr.inputs.Image(shape=(224, 224)),
outputs=gr.outputs.Label(num_top_classes=3),
examples=["banana.jpg", "car.jpg"]).launch()
```
This produces the following interface, which you can try right here in your browser (try uploading your own examples!):
<iframe src="https://hf.space/gradioiframe/abidlabs/keras-image-classifier/+" frameBorder="0" height="660" title="Gradio app" class="container p-0 flex-grow space-iframe" 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>
----------
And you're done! That's all the code you need to build a web demo for an image classifier. If you'd like to share with others, try setting `share=True` when you `launch()` the Interface!

55
guides/image_classification_with_vision_transformers.md Normal file
View File

@ -0,0 +1,55 @@
# Image Classification with Vision Transformers
related_spaces: https://huggingface.co/spaces/abidlabs/vision-transformer
tags: VISION, TRANSFORMERS, HUB
## Introduction
Image classification is a central task in computer vision. Building better classifiers to classify what object is present in a picture is an active area of research, as it has applications stretching from facial recognition to manufacturing quality control.
State-of-the-art image classifiers are based on the *transformers* architectures, originally popularized for NLP tasks. Such architectures are typically called vision transformers (ViT). Such models are perfect to use with Gradio's *image* input component, so in this tutorial we will build a web demo to classify images using Gradio. We will be able to build the whole web application in a **single line of Python**, and it will look like this (try one of the examples!):
<iframe src="https://hf.space/gradioiframe/abidlabs/vision-transformer/+" frameBorder="0" height="660" title="Gradio app" class="container p-0 flex-grow space-iframe" 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>
Let's get started!
### Prerequisites
Make sure you have the `gradio` Python package already [installed](/getting_started).
## Step 1 — Choosing a Vision Image Classification Model
First, we will need an image classification model. For this tutorial, we will use a model from the [Hugging Face Model Hub](https://huggingface.co/models?pipeline_tag=image-classification). The Hub contains thousands of models covering dozens of different machine learning tasks.
Expand the Tasks category on the left sidebar and select "Image Classification" as our task of interest. You will then see all of the models on the Hub that are designed to classify images.
At the time of writing, the most popular one is `google/vit-base-patch16-224`, which has been trained on ImageNet images at a resolution of 224x224 pixels. We will use this model for our demo.
## Step 2 — Loading the Vision Transformer Model with Gradio
When using a model from the Hugging Face Hub, we do not need to define the input or output components for the demo. Similarly, we do not need to be concerned with the details of preprocessing or postprocessing.
All of these are automatically inferred from the model tags.
Besides the import statement, it only takes a single line of Python to load and launch the demo.
We use the `gr.Interface.load()` method and pass in the path to the model including the `huggingface/` to designate that it is from the Hugging Face Hub.
```python
import gradio as gr
gr.Interface.load(
"huggingface/google/vit-base-patch16-224",
examples=["alligator.jpg", "laptop.jpg"]).launch()
```
Notice that we have added one more parameter, the `examples`, which allows us to prepopulate our interfaces with a few predefined examples.
This produces the following interface, which you can try right here in your browser. When you input an image, it is automatically preprocessed and sent to the Hugging Face Hub API, where it is passed through the model and returned as a human-interpretable prediction. Try uploading your own image!
<iframe src="https://hf.space/gradioiframe/abidlabs/vision-transformer/+" frameBorder="0" height="660" title="Gradio app" class="container p-0 flex-grow space-iframe" 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>
----------
And you're done! In one line of code, you have built a web demo for an image classifier. If you'd like to share with others, try setting `share=True` when you `launch()` the Interface!

12
scripts/launch_website.sh Normal file
View File

@ -0,0 +1,12 @@
#!/bin/bash
if [ -z "$(ls | grep CONTRIBUTING.md)" ]; then
echo "Please run the script from repo directory"
exit -1
else
echo "Building the website"
cd website/homepage
npm install
npm run build
cd dist
python -m http.server
fi

2
website/homepage/src/guides_main_template.html
View File

@ -18,7 +18,7 @@
<meta name="twitter:creator" content="@teamGradio">
<meta name="twitter:title" content="Gradio Guides">
<meta name="twitter:description" content="How to use Gradio">
<meta name="twitter:image" content="/assets/img/guides/guides-meta.png">
<meta name="twitter:image" content="https://gradio.app/assets/img/guides/guides-meta.png">
<link rel="icon" type="image/png" href="/assets/img/logo.png">
<link href="/gradio_static/static/bundle.css" rel="stylesheet">

2
website/homepage/src/guides_template.html
View File

@ -10,7 +10,7 @@
<meta property="og:url" content="{{ url }}" />
<meta property="og:image" content="/assets/img/guides/{{ guide_name }}.png" />
<meta name="twitter:title" content="{{ title }}">
<meta name="twitter:image" content="/assets/img/guides/{{ guide_name }}.png">
<meta name="twitter:image" content="https://gradio.app/assets/img/guides/{{ guide_name }}.png">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" type="image/png" href="/assets/img/logo.png">
<link href="/gradio_static/assets/{{ index_css_file }}" rel="stylesheet">