{% with title="Gradio Docs", url="https://gradio.app/docs", image="/assets/img/meta-image.png", description="Browse Gradio Documentation and Examples" %} {% include "templates/meta.html" %} {% endwith %}

New to Gradio? Start here: Getting Started

See the Release History

{% if version == 'main' %}

To install Gradio from the latest commit to the main branch, run the following command:

pip install {{ gradio_wheel_url }}
{% endif %}

Building Demos

{% with obj=find_cls("Interface"), is_class=True, parent="gradio" %} {% include "docs/obj_doc_template.html" %} {% endwith %}

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.

{% for flagging_callback in docs["flagging"] %} {% with obj=flagging_callback, is_class=True, parent="gradio" %} {% include "docs/obj_doc_template.html" %} {% endwith %} {% endfor %}

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.

{% with obj=find_cls("TabbedInterface"), parent="gradio" %} {% include "docs/obj_doc_template.html" %} {% endwith %} {% with obj=find_cls("Parallel"), is_class=True, parent="gradio" %} {% include "docs/obj_doc_template.html" %} {% endwith %} {% with obj=find_cls("Series"), is_class=True, parent="gradio" %} {% include "docs/obj_doc_template.html" %} {% endwith %}
{% with obj=find_cls("Blocks"), is_class=True, parent="gradio" %} {% include "docs/obj_doc_template.html" %} {% endwith %}

Block Layouts

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

{% for layout in docs["layout"] %} {% with obj=layout, is_class=True, parent="gradio" %} {% include "docs/obj_doc_template.html" %} {% endwith %} {% endfor %}

Components

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

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

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

{% for component in docs["component"] %} {% for event in ordered_events %} {% endfor %} {% endfor %}
Change Click Submit Edit Clear Play Pause Stream Blur Upload
{{ component["name"] }} {% if event.lower() in component["events-list"] %}

{% else %}

{% endif %}
{% for component in docs["component"] %} {% with obj=component, is_class=True, is_component=True, parent="gradio" %} {% include "docs/obj_doc_template.html" %} {% endwith %} {% endfor %}

Helpers

Gradio includes helper classes and methods that interact with existing components. The goal of these classes and methods is to help you add common functionality to your app without having to rewrite common functions.

{% for component in docs["helpers"] %} {% with obj=component, is_class=True, parent="gradio" %} {% include "docs/obj_doc_template.html" %} {% endwith %} {% endfor %}

Routes

Gradio includes some helper functions for exposing and interacting with the FastAPI app used to run your demo.

{% for component in docs["routes"] %} {% with obj=component, parent="gradio" %} {% include "docs/obj_doc_template.html" %} {% endwith %} {% endfor %}
{% include 'templates/footer.html' %}