10 Building Web-Based UI using Gradio
This chapter covers
- Building basic UI using Gradio
- Configuring and customizing your Gradio application
- Sharing and deploying your Gradio application on HuggingFace Spaces
- Creating a chatbot UI for chatbot applications
Imagine you have just spent weeks coding your machine learning projects and it is finally done! Now, you are eager show it off to your friends and hopefully it will impress your boss. But there is just one more thing you need to do – create a nice shiny front-end so that you can impress your users. But while developers excel in technical aspects and problem-solving, their strengths may not always align with creative design. So how do you quickly come up with a nice web front-end that can interface with your machine learning models?
Introducing Gradio, an open-source Python package that makes it very easy for you to quickly build a demo web application to showcase your machine learning applications. What’s more, with a single click you can share a link to your demo application using Gradio’s built-in sharing feature.
10.1 Basics of Gradio
To install the Gradio package, you can use the pip command in Jupyter notebook:
!pip install gradio
At the time of writing, the version of the Gradio Python package used is 5.18.0.
Let’s start by exploring the basics of how Gradio works. We will create a simple Gradio application and then dive into how it works and how you can deploy them in production environments. Specifically, you will learn: