gradio-app / gradio

Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work!

Website | Documentation | Guides | Getting Started | Examples | 中文

Gradio: Build Machine Learning Web Apps — in Python

Gradio is an open-source Python package that allows you to quickly build a demo or web application for your machine learning model, API, or any arbitrary Python function. You can then share a link to your demo or web application in just a few seconds using Gradio's built-in sharing features. No JavaScript, CSS, or web hosting experience needed!

It just takes a few lines of Python to create a beautiful demo like the one above, so let's get started 💫

Installation

Prerequisite: Gradio requires Python 3.8 or higher

We recommend installing Gradio using pip, which is included by default in Python. Run this in your terminal or command prompt:

pip install gradio

Tip

It is best to install Gradio in a virtual environment. Detailed installation instructions for all common operating systems are provided here.

Building Your First Demo

You can run Gradio in your favorite code editor, Jupyter notebook, Google Colab, or anywhere else you write Python. Let's write your first Gradio app:

import gradio as gr

def greet(name, intensity):
    return "Hello " * intensity + name + "!"

demo = gr.Interface(
    fn=greet,
    inputs=["text", "slider"],
    outputs=["text"],
)

demo.launch()

Tip

We shorten the imported name from gradio to gr for better readability of code. This is a widely adopted convention that you should follow so that anyone working with your code can easily understand it.

Now, run your code. If you've written the Python code in a file named, for example, app.py, then you would run python app.py from the terminal.

The demo below will open in a browser on http://localhost:7860 if running from a file. If you are running within a notebook, the demo will appear embedded within the notebook.

Type your name in the textbox on the left, drag the slider, and then press the Submit button. You should see a friendly greeting on the right.

Tip

When developing locally, you can run your Gradio app in hot reload mode, which automatically reloads the Gradio app whenever you make changes to the file. To do this, simply type in gradio before the name of the file instead of python. In the example above, you would type: gradio app.py in your terminal. Learn more about hot reloading in the Hot Reloading Guide.

Understanding the Interface Class

You'll notice that in order to make your first demo, you created an instance of the gr.Interface class. The Interface class is designed to create demos for machine learning models which accept one or more inputs, and return one or more outputs.

The Interface class has three core arguments:

• fn: the function to wrap a user interface (UI) around
• inputs: the Gradio component(s) to use for the input. The number of components should match the number of arguments in your function.
• outputs: the Gradio component(s) to use for the output. The number of components should match the number of return values from your function.

The fn argument is very flexible -- you can pass any Python function that you want to wrap with a UI. In the example above, we saw a relatively simple function, but the function could be anything from a music generator to a tax calculator to the prediction function of a pretrained machine learning model.

The input and output arguments take one or more Gradio components. As we'll see, Gradio includes more than 30 built-in components (such as the gr.Textbox(), gr.Image(), and gr.HTML() components) that are designed for machine learning applications.

Tip

For the inputs and outputs arguments, you can pass in the name of these components as a string ("textbox") or an instance of the class (gr.Textbox()).

If your function accepts more than one argument, as is the case above, pass a list of input components to inputs, with each input component corresponding to one of the arguments of the function, in order. The same holds true if your function returns more than one value: simply pass in a list of components to outputs. This flexibility makes the Interface class a very powerful way to create demos.

We'll dive deeper into the gr.Interface on our series on building Interfaces.

Sharing Your Demo

What good is a beautiful demo if you can't share it? Gradio lets you easily share a machine learning demo without having to worry about the hassle of hosting on a web server. Simply set share=True in launch(), and a publicly accessible URL will be created for your demo. Let's revisit our example demo, but change the last line as follows:

import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="textbox", outputs="textbox")
    
demo.launch(share=True)  # Share your demo with just 1 extra parameter 🚀

When you run this code, a public URL will be generated for your demo in a matter of seconds, something like:

👉   https://a23dsf231adb.gradio.live

Now, anyone around the world can try your Gradio demo from their browser, while the machine learning model and all computation continues to run locally on your computer.

To learn more about sharing your demo, read our dedicated guide on sharing your Gradio application.

An Overview of Gradio

So far, we've been discussing the Interface class, which is a high-level class that lets to build demos quickly with Gradio. But what else does Gradio do?

Chatbots with gr.ChatInterface

Gradio includes another high-level class, gr.ChatInterface, which is specifically designed to create Chatbot UIs. Similar to Interface, you supply a function and Gradio creates a fully working Chatbot UI. If you're interested in creating a chatbot, you can jump straight our dedicated guide on gr.ChatInterface.

Custom Demos with gr.Blocks

