Gradio Docs

New to Gradio? Start here: Getting Started

Building Demos

import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
    
if __name__ == "__main__":
    demo.launch()

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"],
)
if __name__ == "__main__":
    demo.launch()

import gradio as gr

title = "GPT-J-6B"

examples = [
    ["The tower is 324 metres (1,063 ft) tall,"],
    ["The Moon's orbit around Earth has"],
    ["The smooth Borealis basin in the Northern Hemisphere covers 40%"],
]

demo = gr.Interface.load(
    "huggingface/EleutherAI/gpt-j-6B",
    inputs=gr.Textbox(lines=5, max_lines=6, label="Input Text"),
    title=title,
    examples=examples,
)

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

Interface

gradio.Interface(fn, inputs, outputs, ···)

Interface is Gradio's main high-level class, and allows you to create a web-based GUI / demo around a machine learning model (or any Python function) in a few lines of code. You must specify three parameters: (1) the function to create a GUI for (2) the desired input components and (3) the desired output components. Additional parameters can be used to control the appearance and behavior of the demo.

Example Usage

import gradio as gr

def image_classifier(inp):
    return {'cat': 0.3, 'dog': 0.7}

demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label")
demo.launch()

Parameter	Description
`fn` Callable required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` str \| IOComponent \| List[str \| IOComponent] \| None required	a single Gradio component, or list of Gradio components. Components can either be passed as instantiated objects, or referred to by their string shortcuts. The number of input components should match the number of parameters in fn. If set to None, then only the output components will be displayed.
`outputs` str \| IOComponent \| List[str \| IOComponent] \| None required	a single Gradio component, or list of Gradio components. Components can either be passed as instantiated objects, or referred to by their string shortcuts. The number of output components should match the number of values returned by fn. If set to None, then only the input components will be displayed.
`examples` List[Any] \| List[List[Any]] \| str \| None default: None	sample inputs for the function; if provided, appear below the UI components and can be clicked to populate the interface. Should be nested list, in which the outer list consists of samples and each inner list consists of an input corresponding to each input component. A string path to a directory of examples can also be provided, but it should be within the directory with the python file running the gradio app. If there are multiple input components and a directory is provided, a log.csv file must be present in the directory to link corresponding inputs.
`cache_examples` bool \| None default: None	If True, caches examples in the server for fast runtime in examples. The default option in HuggingFace Spaces is True. The default option elsewhere is False.
`examples_per_page` int default: 10	If examples are provided, how many to display per page.
`live` bool default: False	whether the interface should automatically rerun if any of the inputs change.
`interpretation` Callable \| str \| None default: None	function that provides interpretation explaining prediction output. Pass "default" to use simple built-in interpreter, "shap" to use a built-in shapley-based interpreter, or your own custom interpretation function. For more information on the different interpretation methods, see the Advanced Interface Features guide.
`num_shap` float default: 2.0	a multiplier that determines how many examples are computed for shap-based interpretation. Increasing this value will increase shap runtime, but improve results. Only applies if interpretation is "shap".
`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.
`description` str \| None default: None	a description for the interface; if provided, appears above the input and output components and beneath the title in regular font. Accepts Markdown and HTML content.
`article` str \| None default: None	an expanded article explaining the interface; if provided, appears below the input and output components in regular font. Accepts Markdown and HTML content.
`thumbnail` str \| None default: None	path or url to image to use as display image when the web demo is shared on social media.
`theme` str default: "default"	Theme to use - right now, only "default" is supported. Can be set with the GRADIO_THEME environment variable.
`css` str \| None default: None	custom css or path to custom css file to use with interface.
`allow_flagging` str \| None default: None	one of "never", "auto", or "manual". If "never" or "auto", users will not see a button to flag an input and output. If "manual", users will see a button to flag. If "auto", every input the user submits will be automatically flagged (outputs are not flagged). If "manual", both the input and outputs are flagged when the user clicks flag button. This parameter can be set with environmental variable GRADIO_ALLOW_FLAGGING; otherwise defaults to "manual".
`flagging_options` List[str] \| None default: None	if provided, allows user to select from the list of options when flagging. Only applies if allow_flagging is "manual".
`flagging_dir` str default: "flagged"	what to name the directory where flagged data is stored.
`flagging_callback` FlaggingCallback default: CSVLogger()	An instance of a subclass of FlaggingCallback which will be called when a sample is flagged. By default logs to a local CSV file.
`analytics_enabled` bool \| None default: None	Whether to allow basic telemetry. If None, will use GRADIO_ANALYTICS_ENABLED environment variable if defined, or default to True.
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)

Methods

launch

gradio.Interface.launch(···)

Launches a simple web server that serves the demo. Can also be used to create a public link used by anyone to access the demo from their browser by setting share=True.

Example Usage

import gradio as gr
def reverse(text):
    return text[::-1]
demo = gr.Interface(reverse, "text", "text")
demo.launch(share=True, auth=("username", "password"))

Parameter	Description
`inline` bool \| None default: None	whether to display in the interface inline in an iframe. Defaults to True in python notebooks; False otherwise.
`inbrowser` bool default: False	whether to automatically launch the interface in a new tab on the default browser.
`share` bool \| None default: None	whether to create a publicly shareable link for the interface. Creates an SSH tunnel to make your UI accessible from anywhere. If not provided, it is set to False by default every time, except when running in Google Colab. When localhost is not accessible (e.g. Google Colab), setting share=False is not supported.
`debug` bool default: False	if True, blocks the main thread from running. If running in Google Colab, this is needed to print the errors in the cell output.
`enable_queue` bool \| None default: None	DEPRECATED (use .queue() method instead.) if True, inference requests will be served through a queue instead of with parallel threads. Required for longer inference times (> 1min) to prevent timeout. The default option in HuggingFace Spaces is True. The default option elsewhere is False.
`max_threads` int default: 40	the maximum number of total threads that the Gradio app can generate in parallel. The default is inherited from the starlette library (currently 40). Applies whether the queue is enabled or not. But if queuing is enabled, this parameter is increaseed to be at least the concurrency_count of the queue.
`auth` Callable \| Tuple[str, str] \| List[Tuple[str, str]] \| None default: None	If provided, username and password (or list of username-password tuples) required to access interface. Can also provide function that takes username and password and returns True if valid login.
`auth_message` str \| None default: None	If provided, HTML message provided on login page.
`prevent_thread_lock` bool default: False	If True, the interface will block the main thread while the server is running.
`show_error` bool default: False	If True, any errors in the interface will be displayed in an alert modal and printed in the browser console log
`server_name` str \| None default: None	to make app accessible on local network, set this to "0.0.0.0". Can be set by environment variable GRADIO_SERVER_NAME. If None, will use "127.0.0.1".
`server_port` int \| None default: None	will start gradio app on this port (if available). Can be set by environment variable GRADIO_SERVER_PORT. If None, will search for an available port starting at 7860.
`show_tips` bool default: False	if True, will occasionally show tips about new Gradio features
`height` int default: 500	The height in pixels of the iframe element containing the interface (used if inline=True)
`width` int \| str default: "100%"	The width in pixels of the iframe element containing the interface (used if inline=True)
`encrypt` bool default: False	If True, flagged data will be encrypted by key provided by creator at launch
`favicon_path` str \| None default: None	If a path to a file (.png, .gif, or .ico) is provided, it will be used as the favicon for the web page.
`ssl_keyfile` str \| None default: None	If a path to a file is provided, will use this as the private key file to create a local server running on https.
`ssl_certfile` str \| None default: None	If a path to a file is provided, will use this as the signed certificate for https. Needs to be provided if ssl_keyfile is provided.
`ssl_keyfile_password` str \| None default: None	If a password is provided, will use this with the ssl certificate for https.
`quiet` bool default: False	If True, suppresses most print statements.
`show_api` bool default: True	If True, shows the api docs in the footer of the app. Default True. If the queue is enabled, then api_open parameter of .queue() will determine if the api docs are shown, independent of the value of show_api.

load

gradio.Interface.load(name, ···)

Class method that constructs an Interface from a Hugging Face repo. Can accept model repos (if src is "models") or Space repos (if src is "spaces"). The input and output components are automatically loaded from the repo.

Example Usage

import gradio as gr
description = "Story generation with GPT"
examples = [["An adventurer is approached by a mysterious stranger in the tavern for a new quest."]]
demo = gr.Interface.load("models/EleutherAI/gpt-neo-1.3B", description=description, examples=examples)
demo.launch()

Parameter	Description
`name` str required	the name of the model (e.g. "gpt2" or "facebook/bart-base") or space (e.g. "flax-community/spanish-gpt2"), can include the `src` as prefix (e.g. "models/facebook/bart-base")
`src` str \| None default: None	the source of the model: `models` or `spaces` (or leave empty if source is provided as a prefix in `name`)
`api_key` str \| None default: None	optional access token for loading private Hugging Face Hub models or spaces. Find your token here: https://huggingface.co/settings/tokens
`alias` str \| None default: None	optional string used as the name of the loaded model instead of the default name (only applies if loading a Space running Gradio 2.x)

from_pipeline

gradio.Interface.from_pipeline(pipeline, ···)

Class method that constructs an Interface from a Hugging Face transformers.Pipeline object. The input and output components are automatically determined from the pipeline.

Example Usage

import gradio as gr
from transformers import pipeline
pipe = pipeline("image-classification")
gr.Interface.from_pipeline(pipe).launch()

Parameter Description

Parameter	Description
`pipeline` Pipeline required	the pipeline object to use.


                pipeline

Pipeline

required

the pipeline object to use.

integrate

gradio.Interface.integrate(···)

A catch-all method for integrating with other libraries. This method should be run after launch()

Parameter Description

Parameter	Description
`comet_ml` comet_ml.Experiment \| None default: None	If a comet_ml Experiment object is provided, will integrate with the experiment and appear on Comet dashboard
`wandb` ModuleType \| None default: None	If the wandb module is provided, will integrate with it and appear on WandB dashboard
`mlflow` ModuleType \| None default: None	If the mlflow module is provided, will integrate with the experiment and appear on ML Flow dashboard


                comet_ml

comet_ml.Experiment | None

default: None

If a comet_ml Experiment object is provided, will integrate with the experiment and appear on Comet dashboard


                wandb

ModuleType | None

default: None

If the wandb module is provided, will integrate with it and appear on WandB dashboard


                mlflow

ModuleType | None

default: None

If the mlflow module is provided, will integrate with the experiment and appear on ML Flow dashboard

queue

gradio.Interface.queue(···)

You can control the rate of processed requests by creating a queue. This will allow you to set the number of requests to be processed at one time, and will let users know their position in the queue.

Example Usage

demo = gr.Interface(gr.Textbox(), gr.Image(), image_generator)
demo.queue(concurrency_count=3)
demo.launch()

Parameter	Description
`concurrency_count` int default: 1	Number of worker threads that will be processing requests from the queue concurrently. Increasing this number will increase the rate at which requests are processed, but will also increase the memory usage of the queue.
`status_update_rate` float \| Literal['auto'] default: "auto"	If "auto", Queue will send status estimations to all clients whenever a job is finished. Otherwise Queue will send status at regular intervals set by this parameter as the number of seconds.
`client_position_to_load_data` int \| None default: None	DEPRECATED. This parameter is deprecated and has no effect.
`default_enabled` bool \| None default: None	Deprecated and has no effect.
`api_open` bool default: True	If True, the REST routes of the backend will be open, allowing requests made directly to those endpoints to skip the queue.
`max_size` int \| None default: None	The maximum number of events the queue will store at any given moment. If the queue is full, new events will not be added and a user will receive a message saying that the queue is full. If None, the queue size will be unlimited.

Step-by-step Guides

Quickstart

Flagging

A Gradio Interface includes a "Flag" button that appears underneath the output. By default, clicking on the Flag button sends the input and output data back to the machine where the gradio demo is running, and saves it to a CSV log file. But this default behavior can be changed. To set what happens when the Flag button is clicked, you pass an instance of a subclass of FlaggingCallback to the flagging_callback parameter in the Interface constructor. You can use one of the FlaggingCallback subclasses that are listed below, or you can create your own, which lets you do whatever you want with the data that is being flagged.

SimpleCSVLogger

gradio.SimpleCSVLogger(···)

A simplified implementation of the FlaggingCallback abstract class provided for illustrative purposes. Each flagged sample (both the input and output data) is logged to a CSV file on the machine running the gradio app.

Example Usage

import gradio as gr
def image_classifier(inp):
    return {'cat': 0.3, 'dog': 0.7}
demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label",
                    flagging_callback=SimpleCSVLogger())

Step-by-step Guides

No guides yet, contribute a guide about SimpleCSVLogger

CSVLogger

gradio.CSVLogger(···)

The default implementation of the FlaggingCallback abstract class. Each flagged sample (both the input and output data) is logged to a CSV file with headers on the machine running the gradio app.

Example Usage

import gradio as gr
def image_classifier(inp):
    return {'cat': 0.3, 'dog': 0.7}
demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label",
                    flagging_callback=CSVLogger())

Step-by-step Guides

No guides yet, contribute a guide about CSVLogger

HuggingFaceDatasetSaver

gradio.HuggingFaceDatasetSaver(hf_token, dataset_name, ···)

A callback that saves each flagged sample (both the input and output data) to a HuggingFace dataset.

Example Usage

import gradio as gr
hf_writer = gr.HuggingFaceDatasetSaver(HF_API_TOKEN, "image-classification-mistakes")
def image_classifier(inp):
    return {'cat': 0.3, 'dog': 0.7}
demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label",
                    allow_flagging="manual", flagging_callback=hf_writer)

Parameter	Description
`hf_token` str required	The HuggingFace token to use to create (and write the flagged sample to) the HuggingFace dataset.
`dataset_name` str required	The name of the dataset to save the data to, e.g. "image-classifier-1"
`organization` str \| None default: None	The organization to save the dataset under. The hf_token must provide write access to this organization. If not provided, saved under the name of the user corresponding to the hf_token.
`private` bool default: False	Whether the dataset should be private (defaults to False).

Step-by-step Guides

No guides yet, contribute a guide about HuggingFaceDatasetSaver

Combining Interfaces

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.

import gradio as gr

title = "GPT-J-6B"

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

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

stt_demo = gr.Interface.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()

TabbedInterface

gradio.TabbedInterface(interface_list, ···)

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

import gradio as gr

title = "GPT-J-6B"

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

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

stt_demo = gr.Interface.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()

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` str default: "default"	which theme to use - right now, only "default" is supported.
`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

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()

import gradio as gr

generator1 = gr.Interface.load("huggingface/gpt2")
generator2 = gr.Interface.load("huggingface/EleutherAI/gpt-neo-2.7B")
generator3 = gr.Interface.load("huggingface/EleutherAI/gpt-j-6B")

demo = gr.Parallel(generator1, generator2, generator3)

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

Parallel

gradio.Parallel(interfaces, ···)

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).

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()

Parameter Description

Parameter	Description
`interfaces` required	any number of Interface objects that are to be compared in parallel
`options`	additional kwargs that are passed into the new Interface object to customize it


                interfaces

required

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


                options

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

Step-by-step Guides

No guides yet, contribute a guide about Parallel

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()

import gradio as gr

generator = gr.Interface.load("huggingface/gpt2")
translator = gr.Interface.load("huggingface/t5-small")

