Introduction to Components

Learn all about components, the building blocks of Gradio.

We'll cover the following

Overview of components

In the lesson The Interface Class, we saw how it took as parameters Gradio components, inputs and outputs. Let’s have a closer look at what a Gradio component is.

Gradio components are the visual and interactive elements in the UI, that are responsible for accepting user input and displaying output. They differ from a typical input and output of a Python function in two key ways:

  • Include preprocessing steps that convert user data submitted through the browser to something that can be passed into a Python function

  • Include postprocessing steps to convert values returned by a Python function, into something that can be displayed in a browser

The flowchart below illustrates how this works.

Press + to interact
Illustration of preprocessing and postprocessing in Gradio components
Illustration of preprocessing and postprocessing in Gradio components

Previously, we saw examples of using a Textbox input component. This is displayed in the UI as a Textbox for users to enter text. Once entered, in the backend, Gradio has a preprocessing step to convert it into parameters understood by the Python function. The Python function will return an output, and the output component will have a postprocessing step to convert the function output into something that is displayed in the UI.

We will now cover in more detail some key features of components.

Events

Gradio has many pre-built components that will typically cover the majority of use cases. Each of these components comes with certain events that they support.

Events are methods that are triggered by some user action. This is what makes the UI an interactive experience. For example, if we have a Textbox, we can trigger an action to take place whenever the user selects the textbox, or submits, or when the text changes etc. Each component has its associated list of events that can trigger an action.

The actual action that takes place is customizable and similar to an Interface, requiring passing a function that will be triggered upon the event taking place. Throughout the course, there will be plenty of opportunities to see how events can be triggered.

Press + to interact

Value

The most important attribute that every component has is its value.

This value can either be set by the user in the UI/frontend, or set and displayed to the user (depending on if it is interactive or static). This value is also what is sent to the backend, where it is then returned by the user’s function, or triggered by an event. The value goes through many stages, interacting with the frontend and backend.

For this to happen, the format of the value needs to change frequently. This is why we need the preprocessing and postprocessing steps mentioned earlier. For example, if the input is an image, then the value will be an image. However, typically a Python function needs to read this image as a numpy array, so there will be a preprocessing step to convert the image to an array, where this value is then processed and returned as an array. A postprocessing step will then convert this value back to an image to be displayed. All these transformations will happen under the hood if we use an Image component.

Interactive vs. static

Every component in Gradio must have a static and interactive variant.

  • Static version is used when we only want to display a value, and the user will not be interacting with the component and changing its value.

  • Interactive version is used when we want the user to be able to interact with the component and change its value in the UI.

This is clear in the simple example below.

import gradio as gr

with gr.Blocks() as demo:

   # setting interactive=True means user can interact with textbox
   gr.Textbox(value="Welcome to Educative!", interactive=True)

   # setting interactive=False means user can not edit textbox
   gr.Textbox(value="Welcome to Educative!", interactive=False)

demo.launch(server_name="0.0.0.0", server_port=3000)
Gradio example demonstrating interactive vs. static textbox

By setting interactive to True, the user is able to click it and change the text/value. When it is set to False, the text is displayed but we can not interact with it.

Custom components

We have looked at mainly pre-built components from Gradio. However, we can create custom components. This won’t be covered in detail in this course, as there is typically no need to create a custom component. However, it is an option, and we can publish components as Python packages that other users can also use. We can create from a template using one of the existing Gradio components, and write Python and JavaScript to customize for our needs.