Gradio also offers a low-level approach for designing web apps with more flexible layouts and data flows with the gr.Blocks class. Blocks allows you to do things like 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.

You can build very custom and complex applications using gr.Blocks(). For example, the popular image generation Automatic1111 Web UI is built using Gradio Blocks. We dive deeper into the gr.Blocks on our series on building with Blocks.

The Gradio Python & JavaScript Ecosystem

That's the gist of the core gradio Python library, but Gradio is actually so much more! It's an entire ecosystem of Python and JavaScript libraries that let you build machine learning applications, or query them programmatically, in Python or JavaScript. Here are other related parts of the Gradio ecosystem:

• Gradio Python Client (gradio_client): query any Gradio app programmatically in Python.
• Gradio JavaScript Client (@gradio/client): query any Gradio app programmatically in JavaScript.
• Gradio-Lite (@gradio/lite): write Gradio apps in Python that run entirely in the browser (no server needed!), thanks to Pyodide.
• Hugging Face Spaces: the most popular place to host Gradio applications — for free!

What's Next?

Keep learning about Gradio sequentially using the Gradio Guides, which include explanations as well as example code and embedded interactive demos. Next up: key features about Gradio demos.

Or, if you already know the basics and are looking for something specific, you can search the more technical API documentation.

Questions?

If you'd like to report a bug or have a feature request, please create an issue on GitHub. For general questions about usage, we are available on our Discord server and happy to help.

If you like Gradio, please leave us a ⭐ on GitHub!

Open Source Stack

Gradio is built on top of many wonderful open-source libraries!

License

Gradio is licensed under the Apache License 2.0 found in the LICENSE file in the root directory of this repository.

Citation

Also check out the paper Gradio: Hassle-Free Sharing and Testing of ML Models in the Wild, 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},
}

gradio's Issues

Support of *.tiff files

In the Image interface in the Input, can you provide support for 'tiff files'

The input file has size limit?

Hi,
There will be an error in the output when uploading a zip(>100M), is this an upload size limit? May I modify this restriction?
Much thanks!!

Output Image size is resized

If my output is Image then the outputted Image size is not that of the size generated by the function.
for eg :
The function just rotates the image 180 degree but the output image is resized and cropped!!!

File as inputs

Hi, thanks for the great work
wonder if there is any way to select a TXT/CSV file as input ?

Does the current input interface support video input?

My model is a video based classification model, Gradio is currently supported?
One more little question, how do I set up POST?

Webcam bug on gradiohub

Received a bug request on: https://www.gradio.app/hub/hub-emotion-recognition

Can't quit server with CTRL-C on Windows

Previously, used to be able to quit a server running from terminal with CTRL-C. No longer can do.

Webcam image input not compatible with 'live' interface

I wanted to run a real-time classification task on webcam video, rather than selected frames. The API seems like it should allow this by just setting live=True in the interface with a webcam input, but the resulting UI still uses the "click to snap" interface.

Code snippet:

def classify_image(inp):
    return model.predict(inp)

image = gr.inputs.Image(label="Input Image", source="webcam")
label = gr.outputs.Label(num_top_classes=k)

gr.Interface(fn=classify_image, live=True, inputs=image, outputs=label).launch()

Using gradio 1.1.9 on python 3.7

Output Image is not shown in the output placeholder

First of all, thank you very much for building such an awesome and easy-to-use app.

I'm trying to use gradio for our Object Detection Framework. Everything works smoothly except the output image is not shown in the output placeholder. I can see it in the debug output in the Colab notebook. Here is my notebook, and some screenshots.

Thank you in advance for your help.

NB: https://colab.research.google.com/drive/1Xi5F5ddJIcgilHIG4bnk3tcGcx10FYP0?usp=sharing

As you might notice, my output is PIL Image:

Output Image:  (432, 288) <class 'PIL.Image.Image'>
<Figure size 432x288 with 0 Axes>

Folder/bulk upload as input (or zip upload); Encryption of upload

Dear Abubakar Abid,

thank you for your great work.

Two questions:

1. Is there an upload option for multiple files (drag-and-drop) or a complete folder (native or zipped) planned?

The application would be an XML-export of volumetric image data (i.e., multiple *.tiff files and an XML file with the meta data).

2. Is the upload secure (i.e., 128-bit SSL encryption) or will this be implemented in future versions?

Many thanks,
Maximilian

F-string will cause syntax error under python 3.5

gradio/gradio/interface.py

Line 194 in 04e3036

f"Validating samples: {m+1}/{n} ["

is audio support as input output