demo = gr.Series(generator, translator, description="This demo combines two Spaces: a text generator (`huggingface/gpt2`) and a text translator (`huggingface/t5-small`). The first Space takes a prompt as input and generates a text. The second Space takes the generated text as input and translates it into another language.")

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

Series

gradio.Series(interfaces, ···)

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).

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()

Parameter Description

Parameter	Description
`interfaces` required	any number of Interface objects that are to be connected in series
`options`	additional kwargs that are passed into the new Interface object to customize it


                interfaces

required

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


                options

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

Step-by-step Guides

No guides yet, contribute a guide about Series

import gradio as gr

def welcome(name):
    return f"Welcome to Gradio, {name}!"

with gr.Blocks() as demo:
    gr.Markdown(
    """
    # Hello World!
    Start typing below to see the output.
    """)
    inp = gr.Textbox(placeholder="What is your name?")
    out = gr.Textbox()
    inp.change(welcome, inp, out)

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

import numpy as np
import gradio as gr

def flip_text(x):
    return x[::-1]

def flip_image(x):
    return np.fliplr(x)

with gr.Blocks() as demo:
    gr.Markdown("Flip text or image files using this demo.")
    with gr.Tab("Flip Text"):
        text_input = gr.Textbox()
        text_output = gr.Textbox()
        text_button = gr.Button("Flip")
    with gr.Tab("Flip Image"):
        with gr.Row():
            image_input = gr.Image()
            image_output = gr.Image()
        image_button = gr.Button("Flip")

    with gr.Accordion("Open for More!"):
        gr.Markdown("Look at me...")

    text_button.click(flip_text, inputs=text_input, outputs=text_output)
    image_button.click(flip_image, inputs=image_input, outputs=image_output)
    
if __name__ == "__main__":
    demo.launch()

from transformers import pipeline

import gradio as gr

asr = pipeline("automatic-speech-recognition", "facebook/wav2vec2-base-960h")
classifier = pipeline("text-classification")


def speech_to_text(speech):
    text = asr(speech)["text"]
    return text


def text_to_sentiment(text):
    return classifier(text)[0]["label"]


demo = gr.Blocks()

with demo:
    audio_file = gr.Audio(type="filepath")
    text = gr.Textbox()
    label = gr.Label()

    b1 = gr.Button("Recognize Speech")
    b2 = gr.Button("Classify Sentiment")

    b1.click(speech_to_text, inputs=audio_file, outputs=text)
    b2.click(text_to_sentiment, inputs=text, outputs=label)

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

import gradio as gr

from transformers import pipeline

english_translator = gr.Blocks.load(name="spaces/gradio/english_translator")
english_generator = pipeline("text-generation", model="distilgpt2")


def generate_text(text):
    english_text = english_generator(text)[0]["generated_text"]
    german_text = english_translator(english_text)
    return english_text, german_text


with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            seed = gr.Text(label="Input Phrase")
        with gr.Column():
            english = gr.Text(label="Generated English Text")
            german = gr.Text(label="Generated German Text")
    btn = gr.Button("Generate")
    btn.click(generate_text, inputs=[seed], outputs=[english, german])
    gr.Examples(["My name is Clara and I am"], inputs=[seed])

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

import time
import gradio as gr


js_function = "() => {new Audio('file=beep.mp3').play();}"

def task(x):
    time.sleep(2)
    return "Hello, " + x 

with gr.Blocks() as demo:
    name = gr.Textbox(label="name")
    greeting = gr.Textbox(label="greeting")
    name.blur(task, name, greeting)
    greeting.change(None, [], [], _js=js_function)  # Note that _js is a special arugment whose usage may change in the future
    
demo.launch()

Blocks

with gradio.Blocks():

Blocks is Gradio's low-level API that allows you to create more custom web applications and demos than Interfaces (yet still entirely in Python).

Compared to the Interface class, Blocks offers more flexibility and control over: (1) the layout of components (2) the events that trigger the execution of functions (3) data flows (e.g. inputs can trigger outputs, which can trigger the next level of outputs). Blocks also offers ways to group together related demos such as with tabs.

The basic usage of Blocks is as follows: create a Blocks object, then use it as a context (with the "with" statement), and then define layouts, components, or events within the Blocks context. Finally, call the launch() method to launch the demo.

Example Usage

import gradio as gr
def update(name):
    return f"Welcome to Gradio, {name}!"

with gr.Blocks() as demo:
    gr.Markdown("Start typing below and then click **Run** to see the output.")
    with gr.Row():
        inp = gr.Textbox(placeholder="What is your name?")
        out = gr.Textbox()
    btn = gr.Button("Run")
    btn.click(fn=update, inputs=inp, outputs=out)

demo.launch()

Parameter	Description
`theme` str default: "default"	which theme to use - right now, only "default" is supported.
`analytics_enabled` bool \| None default: None	whether to allow basic telemetry. If None, will use GRADIO_ANALYTICS_ENABLED environment variable or default to True.
`mode` str default: "blocks"	a human-friendly name for the kind of Blocks or Interface being created.
`title` str default: "Gradio"	The tab title to display when this is opened in a browser window.
`css` str \| None default: None	custom css or path to custom css file to apply to entire Blocks

Methods

load

gradio.Blocks.load(···)

For reverse compatibility reasons, this is both a class method and an instance method, the two of which, confusingly, do two completely different things.

Class method: loads a demo from a Hugging Face Spaces repo and creates it locally and returns a block instance. Equivalent to gradio.Interface.load()

Instance method: adds event that runs as soon as the demo loads in the browser. Example usage below.

Example Usage

import gradio as gr
import datetime
with gr.Blocks() as demo:
    def get_time():
        return datetime.datetime.now().time()
    dt = gr.Textbox(label="Current time")
    demo.load(get_time, inputs=None, outputs=dt)
demo.launch()

Parameter	Description
`fn` Callable \| None default: None	Instance Method - the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` List[Component] \| None default: None	Instance Method - List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` List[Component] \| None default: None	Instance Method - List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Instance Method - Defining this parameter exposes the endpoint in the api docs
`scroll_to_output` bool default: False	Instance Method - If True, will scroll to output component on completion
`show_progress` bool default: True	Instance Method - If True, will show progress animation while pending
`queue` default: None	Instance Method - If True, will place the request on the queue, if the queue exists
`batch` bool default: False	Instance Method - If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Instance Method - Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	Instance Method - If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	Instance Method - If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`every` float \| None default: None	Instance Method - Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.
`name` str \| None default: None	Class Method - the name of the model (e.g. "gpt2" or "facebook/bart-base") or space (e.g. "flax-community/spanish-gpt2"), can include the `src` as prefix (e.g. "models/facebook/bart-base")
`src` str \| None default: None	Class Method - the source of the model: `models` or `spaces` (or leave empty if source is provided as a prefix in `name`)
`api_key` str \| None default: None	Class Method - optional access token for loading private Hugging Face Hub models or spaces. Find your token here: https://huggingface.co/settings/tokens
`alias` str \| None default: None	Class Method - optional string used as the name of the loaded model instead of the default name (only applies if loading a Space running Gradio 2.x)

Step-by-step Guides

No guides yet, contribute a guide about Blocks

Block Layouts

Customize the layout of your Blocks UI with the layout classes below.

Row

with gradio.Row():

Row is a layout element within Blocks that renders all children horizontally.

Example Usage

with gradio.Blocks() as demo:
    with gradio.Row():
        gr.Image("lion.jpg")
        gr.Image("tiger.jpg")
demo.launch()

Parameter Description

Parameter	Description
`variant` str default: "default"	row type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap).
`visible` bool default: True	If False, row will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.


                variant

str

default: "default"

row type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap).


                visible

bool

default: True

If False, row will be hidden.


                elem_id

str | None

default: None

An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Step-by-step Guides

No guides yet, contribute a guide about Row

Column

with gradio.Column():

Column is a layout element within Blocks that renders all children vertically. The widths of columns can be set through the `scale` and `min_width` parameters. If a certain scale results in a column narrower than min_width, the min_width parameter will win.

Example Usage

with gradio.Blocks() as demo:
    with gradio.Row():
        with gradio.Column(scale=1):
            text1 = gr.Textbox()
            text2 = gr.Textbox()
        with gradio.Column(scale=4):
            btn1 = gr.Button("Button 1")
            btn2 = gr.Button("Button 2")

Parameter	Description
`scale` int default: 1	relative width compared to adjacent Columns. For example, if Column A has scale=2, and Column B has scale=1, A will be twice as wide as B.
`min_width` int default: 320	minimum pixel width of Column, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in a column narrower than min_width, the min_width parameter will be respected first.
`variant` str default: "default"	column type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap).
`visible` bool default: True	If False, column will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Step-by-step Guides

No guides yet, contribute a guide about Column

Tab

with gradio.Tab():

Tab (or its alias TabItem) is a layout element. Components defined within the Tab will be visible when this tab is selected tab.

Example Usage

with gradio.Blocks() as demo:
    with gradio.Tab("Lion"):
        gr.Image("lion.jpg")
        gr.Button("New Lion")
    with gradio.Tab("Tiger"):
        gr.Image("tiger.jpg")
        gr.Button("New Tiger")

Parameter Description

Parameter	Description
`label` str required	The visual label for the tab
`id` int \| str \| None default: None	An optional identifier for the tab, required if you wish to control the selected tab from a predict function.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.


                label

str

required

The visual label for the tab

id

int | str | None

default: None

An optional identifier for the tab, required if you wish to control the selected tab from a predict function.


                elem_id

str | None

default: None

An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Step-by-step Guides

No guides yet, contribute a guide about Tab

Box

with gradio.Box():

Box is a a layout element which places children in a box with rounded corners and some padding around them.

Example Usage

with gradio.Box():
    gr.Textbox(label="First")
    gr.Textbox(label="Last")

Parameter Description

Parameter	Description
`visible` bool default: True	If False, box will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.


                visible

bool

default: True

If False, box will be hidden.


                elem_id

str | None

default: None

An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Step-by-step Guides

No guides yet, contribute a guide about Box

Accordion

gradio.Accordion(label, ···)

Accordion is a layout element which can be toggled to show/hide the contained content.

Example Usage

with gradio.Accordion("See Details"):
    gr.Markdown("lorem ipsum")

Parameter	Description
`label` required	name of accordion section.
`open` bool default: True	if True, accordion is open by default.
`visible` bool default: True
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Step-by-step Guides

No guides yet, contribute a guide about Accordion

Components

Gradio includes pre-built components that can be used as inputs or outputs in your Interface or Blocks with a single line of code. Components include preprocessing steps that convert user data submitted through browser to something that be can used by a Python function, and postprocessing steps to convert values returned by a Python function into something that can be displayed in a browser.

Consider an example with three inputs (Textbox, Number, and Image) and two outputs (Number and Gallery), below is a diagram of what our preprocessing will send to the function and what our postprocessing will require from it.

Components also come with certain events that they support. These are methods that are triggered with user actions. Below is a table showing which events are supported for each component. All events are also listed (with parameters) in the component's docs.

	Change	Click	Submit	Edit	Clear	Play	Pause	Stream	Blur	Upload
Textbox	✓	✕	✓	✕	✕	✕	✕	✕	✓	✕
Number	✓	✕	✓	✕	✕	✕	✕	✕	✓	✕
Slider	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕
Checkbox	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕
CheckboxGroup	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕
Radio	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕
Dropdown	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕
Image	✓	✕	✕	✓	✓	✕	✕	✓	✕	✓
Video	✓	✕	✕	✕	✓	✓	✓	✕	✕	✓
Audio	✓	✕	✕	✕	✓	✓	✓	✓	✕	✓
File	✓	✕	✕	✕	✓	✕	✕	✕	✕	✓
Dataframe	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕
Timeseries	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕
State	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Button	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕
UploadButton	✕	✓	✕	✕	✕	✕	✕	✕	✕	✓
ColorPicker	✓	✕	✓	✕	✕	✕	✕	✕	✕	✕
Label	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕
HighlightedText	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕
JSON	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕
HTML	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕
Gallery	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕
Chatbot	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕
Model3D	✓	✕	✕	✓	✓	✕	✕	✕	✕	✕
Plot	✓	✕	✕	✕	✓	✕	✕	✕	✕	✕
ScatterPlot	✓	✕	✕	✕	✓	✕	✕	✕	✕	✕
LinePlot	✓	✕	✕	✕	✓	✕	✕	✕	✕	✕
Markdown	✓	✕	✕	✕	✕	✕	✕	✕	✕	✕
Dataset	✕	✓	✕	✕	✕	✕	✕	✕	✕	✕
Interpretation	✕	✕	✕	✕	✕	✕	✕	✕	✕	✕

import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
    
if __name__ == "__main__":
    demo.launch()

from difflib import Differ

import gradio as gr


def diff_texts(text1, text2):
    d = Differ()
    return [
        (token[2:], token[0] if token[0] != " " else None)
        for token in d.compare(text1, text2)
    ]


demo = gr.Interface(
    diff_texts,
    [
        gr.Textbox(
            label="Initial text",
            lines=3,
            value="The quick brown fox jumped over the lazy dogs.",
        ),
        gr.Textbox(
            label="Text to compare",
            lines=3,
            value="The fast brown fox jumps over lazy dogs.",
        ),
    ],
    gr.HighlightedText(
        label="Diff",
        combine_adjacent=True,
    ).style(color_map={"+": "red", "-": "green"}),
)
if __name__ == "__main__":
    demo.launch()

import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

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

Textbox

gradio.Textbox(···)

Creates a textarea for user to enter string input or display string output.

As input: passes textarea value as a str into the function.

As output: expects a str returned from function and sets textarea value to it.

Format expected for examples: a str representing the textbox input.

Supported events: change(), submit(), blur()

import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
    
if __name__ == "__main__":
    demo.launch()

Parameter	Description
`value` str \| Callable \| None default: ""	default text to provide in textarea. If callable, the function will be called whenever the app loads to set the initial value of the component.
`lines` int default: 1	minimum number of line rows to provide in textarea.
`max_lines` int default: 20	maximum number of line rows to provide in textarea.
`placeholder` str \| None default: None	placeholder hint to provide behind textarea.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`interactive` bool \| None default: None	if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
`type` str default: "text"	The type of textbox. One of: 'text', 'password', 'email', Default is 'text'.

Class	Interface String Shortcut	Initialization
`gradio.Textbox`	"textbox"	Uses default values
`gradio.TextArea`	"textarea"	Uses lines=7

Methods

change

gradio.Textbox.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

submit

gradio.Textbox.submit(fn, ···)

This event is triggered when the user presses the Enter key while the component (e.g. a textbox) is focused. This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

blur

gradio.Textbox.blur(fn, ···)

This event is triggered when the component's is unfocused/blurred (e.g. when the user clicks outside of a textbox). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	Callable function
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.Textbox.style(···)

This method can be used to change the appearance of the component.

Parameter Description

Parameter	Description
`container` bool \| None default: None	If True, will place the component in a container - providing some extra padding around the border.


                container

bool | None

default: None

If True, will place the component in a container - providing some extra padding around the border.

Step-by-step Guides

No guides yet, contribute a guide about Textbox

import gradio as gr

