Gradio logo

New to Gradio? Start here: Getting Started

See the Release History

Combining Interfaces

Description

Once you have created several Interfaces, we provide several classes that let you start combining them together. For example, you can chain them in Series or compare their outputs in Parallel if the inputs and outputs match accordingly. You can also display arbitrary Interfaces together in a tabbed layout using TabbedInterface.

TabbedInterface

gradio.TabbedInterface(interface_list, ยทยทยท)

Description

A TabbedInterface is created by providing a list of Interfaces, each of which gets rendered in a separate tab.

Initialization

Parameter Description
interface_list

list[Interface]

required

a list of interfaces to be rendered in tabs.

tab_names

list[str] | None

default: None

a list of tab names. If None, the tab names will be "Tab 1", "Tab 2", etc.

title

str | None

default: None

a title for the interface; if provided, appears above the input and output components in large font. Also used as the tab title when opened in a browser window.

theme

Theme | None

default: None

analytics_enabled

bool | None

default: None

whether to allow basic telemetry. If None, will use GRADIO_ANALYTICS_ENABLED environment variable or default to True.

css

str | None

default: None

custom css or path to custom css file to apply to entire Blocks

Demos

import gradio as gr

tts_examples = [
    "I love learning machine learning",
    "How do you do?",
]

tts_demo = gr.load(
    "huggingface/facebook/fastspeech2-en-ljspeech",
    title=None,
    examples=tts_examples,
    description="Give me something to say!",
)

stt_demo = gr.load(
    "huggingface/facebook/wav2vec2-base-960h",
    title=None,
    inputs="mic",
    description="Let me try to guess what you're saying!",
)

demo = gr.TabbedInterface([tts_demo, stt_demo], ["Text-to-speech", "Speech-to-text"])

if __name__ == "__main__":
    demo.launch()

Parallel

gradio.Parallel(interfaces, ยทยทยท)

Description

Creates a new Interface consisting of multiple Interfaces in parallel (comparing their outputs). The Interfaces to put in Parallel must share the same input components (but can have different output components).

Initialization

Parameter Description
interfaces

<class 'gradio.interface.Interface'>

required

any number of Interface objects that are to be compared in parallel

options

<class 'inspect._empty'>

additional kwargs that are passed into the new Interface object to customize it

Guides

Demos

import gradio as gr

greeter_1 = gr.Interface(lambda name: f"Hello {name}!", inputs="textbox", outputs=gr.Textbox(label="Greeter 1"))
greeter_2 = gr.Interface(lambda name: f"Greetings {name}!", inputs="textbox", outputs=gr.Textbox(label="Greeter 2"))
demo = gr.Parallel(greeter_1, greeter_2)

if __name__ == "__main__":
    demo.launch()

Series

gradio.Series(interfaces, ยทยทยท)

Description

Creates a new Interface from multiple Interfaces in series (the output of one is fed as the input to the next, and so the input and output components must agree between the interfaces).

Initialization

Parameter Description
interfaces

<class 'gradio.interface.Interface'>

required

any number of Interface objects that are to be connected in series

options

<class 'inspect._empty'>

additional kwargs that are passed into the new Interface object to customize it

Guides

Demos

import gradio as gr

get_name = gr.Interface(lambda name: name, inputs="textbox", outputs="textbox")
prepend_hello = gr.Interface(lambda name: f"Hello {name}!", inputs="textbox", outputs="textbox")
append_nice = gr.Interface(lambda greeting: f"{greeting} Nice to meet you!",
                           inputs="textbox", outputs=gr.Textbox(label="Greeting"))
demo = gr.Series(get_name, prepend_hello, append_nice)

if __name__ == "__main__":
    demo.launch()