Sign Up
This article is about Artificial Intelligence
Building a UI with GRADIO for Deep Learning Project
By NIIT Editorial
Published on 24/06/2021
10 minutes
The user interface(UI) is the graphical blueprint of an application. One major and important characteristic to keep in mind while building a data science project is a smooth user interface. The interface must be built in such a way that demonstrates the dynamics of the project to even a non-technical person. Therefore, data analysts, data scientists, programmers require a module for developing a user-friendly interface. There are various choices available for developing a user interface for any deep learning model, such as the generally used HTML, CSS, and javascript. On the other side, Tkinter, Gradio, Flask, Django are the user interfaces that can be built using python.
Gradio was released in February 2019 as an open-source library in python for building user interfaces that are straightforward to use and can be easily customized for any machine learning or deep learning model or any arbitrary function. It makes it simpler to play with models in the web browser by just dropping and dragging images, text, recording, etc. and recognizing live output interactively.
Gradio helps build an online GUI in a coding format that is very suitable for exhibiting the model presentation. It is quick, easy to set up, ready to operate, and accessible widely as a public connection. Moreover, it can distantly and parallelly run the model in a machine. Gradio works with a broad range of media-text, pictures, video, and sound. Besides ML models, it can very well be utilized as python code embeddings.
Uses of Gradio
- Demos can be created effortlessly of machine learning codes that are useful for clients/ users/ team members.
- During expansion, we can interactively debug models.
- Developers can get feedback on model performance from users. This helps in improving the model easily and faster.
- It can be incorporated with TensorFlow and PyTorch models for better comprehension.
Gradio consists of three parameters:
1. fn: performs the major operation of the user interface
2. inputs: the input component type
3. outputs: the output component type
Components like buttons, text boxes, checkboxes, file dialogs can be customized in Gradio. Moreover, it promotes multiple inputs and outputs. Gradio can also be used to conduct comparative analysis for diverse models.
Following are steps for building a gradio UI for a resnet50 model:
Libraries like Gradio, TensorFlow, NumPy, requests are imported from gradio, and then modules like Resnet50, preprocess_input are imported from TensorFlow. The library “load_model” is used to load the deep learning model in the code, which is an essential part of any user interface.
The above code is used to load the model using the HDF5 file saved after training the model using a dataset.
After the model is loaded, a function is composed to perform the process of categorizing the arbitrary input provided by the client. This part of the code is essential to make predictions. After the function is written, a list called class names is generated to indicate the classes so that the result can be reflected in the user interface.
Then the input and output components are initialized using the code below:
The last and final step of the code comprises launching the interface. It contains several components like fn, inputs, outputs, title, description, etc.
Gradio also allows the option of multiple inputs and outputs, which is very beneficial for the comparative analysis of two or more deep learning models.
For instance, let's evaluate two deep learning models, Resnet50 and VGG16.
To start with, the same modules are imported, or other modules can also be operated according to the requirements.
As discussed above, two HDF5 files are loaded to the user interface using the library “load_model”
The categories should be the same for both models, which should be specified in the list. Another way to add the categories to the code is by using a return statement in the functions. A list can be used when there are more than three categories to foresee.
The vital component is the function we use to make the prediction. In this case, two functions are needed for two models as shown in the code below:
The next part is the same as the code used for a single model.
Sample images can be used in the user interface so that the user can test UI effortlessly.
The final step of the launching interface includes the new functions, which are enclosed in the brackets, indicating that more functions can be added.
The sample output of the user interface looks like the figure shown below:
To upload the testing image, the user is supposed to click in the area mentioned "click to upload" and get the results, then hit the button in the “output” area. Building a UI with Gradio is easy and requires very few lines of code when compared with HTML or Tkinter.
Endnote
It can be concluded that Gradio provides an easier and more user-friendly User Interface even for new programmers. Gradio accepts endless customization for a better UI. UI can be used for differentiating the robustness of different models. It is fast, effortless to set up, and ready to use and easily shareable as the public link.
SHARE
Data Science Foundation Program (Full Time)
Become an industry ready StackRoute Certified Python Programmer in Data Science. The program is tailor-made for data enthusiasts. It enables learner to become job-ready to join data science practice team and gain experience to grow up as Data Analyst.
Visualise Data using Python and Excel
6 Weeks Full Time Immersive
