{% 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.

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

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.

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

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:

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

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' %}