> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/gradio-app/gradio/llms.txt
> Use this file to discover all available pages before exploring further.

# The Interface class

> Learn how to use Gradio's Interface class to create web-based GUIs for your Python functions

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:

```python theme={null}
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](/components/overview) 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:

```python theme={null}
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:

```python theme={null}
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:

```python theme={null}
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:

```python theme={null}
gr.Image(type="filepath")
```

## Descriptive content

You can add descriptive content to help users understand your interface using these parameters:

<AccordionGroup>
  <Accordion title="title">
    Accepts text and displays it at the top of the interface. Also becomes the page title in the browser.

    ```python theme={null}
    gr.Interface(
        fn=calculator,
        inputs=[...],
        outputs=[...],
        title="Toy Calculator"
    )
    ```
  </Accordion>

  <Accordion title="description">
    Accepts text, markdown, or HTML and places it right under the title.

    ```python theme={null}
    gr.Interface(
        fn=calculator,
        inputs=[...],
        outputs=[...],
        description="Here's a sample toy calculator."
    )
    ```
  </Accordion>

  <Accordion title="article">
    Accepts text, markdown, or HTML and places it below the interface. Can also be an HTTP(S) link to a remote file.

    ```python theme={null}
    gr.Interface(
        fn=model,
        inputs=[...],
        outputs=[...],
        article="## How it works\n\nThis model uses..."
    )
    ```
  </Accordion>
</AccordionGroup>

## Component labels

Every component has a `label` attribute that modifies the label text at the top of the component:

```python theme={null}
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:

```python theme={null}
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:

```python theme={null}
# 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:

```python theme={null}
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

<CardGroup cols={2}>
  <Card title="Examples" icon="code" href="/guides/examples">
    Learn how to add example inputs to your Interface
  </Card>

  <Card title="Interface types" icon="grid" href="/guides/interface-types">
    Explore the 4 different types of interfaces
  </Card>

  <Card title="Reactive interfaces" icon="bolt" href="/guides/reactive-interfaces">
    Create live and streaming interfaces
  </Card>

  <Card title="Flagging" icon="flag" href="/guides/flagging">
    Allow users to flag interesting outputs
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.