Skip to main content

​
Quickstart

This guide will walk you through building your first Gradio app. You’ll learn how to create a simple web interface for a Python function and share it with others.
Prerequisite: Gradio requires Python 3.10 or higher. Check your Python version with python --version.

​
Install Gradio

Install Gradio using pip: 
pip install --upgrade gradio
It’s best to install Gradio in a virtual environment. See the Installation guide for detailed instructions.

​
Build 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.
1

Create a Python file

Create a new file called app.py and add the following code:
import gradio as gr

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

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

demo.launch()
We shorten the imported name from gradio to gr. This is a widely adopted convention for better readability.
2

Run your app

Run the app from your terminal:
python app.py
The demo will open in a browser at http://localhost:7860. If you’re running in a notebook, the demo will appear embedded within the notebook.
3

Try it out

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

​
Understanding the Interface class

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 function argument

The fn argument is very flexible — you can pass any Python function that you want to wrap with a UI. The function could be anything from a music generator to a tax calculator to the prediction function of a pretrained machine learning model.

​
Input and output components

Gradio includes more than 30 built-in components (such as gr.Textbox(), gr.Image(), and gr.HTML()) that are designed for machine learning applications.
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 multiple arguments, pass a list of input components to inputs, with each component corresponding to one of the function’s arguments, in order. The same applies if your function returns multiple values — simply pass a list of components to outputs.

​
Share your demo

Gradio lets you easily share your demo without hosting on a web server. Simply set share=True in launch(), and a publicly accessible URL will be created: 
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 in a matter of seconds: 
👉  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.

​
Hot reload mode

When developing locally, you can run your Gradio app in hot reload mode, which automatically reloads the app whenever you make changes to the file. Instead of running python app.py, run: 
gradio app.py
Your app will automatically reload when you save changes to app.py.
You can also enable vibe mode with the --vibe flag:
gradio --vibe app.py
This provides an in-browser chat that can be used to write or edit your Gradio app using natural language.

​
Next steps

Now that you’ve built your first Gradio app, you can:

Learn about Blocks

Build custom layouts and complex interactions with gr.Blocks

Create a chatbot

Use gr.ChatInterface to quickly build chatbot UIs

Explore components

Discover Gradio’s 30+ built-in components for ML apps

Host on Spaces

Deploy your app for free on Hugging Face Spaces