The Interface Class

Overview of the Interface class

We start learning about Gradio by first understanding the Interface class. In most web design applications, we must think of building each element of the UI and piecing them together to build an application. The Interface class abstracts away this complexity so that we can create a web-based demo by focusing only on three core components. We will be using the Interface class extensively in the following lessons, so let's spend some time understanding how it works.

The use of the Interface class always requires having some inputs, passing them through a function, and returning the outputs from the function into an output. The inputs are typically an interactive element (but can also be static) in the UI and the outputs are also shown in the UI on the same page. The inputs are passed into the backend where it is processed by a Python function before being returned to the output in the UI.

The screenshot below shows what using an Interface class looks like in the UI. Let’s break it down into three parts:

1. On the left is a UI component asking the user ‘What is your name?’. The text box below the heading ‘What is your name?’ is an input as shown in the UI.

2. This input is passed into a function which does some calculations/operations.

3. The output from the function is displayed on the right-hand side. In our case, it's a welcome message.

We can create such a UI without defining where the input or output components are placed. In fact, no knowledge of any web design is necessary to create such an application. This is what makes Gradio so quick to create applications!