Event Listeners with Gradio

Event Listeners

In this lesson, we will consolidate our base knowledge of Gradio by learning how to introduce more interactivity to our applications. We will take a deeper dive into understanding Event Listeners.

Event Listeners allow you to capture and respond to user interactions with the UI components that have been defined in Gradio Blocks. They initiate a predefined process if a specific event occurs. For each Gradio component, different events have been prebuilt which respond to different triggers.

We have already seen examples of Event Listeners throughout the course. When we looked at Tab while learning about Block layouts in the lesson 'Tabs in Gradio,' we saw how we could trigger an action whenever the Tab is selected. This is an example of an Event Listener, where specifically an action is triggered when the user selects the Tab.

Structure of an Event Listener

Regardless of the specific event (such as select, change, submit, etc.), they all follow the same structure and take the same parameters. At its core, an Event Listener functions very similarly to the Interface class. It takes some input components, passes them into a function, and returns output components. Let’s look at these core parameters below:

• fn: This is the function that is called when this event is triggered. For example, we can make a call to a machine learning model’s prediction function in response to a specific event.

• inputs: Input component/list of input components that will be passed as inputs to the function fn. If the function doesn’t require inputs, this can be left as None.

• outputs: Output component/list of output components that will be returned as outputs from the function fn. If the function returns no outputs, this can be left as None.

Example

We demonstrate how an Event Listener works with a simple example.