Building Demos
TabbedInterface

New to Gradio? Start here: Getting Started

To install Gradio from main, run the following command:

pip install https://gradio-builds.s3.amazonaws.com/49492dd2fcb3741f5afc033d6da9da300fd0dd6c/gradio-5.16.1-py3-none-any.whl

*Note: Setting share=True in launch() will not work.

←

ChatInterface

Blocks

→

TabbedInterface

gradio.TabbedInterface(interface_list, ···)

Description

A TabbedInterface is created by providing a list of Interfaces or Blocks, each of which gets rendered in a separate tab. Only the components from the Interface/Blocks will be rendered in the tab. Certain high-level attributes of the Blocks (e.g. custom `css`, `js`, and `head` attributes) will not be loaded.

Initialization

🔗

interface_list: list[Blocks]

A list of Interfaces (or Blocks) to be rendered in the 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

The tab title to display when this demo is opened in a browser window.

🔗

theme: Theme | str | None

default = None

A Theme object or a string representing a theme. If a string, will look for a built-in theme with that name (e.g. "soft" or "default"), or will attempt to load a theme from the Hugging Face Hub (e.g. "gradio/monochrome"). If None, will use the Default theme.

🔗

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 as a string or path to a css file. This css will be included in the demo webpage.

🔗

js: str | None

default = None

Custom js as a string or path to a js file. The custom js should in the form of a single js function. This function will automatically be executed when the page loads. For more flexibility, use the head parameter to insert js inside <script> tags.

🔗

head: str | None

default = None

Custom html to insert into the head of the demo webpage. This can be used to add custom meta tags, multiple scripts, stylesheets, etc. to the page.

Demos

import gradio as gr hello_world = gr.Interface(lambda name: "Hello " + name, "text", "text") bye_world = gr.Interface(lambda name: "Bye " + name, "text", "text") chat = gr.ChatInterface(lambda *args: "Hello " + args[0]) demo = gr.TabbedInterface([hello_world, bye_world, chat], ["Hello World", "Bye World", "Chat"]) if __name__ == "__main__": demo.launch()

import gradio as gr

hello_world = gr.Interface(lambda name: "Hello " + name, "text", "text")
bye_world = gr.Interface(lambda name: "Bye " + name, "text", "text")
chat = gr.ChatInterface(lambda *args: "Hello " + args[0])

demo = gr.TabbedInterface([hello_world, bye_world, chat], ["Hello World", "Bye World", "Chat"])

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

←

ChatInterface

Blocks

→