New to Gradio? Start here: Getting Started
Building Demos
Interface
gradio.Interface(ยทยทยท)
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. |
inputs
Optional[str | Component | List[str | Component]] 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
Optional[str | Component | List[str | Component]] 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
Optional[List[Any] | List[List[Any]] | str] 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. 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
Optional[bool] 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
Optional[Callable | str] 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
Optional[str] 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
Optional[str] 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
Optional[str] 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
Optional[str] default: None |
path or url to image to use as display image when the web demo is shared on social media. |
theme
Optional[str] default: None |
Theme to use - right now, only "default" is supported. Can be set with the GRADIO_THEME environment variable. |
css
Optional[str] default: None |
custom css or path to custom css file to use with interface. |
allow_flagging
Optional[str] 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 prediction will be automatically flagged. If "manual", samples are flagged when the user clicks flag button. Can be set with environmental variable GRADIO_ALLOW_FLAGGING; otherwise defaults to "manual". |
flagging_options
List[str] 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
Optional[bool] default: None |
Whether to allow basic telemetry. If None, will use GRADIO_ANALYTICS_ENABLED environment variable if defined, or default to 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 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
Optional[bool] 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 default: None |
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
Optional[int] default: None |
allow up to `max_threads` to be processed in parallel. The default is inherited from the starlette library (currently 40). |
auth
Optional[Callable | Tuple[str, str] | List[Tuple[str, str]]] 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
Optional[str] 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: True |
If True, any errors in the interface will be printed in the browser console log |
server_name
Optional[str] 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
Optional[int] 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 default: 900 |
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
Optional[str] 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
Optional[str] 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
Optional[str] 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
Optional[str] 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. |
load
gradio.Interface.load(ยทยทยท)
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"), can include the `src` as prefix (e.g. "models/gpt2") |
src
Optional[str] default: None |
the source of the model: `models` or `spaces` (or empty if source is provided as a prefix in `name`) |
api_key
Optional[str] default: None |
optional api key for use with Hugging Face Hub |
alias
Optional[str] default: None |
optional string used as the name of the loaded model instead of the default name |
from_pipeline
gradio.Interface.from_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 |
---|---|
pipeline
transformers.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 |
---|---|
comet_ml
comet_ml.Experiment default: None |
If a comet_ml Experiment object is provided, will integrate with the experiment and appear on Comet dashboard |
wandb
ModuleType('wandb') default: None |
If the wandb module is provided, will integrate with it and appear on WandB dashboard |
mlflow
ModuleType('mlflow') default: None |
If the mlflow module is provided, will integrate with the experiment and appear on ML Flow dashboard |
Step-by-step Guides
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
HuggingFaceDatasetSaver
gradio.HuggingFaceDatasetSaver(ยทยทยท)
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
Optional[str] 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
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.
TabbedInterface
gradio.TabbedInterface(ยทยทยท)
A TabbedInterface is created by providing a list of Interfaces, each of which gets rendered in a separate tab.
Parameter | Description |
---|---|
interface_list
List[Interface] required |
a list of interfaces to be rendered in tabs. |
tab_names
Optional[List[str]] default: None |
a list of tab names. If None, the tab names will be "Tab 1", "Tab 2", etc. |
theme
str default: "default" |
which theme to use - right now, only "default" is supported. |
analytics_enabled
Optional[bool] default: None |
whether to allow basic telemetry. If None, will use GRADIO_ANALYTICS_ENABLED environment variable or default to True. |
css
Optional[str] default: None |
custom css or path to custom css file to apply to entire Blocks |
Parallel
gradio.Parallel(ยทยทยท)
Creates a new Interface consisting of multiple models in parallel (comparing their outputs). The Interfaces to put in Parallel must share the same input components (but can have different output components).
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 |
Step-by-step Guides
Series
gradio.Series(ยทยทยท)
Creates a new Interface from multiple models 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).
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 |
Step-by-step Guides
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
Optional[bool] 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 interface being created. |
title
str default: "Gradio" |
The tab title to display when this is opened in a browser window. |
css
Optional[str] 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.
Instance method: adds an event for when the demo loads in the browser and returns None.
Parameter | Description |
---|---|
fn
Optional[Callable] default: None |
Instance Method - Callable function |
inputs
Optional[List[Component]] default: None |
Instance Method - input list |
outputs
Optional[List[Component]] default: None |
Instance Method - output list |
name
Optional[str] default: None |
Class Method - the name of the model (e.g. "gpt2"), can include the `src` as prefix (e.g. "models/gpt2") |
src
Optional[str] default: None |
Class Method - the source of the model: `models` or `spaces` (or empty if source is provided as a prefix in `name`) |
api_key
Optional[str] default: None |
Class Method - optional api key for use with Hugging Face Hub |
alias
Optional[str] default: None |
Class Method - optional string used as the name of the loaded model instead of the default name |
Step-by-step Guides
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 |
---|---|
visible
bool default: True |
If False, this will be hidden but included in the Blocks config file (its visibility can later be updated). |
render
bool default: True |
If False, this will not be included in the Blocks config file at all. |
Step-by-step Guides
Column
with gradio.Column():
Column is a layout element within Blocks that renders all children vertically.
Example Usage
with gradio.Blocks() as demo:
with gradio.Row():
with gradio.Column():
text1 = gr.Textbox()
text2 = gr.Textbox()
with gradio.Column():
btn1 = gr.Button("Button 1")
btn2 = gr.Button("Button 2")
Parameter | Description |
---|---|
visible
bool default: True |
If False, column will be hidden but included in the Blocks config file (its visibility can later be updated). |
variant
str default: "default" |
column type, 'default' (no background) or 'panel' (gray background color and rounded corners) |
Step-by-step Guides
Tabs
with gradio.Tabs():
Tabs is a layout element within Blocks that can contain multiple TabItem's. Each TabItem gets rendered as a individual tab. The TabItem's must be nested within the Tabs context.
Example Usage
with gradio.Blocks() as demo:
with gradio.Tabs():
with gradio.TabItem("Lion"):
gr.Image("lion.jpg")
gr.Button("New Lion")
with gradio.TabItem("Tiger"):
gr.Image("tiger.jpg")
gr.Button("New Tiger")
Parameter | Description |
---|---|
selected
Optional[int | str] default: None |
The currently selected tab. Must correspond to an id passed to the one of the child TabItems. Defaults to the first TabItem. |
Step-by-step Guides
Group
with gradio.Group():
Group is a layout element within Blocks which groups together children so that they do not have any padding or margin between them.
Example Usage
with gradio.Group():
gr.Textbox(label="First")
gr.Textbox(label="Last")
Parameter | Description |
---|---|
visible
bool default: True |
If False, this will be hidden but included in the Blocks config file (its visibility can later be updated). |
render
bool default: True |
If False, this will not be included in the Blocks config file at all. |
Step-by-step Guides
No guides yet, contribute a guide about Group
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 |
---|---|
visible
bool default: True |
If False, this will be hidden but included in the Blocks config file (its visibility can later be updated). |
render
bool default: True |
If False, this will not be included in the Blocks config file at all. |
Step-by-step Guides
No guides yet, contribute a guide about Box
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.
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()
Parameter | Description |
---|---|
value
Optional[str | Callable] 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
Optional[str] default: None |
placeholder hint to provide behind textarea. |
label
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
interactive
Optional[bool] 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
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"textbox" |
Uses default values |
"text" |
Uses lines=1 |
"textarea" |
Uses lines=7 |
Methods
change
gradio.Textbox.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
submit
gradio.Textbox.submit(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.Textbox.style(ยทยทยท)
This method can be used to change the appearance of the component.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will round the corners. If a tuple, will round corners according to the values in the tuple, starting from top left and proceeding clock-wise. |
border
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will add border. If a tuple, will add edges according to the values in the tuple, starting from top and proceeding clock-wise. |
container
Optional[bool] default: None |
If True, will place the component in a container - providing some extra padding around the border. |
Step-by-step Guides
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()
Parameter | Description |
---|---|
value
Optional[float | Callable] default: None |
default value. If callable, the function will be called whenever the app loads to set the initial value of the component. |
label
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
interactive
Optional[bool] 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
Optional[str] 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
Optional[int] 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. |
Interface String Shortcut | Initialization |
---|---|
"number" |
Uses default values |
Methods
change
gradio.Number.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
submit
gradio.Number.submit(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.Number.style(ยทยทยท)
This method can be used to change the appearance of the component.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will round the corners. If a tuple, will round corners according to the values in the tuple, starting from top left and proceeding clock-wise. |
border
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will add border. If a tuple, will add edges according to the values in the tuple, starting from top and proceeding clock-wise. |
container
Optional[bool] 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
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()
Parameter | Description |
---|---|
minimum
float default: 0 |
minimum value for slider. |
maximum
float default: 100 |
maximum value for slider. |
value
Optional[float | Callable] 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
Optional[float] default: None |
increment between slider values. |
label
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
interactive
Optional[bool] 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
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"slider" |
Uses default values |
Methods
change
gradio.Slider.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.Slider.style(ยทยทยท)
This method can be used to change the appearance of the slider.
Parameter | Description |
---|---|
container
Optional[bool] default: None |
If True, will place the component in a container - providing some extra padding around the border. |
Step-by-step Guides
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()
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
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
interactive
Optional[bool] 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
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"checkbox" |
Uses default values |
Methods
change
gradio.Checkbox.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.Checkbox.style(ยทยทยท)
This method can be used to change the appearance of the component.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will round the corners. If a tuple, will round corners according to the values in the tuple, starting from top left and proceeding clock-wise. |
border
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will add border. If a tuple, will add edges according to the values in the tuple, starting from top and proceeding clock-wise. |
container
Optional[bool] 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
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()
Parameter | Description |
---|---|
choices
Optional[List[str]] default: None |
list of options to select from. |
value
List[str] | Callable 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
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
interactive
Optional[bool] 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
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"checkboxgroup" |
Uses default values |
Methods
change
gradio.CheckboxGroup.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.CheckboxGroup.style(ยทยทยท)
This method can be used to change the appearance of the CheckboxGroup.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will round the corners. If a tuple, will round corners according to the values in the tuple, starting from top left and proceeding clock-wise. |
item_container
Optional[bool] default: None |
If True, will place the items in a container. |
container
Optional[bool] 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
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()
Parameter | Description |
---|---|
choices
Optional[List[str]] default: None |
list of options to select from. |
value
Optional[str | Callable] 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
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
interactive
Optional[bool] 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
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"radio" |
Uses default values |
Methods
change
gradio.Radio.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.Radio.style(ยทยทยท)
This method can be used to change the appearance of the radio component.
Parameter | Description |
---|---|
item_container
Optional[bool] default: None |
If True, will place items in a container. |
container
Optional[bool] 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
Dropdown
gradio.Dropdown(ยทยทยท)
Creates a dropdown of which only one entry 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()
Parameter | Description |
---|---|
choices
Optional[List[str]] default: None |
list of options to select from. |
value
Optional[str | Callable] default: None |
default value 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. |
label
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
interactive
Optional[bool] 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
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"dropdown" |
Uses default values |
Methods
change
gradio.Dropdown.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.Dropdown.style(ยทยทยท)
This method can be used to change the appearance of the Dropdown.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will round the corners. If a tuple, will round corners according to the values in the tuple, starting from top left and proceeding clock-wise. |
border
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will add border. If a tuple, will add edges according to the values in the tuple, starting from top and proceeding clock-wise. |
container
Optional[bool] 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
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`. In the special case, 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} 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(), clear(), edit()
Parameter | Description |
---|---|
value
Optional[str | PIL.Image | np.narray] 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] 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 default: "editor" |
Tools used for editing. "editor" allows a full screen editor, "select" provides a cropping and zoom tool, "sketch" allows you to create a mask over the image and both the image and mask are passed into the function. |
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, "file" produces a temporary file object whose path can be retrieved by file_obj.name, "filepath" passes a str path to a temporary file containing the image. |
label
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
interactive
Optional[bool] 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
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"image" |
Uses default values |
"webcam" |
Uses source="webcam" |
"sketchpad" |
Uses image_mode="L", source="canvas", shape=(28, 28), invert_colors=True |
"pil" |
Uses type="pil" |
Methods
edit
gradio.Image.edit(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
queue
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
clear
gradio.Image.clear(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
queue
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
change
gradio.Image.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
stream
gradio.Image.stream(ยทยทยท)
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 |
change
gradio.Image.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
Step-by-step Guides
Video
gradio.Video(ยทยทยท)
Creates an video component that can be used to upload/record videos (as an input) or display videos (as an output).
As input: passes the uploaded video as a {str} filepath whose extension can be set 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(), play(), pause(), stop()
Parameter | Description |
---|---|
value
Optional[str | Callable] 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
Optional[str] 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
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
interactive
Optional[bool] 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
Optional[str] 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 webcma will be mirrored. Default is True. |
Interface String Shortcut | Initialization |
---|---|
"video" |
Uses default values |
"playablevideo" |
Uses format="mp4" |
Methods
change
gradio.Video.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
clear
gradio.Video.clear(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
queue
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
play
gradio.Video.play(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
queue
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
pause
gradio.Video.pause(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
Optional[AnyStr] default: None |
Defining this parameter exposes the endpoint in the api docs |
queue
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
stop
gradio.Video.stop(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
queue
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.Video.style(ยทยทยท)
This method can be used to change the appearance of the video component.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will round the corners. If a tuple, will round corners according to the values in the tuple, starting from top left and proceeding clock-wise. |
height
Optional[int] default: None |
Height of the video. |
width
Optional[int] default: None |
Width of the video. |
Step-by-step Guides
No guides yet, contribute a guide about Video
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 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(), play(), pause(), stop()
Parameter | Description |
---|---|
value
Optional[str | Tuple[int, np.array] | Callable] 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
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
interactive
Optional[bool] 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
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"audio" |
Uses default values |
"microphone" |
Uses source="microphone" |
"mic" |
Uses source="microphone" |
Methods
change
gradio.Audio.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
clear
gradio.Audio.clear(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
queue
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
play
gradio.Audio.play(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
queue
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
pause
gradio.Audio.pause(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
Optional[AnyStr] default: None |
Defining this parameter exposes the endpoint in the api docs |
queue
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
stop
gradio.Audio.stop(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
queue
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
stream
gradio.Audio.stream(ยทยทยท)
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 |
style
gradio.Audio.style(ยทยทยท)
This method can be used to change the appearance of the audio component.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will round the corners. If a tuple, will round corners according to the values in the tuple, starting from top left and proceeding clock-wise. |
Step-by-step Guides
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}/{List{bytes}} 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()
Parameter | Description |
---|---|
value
Optional[str | List[str] | Callable] 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". |
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, "binary" returns an bytes object. |
label
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
interactive
Optional[bool] 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
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"file" |
Uses default values |
"files" |
Uses file_count="multiple" |
Methods
change
gradio.File.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
clear
gradio.File.clear(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
queue
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.File.style(ยทยทยท)
This method can be used to change the appearance of the file component.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will round the corners. If a tuple, will round corners according to the values in the tuple, starting from top left and proceeding clock-wise. |
Step-by-step Guides
No guides yet, contribute a guide about File
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}, or {str} path to a csv, which is rendered in the spreadsheet.
Format expected for examples: a {str} filepath to a csv with data.
Supported events: change()
Parameter | Description |
---|---|
value
Optional[List[List[Any]] | Callable] 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
Optional[List[str]] 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
Optional[int | Tuple[int, str]] 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", and "date". |
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
Optional[int] default: 20 |
Maximum number of rows to display at once. Set to None for infinite. |
max_cols
Optional[int] 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
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
interactive
Optional[bool] 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
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"dataframe" |
Uses default values |
"numpy" |
Uses type="numpy" |
"matrix" |
Uses type="array" |
"list" |
Uses type="array" |
Methods
change
gradio.Dataframe.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.Dataframe.style(ยทยทยท)
This method can be used to change the appearance of the DataFrame component.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will round the corners. If a tuple, will round corners according to the values in the tuple, starting from top left and proceeding clock-wise. |
Step-by-step Guides
No guides yet, contribute a guide about Dataframe
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()
Parameter | Description |
---|---|
value
Optional[str | Callable] 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
Optional[str] 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] 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] default: None |
an ordered list of colors to use for each line plot |
label
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
interactive
Optional[bool] 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
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"timeseries" |
Uses default values |
Methods
change
gradio.Timeseries.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.Timeseries.style(ยทยทยท)
This method can be used to change the appearance of the TimeSeries component.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will round the corners. If a tuple, will round corners according to the values in the tuple, starting from top left and proceeding clock-wise. |
Step-by-step Guides
No guides yet, contribute a guide about Timeseries
Variable
gradio.Variable(ยทยทยท)
Special hidden component that stores session state across runs of the demo by the same user. The value of the Variable is cleared when the user refreshes the page.
As input: No preprocessing is performed
As output: No postprocessing is performed
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
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()
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
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"button" |
Uses default values |
Methods
click
gradio.Button.click(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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 |
style
gradio.Button.style(ยทยทยท)
This method can be used to change the appearance of the button component.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will round the corners. If a tuple, will round corners according to the values in the tuple, starting from top left and proceeding clock-wise. |
full_width
Optional[str] default: None |
If True, the button will span the full width of the container. |
border
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will include a border. If a tuple, will add borders according to values in the tuple, where the elements correspond to top, right, bottom, left edge. |
margin
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
Step-by-step Guides
No guides yet, contribute a guide about Button
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()
Parameter | Description |
---|---|
value
str | Callable 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
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
interactive
Optional[bool] 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
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"colorpicker" |
Uses default values |
Methods
change
gradio.ColorPicker.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
submit
gradio.ColorPicker.submit(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.ColorPicker.style(ยทยทยท)
This method can be used to change the appearance of the component.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will round the corners. If a tuple, will round corners according to the values in the tuple, starting from top left and proceeding clock-wise. |
border
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will add border. If a tuple, will add edges according to the values in the tuple, starting from top and proceeding clock-wise. |
container
Optional[bool] 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
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.
Supported events: change()
Parameter | Description |
---|---|
value
Optional[str | Callable] default: None |
Default value to show in the component. If callable, the function will be called whenever the app loads to set the initial value of the component. |
num_top_classes
Optional[int] default: None |
number of most confident classes to show. |
label
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
visible
bool default: True |
If False, component will be hidden. |
elem_id
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"label" |
Uses default values |
Methods
change
gradio.Label.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.Label.style(ยทยทยท)
This method can be used to change the appearance of the label component.
Parameter | Description |
---|---|
container
Optional[bool] default: None |
If True, will add a container to the label - providing some extra padding around the border. |
Step-by-step Guides
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).
Supported events: change()
Parameter | Description |
---|---|
value
Optional[List[Tuple[str, str | float | None]] | Dict | Callable] 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] 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
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
visible
bool default: True |
If False, component will be hidden. |
elem_id
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"highlightedtext" |
Uses default values |
"highlight" |
Uses default values |
Methods
change
gradio.HighlightedText.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.HighlightedText.style(ยทยทยท)
This method can be used to change the appearance of the HighlightedText component.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will round the corners of the text. If a tuple, will round the corners according to the values in the tuple, starting from top left and proceeding clock-wise. |
color_map
Optional[Dict[str, str]] default: None |
Map between category and respective colors. |
container
Optional[bool] default: None |
If True, will place the component in a container - providing some extra padding around the border. |
Step-by-step Guides
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()
Parameter | Description |
---|---|
value
Optional[str | Callable] default: None |
Default value. If callable, the function will be called whenever the app loads to set the initial value of the component. |
label
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
visible
bool default: True |
If False, component will be hidden. |
elem_id
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"json" |
Uses default values |
Methods
change
gradio.JSON.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.JSON.style(ยทยทยท)
This method can be used to change the appearance of the JSON component.
Parameter | Description |
---|---|
container
Optional[bool] 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
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()
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
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
visible
bool default: True |
If False, component will be hidden. |
elem_id
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"html" |
Uses default values |
Methods
change
gradio.HTML.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
Step-by-step Guides
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]}, and displays them.
Parameter | Description |
---|---|
value
Optional[List[np.ndarray | PIL.Image | str] | Callable] 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
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
visible
bool default: True |
If False, component will be hidden. |
elem_id
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"gallery" |
Uses default values |
Methods
style
gradio.Gallery.style(ยทยทยท)
This method can be used to change the appearance of the gallery component.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will round the corners. If a tuple, will round corners according to the values in the tuple, starting from top left and proceeding clock-wise. |
grid
Optional[int | Tuple[int, int, int, int, int, int]] default: None |
|
height
Optional[str] default: None |
Height of the gallery. |
container
Optional[bool] 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
Chatbot
gradio.Chatbot(ยทยทยท)
Displays a chatbot output showing both user submitted messages and responses
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.
Supported events: change()
Parameter | Description |
---|---|
value
Optional[List[Tuple[str, str]] | Callable] 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] default: None |
|
label
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
visible
bool default: True |
If False, component will be hidden. |
elem_id
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"chatbot" |
Uses default values |
Methods
change
gradio.Chatbot.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.Chatbot.style(ยทยทยท)
This method can be used to change the appearance of the Chatbot component.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, whether the chat bubbles should be rounded. If a tuple, will round the corners of the bubble according to the values in the tuple, starting from top left and proceeding clock-wise. |
color_map
Optional[List[str, str]] default: None |
List containing colors to apply to chat bubbles. |
Step-by-step Guides
No guides yet, contribute a guide about Chatbot
Model3D
gradio.Model3D(ยทยทยท)
Component allows users to upload or view 3D Model files (.obj, .glb, or .gltf).
As input: This component passes the uploaded file as a {str} filepath.
As output: expects function to return a {str} path to a file of type (.obj, glb, or .gltf)
Supported events: change(), clear(), edit()
Parameter | Description |
---|---|
value
Optional[str | Callable] default: None |
path to (.obj, glb, or .gltf) file to show in model3D viewer. If callable, the function will be called whenever the app loads to set the initial value of the component. |
clear_color
List[float] default: None |
background color of scene |
label
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
visible
bool default: True |
If False, component will be hidden. |
elem_id
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"model3d" |
Uses default values |
Methods
change
gradio.Model3D.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
edit
gradio.Model3D.edit(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
queue
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
clear
gradio.Model3D.clear(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
queue
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
style
gradio.Model3D.style(ยทยทยท)
This method can be used to change the appearance of the Model3D component. Args: rounded: If True, will round the corners of the Model3D component. If a tuple, will round the corners of the Model3D according to the values in the tuple, starting from top left and proceeding clock-wise.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
Step-by-step Guides
Plot
gradio.Plot(ยทยทยท)
Used to display various kinds of plots (matplotlib, plotly, or bokeh are supported)
As input: this component does *not* accept input.
As output: expects either a {matplotlib.figure.Figure}, a {plotly.graph_objects._figure.Figure}, or a {dict} corresponding to a bokeh plot (json_item format)
Supported events: change(), clear()
Parameter | Description |
---|---|
value
Optional[Callable] default: None |
Optionally, supply a default plot object to display, must be a matplotlib, plotly, or bokeh figure. If callable, the function will be called whenever the app loads to set the initial value of the component. |
label
Optional[str] default: None |
component name in interface. |
show_label
bool default: True |
if True, will display label. |
visible
bool default: True |
If False, component will be hidden. |
elem_id
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"plot" |
Uses default values |
Methods
change
gradio.Plot.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
clear
gradio.Plot.clear(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
queue
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
Step-by-step Guides
No guides yet, contribute a guide about Plot
Markdown
gradio.Markdown(ยทยทยท)
Used to render arbitrary Markdown output.
As input: this component does *not* accept input.
As output: expects a valid {str} that can be rendered as Markdown.
Supported events: change()
Parameter | Description |
---|---|
value
str | Callable default: "" |
Value to show in Markdown component. If callable, the function will be called whenever the app loads to set the initial value of the component. |
visible
bool default: True |
If False, component will be hidden. |
elem_id
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"markdown" |
Uses default values |
Methods
change
gradio.Markdown.change(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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
Optional[bool] default: None |
If True, will place the request on the queue, if the queue exists |
Step-by-step Guides
Dataset
gr.Dataset(components, samples)
Used to create an output widget for showing datasets. Used to render the examples box.
As input: this component does *not* accept input.
As output: expects a {list} of {lists} corresponding to the dataset data.
Supported events: click()
Parameter | Description |
---|---|
components
List[Component] | List[str] required |
Which component types to show in this dataset widget, can be passed in as a list of string names or Components instances |
samples
List[List[Any]] required |
a nested list of samples. Each sublist within the outer list represents a data sample, and each element within the sublist represents an value for each component |
headers
Optional[List[str]] default: None |
Column headers in the Dataset widget, should be the same len as components. If not provided, inferred from component labels |
type
str default: "values" |
'values' if clicking on a sample should pass the value of the sample, or "index" if it should pass the index of the sample |
visible
bool default: True |
If False, component will be hidden. |
elem_id
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"dataset" |
Uses default values |
Methods
click
gradio.Dataset.click(ยทยทยท)
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 required |
Callable function |
inputs
List[Component] required |
List of inputs |
outputs
List[Component] required |
List of outputs |
api_name
AnyStr default: None |
Defining this parameter exposes the endpoint in the api docs |
status_tracker
Optional[StatusTracker] default: None |
StatusTracker to visualize function progress |
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 |
style
gradio.Dataset.style(ยทยทยท)
This method can be used to change the appearance of the Dataset component.
Parameter | Description |
---|---|
rounded
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will round the all corners of the dataset. If a tuple, will round the corners of the dataset according to the values in the tuple, starting from top left and proceeding clock-wise. |
border
Optional[bool | Tuple[bool, bool, bool, bool]] default: None |
If True, will include a border for all edges of the dataset. If a tuple, will add edges according to the values in the tuple, starting from top and proceeding clock-wise. |
Step-by-step Guides
No guides yet, contribute a guide about Dataset
Interpretation
gradio.Interpretation(ยทยทยท)
Used to create an interpretation widget for a component.
As input: this component does *not* accept input.
As output: expects a {dict} with keys "original" and "interpretation".
Parameter | Description |
---|---|
component
Component required |
Which component to show in the interpretation widget. |
visible
bool default: True |
Whether or not the interpretation is visible. |
elem_id
Optional[str] 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. |
Interface String Shortcut | Initialization |
---|---|
"interpretation" |
Uses default values |
Step-by-step Guides
Components Helpers
Gradio includes helper classes that abstract over existing components. The goal of these classes is to help you add common functionality to your app without having to repeatedly create the same components and event listeners.
Examples
gradio.Examples(ยทยทยท)
This class is a wrapper over the Dataset component and can be used to create Examples for Blocks / Interfaces. Populates the Dataset component with examples and assigns event listener so that clicking on an example populates the input/output components. Optionally handles example caching for fast inference.
Parameter | Description |
---|---|
examples
List[Any] | List[List[Any]] | str required |
example inputs that can be clicked to populate specific components. 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. |
inputs
Component | List[Component] required |
the component or list of components corresponding to the examples |
outputs
Optional[Component | List[Component]] default: None |
optionally, provide the component or list of components corresponding to the output of the examples. Required if `cache` is True. |
fn
Optional[Callable] default: None |
optionally, provide the function to run to generate the outputs corresponding to the examples. Required if `cache` is True. |
cache_examples
bool default: False |
if True, caches examples for fast runtime. If True, then `fn` and `outputs` need to be provided |
examples_per_page
int default: 10 |
how many examples to show per page (this parameter currently has no effect) |
Step-by-step Guides
Update
When a function passed into a Gradio Interface or a Blocks events returns a typical value, it updates the value of the output component. But it is also possible to update the properties of an output component (such as the number of lines of a `Textbox` or the visibility of an `Image`) by returning the component's `update()` function, which takes as parameters any of the constructor parameters for that component. Here's an example:
update
gradio.update(ยทยทยท)
Updates component properties. This is a shorthand for using the update method on a component. For example, rather than using gr.Number.update(...) you can just use gr.update(...). Note that your editor's autocompletion will suggest proper parameters if you use the update method on the component.
Example Usage
# Blocks Example
import gradio as gr
with gr.Blocks() as demo:
radio = gr.Radio([1, 2, 4], label="Set the value of the number")
number = gr.Number(value=2, interactive=True)
radio.change(fn=lambda value: gr.update(value=value), inputs=radio, outputs=number)
demo.launch()
# Interface example
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)
gr.Interface(
change_textbox,
gr.Radio(
["short", "long", "none"], label="What kind of essay would you like to write?"
),
gr.Textbox(lines=2),
live=True,
).launch()
Parameter | Description |
---|---|
kwargs
required |
Key-word arguments used to update the component's properties. |