It just takes a few lines of Python to create a beautiful demo like the one above, so let’s get started 💫
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.
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, " + name + "!" * int(intensity)
demo = gr.Interface(
✍️ Tip: We shorten the imported name from
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.
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.
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.
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.
output arguments take one or more Gradio components. As we’ll see, Gradio includes more than 30 built-in components (such as the
gr.HTML() components) that are designed for machine learning applications.
✍️ Tip: For the
outputs arguments, you can pass in the name of these components as a string (
"textbox") or an instance of the class (
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.
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
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
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:
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.
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?
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 to our dedicated guide on
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.
That’s the gist of the core
gradio_client): query any Gradio app programmatically in Python.
@gradio/lite): write Gradio apps in Python that run entirely in the browser (no server needed!), thanks to Pyodide.
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.