def tax_calculator(income, marital_status, assets):
    tax_brackets = [(10, 0), (25, 8), (60, 12), (120, 20), (250, 30)]
    total_deductible = sum(assets["Cost"])
    taxable_income = income - total_deductible

    total_tax = 0
    for bracket, rate in tax_brackets:
        if taxable_income > bracket:
            total_tax += (taxable_income - bracket) * rate / 100

    if marital_status == "Married":
        total_tax *= 0.75
    elif marital_status == "Divorced":
        total_tax *= 0.8

    return round(total_tax)

demo = gr.Interface(
    tax_calculator,
    [
        "number",
        gr.Radio(["Single", "Married", "Divorced"]),
        gr.Dataframe(
            headers=["Item", "Cost"],
            datatype=["str", "number"],
            label="Assets Purchased this Year",
        ),
    ],
    "number",
    examples=[
        [10000, "Married", [["Suit", 5000], ["Laptop", 800], ["Car", 1800]]],
        [80000, "Single", [["Suit", 800], ["Watch", 1800], ["Car", 800]]],
    ],
)

demo.launch()

import os

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn.model_selection import train_test_split

import gradio as gr

current_dir = os.path.dirname(os.path.realpath(__file__))
data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))


def encode_age(df):
    df.Age = df.Age.fillna(-0.5)
    bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
    categories = pd.cut(df.Age, bins, labels=False)
    df.Age = categories
    return df


def encode_fare(df):
    df.Fare = df.Fare.fillna(-0.5)
    bins = (-1, 0, 8, 15, 31, 1000)
    categories = pd.cut(df.Fare, bins, labels=False)
    df.Fare = categories
    return df


def encode_df(df):
    df = encode_age(df)
    df = encode_fare(df)
    sex_mapping = {"male": 0, "female": 1}
    df = df.replace({"Sex": sex_mapping})
    embark_mapping = {"S": 1, "C": 2, "Q": 3}
    df = df.replace({"Embarked": embark_mapping})
    df.Embarked = df.Embarked.fillna(0)
    df["Company"] = 0
    df.loc[(df["SibSp"] > 0), "Company"] = 1
    df.loc[(df["Parch"] > 0), "Company"] = 2
    df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
    df = df[
        [
            "PassengerId",
            "Pclass",
            "Sex",
            "Age",
            "Fare",
            "Embarked",
            "Company",
            "Survived",
        ]
    ]
    return df


train = encode_df(data)

X_all = train.drop(["Survived", "PassengerId"], axis=1)
y_all = train["Survived"]

num_test = 0.20
X_train, X_test, y_train, y_test = train_test_split(
    X_all, y_all, test_size=num_test, random_state=23
)

clf = RandomForestClassifier()
clf.fit(X_train, y_train)
predictions = clf.predict(X_test)


def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
    if passenger_class is None or embark_point is None:
        return None
    df = pd.DataFrame.from_dict(
        {
            "Pclass": [passenger_class + 1],
            "Sex": [0 if is_male else 1],
            "Age": [age],
            "Company": [
                (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
            ],
            "Fare": [fare],
            "Embarked": [embark_point + 1],
        }
    )
    df = encode_age(df)
    df = encode_fare(df)
    pred = clf.predict_proba(df)[0]
    return {"Perishes": float(pred[0]), "Survives": float(pred[1])}


demo = gr.Interface(
    predict_survival,
    [
        gr.Dropdown(["first", "second", "third"], type="index"),
        "checkbox",
        gr.Slider(0, 80, value=25),
        gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
        gr.Number(value=20),
        gr.Radio(["S", "C", "Q"], type="index"),
    ],
    "label",
    examples=[
        ["first", True, 30, [], 50, "S"],
        ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
        ["third", True, 30, ["Child"], 20, "S"],
    ],
    interpretation="default",
    live=True,
)

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

import gradio as gr

demo = gr.Blocks(css="#btn {color: red}")

with demo:
    default_json = {"a": "a"}

    num = gr.State(value=0)
    squared = gr.Number(value=0)
    btn = gr.Button("Next Square", elem_id="btn").style(rounded=False)

    stats = gr.State(value=default_json)
    table = gr.JSON()

    def increase(var, stats_history):
        var += 1
        stats_history[str(var)] = var**2
        return var, var**2, stats_history, stats_history

    btn.click(increase, [num, stats], [num, squared, stats, table])

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

Number

gradio.Number(···)

Creates a numeric field for user to enter numbers as input or display numeric output.

As input: passes field value as a float or int into the function, depending on `precision`.

As output: expects an int or float returned from the function and sets field value to it.

Format expected for examples: a float or int representing the number's value.

Supported events: change(), submit(), blur()

import gradio as gr

def tax_calculator(income, marital_status, assets):
    tax_brackets = [(10, 0), (25, 8), (60, 12), (120, 20), (250, 30)]
    total_deductible = sum(assets["Cost"])
    taxable_income = income - total_deductible

    total_tax = 0
    for bracket, rate in tax_brackets:
        if taxable_income > bracket:
            total_tax += (taxable_income - bracket) * rate / 100

    if marital_status == "Married":
        total_tax *= 0.75
    elif marital_status == "Divorced":
        total_tax *= 0.8

    return round(total_tax)

demo = gr.Interface(
    tax_calculator,
    [
        "number",
        gr.Radio(["Single", "Married", "Divorced"]),
        gr.Dataframe(
            headers=["Item", "Cost"],
            datatype=["str", "number"],
            label="Assets Purchased this Year",
        ),
    ],
    "number",
    examples=[
        [10000, "Married", [["Suit", 5000], ["Laptop", 800], ["Car", 1800]]],
        [80000, "Single", [["Suit", 800], ["Watch", 1800], ["Car", 800]]],
    ],
)

demo.launch()

Parameter	Description
`value` float \| Callable \| None default: None	default value. If callable, the function will be called whenever the app loads to set the initial value of the component.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`interactive` bool \| None default: None	if True, will be editable; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
`precision` int \| None default: None	Precision to round input/output to. If set to 0, will round to nearest integer and covert type to int. If None, no rounding happens.

Class	Interface String Shortcut	Initialization
`gradio.Number`	"number"	Uses default values

Methods

change

gradio.Number.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

submit

gradio.Number.submit(fn, ···)

This event is triggered when the user presses the Enter key while the component (e.g. a textbox) is focused. This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.Number.style(···)

This method can be used to change the appearance of the component.

Parameter Description

Parameter	Description
`container` bool \| None default: None	If True, will place the component in a container - providing some extra padding around the border.


                container

bool | None

default: None

If True, will place the component in a container - providing some extra padding around the border.

Step-by-step Guides

No guides yet, contribute a guide about Number

import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

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

import numpy as np
import gradio as gr

notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]

def generate_tone(note, octave, duration):
    sr = 48000
    a4_freq, tones_from_a4 = 440, 12 * (octave - 4) + (note - 9)
    frequency = a4_freq * 2 ** (tones_from_a4 / 12)
    duration = int(duration)
    audio = np.linspace(0, duration, duration * sr)
    audio = (20000 * np.sin(audio * (2 * np.pi * frequency))).astype(np.int16)
    return sr, audio

demo = gr.Interface(
    generate_tone,
    [
        gr.Dropdown(notes, type="index"),
        gr.Slider(4, 6, step=1),
        gr.Textbox(value=1, label="Duration in seconds"),
    ],
    "audio",
)
if __name__ == "__main__":
    demo.launch()

import os

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn.model_selection import train_test_split

import gradio as gr

current_dir = os.path.dirname(os.path.realpath(__file__))
data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))


def encode_age(df):
    df.Age = df.Age.fillna(-0.5)
    bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
    categories = pd.cut(df.Age, bins, labels=False)
    df.Age = categories
    return df


def encode_fare(df):
    df.Fare = df.Fare.fillna(-0.5)
    bins = (-1, 0, 8, 15, 31, 1000)
    categories = pd.cut(df.Fare, bins, labels=False)
    df.Fare = categories
    return df


def encode_df(df):
    df = encode_age(df)
    df = encode_fare(df)
    sex_mapping = {"male": 0, "female": 1}
    df = df.replace({"Sex": sex_mapping})
    embark_mapping = {"S": 1, "C": 2, "Q": 3}
    df = df.replace({"Embarked": embark_mapping})
    df.Embarked = df.Embarked.fillna(0)
    df["Company"] = 0
    df.loc[(df["SibSp"] > 0), "Company"] = 1
    df.loc[(df["Parch"] > 0), "Company"] = 2
    df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
    df = df[
        [
            "PassengerId",
            "Pclass",
            "Sex",
            "Age",
            "Fare",
            "Embarked",
            "Company",
            "Survived",
        ]
    ]
    return df


train = encode_df(data)

X_all = train.drop(["Survived", "PassengerId"], axis=1)
y_all = train["Survived"]

num_test = 0.20
X_train, X_test, y_train, y_test = train_test_split(
    X_all, y_all, test_size=num_test, random_state=23
)

clf = RandomForestClassifier()
clf.fit(X_train, y_train)
predictions = clf.predict(X_test)


def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
    if passenger_class is None or embark_point is None:
        return None
    df = pd.DataFrame.from_dict(
        {
            "Pclass": [passenger_class + 1],
            "Sex": [0 if is_male else 1],
            "Age": [age],
            "Company": [
                (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
            ],
            "Fare": [fare],
            "Embarked": [embark_point + 1],
        }
    )
    df = encode_age(df)
    df = encode_fare(df)
    pred = clf.predict_proba(df)[0]
    return {"Perishes": float(pred[0]), "Survives": float(pred[1])}


demo = gr.Interface(
    predict_survival,
    [
        gr.Dropdown(["first", "second", "third"], type="index"),
        "checkbox",
        gr.Slider(0, 80, value=25),
        gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
        gr.Number(value=20),
        gr.Radio(["S", "C", "Q"], type="index"),
    ],
    "label",
    examples=[
        ["first", True, 30, [], 50, "S"],
        ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
        ["third", True, 30, ["Child"], 20, "S"],
    ],
    interpretation="default",
    live=True,
)

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

import gradio as gr


def func(slider_1, slider_2, *args):
    return slider_1 + slider_2 * 5


demo = gr.Interface(
    func,
    [
        gr.Slider(minimum=1.5, maximum=250000.89, randomize=True, label="Random Big Range"),
        gr.Slider(minimum=-1, maximum=1, randomize=True, step=0.05, label="Random only multiple of 0.05 allowed"),
        gr.Slider(minimum=0, maximum=1, randomize=True, step=0.25, label="Random only multiples of 0.25 allowed"),
        gr.Slider(minimum=-100, maximum=100, randomize=True, step=3, label="Random between -100 and 100 step 3"),
        gr.Slider(minimum=-100, maximum=100, randomize=True, label="Random between -100 and 100"),
        gr.Slider(value=0.25, minimum=5, maximum=30, step=-1),
    ],
    "number",
    interpretation="default"
)

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


import gradio as gr


def func(slider_1, slider_2):
    return slider_1 * 5 + slider_2


with gr.Blocks() as demo:
    slider = gr.Slider(minimum=-10.2, maximum=15, label="Random Slider (Static)", randomize=True)
    slider_1 = gr.Slider(minimum=100, maximum=200, label="Random Slider (Input 1)", randomize=True)
    slider_2 = gr.Slider(minimum=10, maximum=23.2, label="Random Slider (Input 2)", randomize=True)
    slider_3 = gr.Slider(value=3, label="Non random slider")
    btn = gr.Button("Run")
    btn.click(func, inputs=[slider_1, slider_2], outputs=gr.Number())

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

Slider

gradio.Slider(···)

Creates a slider that ranges from `minimum` to `maximum` with a step size of `step`.

As input: passes slider value as a float into the function.

As output: expects an int or float returned from function and sets slider value to it as long as it is within range.

Format expected for examples: A float or int representing the slider's value.

Supported events: change()

import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

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

Parameter	Description
`minimum` float default: 0	minimum value for slider.
`maximum` float default: 100	maximum value for slider.
`value` float \| Callable \| None default: None	default value. If callable, the function will be called whenever the app loads to set the initial value of the component. Ignored if randomized=True.
`step` float \| None default: None	increment between slider values.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`interactive` bool \| None default: None	if True, slider will be adjustable; if False, adjusting will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
`randomize` bool default: False	If True, the value of the slider when the app loads is taken uniformly at random from the range given by the minimum and maximum.

Class	Interface String Shortcut	Initialization
`gradio.Slider`	"slider"	Uses default values

Methods

change

gradio.Slider.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.Slider.style(···)

This method can be used to change the appearance of the slider.

Parameter Description

Parameter	Description
`container` bool \| None default: None	If True, will place the component in a container - providing some extra padding around the border.


                container

bool | None

default: None

If True, will place the component in a container - providing some extra padding around the border.

Step-by-step Guides

No guides yet, contribute a guide about Slider

import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

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

import os

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn.model_selection import train_test_split

import gradio as gr

current_dir = os.path.dirname(os.path.realpath(__file__))
data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))


def encode_age(df):
    df.Age = df.Age.fillna(-0.5)
    bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
    categories = pd.cut(df.Age, bins, labels=False)
    df.Age = categories
    return df


def encode_fare(df):
    df.Fare = df.Fare.fillna(-0.5)
    bins = (-1, 0, 8, 15, 31, 1000)
    categories = pd.cut(df.Fare, bins, labels=False)
    df.Fare = categories
    return df


def encode_df(df):
    df = encode_age(df)
    df = encode_fare(df)
    sex_mapping = {"male": 0, "female": 1}
    df = df.replace({"Sex": sex_mapping})
    embark_mapping = {"S": 1, "C": 2, "Q": 3}
    df = df.replace({"Embarked": embark_mapping})
    df.Embarked = df.Embarked.fillna(0)
    df["Company"] = 0
    df.loc[(df["SibSp"] > 0), "Company"] = 1
    df.loc[(df["Parch"] > 0), "Company"] = 2
    df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
    df = df[
        [
            "PassengerId",
            "Pclass",
            "Sex",
            "Age",
            "Fare",
            "Embarked",
            "Company",
            "Survived",
        ]
    ]
    return df


train = encode_df(data)

X_all = train.drop(["Survived", "PassengerId"], axis=1)
y_all = train["Survived"]

num_test = 0.20
X_train, X_test, y_train, y_test = train_test_split(
    X_all, y_all, test_size=num_test, random_state=23
)

clf = RandomForestClassifier()
clf.fit(X_train, y_train)
predictions = clf.predict(X_test)


