Installation of Gradio UI

Introduction: 

 One significant aspect of building a machine learning project is an excellent user interface. The interface must be good enough that any non-technical person can exhibit the dynamics of the project. Data analysts, data scientists, and programmers need a module to create a user-friendly interface. There are various options for creating a user interface for any machine learning model like the commonly used HTML, CSS, and javascript. Well, to solve the UI interface problem, Gradio comes to the rescue.

 Gradio is an open-source library in python for creating user interfaces that are simple to use, customizable for any ML or deep learning model, or any arbitrary function. A gradio user interface can be easily created with just a few lines of code. Gradio can work with any part written in python to build a very decent user interface.

Gradio consists of three parameters:

1. fn: A function that performs the central operation of the user interface

2. inputs: the input component type

3. outputs: the output component type

Gradio also provides us with various customizable components like textbox, button, file dialogs, check box, etc. It supports multiple inputs and outputs, which is the most basic requirement for a user interface built for a machine learning model. It is also used to perform various comparative analyses for different machine learning models.

Now, let’s build a Gradio UI for a Translation model:  

Installation of Gradio library: 

pip install gradio

Gradio library is available in the pip package. We can easily install it with the pip command.

Implementation of Translation application with gradio library:

import gradio as gr

# Function
def trans_english_to_hindi(text):
  response=English_to_Hindi(text)
  return response
  
# Inputs 
input_text=gr.inputs.Textbox(lines=7, placeholder=None, numeric=False, type="str", label="Enter text in English")
# Outputs
output_text = gr.outputs.Textbox(label="Translated Text in Hindi")
# Interface
gr.Interface(trans_english_to_hindi,inputs=input_text, outputs=output_text,title="English to Hindi Translation").launch()

As we can see, first of all, we are importing the Gradio library. As we know that Gradio consists of three parameters:

1) Fn: In the function part, here we are using the trans_english_to_hindi() function, which contains the function English_to_Hindi(), which involves the logic for translating English to Hindi language translation using Huggingface library.

2) Inputs: In the input part, we are using gr.inputs.Textbox library function, which will introduce a textbox for our input text.

3) Outputs: In the output part, we are using gr.inputs.Textbox library function, which will give us the textbox for our output text for translated text prediction.

In the last line, we have used gr.Interface library function which will integrate all the three parameters of our application i.e. function, inputs, and outputs.

After executing this piece of code. Gradio will give us the external URL link, which is sharable and will expire in 24 hours.

As you can see, with just a few lines of code, we get a beautiful User interface which saves us a lot of time.

Conclusion: 

It can be concluded that gradio provides a more straightforward, easier, and more user-friendly user interface even for beginners. Future scope in Gradio involves more customizations that can also be done for a superb UI. We recommend using this UI for comparing the robustness of different models.