checking the docs is audio data types supported for input and output for models?

Does it compress the uploaded image in default?

I find the size of the received base64 encoded image, is much smaller than the original image.
Furthermore, I find the following code in the image_upload.js file.

resizeImage.call(this, data, 600, 600, function(image_data) {
      io.image_data = image_data
      io.target.find(".image_preview").attr('src', image_data);
      if (update_editor) {
        io.tui_editor.loadImageFromURL(io.image_data, 'input').then(function (sizeValue) {
          io.tui_editor.clearUndoStack();
          io.tui_editor.ui.activeMenuEvent();
          io.tui_editor.ui.resizeEditor({ imageSize: sizeValue });
        });
      }

So the maximum size of the received image is 600 * 600, right? Is it possible to undo this compression?

Suppress flask output

When run from jupyter notebook, flask outputs lots of http request status lines, which clutters the jupyter notebook. Please suppress

Share url in config.json does not show "None" when --share=False

Showing examples header even without any examples

Documentation and sample notebook

Thank you for building this useful tool.

For below points from README
(1) identifying and correcting mislabelled data;
(2) valuing each datapoint to automatically identify which data points should be labeled;**

Have you outsourced the code , if so could you please provide the details.
A sample notebook and documentation around it will be more helpful.

thanks again
Hari

Multiple inputs

How to take multiple inputs from user?
like age, salary, gender, etc

Can't import Gradio

I installed gradio.
Can't import it

Any solution?

Traceback (most recent call last):
File "", line 1, in
File "C:\Users\Moughees\AppData\Local\Continuum\anaconda3\lib\site-packages\gradio_init_.py", line 1, in
from gradio.interface import * # This makes it possible to import Interface as gradio.Interface.
File "C:\Users\Moughees\AppData\Local\Continuum\anaconda3\lib\site-packages\gradio\interface.py", line 11, in
from gradio import networking, strings, utils
File "C:\Users\Moughees\AppData\Local\Continuum\anaconda3\lib\site-packages\gradio\networking.py", line 14, in
from gradio.tunneling import create_tunnel
File "C:\Users\Moughees\AppData\Local\Continuum\anaconda3\lib\site-packages\gradio\tunneling.py", line 12, in
import paramiko
File "C:\Users\Moughees\AppData\Local\Continuum\anaconda3\lib\site-packages\paramiko_init_.py", line 22, in
from paramiko.transport import SecurityOptions, Transport
File "C:\Users\Moughees\AppData\Local\Continuum\anaconda3\lib\site-packages\paramiko\transport.py", line 129, in
File "C:\Users\Moughees\AppData\Local\Continuum\anaconda3\lib\site-packages\paramiko\transport.py", line 190, in Transport
if KexCurve25519.is_available():
File "C:\Users\Moughees\AppData\Local\Continuum\anaconda3\lib\site-packages\paramiko\kex_curve25519.py", line 30, in is_available
X25519PrivateKey.generate()
File "C:\Users\Moughees\AppData\Local\Continuum\anaconda3\lib\site-packages\cryptography\hazmat\primitives\asymmetric\x25519.py", line 38, in generate
from cryptography.hazmat.backends.openssl.backend import backend
File "C:\Users\Moughees\AppData\Local\Continuum\anaconda3\lib\site-packages\cryptography\hazmat\backends\openssl_init_.py", line 7, in
from cryptography.hazmat.backends.openssl.backend import backend
File "C:\Users\Moughees\AppData\Local\Continuum\anaconda3\lib\site-packages\cryptography\hazmat\backends\openssl\backend.py", line 74, in
from cryptography.hazmat.bindings.openssl import binding
File "C:\Users\Moughees\AppData\Local\Continuum\anaconda3\lib\site-packages\cryptography\hazmat\bindings\openssl\binding.py", line 15, in
from cryptography.hazmat.bindings._openssl import ffi, lib
ImportError: DLL load failed: The specified procedure could not be found.

File uploading fails when file is small

import gradio as gr
import pandas as pd

def predict(file_obj,Question):
    df = pd.read_csv(file_obj.name,dtype=str)
    return df

def main():
    io = gr.Interface(predict, ["file",gr.inputs.Textbox(placeholder="Enter Question here...")], "dataframe")
    io.launch()

if __name__ == "__main__":
    main()

The file is not uploaded properly when the file size is small. I checked the temp file, it is empty.
You can use the code above to reproduce the issue.
Attached sample file as zip. Unzip before uploading
tapas.zip

Interfaces not showing inline in colab notebook

When I run the demo notebook (https://colab.research.google.com/drive/1BAw8QGFNqeKf1V0E3TLCzWyV6NM_qv_i?authuser=1#scrollTo=od6vQzqDGKoJ) here in colab notebook, I often get this issue:

Disable automatic matching of input and output sizes

Could there be an option to disable the input and output interfaces being automatically the same size? For example, when there are many UI components in the output interface, and not as many in the input interface, the input interface is still forced to be the same size as the output interface. Is there an option to disable that, if the user desired?

Currently what happens:

What I'm requesting:

How to deploy gradio app on heroku

Hello I want to know the devlopment process of gradio model on cloud server like heroku.

Its same like flask and streamlit or need some diffrent approach??

Option to enable local network connections by setting Flask's host to "0.0.0.0"

Hi,

I'm trying out gradio for the first time and loving it!

I often set up services and applications meant to be accessible inside my network. When it's a Flask app, I do this by setting Flask's host to "0.0.0.0" so that it listens on all IP addresses, and I'd love to be able to do that with gradio too.

• This comment from July says that you can use the Interface argument server_name to accomplish this, but it no longer works.
• It looks like this recent pull request switched gradio from HTTPServer to Flask and did not port that functionality.
• Testing it locally I confirmed that changing line 187 in networking.py to pass the host argument to Flask works:
  process = threading.Thread(target=app.run, kwargs={"port": port, "host":"0.0.0.0"})

It seems like this could be accomplished by either

• having a new Interface argument like all_ips or flask_host that gets passed to networking.start_server. This would make the function of that new argument very clear and easy to use, but it adds another argument which is not always ideal.
• using the existing server_name argument and passing it to networking.start_server. This might be a good use of that argument. In fact, server_name never gets passed to the networking module - it seems to be a argument without a meaningful use at the moment.

Happy to try a PR if you like either of these ideas.

Aligning input and output interfaces

Many times the input and output interfaces are not aligned, which can be a little jarring. Can we fix this?

Interpretation doesn't work in Tensorflow 1.x

For TF 1.x models, interpretation doesn't set up the correct session

button problem

I have my classifier that takes text and returns either 0 or 1.
But when I run gradio as described below, I don't have a button to submit the text.

def predict(txt):
    vec = text_prepare(txt)
    return clf(vec) # 0 or 1


inputs = gr.inputs.Textbox(placeholder="Your text", label = "Text", lines=10)
label = gr.outputs.Label(label="Acceptability")

gr.Interface(fn = predict, inputs = inputs, outputs = label).launch()

i cant get the URI

i just tried running hello (which is in docs) with gradio but i cant see anything in URI

it just shows Running locally at: http://127.0.0.1:7868/

but if i open the link nothing will be there ..! help me

latest update breaks .launch()

I just upgraded from gradio 1.0.7 to 1.1.0 and now I can't launch my demo which was working before.

When I call:

gr.Interface(fn=ask, inputs=["textbox", "text"], outputs="text").launch()

I get the following error:

  
File "/Users/elhutton/opt/anaconda3/envs/agent-assist/lib/python3.7/site-packages/IPython/core/interactiveshell.py", line 3343, in run_code
    exec(code_obj, self.user_global_ns, self.user_ns)
  
File "<ipython-input-27-5dcf77e302d7>", line 1, in <module>
    gr.Interface(fn=ask, inputs=["textbox", "text"], outputs="text").launch()
  
File "/Users/elhutton/opt/anaconda3/envs/agent-assist/lib/python3.7/site-packages/gradio/interface.py", line 265, in launch
    server_port=self.server_port)

ValueError: too many values to unpack (expected 2)

I am running on MacOS Catalina 10.15.6, working in a conda virtual env with python 3.7.7. I upgraded via pip install gradio --upgrade

Please help! Thanks

Embed Gradio components in an app (React/Flask/Django etc)

How can I embed the interface like you did in your website?

I want to create a gradio app within another web framework - React, Flask or Django
Can I package it in a docker container?

JSON and HTML don't work

When I set up JSON or HTML as output type the submit button didn't appear. How can I solve it

Check package version

The latest version is 0.7.8, however https://gradio.app/api/pkg-version returns 0.5.0.
BTW, for some reason, the link is unstable to access from China.
So I suggest using a more stable API, or not even check the version if it is not updated in time automatically.

way to easily stop/reload

when trying things out on my end tonight, I noticed there wasn't an elegant way to stop the server from the command line for an existing application. I started peeking around inside Interface.launch, but I'm not sure where the best place would be to catch a ctrl+c would be -- there's a lot going on in that method to say the least. 😅

You may consider using well established libraries for image augmentations.

It looks like you manually implement image augmentations.

You may try to look at https://github.com/albu/albumentations

Gradio output UIs with multiple functions that return plots seems to fail

Something like:

import gradio as gr

r = gr.inputs.Slider(163, 255, label="R")
g = gr.inputs.Slider(119, 255, label="G")
b = gr.inputs.Slider(88, 255, label="B")
low_thresh = gr.inputs.Slider(175/255, label="Lower Threshold")
high_thresh = gr.inputs.Slider(0, 1, label="Upper Threshold")

gr.Interface(fn=[display_image, display_label], inputs=[r, g, b, low_thresh, high_thresh], outputs="plot", live=False).launch(inline=False, share=True)

Where display_image, display_label each returned a plot didn't work. I got blank outputs...

[BUG] Flag save all output Images under the same name (ver 1.2.4)

When multiple output Images present, the Flag will save all images under the same name.
Test code to reproduce the bug:

import gradio as gr
import numpy as np

def show(x):
    return np.zeros((20,20,3)), np.ones((40,40,3))

io = gr.Interface(show, gr.inputs.Slider(4, 6, step=1), [gr.outputs.Image(label='o1'), gr.outputs.Image(label='o2')])
io.launch()

Expected behavior:
Images should have prefix name as their label names.

Way to use Gradio without hosting the application on its URL.

Is there a way to use Gradio without hosting the application on a https://xxxxx.gradio.app URL? I would like to use the Gradio GUI/UI but in my own application.

Can't Connect to web server (502 Bad Gateway)

I have bulit a .py file on my pc and passed the validation, but everytime I click the link, I get 502 Bad Gateway. Is it because my python files exits? (on google colab it's ok.)

unexpected network negotiations?

Simplest demo

import gradio as gr
def greet(name):
return "Hello " + name + "!"
gr.Interface(fn=greet, inputs="text", outputs="text").launch()

responds on submit button much faster if network connection is not available for app.
Why?

i. e.

python demo.py
response time 1.26s

sandbox-exec -f nonetwork.sb python demo.py
response time 0.014s

Unable to transmit large image (>1 MB)

Hi all,

First of all very nice work. I would like to mention that the image input component doesn't seem to allow one to transmit large images (> 1MB or so) to the machine running the demo. It simply displays in red, "error" at the top right of the image input on the web demo, and I don't get any data or messages on the machine hosting the demo. Can you please look into this?

Thanks,
Bhavan

GPT 2 demo doesn't run on colab

One of my alpha testers pointed this out, and I also experience it:

Multiprocessing Lock issue on Windows

When I run the latest version (1.2.2) of gradio on Windows, I get the following error:

    ForkingPickler(file, protocol).dump(obj)
TypeError: can't pickle _thread.lock objects

Pretty sure it's because gradio swtiched from the threading module to the processing module

continuous output

When run in a jupyternotebook the launch of the interface floods the cell with printing
"{'title': None, 'description': None, 'thumbnail': None, 'input_interface': [<gradio.inputs.Sketchpad object at 0x0000025F74CC0688>], 'output_interface': [<gradio.outputs.Label object at 0x0000025F74CC07C8>]}"

How to set response time limit?

Hi, thanks for this fantastic work.
I noticed that there will be an error in the output if my wrap function spent too much time (like > 2mins).
Is there any way to loose the response time limitation?
(my wrap function like this :
def POC_input(input1):
time.sleep(135)
check=True
return [{"UnitTest":str(check)}, {"UnitTest_msg":'test'}]
Much thanks.

Is there any support coming up for word embeddings too ?

Documentation of interpretation is missing

Under https://www.gradio.app/docs there is no mention of interpretation and how this feature can be used. Will these docs be updated soon?

Output image not in full size

Trying to resize the image of the output . But can't figure it out.

Have an __del__ for the interface object

Right now, every time that a Gradio interface object is launched, a new port is used. E.g. starts from 7860, then goes to 7861, 7862, etc. This is because each interface object keeps its port open, which is wasteful.

Close the port when the interface object is deleted, or is overwritten, so that ports are closed and can be reused

Output image is compressed horizontally compared to input image

HIgh latency issue with demo

Hi Gradio team, this is fantastic work.

I am noticing a huge latency difference. My ML model takes around 5 seconds to run when called in python without the demo. But when I measure the latency of the same function when called through the hosted demo it takes around 15 seconds for the same exact input. And this 15 seconds doesn't include the I/O latency of demo. This is very strange. Any thoughts why this could be happening?

Thanks,
Bhavan