The 4 kinds of Gradio interfaces

The gr.Interface class can handle four different kinds of demos, depending on whether you need inputs, outputs, or both.

Interface types overview

Gradio supports:

Standard demos - separate inputs and outputs (e.g., image classifier, speech-to-text)
Output-only demos - no input, only output (e.g., unconditional image generation)
Input-only demos - no output, only input (e.g., save uploads to database)
Unified demos - same components for input and output (e.g., text autocomplete)

Depending on the type, the user interface looks different: Interface types visualization

Standard demos

Standard demos have both input and output components. Set both the inputs and outputs parameters:

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,
    inputs=gr.Image(),
    outputs="image"
)

demo.launch()

This creates a standard interface with:

Input component on the left
Submit button
Output component on the right

Common use cases

Image classification
Text translation
Speech-to-text transcription
Question answering
Image-to-image transformations

Output-only demos

Output-only demos don’t take any input but produce output. Set inputs=None:

import time
import gradio as gr

def fake_gan():
    time.sleep(1)
    images = [
        "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
        "https://images.unsplash.com/photo-1554151228-14d9def656e4",
        "https://images.unsplash.com/photo-1542909168-82c3e7fdca5c",
    ]
    return images

demo = gr.Interface(
    fn=fake_gan,
    inputs=None,
    outputs=gr.Gallery(label="Generated Images", columns=2),
    title="FD-GAN",
    description="This is a demo of image generation."
)

demo.launch()

The interface shows:

A “Generate” button (instead of “Submit”)
Only the output component
No input components

Common use cases

Unconditional image generation (GANs)
Random quote generators
Daily predictions
Noise generation
Any function that requires no user input

Input-only demos

Input-only demos take input but produce no visible output. Set outputs=None:

import random
import string
import gradio as gr

def save_image_random_name(image):
    random_string = ''.join(random.choices(string.ascii_letters, k=20)) + '.png'
    image.save(random_string)
    print(f"Saved image to {random_string}!")

demo = gr.Interface(
    fn=save_image_random_name,
    inputs=gr.Image(type="pil"),
    outputs=None,
)

demo.launch()

The interface shows:

Only input components
A submit button
No output components

Common use cases

Save uploads to a database
Submit feedback forms
Log data for analytics
Trigger external processes
Any function where the output isn’t meant for display

Unified demos

Unified demos use the same component for both input and output. The output overwrites the input:

import gradio as gr

def generate_text(prompt):
    # Simulate text generation by adding to the prompt
    return prompt + " (generated continuation...)"

demo = gr.Interface(
    generate_text,
    inputs=gr.Textbox(lines=5, label="Input Text"),
    outputs=gr.Textbox(lines=5, label="Input Text"),
)

demo.launch()

To create a unified interface, set inputs and outputs to the same component instance.

Here’s the correct way:

import gradio as gr

textbox = gr.Textbox(lines=5)

def text_generation(text):
    return text + " [AI generated continuation]"

demo = gr.Interface(
    text_generation,
    inputs=textbox,
    outputs=textbox,  # Same instance
)

demo.launch()

The interface shows:

A single component that serves as both input and output
Output replaces the input when function completes
Useful for iterative transformations

Common use cases

Text autocomplete/generation
Image enhancement (input image → enhanced image)
Code formatting/refactoring
Translation with same text box
Any iterative refinement task

Detecting interface type

Gradio automatically detects the interface type based on your configuration:

from gradio.data_classes import InterfaceTypes

# Standard: different inputs and outputs
if inputs and outputs and inputs != outputs:
    interface_type = InterfaceTypes.STANDARD

# Output-only: no inputs
if not inputs and outputs:
    interface_type = InterfaceTypes.OUTPUT_ONLY

# Input-only: no outputs
if inputs and not outputs:
    interface_type = InterfaceTypes.INPUT_ONLY

# Unified: same components for input and output
if inputs == outputs:
    interface_type = InterfaceTypes.UNIFIED

When to use each type

Standard interfaces

Use when you have a clear transformation: input → processing → outputMost common type for machine learning models.

Output-only interfaces

Use when your function generates content without user inputPerfect for generative models that don’t need conditioning.

Input-only interfaces

Use when you need to collect data without showing resultsGreat for data collection, logging, or backend operations.

Unified interfaces

Use when input and output are the same type and output should replace inputBest for iterative refinement or enhancement tasks.

Beyond the four types

If none of these types fit your needs, you’ll want to use gr.Blocks() instead, which provides:

Multiple functions with different input/output combinations
Custom layouts and arrangements
More complex interactivity
Conditional visibility
State management across multiple components

See the Blocks documentation for more advanced use cases.

Complete examples

Standard: Image classifier

import gradio as gr

def classify_image(img):
    return {"cat": 0.7, "dog": 0.2, "bird": 0.1}

demo = gr.Interface(
    classify_image,
    inputs=gr.Image(),
    outputs=gr.Label(num_top_classes=3),
    title="Image Classifier",
    description="Upload an image to classify it"
)

demo.launch()

Output-only: Random image generator

import gradio as gr
import numpy as np

def generate_random_image():
    return np.random.randint(0, 255, (100, 100, 3), dtype=np.uint8)

demo = gr.Interface(
    generate_random_image,
    inputs=None,
    outputs=gr.Image(),
    title="Random Art Generator"
)

demo.launch()

Input-only: Feedback collector

import gradio as gr

def save_feedback(name, rating, comments):
    with open("feedback.txt", "a") as f:
        f.write(f"{name}: {rating}/5 - {comments}\n")
    print(f"Saved feedback from {name}")

demo = gr.Interface(
    save_feedback,
    inputs=[
        gr.Textbox(label="Name"),
        gr.Slider(1, 5, label="Rating"),
        gr.Textbox(label="Comments", lines=3)
    ],
    outputs=None,
    title="Feedback Form"
)

demo.launch()

Unified: Text editor

import gradio as gr

textbox = gr.Textbox(lines=10, label="Text Editor")

def format_text(text):
    # Simple formatting: uppercase first letter of sentences
    return ". ".join([s.strip().capitalize() for s in text.split(".")])

demo = gr.Interface(
    format_text,
    inputs=textbox,
    outputs=textbox,
    title="Text Formatter"
)

demo.launch()

Next steps

Interface class

Learn more about the Interface class

Blocks

Build more complex interfaces with Blocks

Examples

Working with examples in interfaces

Reactive interfaces

Create live and streaming interfaces

Get Started

Core Concepts

Building Interfaces

Building with Blocks

Chatbots

Advanced Features

Custom Components

Clients & Deployment

The 4 kinds of Gradio interfaces

Interface types overview

Standard demos

Common use cases

Output-only demos

Common use cases

Input-only demos

Common use cases

Unified demos

Common use cases

Detecting interface type

When to use each type

Beyond the four types

Complete examples

Next steps

Interface class

Blocks

Examples

Reactive interfaces

​Interface types overview

​Standard demos

​Common use cases

​Output-only demos

​Common use cases

​Input-only demos

​Common use cases

​Unified demos

​Common use cases

​Detecting interface type

​When to use each type

​Beyond the four types

​Complete examples

​Next steps

Interface class

Blocks

Examples

Reactive interfaces

Interface types overview

Standard demos

Common use cases

Output-only demos

Common use cases

Input-only demos

Common use cases

Unified demos

Common use cases

Detecting interface type

When to use each type

Beyond the four types

Complete examples

Next steps