def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
    if passenger_class is None or embark_point is None:
        return None
    df = pd.DataFrame.from_dict(
        {
            "Pclass": [passenger_class + 1],
            "Sex": [0 if is_male else 1],
            "Age": [age],
            "Company": [
                (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
            ],
            "Fare": [fare],
            "Embarked": [embark_point + 1],
        }
    )
    df = encode_age(df)
    df = encode_fare(df)
    pred = clf.predict_proba(df)[0]
    return {"Perishes": float(pred[0]), "Survives": float(pred[1])}


demo = gr.Interface(
    predict_survival,
    [
        gr.Dropdown(["first", "second", "third"], type="index"),
        "checkbox",
        gr.Slider(0, 80, value=25),
        gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
        gr.Number(value=20),
        gr.Radio(["S", "C", "Q"], type="index"),
    ],
    "label",
    examples=[
        ["first", True, 30, [], 50, "S"],
        ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
        ["third", True, 30, ["Child"], 20, "S"],
    ],
    interpretation="default",
    live=True,
)

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

Checkbox

gradio.Checkbox(···)

Creates a checkbox that can be set to `True` or `False`.

As input: passes the status of the checkbox as a bool into the function.

As output: expects a bool returned from the function and, if it is True, checks the checkbox.

Format expected for examples: a bool representing whether the box is checked.

Supported events: change()

import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

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

Parameter	Description
`value` bool \| Callable default: False	if True, checked by default. If callable, the function will be called whenever the app loads to set the initial value of the component.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`interactive` bool \| None default: None	if True, this checkbox can be checked; if False, checking will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Class	Interface String Shortcut	Initialization
`gradio.Checkbox`	"checkbox"	Uses default values

Methods

change

gradio.Checkbox.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.Checkbox.style(···)

This method can be used to change the appearance of the component.

Parameter Description

Parameter	Description
`container` bool \| None default: None	If True, will place the component in a container - providing some extra padding around the border.


                container

bool | None

default: None

If True, will place the component in a container - providing some extra padding around the border.

Step-by-step Guides

No guides yet, contribute a guide about Checkbox

import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

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

import os

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn.model_selection import train_test_split

import gradio as gr

current_dir = os.path.dirname(os.path.realpath(__file__))
data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))


def encode_age(df):
    df.Age = df.Age.fillna(-0.5)
    bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
    categories = pd.cut(df.Age, bins, labels=False)
    df.Age = categories
    return df


def encode_fare(df):
    df.Fare = df.Fare.fillna(-0.5)
    bins = (-1, 0, 8, 15, 31, 1000)
    categories = pd.cut(df.Fare, bins, labels=False)
    df.Fare = categories
    return df


def encode_df(df):
    df = encode_age(df)
    df = encode_fare(df)
    sex_mapping = {"male": 0, "female": 1}
    df = df.replace({"Sex": sex_mapping})
    embark_mapping = {"S": 1, "C": 2, "Q": 3}
    df = df.replace({"Embarked": embark_mapping})
    df.Embarked = df.Embarked.fillna(0)
    df["Company"] = 0
    df.loc[(df["SibSp"] > 0), "Company"] = 1
    df.loc[(df["Parch"] > 0), "Company"] = 2
    df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
    df = df[
        [
            "PassengerId",
            "Pclass",
            "Sex",
            "Age",
            "Fare",
            "Embarked",
            "Company",
            "Survived",
        ]
    ]
    return df


train = encode_df(data)

X_all = train.drop(["Survived", "PassengerId"], axis=1)
y_all = train["Survived"]

num_test = 0.20
X_train, X_test, y_train, y_test = train_test_split(
    X_all, y_all, test_size=num_test, random_state=23
)

clf = RandomForestClassifier()
clf.fit(X_train, y_train)
predictions = clf.predict(X_test)


def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
    if passenger_class is None or embark_point is None:
        return None
    df = pd.DataFrame.from_dict(
        {
            "Pclass": [passenger_class + 1],
            "Sex": [0 if is_male else 1],
            "Age": [age],
            "Company": [
                (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
            ],
            "Fare": [fare],
            "Embarked": [embark_point + 1],
        }
    )
    df = encode_age(df)
    df = encode_fare(df)
    pred = clf.predict_proba(df)[0]
    return {"Perishes": float(pred[0]), "Survives": float(pred[1])}


demo = gr.Interface(
    predict_survival,
    [
        gr.Dropdown(["first", "second", "third"], type="index"),
        "checkbox",
        gr.Slider(0, 80, value=25),
        gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
        gr.Number(value=20),
        gr.Radio(["S", "C", "Q"], type="index"),
    ],
    "label",
    examples=[
        ["first", True, 30, [], 50, "S"],
        ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
        ["third", True, 30, ["Child"], 20, "S"],
    ],
    interpretation="default",
    live=True,
)

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

CheckboxGroup

gradio.CheckboxGroup(···)

Creates a set of checkboxes of which a subset can be checked.

As input: passes the list of checked checkboxes as a List[str] or their indices as a List[int] into the function, depending on `type`.

As output: expects a List[str], each element of which becomes a checked checkbox.

Format expected for examples: a List[str] representing the values to be checked.

Supported events: change()

import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

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

Parameter	Description
`choices` List[str] \| None default: None	list of options to select from.
`value` List[str] \| str \| Callable \| None default: None	default selected list of options. If callable, the function will be called whenever the app loads to set the initial value of the component.
`type` str default: "value"	Type of value to be returned by component. "value" returns the list of strings of the choices selected, "index" returns the list of indicies of the choices selected.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`interactive` bool \| None default: None	if True, choices in this checkbox group will be checkable; if False, checking will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Class	Interface String Shortcut	Initialization
`gradio.CheckboxGroup`	"checkboxgroup"	Uses default values

Methods

change

gradio.CheckboxGroup.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.CheckboxGroup.style(···)

This method can be used to change the appearance of the CheckboxGroup.

Parameter Description

Parameter	Description
`item_container` bool \| None default: None	If True, will place the items in a container.
`container` bool \| None default: None	If True, will place the component in a container - providing some extra padding around the border.


                item_container

bool | None

default: None

If True, will place the items in a container.


                container

bool | None

default: None

If True, will place the component in a container - providing some extra padding around the border.

Step-by-step Guides

No guides yet, contribute a guide about CheckboxGroup

import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

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

import os

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn.model_selection import train_test_split

import gradio as gr

current_dir = os.path.dirname(os.path.realpath(__file__))
data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))


def encode_age(df):
    df.Age = df.Age.fillna(-0.5)
    bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
    categories = pd.cut(df.Age, bins, labels=False)
    df.Age = categories
    return df


def encode_fare(df):
    df.Fare = df.Fare.fillna(-0.5)
    bins = (-1, 0, 8, 15, 31, 1000)
    categories = pd.cut(df.Fare, bins, labels=False)
    df.Fare = categories
    return df


def encode_df(df):
    df = encode_age(df)
    df = encode_fare(df)
    sex_mapping = {"male": 0, "female": 1}
    df = df.replace({"Sex": sex_mapping})
    embark_mapping = {"S": 1, "C": 2, "Q": 3}
    df = df.replace({"Embarked": embark_mapping})
    df.Embarked = df.Embarked.fillna(0)
    df["Company"] = 0
    df.loc[(df["SibSp"] > 0), "Company"] = 1
    df.loc[(df["Parch"] > 0), "Company"] = 2
    df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
    df = df[
        [
            "PassengerId",
            "Pclass",
            "Sex",
            "Age",
            "Fare",
            "Embarked",
            "Company",
            "Survived",
        ]
    ]
    return df


train = encode_df(data)

X_all = train.drop(["Survived", "PassengerId"], axis=1)
y_all = train["Survived"]

num_test = 0.20
X_train, X_test, y_train, y_test = train_test_split(
    X_all, y_all, test_size=num_test, random_state=23
)

clf = RandomForestClassifier()
clf.fit(X_train, y_train)
predictions = clf.predict(X_test)


def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
    if passenger_class is None or embark_point is None:
        return None
    df = pd.DataFrame.from_dict(
        {
            "Pclass": [passenger_class + 1],
            "Sex": [0 if is_male else 1],
            "Age": [age],
            "Company": [
                (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
            ],
            "Fare": [fare],
            "Embarked": [embark_point + 1],
        }
    )
    df = encode_age(df)
    df = encode_fare(df)
    pred = clf.predict_proba(df)[0]
    return {"Perishes": float(pred[0]), "Survives": float(pred[1])}


demo = gr.Interface(
    predict_survival,
    [
        gr.Dropdown(["first", "second", "third"], type="index"),
        "checkbox",
        gr.Slider(0, 80, value=25),
        gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
        gr.Number(value=20),
        gr.Radio(["S", "C", "Q"], type="index"),
    ],
    "label",
    examples=[
        ["first", True, 30, [], 50, "S"],
        ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
        ["third", True, 30, ["Child"], 20, "S"],
    ],
    interpretation="default",
    live=True,
)

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

import gradio as gr


def change_textbox(choice):
    if choice == "short":
        return gr.Textbox.update(lines=2, visible=True)
    elif choice == "long":
        return gr.Textbox.update(lines=8, visible=True)
    else:
        return gr.Textbox.update(visible=False)


with gr.Blocks() as demo:
    radio = gr.Radio(
        ["short", "long", "none"], label="What kind of essay would you like to write?"
    )
    text = gr.Textbox(lines=2, interactive=True)

    radio.change(fn=change_textbox, inputs=radio, outputs=text)


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

Radio

gradio.Radio(···)

Creates a set of radio buttons of which only one can be selected.

As input: passes the value of the selected radio button as a str or its index as an int into the function, depending on `type`.

As output: expects a str corresponding to the value of the radio button to be selected.

Format expected for examples: a str representing the radio option to select.

Supported events: change()

import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

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

Parameter	Description
`choices` List[str] \| None default: None	list of options to select from.
`value` str \| Callable \| None default: None	the button selected by default. If None, no button is selected by default. If callable, the function will be called whenever the app loads to set the initial value of the component.
`type` str default: "value"	Type of value to be returned by component. "value" returns the string of the choice selected, "index" returns the index of the choice selected.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`interactive` bool \| None default: None	if True, choices in this radio group will be selectable; if False, selection will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Class	Interface String Shortcut	Initialization
`gradio.Radio`	"radio"	Uses default values

Methods

change

gradio.Radio.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.Radio.style(···)

This method can be used to change the appearance of the radio component.

Parameter Description

Parameter	Description
`item_container` bool \| None default: None	If True, will place items in a container.
`container` bool \| None default: None	If True, will place the component in a container - providing some extra padding around the border.


                item_container

bool | None

default: None

If True, will place items in a container.


                container

bool | None

default: None

If True, will place the component in a container - providing some extra padding around the border.

Step-by-step Guides

No guides yet, contribute a guide about Radio

import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

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

import os

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn.model_selection import train_test_split

import gradio as gr

current_dir = os.path.dirname(os.path.realpath(__file__))
data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))


def encode_age(df):
    df.Age = df.Age.fillna(-0.5)
    bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
    categories = pd.cut(df.Age, bins, labels=False)
    df.Age = categories
    return df


def encode_fare(df):
    df.Fare = df.Fare.fillna(-0.5)
    bins = (-1, 0, 8, 15, 31, 1000)
    categories = pd.cut(df.Fare, bins, labels=False)
    df.Fare = categories
    return df


def encode_df(df):
    df = encode_age(df)
    df = encode_fare(df)
    sex_mapping = {"male": 0, "female": 1}
    df = df.replace({"Sex": sex_mapping})
    embark_mapping = {"S": 1, "C": 2, "Q": 3}
    df = df.replace({"Embarked": embark_mapping})
    df.Embarked = df.Embarked.fillna(0)
    df["Company"] = 0
    df.loc[(df["SibSp"] > 0), "Company"] = 1
    df.loc[(df["Parch"] > 0), "Company"] = 2
    df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
    df = df[
        [
            "PassengerId",
            "Pclass",
            "Sex",
            "Age",
            "Fare",
            "Embarked",
            "Company",
            "Survived",
        ]
    ]
    return df


train = encode_df(data)

X_all = train.drop(["Survived", "PassengerId"], axis=1)
y_all = train["Survived"]

num_test = 0.20
X_train, X_test, y_train, y_test = train_test_split(
    X_all, y_all, test_size=num_test, random_state=23
)

clf = RandomForestClassifier()
clf.fit(X_train, y_train)
predictions = clf.predict(X_test)


