A guide for creating UI and deploying machine learning model with Streamlit vs Gradio
Building and training a machine learning model with good accuracy or performance is not enough. A Machine learning model adds more value when deployed to production and is helpful to everyone, especially people who are not in the machine learning field. Deploying an ML model to production involves a lot of steps and can be very complex. Sometimes it requires building a web app. To deploy an ML model as a web app, we need to create a user interface(front end); anyone can interact with our model through the user interface.
Presently Streamlit and Gradio are the most popular libraries used in creating a user interface(UI) for deploying a machine learning model as a web app. These libraries also help in providing cloud infrastructure to host the web app.
This article compares Streamlit and Gradio. These two libraries are used to deploy a prototype of your machine learning model. For instance, you are creating a demo for your team. It is also suitable for deploying models used by a small and limited number of people. Presently they are not ideal for large scale deployment.
Gradio
Gradio offers a way to create a shareable interface for your machine learning model and other python functions with only a few lines of code. Gradio allows you to quickly create customizable UI components around your TensorFlow, PyTorch models, or even arbitrary Python functions. Gradio creates a web interface that is divided into two parts. The left displays information and components relating to the input data, while the right displays information and components about the output. It integrates well with python notebooks and can also create a webpage.
Installing Graido
Import Gradio
You can import gradio using the following code
Gradio API
The most crucial class in Gradio is the Interface class. The Interface class has three required augments.
- Fn — the function to wrap, the function will accept the input data.
- Inputs — input component types which could be an image, textbox, checkbox, etc. You can also provide a list of inputs.
- Outputs — output component types, it has similar types to the input types.
The components in the outputs augment will display on the right side of the web page, while the components in the inputs augment will display on the left side of the image. In this example, the input is an image, and the output is the predicted label of the image produced by a machine learning model. Check the full documentation and examples of gradio projects.
After supplying the augments to the Interface class, call the launch function. The launch function as an augment called share, when set to true(share=Ture), it provides a link(XXXXX.gradio.app. ) you can share with others. This link expires after 72 hours. The share augment is set to false by default, which means you can only access the web app on your local machine.
Run app
On your terminal, run the following code.
Gradio Hosting
To deploy your model permanently, to make your model always available, Gradio provides a service called Hosted. Hosted help you provide a permanent and persistent URL to access your model. In the background, Gradio provides a Python 3.7 container with about 1GB to 5GB ram, then clone your repository into it.
First, you need to sign in to gradio.app/hosted, connect your GitHub repo to Gradio infrastructure to deploy and host your ML model. Ensure your repo has a requirement.txt file in the root folder, which contain all your dependencies. Gradio creates a permanent URL(link) that does not expire. When you update your Github repo, the code version deploy updates automatically. The good thing is that the URL does not change after an update. Gradio charge $7/month for Hosted.
For deploying privately, Gradio provides other pricing options.
Image classification with Gradio
Streamlit
Streamlit is a library used for building and sharing data apps. In our use case, the data app is a machine learning model. Streamlit creates a web app interacting with a machine learning model. Streamlit runs in a fast, interactive loop which means once you save your code, you see the effect immediately on your UI without rerunning the code.
Streamlit principles
- Building apps iteratively and with few lines of code
- Adding a widget is the same as declaring a variable
- Effortlessly share, manage and collaborate on your apps
Install Streamlit
Import Streamlit
Streamlit API
Streamlit is an extensive library with lots of components and functionalities. Full documentation and examples of projects built with streamlit.
Display Text
st.title, st.write, st.markdown, st.text and much more can be used to write text on the web page
Display Data
st.dataframe, st.table, st.json, st.metric are used to display data.
Display Charts
st.line_chart, st.area_chart, st.bar_chart, st.pyplot and more are used to create chart.
Display Media
st.image, st.audio, and st.video can be used to display media
Display Widgets
st.button, st.checkbox, st.radio, st.slider, and st.text_input are used to create widget.
Image classification with Streamlit
Run App
Streamlit Hosting
Streamlit web apps can be hosted on streamlit cloud. First request for an invite. Once you have been accepted, connect your streamlit profile to your github repo. Please, ensure your github repo has a requirements.txt file. Streamlit installs the dependencies in your requirements.txt file. Check out Streamlit cloud pricing.
Streamlit vs Gradio
This is the link to the full code for the image classification with gradio and streamlit.
In this article, we went through the installation and use of Gradio and Streamlit to automatically create a user interface for a machine learning model. We also covered how to deploy a model with these libraries. Finally, we compare both libraries.
Streamlit and Gradio are excellent libraries. You should decide the one to use based on your use case.
Originally published at https://trojrobert.github.io on October 2, 2021.