Skip to main content
The gr.Interface class is a high-level abstraction in Gradio that allows you to quickly create a demo for any Python function by specifying the input types and output types.

​
Basic structure

The Interface class is initialized with three required parameters:
  • fn: the function to wrap a user interface (UI) around
  • inputs: which Gradio component(s) to use for the input. The number of components should match the number of arguments in your function
  • outputs: which Gradio component(s) to use for the output. The number of components should match the number of return values from your function
Here’s a simple example: 
import gradio as gr

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

demo = gr.Interface(
    fn=greet,
    inputs=["text", gr.Slider(value=2, minimum=1, maximum=10, step=1)],
    outputs=[gr.Textbox(label="greeting", lines=3)],
)

demo.launch()

​
Gradio components

Gradio includes more than 30 pre-built components (as well as many community-built custom components) that can be used as inputs or outputs in your demo. These components correspond to common data types in machine learning and data science:
  • gr.Image - designed to handle input or output images
  • gr.Label - displays classification labels and probabilities
  • gr.LinePlot - displays line plots
  • gr.Textbox - handles text input/output
  • gr.Slider - numeric slider input
And many more. See the components documentation for a complete list.

​
Component attributes

You can customize component appearance and behavior using component attributes. Instead of using string shortcuts like "text", you can instantiate the actual component class: 
import gradio as gr

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

demo = gr.Interface(
    fn=greet,
    inputs=[
        gr.Textbox(label="Name", placeholder="Enter your name"),
        gr.Slider(value=2, minimum=1, maximum=10, step=1, label="Intensity")
    ],
    outputs=gr.Textbox(label="Greeting", lines=3),
)

demo.launch()

​
Multiple inputs and outputs

You can create interfaces with multiple inputs and outputs. Each component in the inputs list corresponds to one parameter of the function in order, and each component in the outputs list corresponds to one return value: 
import gradio as gr

def greet(name, is_morning, temperature):
    salutation = "Good morning" if is_morning else "Good evening"
    greeting = f"{salutation} {name}. It is {temperature} degrees today"
    celsius = (temperature - 32) * 5 / 9
    return greeting, round(celsius, 2)

demo = gr.Interface(
    fn=greet,
    inputs=["text", "checkbox", gr.Slider(0, 100)],
    outputs=["text", "number"],
)

demo.launch()

​
Working with images

When using the Image component as input, your function receives a NumPy array with shape (height, width, 3), where the last dimension represents RGB values: 
import numpy as np
import gradio as gr

def sepia(input_img):
    sepia_filter = np.array([
        [0.393, 0.769, 0.189],
        [0.349, 0.686, 0.168],
        [0.272, 0.534, 0.131]
    ])
    sepia_img = input_img.dot(sepia_filter.T)
    sepia_img /= sepia_img.max()
    return sepia_img

demo = gr.Interface(sepia, gr.Image(), "image")
demo.launch()
You can control preprocessing with the type= keyword argument. For example, to receive a file path instead of a NumPy array: 
gr.Image(type="filepath")

​
Descriptive content

You can add descriptive content to help users understand your interface using these parameters:
Accepts text and displays it at the top of the interface. Also becomes the page title in the browser.
gr.Interface(
    fn=calculator,
    inputs=[...],
    outputs=[...],
    title="Toy Calculator"
)
Accepts text, markdown, or HTML and places it right under the title.
gr.Interface(
    fn=calculator,
    inputs=[...],
    outputs=[...],
    description="Here's a sample toy calculator."
)
Accepts text, markdown, or HTML and places it below the interface. Can also be an HTTP(S) link to a remote file.
gr.Interface(
    fn=model,
    inputs=[...],
    outputs=[...],
    article="## How it works\n\nThis model uses..."
)

​
Component labels

Every component has a label attribute that modifies the label text at the top of the component: 
gr.Number(label='Age', info='In years, must be greater than 0')
The info parameter provides additional information below the label for form elements.

​
Additional inputs within an accordion

If your prediction function takes many inputs, you can hide some within a collapsed accordion to avoid cluttering the UI: 
import gradio as gr

def generate_fake_image(prompt, seed, initial_image=None):
    return f"Used seed: {seed}", "https://dummyimage.com/300/09f.png"

demo = gr.Interface(
    generate_fake_image,
    inputs=["textbox"],
    outputs=["textbox", "image"],
    additional_inputs=[
        gr.Slider(0, 1000, label="Seed"),
        gr.Image(label="Initial Image")
    ],
)

demo.launch()
The additional inputs are passed to the function after the standard inputs, in order. You can customize the accordion appearance: 
# Using a string for the label
additional_inputs_accordion="Advanced Options"

# Using gr.Accordion for more control
additional_inputs_accordion=gr.Accordion(label="Advanced Options", open=True)

​
Loading from pipelines

You can automatically create an Interface from Hugging Face transformers pipelines: 
import gradio as gr
from transformers import pipeline

pipe = pipeline("image-classification")
gr.Interface.from_pipeline(pipe).launch()
The input and output components are automatically determined from the pipeline type.

​
Next steps

Examples

Learn how to add example inputs to your Interface

Interface types

Explore the 4 different types of interfaces

Reactive interfaces

Create live and streaming interfaces

Flagging

Allow users to flag interesting outputs