def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
    if passenger_class is None or embark_point is None:
        return None
    df = pd.DataFrame.from_dict(
        {
            "Pclass": [passenger_class + 1],
            "Sex": [0 if is_male else 1],
            "Age": [age],
            "Company": [
                (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
            ],
            "Fare": [fare],
            "Embarked": [embark_point + 1],
        }
    )
    df = encode_age(df)
    df = encode_fare(df)
    pred = clf.predict_proba(df)[0]
    return {"Perishes": float(pred[0]), "Survives": float(pred[1])}


demo = gr.Interface(
    predict_survival,
    [
        gr.Dropdown(["first", "second", "third"], type="index"),
        "checkbox",
        gr.Slider(0, 80, value=25),
        gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
        gr.Number(value=20),
        gr.Radio(["S", "C", "Q"], type="index"),
    ],
    "label",
    examples=[
        ["first", True, 30, [], 50, "S"],
        ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
        ["third", True, 30, ["Child"], 20, "S"],
    ],
    interpretation="default",
    live=True,
)

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

gradio.Dropdown(···)

Creates a dropdown of choices from which entries can be selected.

As input: passes the value of the selected dropdown entry as a str or its index as an int into the function, depending on `type`.

As output: expects a str corresponding to the value of the dropdown entry to be selected.

Format expected for examples: a str representing the drop down value to select.

Supported events: change()

import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

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

Parameter	Description
`choices` str \| List[str] \| None default: None	list of options to select from.
`value` str \| List[str] \| Callable \| None default: None	default value(s) selected in dropdown. If None, no value is selected by default. If callable, the function will be called whenever the app loads to set the initial value of the component.
`type` str default: "value"	Type of value to be returned by component. "value" returns the string of the choice selected, "index" returns the index of the choice selected.
`multiselect` bool \| None default: None	if True, multiple choices can be selected.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`interactive` bool \| None default: None	if True, choices in this dropdown will be selectable; if False, selection will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Class	Interface String Shortcut	Initialization
`gradio.Dropdown`	"dropdown"	Uses default values

Methods

gradio.Dropdown.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

gradio.Dropdown.style(···)

This method can be used to change the appearance of the Dropdown.

Parameter Description

Parameter	Description
`container` bool \| None default: None	If True, will place the component in a container - providing some extra padding around the border.


                container

bool | None

default: None

If True, will place the component in a container - providing some extra padding around the border.

Step-by-step Guides

No guides yet, contribute a guide about Dropdown

import gradio as gr
import os


def image_mod(image):
    return image.rotate(45)


demo = gr.Interface(
    image_mod,
    gr.Image(type="pil"),
    "image",
    flagging_options=["blurry", "incorrect", "other"],
    examples=[
        os.path.join(os.path.dirname(__file__), "images/cheetah1.jpg"),
        os.path.join(os.path.dirname(__file__), "images/lion.jpg"),
        os.path.join(os.path.dirname(__file__), "images/logo.png"),
        os.path.join(os.path.dirname(__file__), "images/tower.jpg"),
    ],
)

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

import gradio as gr
import os


def image_mod(image):
    return image.rotate(45)


cheetah = os.path.join(os.path.dirname(__file__), "images/cheetah1.jpg")

demo = gr.Interface(image_mod, gr.Image(type="pil", value=cheetah), "image",
    flagging_options=["blurry", "incorrect", "other"], examples=[
        os.path.join(os.path.dirname(__file__), "images/lion.jpg"),
        os.path.join(os.path.dirname(__file__), "images/logo.png")
        ])

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

Image

gradio.Image(···)

Creates an image component that can be used to upload/draw images (as an input) or display images (as an output).

As input: passes the uploaded image as a numpy.array, PIL.Image or str filepath depending on `type` -- unless `tool` is `sketch` AND source is one of `upload` or `webcam`. In these cases, a dict with keys `image` and `mask` is passed, and the format of the corresponding values depends on `type`.

As output: expects a numpy.array, PIL.Image or str or pathlib.Path filepath to an image and displays the image.

Format expected for examples: a str filepath to a local file that contains the image.

Supported events: change(), edit(), clear(), stream(), upload()

import gradio as gr
import os


def image_mod(image):
    return image.rotate(45)


demo = gr.Interface(
    image_mod,
    gr.Image(type="pil"),
    "image",
    flagging_options=["blurry", "incorrect", "other"],
    examples=[
        os.path.join(os.path.dirname(__file__), "images/cheetah1.jpg"),
        os.path.join(os.path.dirname(__file__), "images/lion.jpg"),
        os.path.join(os.path.dirname(__file__), "images/logo.png"),
        os.path.join(os.path.dirname(__file__), "images/tower.jpg"),
    ],
)

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

Parameter	Description
`value` str \| _Image.Image \| np.ndarray \| None default: None	A PIL Image, numpy array, path or URL for the default value that Image component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.
`shape` Tuple[int, int] \| None default: None	(width, height) shape to crop and resize image to; if None, matches input image size. Pass None for either width or height to only crop and resize the other.
`image_mode` str default: "RGB"	"RGB" if color, or "L" if black and white.
`invert_colors` bool default: False	whether to invert the image as a preprocessing step.
`source` str default: "upload"	Source of image. "upload" creates a box where user can drop an image file, "webcam" allows user to take snapshot from their webcam, "canvas" defaults to a white image that can be edited and drawn upon with tools.
`tool` str \| None default: None	Tools used for editing. "editor" allows a full screen editor (and is the default if source is "upload" or "webcam"), "select" provides a cropping and zoom tool, "sketch" allows you to create a binary sketch (and is the default if source="canvas"), and "color-sketch" allows you to created a sketch in different colors. "color-sketch" can be used with source="upload" or "webcam" to allow sketching on an image. "sketch" can also be used with "upload" or "webcam" to create a mask over an image and in that case both the image and mask are passed into the function as a dictionary with keys "image" and "mask" respectively.
`type` str default: "numpy"	The format the image is converted to before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (width, height, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "filepath" passes a str path to a temporary file containing the image.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`interactive` bool \| None default: None	if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.
`visible` bool default: True	If False, component will be hidden.
`streaming` bool default: False	If True when used in a `live` interface, will automatically stream webcam feed. Only valid is source is 'webcam'.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
`mirror_webcam` bool default: True	If True webcam will be mirrored. Default is True.

Class	Interface String Shortcut	Initialization
`gradio.Image`	"image"	Uses default values
`gradio.Webcam`	"webcam"	Uses source="webcam", interactive=True
`gradio.Sketchpad`	"sketchpad"	Uses image_mode="L", source="canvas", shape=(28, 28), invert_colors=True, interactive=True
`gradio.Paint`	"paint"	Uses source="canvas", tool="color-sketch", interactive=True
`gradio.ImageMask`	"imagemask"	Uses source="upload", tool="sketch", interactive=True
`gradio.ImagePaint`	"imagepaint"	Uses source="upload", tool="color-sketch", interactive=True
`gradio.Pil`	"pil"	Uses type="pil"

Methods

edit

gradio.Image.edit(fn, ···)

This event is triggered when the user edits the component (e.g. image) using the built-in editor. This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

clear

gradio.Image.clear(fn, ···)

This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

change

gradio.Image.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

stream

gradio.Image.stream(fn, inputs, outputs, ···)

This event is triggered when the user streams the component (e.g. a live webcam component)

Parameter	Description
`fn` Callable required	Callable function
`inputs` List[Component] required	List of inputs
`outputs` List[Component] required	List of outputs
`api_name` str \| None default: None
`preprocess` bool default: True
`postprocess` bool default: True

change

gradio.Image.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.Image.style(···)

This method can be used to change the appearance of the Image component.

Parameter Description


                height

int | None

default: None

Height of the image.


                width

int | None

default: None

Width of the image.

Step-by-step Guides

No guides yet, contribute a guide about Image

import gradio as gr
import os


def video_identity(video):
    return video


demo = gr.Interface(video_identity, 
                    gr.Video(), 
                    "playable_video", 
                    examples=[
                        os.path.join(os.path.dirname(__file__), 
                                     "video/video_sample.mp4")], 
                    cache_examples=True)

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

Video

gradio.Video(···)

Creates a video component that can be used to upload/record videos (as an input) or display videos (as an output). For the video to be playable in the browser it must have a compatible container and codec combination. Allowed combinations are .mp4 with h264 codec, .ogg with theora codec, and .webm with vp9 codec. If the component detects that the output video would not be playable in the browser it will attempt to convert it to a playable mp4 video. If the conversion fails, the original video is returned.

As input: passes the uploaded video as a str filepath or URL whose extension can be modified by `format`.

As output: expects a str filepath to a video which is displayed.

Format expected for examples: a str filepath to a local file that contains the video.

Supported events: change(), clear(), pause(), play(), stop(), upload()

import gradio as gr
import os


def video_identity(video):
    return video


demo = gr.Interface(video_identity, 
                    gr.Video(), 
                    "playable_video", 
                    examples=[
                        os.path.join(os.path.dirname(__file__), 
                                     "video/video_sample.mp4")], 
                    cache_examples=True)

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

Parameter	Description
`value` str \| Callable \| None default: None	A path or URL for the default value that Video component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.
`format` str \| None default: None	Format of video format to be returned by component, such as 'avi' or 'mp4'. Use 'mp4' to ensure browser playability. If set to None, video will keep uploaded format.
`source` str default: "upload"	Source of video. "upload" creates a box where user can drop an video file, "webcam" allows user to record a video from their webcam.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`interactive` bool \| None default: None	if True, will allow users to upload a video; if False, can only be used to display videos. If not provided, this is inferred based on whether the component is used as an input or output.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
`mirror_webcam` bool default: True	If True webcam will be mirrored. Default is True.
`include_audio` bool \| None default: None	Whether the component should record/retain the audio track for a video. By default, audio is excluded for webcam videos and included for uploaded videos.

Class	Interface String Shortcut	Initialization
`gradio.Video`	"video"	Uses default values
`gradio.PlayableVideo`	"playablevideo"	Uses format="mp4"

Methods

change

gradio.Video.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

clear

gradio.Video.clear(fn, ···)

This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

play

gradio.Video.play(fn, ···)

This event is triggered when the user plays the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

pause

gradio.Video.pause(fn, ···)

This event is triggered when the user pauses the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

stop

gradio.Video.stop(fn, ···)

This event is triggered when the user stops the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.Video.style(···)

This method can be used to change the appearance of the video component.

Parameter Description


                height

int | None

default: None

Height of the video.


                width

int | None

default: None

Width of the video.

Step-by-step Guides

No guides yet, contribute a guide about Video

from math import log2, pow
import os

import numpy as np
from scipy.fftpack import fft

import gradio as gr

A4 = 440
C0 = A4 * pow(2, -4.75)
name = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]


def get_pitch(freq):
    h = round(12 * log2(freq / C0))
    n = h % 12
    return name[n]


def main_note(audio):
    rate, y = audio
    if len(y.shape) == 2:
        y = y.T[0]
    N = len(y)
    T = 1.0 / rate
    x = np.linspace(0.0, N * T, N)
    yf = fft(y)
    yf2 = 2.0 / N * np.abs(yf[0 : N // 2])
    xf = np.linspace(0.0, 1.0 / (2.0 * T), N // 2)

    volume_per_pitch = {}
    total_volume = np.sum(yf2)
    for freq, volume in zip(xf, yf2):
        if freq == 0:
            continue
        pitch = get_pitch(freq)
        if pitch not in volume_per_pitch:
            volume_per_pitch[pitch] = 0
        volume_per_pitch[pitch] += 1.0 * volume / total_volume
    volume_per_pitch = {k: float(v) for k, v in volume_per_pitch.items()}
    return volume_per_pitch


demo = gr.Interface(
    main_note,
    gr.Audio(source="microphone"),
    gr.Label(num_top_classes=4),
    examples=[
        [os.path.join(os.path.dirname(__file__),"audio/recording1.wav")],
        [os.path.join(os.path.dirname(__file__),"audio/cantina.wav")],
    ],
    interpretation="default",
)

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

import numpy as np
import gradio as gr

notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]

def generate_tone(note, octave, duration):
    sr = 48000
    a4_freq, tones_from_a4 = 440, 12 * (octave - 4) + (note - 9)
    frequency = a4_freq * 2 ** (tones_from_a4 / 12)
    duration = int(duration)
    audio = np.linspace(0, duration, duration * sr)
    audio = (20000 * np.sin(audio * (2 * np.pi * frequency))).astype(np.int16)
    return sr, audio

demo = gr.Interface(
    generate_tone,
    [
        gr.Dropdown(notes, type="index"),
        gr.Slider(4, 6, step=1),
        gr.Textbox(value=1, label="Duration in seconds"),
    ],
    "audio",
)
if __name__ == "__main__":
    demo.launch()

import os

import numpy as np

import gradio as gr


def reverse_audio(audio):
    sr, data = audio
    return (sr, np.flipud(data))


demo = gr.Interface(fn=reverse_audio, 
                    inputs="microphone", 
                    outputs="audio", 
                    examples=[
                    "https://samplelib.com/lib/preview/mp3/sample-3s.mp3",
                    os.path.join(os.path.dirname(__file__), "audio/recording1.wav")
        ], cache_examples=True)

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

Audio

gradio.Audio(···)

Creates an audio component that can be used to upload/record audio (as an input) or display audio (as an output).

As input: passes the uploaded audio as a Tuple(int, numpy.array) corresponding to (sample rate, data) or as a str filepath, depending on `type`

As output: expects a Tuple(int, numpy.array) corresponding to (sample rate, data) or as a str filepath or URL to an audio file, which gets displayed

Format expected for examples: a str filepath to a local file that contains audio.

Supported events: change(), clear(), pause(), play(), stop(), stream(), upload()

from math import log2, pow
import os

import numpy as np
from scipy.fftpack import fft

import gradio as gr

A4 = 440
C0 = A4 * pow(2, -4.75)
name = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]


def get_pitch(freq):
    h = round(12 * log2(freq / C0))
    n = h % 12
    return name[n]


def main_note(audio):
    rate, y = audio
    if len(y.shape) == 2:
        y = y.T[0]
    N = len(y)
    T = 1.0 / rate
    x = np.linspace(0.0, N * T, N)
    yf = fft(y)
    yf2 = 2.0 / N * np.abs(yf[0 : N // 2])
    xf = np.linspace(0.0, 1.0 / (2.0 * T), N // 2)

    volume_per_pitch = {}
    total_volume = np.sum(yf2)
    for freq, volume in zip(xf, yf2):
        if freq == 0:
            continue
        pitch = get_pitch(freq)
        if pitch not in volume_per_pitch:
            volume_per_pitch[pitch] = 0
        volume_per_pitch[pitch] += 1.0 * volume / total_volume
    volume_per_pitch = {k: float(v) for k, v in volume_per_pitch.items()}
    return volume_per_pitch


demo = gr.Interface(
    main_note,
    gr.Audio(source="microphone"),
    gr.Label(num_top_classes=4),
    examples=[
        [os.path.join(os.path.dirname(__file__),"audio/recording1.wav")],
        [os.path.join(os.path.dirname(__file__),"audio/cantina.wav")],
    ],
    interpretation="default",
)

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

Parameter	Description
`value` str \| Tuple[int, np.ndarray] \| Callable \| None default: None	A path, URL, or [sample_rate, numpy array] tuple for the default value that Audio component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.
`source` str default: "upload"	Source of audio. "upload" creates a box where user can drop an audio file, "microphone" creates a microphone input.
`type` str default: "numpy"	The format the audio file is converted to before being passed into the prediction function. "numpy" converts the audio to a tuple consisting of: (int sample rate, numpy.array for the data), "filepath" passes a str path to a temporary file containing the audio.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`interactive` bool \| None default: None	if True, will allow users to upload and edit a audio file; if False, can only be used to play audio. If not provided, this is inferred based on whether the component is used as an input or output.
`visible` bool default: True	If False, component will be hidden.
`streaming` bool default: False	If set to True when used in a `live` interface, will automatically stream webcam feed. Only valid is source is 'microphone'.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Class	Interface String Shortcut	Initialization
`gradio.Audio`	"audio"	Uses default values
`gradio.Microphone`	"microphone"	Uses source="microphone"

Methods

change

gradio.Audio.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

clear

gradio.Audio.clear(fn, ···)

This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

play

gradio.Audio.play(fn, ···)

This event is triggered when the user plays the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

pause

gradio.Audio.pause(fn, ···)

This event is triggered when the user pauses the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

stop

gradio.Audio.stop(fn, ···)

This event is triggered when the user stops the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

stream

gradio.Audio.stream(fn, inputs, outputs, ···)

This event is triggered when the user streams the component (e.g. a live webcam component)

Parameter	Description
`fn` Callable required	Callable function
`inputs` List[Component] required	List of inputs
`outputs` List[Component] required	List of outputs
`api_name` str \| None default: None
`preprocess` bool default: True
`postprocess` bool default: True

style

gradio.Audio.style(···)

This method can be used to change the appearance of the audio component.

Step-by-step Guides

No guides yet, contribute a guide about Audio

from zipfile import ZipFile

import gradio as gr


def zip_to_json(file_obj):
    files = []
    with ZipFile(file_obj.name) as zfile:
        for zinfo in zfile.infolist():
            files.append(
                {
                    "name": zinfo.filename,
                    "file_size": zinfo.file_size,
                    "compressed_size": zinfo.compress_size,
                }
            )
    return files


demo = gr.Interface(zip_to_json, "file", "json")

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

import os
from zipfile import ZipFile

import gradio as gr


def zip_files(files):
    with ZipFile("tmp.zip", "w") as zipObj:
        for idx, file in enumerate(files):
            zipObj.write(file.name, "file" + str(idx))
    return "tmp.zip"

demo = gr.Interface(
    zip_files,
    gr.File(file_count="multiple", file_types=["text", ".json", ".csv"]),
    "file",
    examples=[[[os.path.join(os.path.dirname(__file__),"files/titanic.csv"), 
    os.path.join(os.path.dirname(__file__),"files/titanic.csv"), 
    os.path.join(os.path.dirname(__file__),"files/titanic.csv")]]], 
    cache_examples=True
)

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

File

gradio.File(···)

Creates a file component that allows uploading generic file (when used as an input) and or displaying generic files (output).

As input: passes the uploaded file as a file-object or List[file-object] depending on `file_count` (or a bytes/Listbytes depending on `type`)

As output: expects function to return a str path to a file, or List[str] consisting of paths to files.

Format expected for examples: a str path to a local file that populates the component.

Supported events: change(), clear(), upload()

from zipfile import ZipFile

import gradio as gr


def zip_to_json(file_obj):
    files = []
    with ZipFile(file_obj.name) as zfile:
        for zinfo in zfile.infolist():
            files.append(
                {
                    "name": zinfo.filename,
                    "file_size": zinfo.file_size,
                    "compressed_size": zinfo.compress_size,
                }
            )
    return files


demo = gr.Interface(zip_to_json, "file", "json")

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

Parameter	Description
`value` str \| List[str] \| Callable \| None default: None	Default file to display, given as str file path. If callable, the function will be called whenever the app loads to set the initial value of the component.
`file_count` str default: "single"	if single, allows user to upload one file. If "multiple", user uploads multiple files. If "directory", user uploads all files in selected directory. Return type will be list for each file in case of "multiple" or "directory".
`file_types` List[str] \| None default: None	List of file extensions or types of files to be uploaded (e.g. ['image', '.json', '.mp4']). "file" allows any file to be uploaded, "image" allows only image files to be uploaded, "audio" allows only audio files to be uploaded, "video" allows only video files to be uploaded, "text" allows only text files to be uploaded.
`type` str default: "file"	Type of value to be returned by component. "file" returns a temporary file object whose path can be retrieved by file_obj.name and original filename can be retrieved with file_obj.orig_name, "binary" returns an bytes object.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`interactive` bool \| None default: None	if True, will allow users to upload a file; if False, can only be used to display files. If not provided, this is inferred based on whether the component is used as an input or output.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Class	Interface String Shortcut	Initialization
`gradio.File`	"file"	Uses default values
`gradio.Files`	"files"	Uses file_count="multiple"

Methods

change

gradio.File.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

clear

gradio.File.clear(fn, ···)

This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.File.style(···)

This method can be used to change the appearance of the file component.

Step-by-step Guides

No guides yet, contribute a guide about File

import gradio as gr


def filter_records(records, gender):
    return records[records["gender"] == gender]


demo = gr.Interface(
    filter_records,
    [
        gr.Dataframe(
            headers=["name", "age", "gender"],
            datatype=["str", "number", "str"],
            row_count=5,
            col_count=(3, "fixed"),
        ),
        gr.Dropdown(["M", "F", "O"]),
    ],
    "dataframe",
    description="Enter gender as 'M', 'F', or 'O' for other.",
)

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

import numpy as np

import gradio as gr


def transpose(matrix):
    return matrix.T


demo = gr.Interface(
    transpose,
    gr.Dataframe(type="numpy", datatype="number", row_count=5, col_count=3),
    "numpy",
    examples=[
        [np.zeros((3, 3)).tolist()],
        [np.ones((2, 2)).tolist()],
        [np.random.randint(0, 10, (3, 10)).tolist()],
        [np.random.randint(0, 10, (10, 3)).tolist()],
        [np.random.randint(0, 10, (10, 10)).tolist()],
    ],
    cache_examples=False
)

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

import gradio as gr

def tax_calculator(income, marital_status, assets):
    tax_brackets = [(10, 0), (25, 8), (60, 12), (120, 20), (250, 30)]
    total_deductible = sum(assets["Cost"])
    taxable_income = income - total_deductible

    total_tax = 0
    for bracket, rate in tax_brackets:
        if taxable_income > bracket:
            total_tax += (taxable_income - bracket) * rate / 100

    if marital_status == "Married":
        total_tax *= 0.75
    elif marital_status == "Divorced":
        total_tax *= 0.8

    return round(total_tax)

demo = gr.Interface(
    tax_calculator,
    [
        "number",
        gr.Radio(["Single", "Married", "Divorced"]),
        gr.Dataframe(
            headers=["Item", "Cost"],
            datatype=["str", "number"],
            label="Assets Purchased this Year",
        ),
    ],
    "number",
    examples=[
        [10000, "Married", [["Suit", 5000], ["Laptop", 800], ["Car", 1800]]],
        [80000, "Single", [["Suit", 800], ["Watch", 1800], ["Car", 800]]],
    ],
)

demo.launch()

Dataframe

gradio.Dataframe(···)

Accepts or displays 2D input through a spreadsheet-like component for dataframes.

As input: passes the uploaded spreadsheet data as a pandas.DataFrame, numpy.array, List[List], or List depending on `type`

As output: expects a pandas.DataFrame, numpy.array, List[List], List, a Dict with keys `data` (and optionally `headers`), or str path to a csv, which is rendered in the spreadsheet.

Format expected for examples: a str filepath to a csv with data, a pandas dataframe, or a list of lists (excluding headers) where each sublist is a row of data.

Supported events: change()

import gradio as gr


def filter_records(records, gender):
    return records[records["gender"] == gender]


demo = gr.Interface(
    filter_records,
    [
        gr.Dataframe(
            headers=["name", "age", "gender"],
            datatype=["str", "number", "str"],
            row_count=5,
            col_count=(3, "fixed"),
        ),
        gr.Dropdown(["M", "F", "O"]),
    ],
    "dataframe",
    description="Enter gender as 'M', 'F', or 'O' for other.",
)

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

Parameter	Description
`value` List[List[Any]] \| Callable \| None default: None	Default value as a 2-dimensional list of values. If callable, the function will be called whenever the app loads to set the initial value of the component.
`headers` List[str] \| None default: None	List of str header names. If None, no headers are shown.
`row_count` int \| Tuple[int, str] default: (1, 'dynamic')	Limit number of rows for input and decide whether user can create new rows. The first element of the tuple is an `int`, the row count; the second should be 'fixed' or 'dynamic', the new row behaviour. If an `int` is passed the rows default to 'dynamic'
`col_count` int \| Tuple[int, str] \| None default: None	Limit number of columns for input and decide whether user can create new columns. The first element of the tuple is an `int`, the number of columns; the second should be 'fixed' or 'dynamic', the new column behaviour. If an `int` is passed the columns default to 'dynamic'
`datatype` str \| List[str] default: "str"	Datatype of values in sheet. Can be provided per column as a list of strings, or for the entire sheet as a single string. Valid datatypes are "str", "number", "bool", "date", and "markdown".
`type` str default: "pandas"	Type of value to be returned by component. "pandas" for pandas dataframe, "numpy" for numpy array, or "array" for a Python array.
`max_rows` int \| None default: 20	Maximum number of rows to display at once. Set to None for infinite.
`max_cols` int \| None default: None	Maximum number of columns to display at once. Set to None for infinite.
`overflow_row_behaviour` str default: "paginate"	If set to "paginate", will create pages for overflow rows. If set to "show_ends", will show initial and final rows and truncate middle rows.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`interactive` bool \| None default: None	if True, will allow users to edit the dataframe; if False, can only be used to display data. If not provided, this is inferred based on whether the component is used as an input or output.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
`wrap` bool default: False	if True text in table cells will wrap when appropriate, if False the table will scroll horiztonally. Defaults to False.

Class	Interface String Shortcut	Initialization
`gradio.Dataframe`	"dataframe"	Uses default values
`gradio.Numpy`	"numpy"	Uses type="numpy"
`gradio.Matrix`	"matrix"	Uses type="array"
`gradio.List`	"list"	Uses type="array", col_count=1

Methods

change

gradio.Dataframe.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.Dataframe.style(···)

This method can be used to change the appearance of the DataFrame component.

Step-by-step Guides

No guides yet, contribute a guide about Dataframe

import random
import os
import gradio as gr


def fraud_detector(card_activity, categories, sensitivity):
    activity_range = random.randint(0, 100)
    drop_columns = [
        column for column in ["retail", "food", "other"] if column not in categories
    ]
    if len(drop_columns):
        card_activity.drop(columns=drop_columns, inplace=True)
    return (
        card_activity,
        card_activity,
        {"fraud": activity_range / 100.0, "not fraud": 1 - activity_range / 100.0},
    )


demo = gr.Interface(
    fraud_detector,
    [
        gr.Timeseries(x="time", y=["retail", "food", "other"]),
        gr.CheckboxGroup(
            ["retail", "food", "other"], value=["retail", "food", "other"]
        ),
        gr.Slider(1, 3),
    ],
    [
        "dataframe",
        gr.Timeseries(x="time", y=["retail", "food", "other"]),
        gr.Label(label="Fraud Level"),
    ],
    examples=[
        [os.path.join(os.path.dirname(__file__), "fraud.csv"), ["retail", "food", "other"], 1.0],
    ],
)
if __name__ == "__main__":
    demo.launch()

Timeseries

gradio.Timeseries(···)

Creates a component that can be used to upload/preview timeseries csv files or display a dataframe consisting of a time series graphically.

As input: passes the uploaded timeseries data as a pandas.DataFrame into the function

As output: expects a pandas.DataFrame or str path to a csv to be returned, which is then displayed as a timeseries graph

Format expected for examples: a str filepath of csv data with time series data.

Supported events: change()

import random
import os
import gradio as gr


def fraud_detector(card_activity, categories, sensitivity):
    activity_range = random.randint(0, 100)
    drop_columns = [
        column for column in ["retail", "food", "other"] if column not in categories
    ]
    if len(drop_columns):
        card_activity.drop(columns=drop_columns, inplace=True)
    return (
        card_activity,
        card_activity,
        {"fraud": activity_range / 100.0, "not fraud": 1 - activity_range / 100.0},
    )


demo = gr.Interface(
    fraud_detector,
    [
        gr.Timeseries(x="time", y=["retail", "food", "other"]),
        gr.CheckboxGroup(
            ["retail", "food", "other"], value=["retail", "food", "other"]
        ),
        gr.Slider(1, 3),
    ],
    [
        "dataframe",
        gr.Timeseries(x="time", y=["retail", "food", "other"]),
        gr.Label(label="Fraud Level"),
    ],
    examples=[
        [os.path.join(os.path.dirname(__file__), "fraud.csv"), ["retail", "food", "other"], 1.0],
    ],
)
if __name__ == "__main__":
    demo.launch()

Parameter	Description
`value` str \| Callable \| None default: None	File path for the timeseries csv file. If callable, the function will be called whenever the app loads to set the initial value of the component.
`x` str \| None default: None	Column name of x (time) series. None if csv has no headers, in which case first column is x series.
`y` str \| List[str] \| None default: None	Column name of y series, or list of column names if multiple series. None if csv has no headers, in which case every column after first is a y series.
`colors` List[str] \| None default: None	an ordered list of colors to use for each line plot
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`interactive` bool \| None default: None	if True, will allow users to upload a timeseries csv; if False, can only be used to display timeseries data. If not provided, this is inferred based on whether the component is used as an input or output.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Class	Interface String Shortcut	Initialization
`gradio.Timeseries`	"timeseries"	Uses default values

Methods

change

gradio.Timeseries.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.Timeseries.style(···)

This method can be used to change the appearance of the TimeSeries component.

Step-by-step Guides

No guides yet, contribute a guide about Timeseries

import random
import gradio as gr

def chat(message, history):
    history = history or []
    message = message.lower()
    if message.startswith("how many"):
        response = str(random.randint(1, 10))
    elif message.startswith("how"):
        response = random.choice(["Great", "Good", "Okay", "Bad"])
    elif message.startswith("where"):
        response = random.choice(["Here", "There", "Somewhere"])
    else:
        response = "I don't know"
    history.append((message, response))
    return history, history

chatbot = gr.Chatbot().style(color_map=("green", "pink"))
demo = gr.Interface(
    chat,
    ["text", "state"],
    [chatbot, "state"],
    allow_flagging="never",
)
if __name__ == "__main__":
    demo.launch()

import gradio as gr

demo = gr.Blocks(css="#btn {color: red}")

with demo:
    default_json = {"a": "a"}

    num = gr.State(value=0)
    squared = gr.Number(value=0)
    btn = gr.Button("Next Square", elem_id="btn").style(rounded=False)

    stats = gr.State(value=default_json)
    table = gr.JSON()

    def increase(var, stats_history):
        var += 1
        stats_history[str(var)] = var**2
        return var, var**2, stats_history, stats_history

    btn.click(increase, [num, stats], [num, squared, stats, table])

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

State

gradio.State(···)

Special hidden component that stores session state across runs of the demo by the same user. The value of the State variable is cleared when the user refreshes the page.

As input: No preprocessing is performed

As output: No postprocessing is performed

import random
import gradio as gr

def chat(message, history):
    history = history or []
    message = message.lower()
    if message.startswith("how many"):
        response = str(random.randint(1, 10))
    elif message.startswith("how"):
        response = random.choice(["Great", "Good", "Okay", "Bad"])
    elif message.startswith("where"):
        response = random.choice(["Here", "There", "Somewhere"])
    else:
        response = "I don't know"
    history.append((message, response))
    return history, history

chatbot = gr.Chatbot().style(color_map=("green", "pink"))
demo = gr.Interface(
    chat,
    ["text", "state"],
    [chatbot, "state"],
    allow_flagging="never",
)
if __name__ == "__main__":
    demo.launch()

Parameter Description


                value

Any

default: None

the initial value of the state. If callable, the function will be called whenever the app loads to set the initial value of the component.

Step-by-step Guides

No guides yet, contribute a guide about State

import gradio as gr
import os


def combine(a, b):
    return a + " " + b


def mirror(x):
    return x


with gr.Blocks() as demo:

    txt = gr.Textbox(label="Input", lines=2)
    txt_2 = gr.Textbox(label="Input 2")
    txt_3 = gr.Textbox(value="", label="Output")
    btn = gr.Button(value="Submit")
    btn.click(combine, inputs=[txt, txt_2], outputs=[txt_3])

    with gr.Row():
        im = gr.Image()
        im_2 = gr.Image()

    btn = gr.Button(value="Mirror Image")
    btn.click(mirror, inputs=[im], outputs=[im_2])

    gr.Markdown("## Text Examples")
    gr.Examples(
        [["hi", "Adam"], ["hello", "Eve"]],
        [txt, txt_2],
        txt_3,
        combine,
        cache_examples=True,
    )
    gr.Markdown("## Image Examples")
    gr.Examples(
        examples=[os.path.join(os.path.dirname(__file__), "lion.jpg")],
        inputs=im,
        outputs=im_2,
        fn=mirror,
        cache_examples=True,
    )

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

import pandas as pd
import numpy as np

import gradio as gr


def plot(v, a):
    g = 9.81
    theta = a / 180 * 3.14
    tmax = ((2 * v) * np.sin(theta)) / g
    timemat = tmax * np.linspace(0, 1, 40)

    x = (v * timemat) * np.cos(theta)
    y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))
    df = pd.DataFrame({"x": x, "y": y})
    return df


demo = gr.Blocks()

with demo:
    gr.Markdown(
        r"Let's do some kinematics! Choose the speed and angle to see the trajectory. Remember that the range $R = v_0^2 \cdot \frac{\sin(2\theta)}{g}$"
    )

    with gr.Row():
        speed = gr.Slider(1, 30, 25, label="Speed")
        angle = gr.Slider(0, 90, 45, label="Angle")
    output = gr.LinePlot(
        x="x",
        y="y",
        overlay_point=True,
        tooltip=["x", "y"],
        x_lim=[0, 100],
        y_lim=[0, 60],
        width=350,
        height=300,
    )
    btn = gr.Button(value="Run")
    btn.click(plot, [speed, angle], output)

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

Button

gradio.Button(···)

Used to create a button, that can be assigned arbitrary click() events. The label (value) of the button can be used as an input or set via the output of a function.

As input: passes the button value as a str into the function

As output: expects a str to be returned from a function, which is set as the label of the button

Supported events: click()

import gradio as gr
import os


def combine(a, b):
    return a + " " + b


def mirror(x):
    return x


with gr.Blocks() as demo:

    txt = gr.Textbox(label="Input", lines=2)
    txt_2 = gr.Textbox(label="Input 2")
    txt_3 = gr.Textbox(value="", label="Output")
    btn = gr.Button(value="Submit")
    btn.click(combine, inputs=[txt, txt_2], outputs=[txt_3])

    with gr.Row():
        im = gr.Image()
        im_2 = gr.Image()

    btn = gr.Button(value="Mirror Image")
    btn.click(mirror, inputs=[im], outputs=[im_2])

    gr.Markdown("## Text Examples")
    gr.Examples(
        [["hi", "Adam"], ["hello", "Eve"]],
        [txt, txt_2],
        txt_3,
        combine,
        cache_examples=True,
    )
    gr.Markdown("## Image Examples")
    gr.Examples(
        examples=[os.path.join(os.path.dirname(__file__), "lion.jpg")],
        inputs=im,
        outputs=im_2,
        fn=mirror,
        cache_examples=True,
    )

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

Parameter	Description
`value` str \| Callable default: "Run"	Default text for the button to display. If callable, the function will be called whenever the app loads to set the initial value of the component.
`variant` str default: "secondary"	'primary' for main call-to-action, 'secondary' for a more subdued style
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Class	Interface String Shortcut	Initialization
`gradio.Button`	"button"	Uses default values

Methods

click

gradio.Button.click(fn, ···)

This event is triggered when the component (e.g. a button) is clicked. This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.Button.style(···)

This method can be used to change the appearance of the button component.

Parameter Description


                full_width

bool | None

default: None

If True, will expand to fill parent container.

Step-by-step Guides

No guides yet, contribute a guide about Button

import gradio as gr

def upload_file(files):
    file_paths = [file.name for file in files]
    return file_paths

with gr.Blocks() as demo:
    file_output = gr.File()
    upload_button = gr.UploadButton("Click to Upload a File", file_types=["image", "video"], file_count="multiple")
    upload_button.upload(upload_file, upload_button, file_output)

demo.launch()

UploadButton

gradio.UploadButton(···)

Used to create an upload button, when cicked allows a user to upload files that satisfy the specified file type or generic files (if file_type not set).

As input: passes the uploaded file as a file-object or List[file-object] depending on `file_count` (or a bytes/Listbytes depending on `type`)

As output: expects function to return a str path to a file, or List[str] consisting of paths to files.

Format expected for examples: a str path to a local file that populates the component.

Supported events: click(), upload()

import gradio as gr

def upload_file(files):
    file_paths = [file.name for file in files]
    return file_paths

with gr.Blocks() as demo:
    file_output = gr.File()
    upload_button = gr.UploadButton("Click to Upload a File", file_types=["image", "video"], file_count="multiple")
    upload_button.upload(upload_file, upload_button, file_output)

demo.launch()

Parameter	Description
`label` str default: "Upload a File"	Text to display on the button. Defaults to "Upload a File".
`value` str \| List[str] \| Callable \| None default: None	Default text for the button to display.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
`type` str default: "file"	Type of value to be returned by component. "file" returns a temporary file object whose path can be retrieved by file_obj.name and original filename can be retrieved with file_obj.orig_name, "binary" returns an bytes object.
`file_count` str default: "single"	if single, allows user to upload one file. If "multiple", user uploads multiple files. If "directory", user uploads all files in selected directory. Return type will be list for each file in case of "multiple" or "directory".
`file_types` List[str] \| None default: None	List of type of files to be uploaded. "file" allows any file to be uploaded, "image" allows only image files to be uploaded, "audio" allows only audio files to be uploaded, "video" allows only video files to be uploaded, "text" allows only text files to be uploaded.

Class	Interface String Shortcut	Initialization
`gradio.UploadButton`	"uploadbutton"	Uses default values

Methods

click

gradio.UploadButton.click(fn, ···)

This event is triggered when the component (e.g. a button) is clicked. This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

upload

gradio.UploadButton.upload(fn, inputs, ···)

This event is triggered when the user uploads a file into the component (e.g. when the user uploads a video into a video component). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	Callable function
`inputs` List[Component] required	List of inputs
`outputs` Component \| List[Component] \| None default: None	List of outputs
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.UploadButton.style(···)

This method can be used to change the appearance of the button component.

Parameter Description


                full_width

bool | None

default: None

If True, will expand to fill parent container.

Step-by-step Guides

No guides yet, contribute a guide about UploadButton

import gradio as gr
import numpy as np
import os
from PIL import Image, ImageColor


def change_color(icon, color):

    """
    Function that given an icon in .png format changes its color
    Args:
        icon: Icon whose color needs to be changed.
        color: Chosen color with which to edit the input icon.
    Returns:
        edited_image: Edited icon.
    """
    img = icon.convert("LA")
    img = img.convert("RGBA")
    image_np = np.array(icon)
    _, _, _, alpha = image_np.T
    mask = alpha > 0
    image_np[..., :-1][mask.T] = ImageColor.getcolor(color, "RGB")
    edited_image = Image.fromarray(image_np)
    return edited_image


inputs = [
    gr.Image(label="icon", type="pil", image_mode="RGBA"),
    gr.ColorPicker(label="color"),
]
outputs = gr.Image(label="colored icon")

demo = gr.Interface(
    fn=change_color,
    inputs=inputs,
    outputs=outputs,
    examples=[
        [os.path.join(os.path.dirname(__file__), "rabbit.png"), "#ff0000"],
        [os.path.join(os.path.dirname(__file__), "rabbit.png"), "#0000FF"],
    ],
)

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

import gradio as gr
import cv2
import numpy as np
import random


# Convert decimal color to hexadecimal color
def RGB_to_Hex(rgb):
    color = "#"
    for i in rgb:
        num = int(i)
        color += str(hex(num))[-2:].replace("x", "0").upper()
    return color


# Randomly generate light or dark colors
def random_color(is_light=True):
    return (
        random.randint(0, 127) + int(is_light) * 128,
        random.randint(0, 127) + int(is_light) * 128,
        random.randint(0, 127) + int(is_light) * 128,
    )


def switch_color(color_style):
    if color_style == "light":
        is_light = True
    elif color_style == "dark":
        is_light = False
    back_color_ = random_color(is_light)  # Randomly generate colors
    back_color = RGB_to_Hex(back_color_)  # Convert to hexadecimal

    # Draw color pictures.
    w, h = 50, 50
    img = np.zeros((h, w, 3), np.uint8)
    cv2.rectangle(img, (0, 0), (w, h), back_color_, thickness=-1)

    return back_color, back_color, img


inputs = [gr.Radio(["light", "dark"], value="light")]

outputs = [
    gr.ColorPicker(label="color"),
    gr.Textbox(label="hexadecimal color"),
    gr.Image(type="numpy", label="color picture"),
]

title = "Color Generator"
description = (
    "Click the Submit button, and a dark or light color will be randomly generated."
)

demo = gr.Interface(
    fn=switch_color,
    inputs=inputs,
    outputs=outputs,
    title=title,
    description=description,
)

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

ColorPicker

gradio.ColorPicker(···)

Creates a color picker for user to select a color as string input.

As input: passes selected color value as a str into the function.

As output: expects a str returned from function and sets color picker value to it.

Format expected for examples: a str with a hexadecimal representation of a color, e.g. "#ff0000" for red.

Supported events: change(), submit()

import gradio as gr
import numpy as np
import os
from PIL import Image, ImageColor


def change_color(icon, color):

    """
    Function that given an icon in .png format changes its color
    Args:
        icon: Icon whose color needs to be changed.
        color: Chosen color with which to edit the input icon.
    Returns:
        edited_image: Edited icon.
    """
    img = icon.convert("LA")
    img = img.convert("RGBA")
    image_np = np.array(icon)
    _, _, _, alpha = image_np.T
    mask = alpha > 0
    image_np[..., :-1][mask.T] = ImageColor.getcolor(color, "RGB")
    edited_image = Image.fromarray(image_np)
    return edited_image


inputs = [
    gr.Image(label="icon", type="pil", image_mode="RGBA"),
    gr.ColorPicker(label="color"),
]
outputs = gr.Image(label="colored icon")

demo = gr.Interface(
    fn=change_color,
    inputs=inputs,
    outputs=outputs,
    examples=[
        [os.path.join(os.path.dirname(__file__), "rabbit.png"), "#ff0000"],
        [os.path.join(os.path.dirname(__file__), "rabbit.png"), "#0000FF"],
    ],
)

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

Parameter	Description
`value` str \| Callable \| None default: None	default text to provide in color picker. If callable, the function will be called whenever the app loads to set the initial value of the component.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`interactive` bool \| None default: None	if True, will be rendered as an editable color picker; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Class	Interface String Shortcut	Initialization
`gradio.ColorPicker`	"colorpicker"	Uses default values

Methods

change

gradio.ColorPicker.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

submit

gradio.ColorPicker.submit(fn, ···)

This event is triggered when the user presses the Enter key while the component (e.g. a textbox) is focused. This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.ColorPicker.style(···)

This method can be used to change the appearance of the component.

Parameter Description


                container

bool | None

default: None

If True, will place the component in a container - providing some extra padding around the border.

Step-by-step Guides

No guides yet, contribute a guide about ColorPicker

from math import log2, pow
import os

import numpy as np
from scipy.fftpack import fft

import gradio as gr

A4 = 440
C0 = A4 * pow(2, -4.75)
name = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]


def get_pitch(freq):
    h = round(12 * log2(freq / C0))
    n = h % 12
    return name[n]


def main_note(audio):
    rate, y = audio
    if len(y.shape) == 2:
        y = y.T[0]
    N = len(y)
    T = 1.0 / rate
    x = np.linspace(0.0, N * T, N)
    yf = fft(y)
    yf2 = 2.0 / N * np.abs(yf[0 : N // 2])
    xf = np.linspace(0.0, 1.0 / (2.0 * T), N // 2)

    volume_per_pitch = {}
    total_volume = np.sum(yf2)
    for freq, volume in zip(xf, yf2):
        if freq == 0:
            continue
        pitch = get_pitch(freq)
        if pitch not in volume_per_pitch:
            volume_per_pitch[pitch] = 0
        volume_per_pitch[pitch] += 1.0 * volume / total_volume
    volume_per_pitch = {k: float(v) for k, v in volume_per_pitch.items()}
    return volume_per_pitch


demo = gr.Interface(
    main_note,
    gr.Audio(source="microphone"),
    gr.Label(num_top_classes=4),
    examples=[
        [os.path.join(os.path.dirname(__file__),"audio/recording1.wav")],
        [os.path.join(os.path.dirname(__file__),"audio/cantina.wav")],
    ],
    interpretation="default",
)

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

import os

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn.model_selection import train_test_split

import gradio as gr

current_dir = os.path.dirname(os.path.realpath(__file__))
data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))


def encode_age(df):
    df.Age = df.Age.fillna(-0.5)
    bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
    categories = pd.cut(df.Age, bins, labels=False)
    df.Age = categories
    return df


def encode_fare(df):
    df.Fare = df.Fare.fillna(-0.5)
    bins = (-1, 0, 8, 15, 31, 1000)
    categories = pd.cut(df.Fare, bins, labels=False)
    df.Fare = categories
    return df


def encode_df(df):
    df = encode_age(df)
    df = encode_fare(df)
    sex_mapping = {"male": 0, "female": 1}
    df = df.replace({"Sex": sex_mapping})
    embark_mapping = {"S": 1, "C": 2, "Q": 3}
    df = df.replace({"Embarked": embark_mapping})
    df.Embarked = df.Embarked.fillna(0)
    df["Company"] = 0
    df.loc[(df["SibSp"] > 0), "Company"] = 1
    df.loc[(df["Parch"] > 0), "Company"] = 2
    df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
    df = df[
        [
            "PassengerId",
            "Pclass",
            "Sex",
            "Age",
            "Fare",
            "Embarked",
            "Company",
            "Survived",
        ]
    ]
    return df


train = encode_df(data)

X_all = train.drop(["Survived", "PassengerId"], axis=1)
y_all = train["Survived"]

num_test = 0.20
X_train, X_test, y_train, y_test = train_test_split(
    X_all, y_all, test_size=num_test, random_state=23
)

clf = RandomForestClassifier()
clf.fit(X_train, y_train)
predictions = clf.predict(X_test)


def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
    if passenger_class is None or embark_point is None:
        return None
    df = pd.DataFrame.from_dict(
        {
            "Pclass": [passenger_class + 1],
            "Sex": [0 if is_male else 1],
            "Age": [age],
            "Company": [
                (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
            ],
            "Fare": [fare],
            "Embarked": [embark_point + 1],
        }
    )
    df = encode_age(df)
    df = encode_fare(df)
    pred = clf.predict_proba(df)[0]
    return {"Perishes": float(pred[0]), "Survives": float(pred[1])}


demo = gr.Interface(
    predict_survival,
    [
        gr.Dropdown(["first", "second", "third"], type="index"),
        "checkbox",
        gr.Slider(0, 80, value=25),
        gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
        gr.Number(value=20),
        gr.Radio(["S", "C", "Q"], type="index"),
    ],
    "label",
    examples=[
        ["first", True, 30, [], 50, "S"],
        ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
        ["third", True, 30, ["Child"], 20, "S"],
    ],
    interpretation="default",
    live=True,
)

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

Label

gradio.Label(···)

Displays a classification label, along with confidence scores of top categories, if provided.

As input: this component does *not* accept input.

As output: expects a Dict[str, float] of classes and confidences, or str with just the class or an int/float for regression outputs, or a str path to a .json file containing a json dictionary in the structure produced by Label.postprocess().

Supported events: change()

from math import log2, pow
import os

import numpy as np
from scipy.fftpack import fft

import gradio as gr

A4 = 440
C0 = A4 * pow(2, -4.75)
name = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]


def get_pitch(freq):
    h = round(12 * log2(freq / C0))
    n = h % 12
    return name[n]


def main_note(audio):
    rate, y = audio
    if len(y.shape) == 2:
        y = y.T[0]
    N = len(y)
    T = 1.0 / rate
    x = np.linspace(0.0, N * T, N)
    yf = fft(y)
    yf2 = 2.0 / N * np.abs(yf[0 : N // 2])
    xf = np.linspace(0.0, 1.0 / (2.0 * T), N // 2)

    volume_per_pitch = {}
    total_volume = np.sum(yf2)
    for freq, volume in zip(xf, yf2):
        if freq == 0:
            continue
        pitch = get_pitch(freq)
        if pitch not in volume_per_pitch:
            volume_per_pitch[pitch] = 0
        volume_per_pitch[pitch] += 1.0 * volume / total_volume
    volume_per_pitch = {k: float(v) for k, v in volume_per_pitch.items()}
    return volume_per_pitch


demo = gr.Interface(
    main_note,
    gr.Audio(source="microphone"),
    gr.Label(num_top_classes=4),
    examples=[
        [os.path.join(os.path.dirname(__file__),"audio/recording1.wav")],
        [os.path.join(os.path.dirname(__file__),"audio/cantina.wav")],
    ],
    interpretation="default",
)

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

Parameter	Description
`value` Dict[str, float] \| str \| float \| Callable \| None default: None	Default value to show in the component. If a str or number is provided, simply displays the string or number. If a {Dict[str, float]} of classes and confidences is provided, displays the top class on top and the `num_top_classes` below, along with their confidence bars. If callable, the function will be called whenever the app loads to set the initial value of the component.
`num_top_classes` int \| None default: None	number of most confident classes to show.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
`color` str \| None default: None	The background color of the label (either a valid css color name or hexadecimal string).

Class	Interface String Shortcut	Initialization
`gradio.Label`	"label"	Uses default values

Methods

change

gradio.Label.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.Label.style(···)

This method can be used to change the appearance of the label component.

Parameter Description


                container

bool | None

default: None

If True, will add a container to the label - providing some extra padding around the border.

Step-by-step Guides

No guides yet, contribute a guide about Label

from difflib import Differ

import gradio as gr


def diff_texts(text1, text2):
    d = Differ()
    return [
        (token[2:], token[0] if token[0] != " " else None)
        for token in d.compare(text1, text2)
    ]


demo = gr.Interface(
    diff_texts,
    [
        gr.Textbox(
            label="Initial text",
            lines=3,
            value="The quick brown fox jumped over the lazy dogs.",
        ),
        gr.Textbox(
            label="Text to compare",
            lines=3,
            value="The fast brown fox jumps over lazy dogs.",
        ),
    ],
    gr.HighlightedText(
        label="Diff",
        combine_adjacent=True,
    ).style(color_map={"+": "red", "-": "green"}),
)
if __name__ == "__main__":
    demo.launch()

import gradio as gr
import os
os.system('python -m spacy download en_core_web_sm')
import spacy
from spacy import displacy

nlp = spacy.load("en_core_web_sm")

def text_analysis(text):
    doc = nlp(text)
    html = displacy.render(doc, style="dep", page=True)
    html = (
        ""
        + html
        + ""
    )
    pos_count = {
        "char_count": len(text),
        "token_count": 0,
    }
    pos_tokens = []

    for token in doc:
        pos_tokens.extend([(token.text, token.pos_), (" ", None)])

    return pos_tokens, pos_count, html

demo = gr.Interface(
    text_analysis,
    gr.Textbox(placeholder="Enter sentence here..."),
    ["highlight", "json", "html"],
    examples=[
        ["What a beautiful morning for a walk!"],
        ["It was the best of times, it was the worst of times."],
    ],
)

demo.launch()

HighlightedText

gradio.HighlightedText(···)

Displays text that contains spans that are highlighted by category or numerical value.

As input: this component does *not* accept input.

As output: expects a List[Tuple[str, float | str]]] consisting of spans of text and their associated labels, or a Dict with two keys: (1) "text" whose value is the complete text, and "entities", which is a list of dictionaries, each of which have the keys: "entity" (consisting of the entity label), "start" (the character index where the label starts), and "end" (the character index where the label ends). Entities should not overlap.

Supported events: change()

from difflib import Differ

import gradio as gr


def diff_texts(text1, text2):
    d = Differ()
    return [
        (token[2:], token[0] if token[0] != " " else None)
        for token in d.compare(text1, text2)
    ]


demo = gr.Interface(
    diff_texts,
    [
        gr.Textbox(
            label="Initial text",
            lines=3,
            value="The quick brown fox jumped over the lazy dogs.",
        ),
        gr.Textbox(
            label="Text to compare",
            lines=3,
            value="The fast brown fox jumps over lazy dogs.",
        ),
    ],
    gr.HighlightedText(
        label="Diff",
        combine_adjacent=True,
    ).style(color_map={"+": "red", "-": "green"}),
)
if __name__ == "__main__":
    demo.launch()

Parameter	Description
`value` List[Tuple[str, str \| float \| None]] \| Dict \| Callable \| None default: None	Default value to show. If callable, the function will be called whenever the app loads to set the initial value of the component.
`color_map` Dict[str, str] \| None default: None
`show_legend` bool default: False	whether to show span categories in a separate legend or inline.
`combine_adjacent` bool default: False	If True, will merge the labels of adjacent tokens belonging to the same category.
`adjacent_separator` str default: ""	Specifies the separator to be used between tokens if combine_adjacent is True.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Class	Interface String Shortcut	Initialization
`gradio.HighlightedText`	"highlightedtext"	Uses default values

Methods

change

gradio.HighlightedText.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.HighlightedText.style(···)

This method can be used to change the appearance of the HighlightedText component.

Parameter Description


                color_map

Dict[str, str] | None

default: None

Map between category and respective colors.


                container

bool | None

default: None

If True, will place the component in a container - providing some extra padding around the border.

Step-by-step Guides

No guides yet, contribute a guide about HighlightedText

from zipfile import ZipFile

import gradio as gr


def zip_to_json(file_obj):
    files = []
    with ZipFile(file_obj.name) as zfile:
        for zinfo in zfile.infolist():
            files.append(
                {
                    "name": zinfo.filename,
                    "file_size": zinfo.file_size,
                    "compressed_size": zinfo.compress_size,
                }
            )
    return files


demo = gr.Interface(zip_to_json, "file", "json")

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

import gradio as gr
import random
import time


def xray_model(diseases, img):
    time.sleep(4)
    return [{disease: random.random() for disease in diseases}]


def ct_model(diseases, img):
    time.sleep(3)
    return [{disease: 0.1 for disease in diseases}]

with gr.Blocks() as demo:
    gr.Markdown(
        """
# Detect Disease From Scan
With this model you can lorem ipsum
- ipsum 1
- ipsum 2
"""
    )
    disease = gr.CheckboxGroup(
        choices=["Covid", "Malaria", "Lung Cancer"], label="Disease to Scan For"
    )

    with gr.Tab("X-ray") as x_tab:
        with gr.Row():
            xray_scan = gr.Image()
            xray_results = gr.JSON()
        xray_run = gr.Button("Run")
        xray_run.click(
            xray_model,
            inputs=[disease, xray_scan],
            outputs=xray_results,
            api_name="xray_model"
        )

    with gr.Tab("CT Scan"):
        with gr.Row():
            ct_scan = gr.Image()
            ct_results = gr.JSON()
        ct_run = gr.Button("Run")
        ct_run.click(
            ct_model,
            inputs=[disease, ct_scan],
            outputs=ct_results,
            api_name="ct_model"
        )

    upload_btn = gr.Button("Upload Results")
    upload_btn.click(
        lambda ct, xr: time.sleep(5),
        inputs=[ct_results, xray_results],
        outputs=[],
    )

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

JSON

gradio.JSON(···)

Used to display arbitrary JSON output prettily.

As input: this component does *not* accept input.

As output: expects a valid JSON str -- or a list or dict that is JSON serializable.

Supported events: change()

from zipfile import ZipFile

import gradio as gr


def zip_to_json(file_obj):
    files = []
    with ZipFile(file_obj.name) as zfile:
        for zinfo in zfile.infolist():
            files.append(
                {
                    "name": zinfo.filename,
                    "file_size": zinfo.file_size,
                    "compressed_size": zinfo.compress_size,
                }
            )
    return files


demo = gr.Interface(zip_to_json, "file", "json")

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

Parameter	Description
`value` str \| Callable \| None default: None	Default value. If callable, the function will be called whenever the app loads to set the initial value of the component.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Class	Interface String Shortcut	Initialization
`gradio.JSON`	"json"	Uses default values

Methods

change

gradio.JSON.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

style

gradio.JSON.style(···)

This method can be used to change the appearance of the JSON component.

Parameter Description


                container

bool | None

default: None

If True, will place the JSON in a container - providing some extra padding around the border.

Step-by-step Guides

No guides yet, contribute a guide about JSON

import gradio as gr
import os
os.system('python -m spacy download en_core_web_sm')
import spacy
from spacy import displacy

nlp = spacy.load("en_core_web_sm")

def text_analysis(text):
    doc = nlp(text)
    html = displacy.render(doc, style="dep", page=True)
    html = (
        ""
        + html
        + ""
    )
    pos_count = {
        "char_count": len(text),
        "token_count": 0,
    }
    pos_tokens = []

    for token in doc:
        pos_tokens.extend([(token.text, token.pos_), (" ", None)])

    return pos_tokens, pos_count, html

demo = gr.Interface(
    text_analysis,
    gr.Textbox(placeholder="Enter sentence here..."),
    ["highlight", "json", "html"],
    examples=[
        ["What a beautiful morning for a walk!"],
        ["It was the best of times, it was the worst of times."],
    ],
)

demo.launch()

HTML

gradio.HTML(···)

Used to display arbitrary HTML output.

As input: this component does *not* accept input.

As output: expects a valid HTML str.

Supported events: change()

import gradio as gr
import os
os.system('python -m spacy download en_core_web_sm')
import spacy
from spacy import displacy

nlp = spacy.load("en_core_web_sm")

def text_analysis(text):
    doc = nlp(text)
    html = displacy.render(doc, style="dep", page=True)
    html = (
        ""
        + html
        + ""
    )
    pos_count = {
        "char_count": len(text),
        "token_count": 0,
    }
    pos_tokens = []

    for token in doc:
        pos_tokens.extend([(token.text, token.pos_), (" ", None)])

    return pos_tokens, pos_count, html

demo = gr.Interface(
    text_analysis,
    gr.Textbox(placeholder="Enter sentence here..."),
    ["highlight", "json", "html"],
    examples=[
        ["What a beautiful morning for a walk!"],
        ["It was the best of times, it was the worst of times."],
    ],
)

demo.launch()

Parameter	Description
`value` str \| Callable default: ""	Default value. If callable, the function will be called whenever the app loads to set the initial value of the component.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Class	Interface String Shortcut	Initialization
`gradio.HTML`	"html"	Uses default values

Methods

change

gradio.HTML.change(fn, ···)

This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks.

Parameter	Description
`fn` Callable \| None required	the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
`inputs` Component \| List[Component] \| Set[Component] \| None default: None	List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
`outputs` Component \| List[Component] \| None default: None	List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.
`api_name` str \| None default: None	Defining this parameter exposes the endpoint in the api docs
`status_tracker` StatusTracker \| None default: None
`scroll_to_output` bool default: False	If True, will scroll to output component on completion
`show_progress` bool default: True	If True, will show progress animation while pending
`queue` bool \| None default: None	If True, will place the request on the queue, if the queue exists
`batch` bool default: False	If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then required to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
`max_batch_size` int default: 4	Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
`preprocess` bool default: True	If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
`postprocess` bool default: True	If False, will not run postprocessing of component data before returning 'fn' output to the browser.
`cancels` Dict[str, Any] \| List[Dict[str, Any]] \| None default: None	A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.
`every` float \| None default: None	Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.

Step-by-step Guides

No guides yet, contribute a guide about HTML

# This demo needs to be run from the repo folder.
# python demo/fake_gan/run.py
import os
import random

import gradio as gr


def fake_gan():
    images = [
        (random.choice(
            [
                "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
                "https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80",
                "https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80",
                "https://images.unsplash.com/photo-1546456073-92b9f0a8d413?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
                "https://images.unsplash.com/photo-1601412436009-d964bd02edbc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80",
            ]
        ), f"label {i}" if i != 0 else "label" * 50)
        for i in range(3)
    ]
    return images


with gr.Blocks() as demo:
    with gr.Column(variant="panel"):
        with gr.Row(variant="compact"):
            text = gr.Textbox(
                label="Enter your prompt",
                show_label=False,
                max_lines=1,
                placeholder="Enter your prompt",
            ).style(
                container=False,
            )
            btn = gr.Button("Generate image").style(full_width=False)

        gallery = gr.Gallery(
            label="Generated images", show_label=False, elem_id="gallery"
        ).style(grid=[2], height="auto")

    btn.click(fake_gan, None, gallery)

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

Gallery

gradio.Gallery(···)

Used to display a list of images as a gallery that can be scrolled through.

As input: this component does *not* accept input.

As output: expects a list of images in any format, List[numpy.array | PIL.Image | str], or a List of (image, str caption) tuples and displays them.

# This demo needs to be run from the repo folder.
# python demo/fake_gan/run.py
import os
import random

import gradio as gr


def fake_gan():
    images = [
        (random.choice(
            [
                "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
                "https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80",
                "https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80",
                "https://images.unsplash.com/photo-1546456073-92b9f0a8d413?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
                "https://images.unsplash.com/photo-1601412436009-d964bd02edbc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80",
            ]
        ), f"label {i}" if i != 0 else "label" * 50)
        for i in range(3)
    ]
    return images


with gr.Blocks() as demo:
    with gr.Column(variant="panel"):
        with gr.Row(variant="compact"):
            text = gr.Textbox(
                label="Enter your prompt",
                show_label=False,
                max_lines=1,
                placeholder="Enter your prompt",
            ).style(
                container=False,
            )
            btn = gr.Button("Generate image").style(full_width=False)

        gallery = gr.Gallery(
            label="Generated images", show_label=False, elem_id="gallery"
        ).style(grid=[2], height="auto")

    btn.click(fake_gan, None, gallery)

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

Parameter	Description
`value` List[np.ndarray \| _Image.Image \| str] \| Callable \| None default: None	List of images to display in the gallery by default. If callable, the function will be called whenever the app loads to set the initial value of the component.
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Class	Interface String Shortcut	Initialization
`gradio.Gallery`	"gallery"	Uses default values

Methods

style

gradio.Gallery.style(···)

This method can be used to change the appearance of the gallery component.

Parameter Description


                grid

int | Tuple | None

default: None

Represents the number of images that should be shown in one row, for each of the six standard screen sizes (<576px, <768px, <992px, <1200px, <1400px, >1400px). if fewer that 6 are given then the last will be used for all subsequent breakpoints


                height

str | None

default: None

Height of the gallery.


                container

bool | None

default: None

If True, will place gallery in a container - providing some extra padding around the border.

Step-by-step Guides

No guides yet, contribute a guide about Gallery

import random
import gradio as gr

def chat(message, history):
    history = history or []
    message = message.lower()
    if message.startswith("how many"):
        response = str(random.randint(1, 10))
    elif message.startswith("how"):
        response = random.choice(["Great", "Good", "Okay", "Bad"])
    elif message.startswith("where"):
        response = random.choice(["Here", "There", "Somewhere"])
    else:
        response = "I don't know"
    history.append((message, response))
    return history, history

chatbot = gr.Chatbot().style(color_map=("green", "pink"))
demo = gr.Interface(
    chat,
    ["text", "state"],
    [chatbot, "state"],
    allow_flagging="never",
)
if __name__ == "__main__":
    demo.launch()

Chatbot

gradio.Chatbot(···)

Displays a chatbot output showing both user submitted messages and responses. Supports a subset of Markdown including bold, italics, code, and images.

As input: this component does *not* accept input.

As output: expects a List[Tuple[str, str]], a list of tuples with user inputs and responses as strings of HTML.

Supported events: change()

import random
import gradio as gr

def chat(message, history):
    history = history or []
    message = message.lower()
    if message.startswith("how many"):
        response = str(random.randint(1, 10))
    elif message.startswith("how"):
        response = random.choice(["Great", "Good", "Okay", "Bad"])
    elif message.startswith("where"):
        response = random.choice(["Here", "There", "Somewhere"])
    else:
        response = "I don't know"
    history.append((message, response))
    return history, history

chatbot = gr.Chatbot().style(color_map=("green", "pink"))
demo = gr.Interface(
    chat,
    ["text", "state"],
    [chatbot, "state"],
    allow_flagging="never",
)
if __name__ == "__main__":
    demo.launch()

Parameter	Description
`value` List[Tuple[str, str]] \| Callable \| None default: None	Default value to show in chatbot. If callable, the function will be called whenever the app loads to set the initial value of the component.
`color_map` Dict[str, str] \| None default: None
`label` str \| None default: None	component name in interface.
`every` float \| None default: None	If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
`show_label` bool default: True	if True, will display label.
`visible` bool default: True	If False, component will be hidden.
`elem_id` str \| None default: None	An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.

Class	Interface String Shortcut	Initialization
`gradio.Chatbot`	"chatbot"