Build an Awesome UI for your Machine Learning Models
How I built a great UI for my PDF-to-audiobook converter
Introduction
One significant challenge for data scientists, data analysts, and machine learning engineers is to showcase and demo their models to non-technical personnel. That often demands additional skills, including frontend development, backend development, and sometimes even devops. Even if you are skilled in these areas, it takes a tremendous amount of time to get the job done. Some libraries can handle this job for you and let you focus more on model development tasks. Gradio is a great example; it’s a Python library that generates an easy-to-use UI for every machine learning model.
This tutorial will explore the library, and show you how to use it for building a PDF-to-Audiobook demo. So, let’s get started!
What is Gradio?
Gradio is an open-source Python library that allows you to build a user interface for machine learning models and deploy it in a few lines of code. If you worked with Dash or Streamlit in python before, it’s similar; however, it integrates directly with notebooks and doesn’t require a separate python script.
How does it work?
It’s simple to use; to render an interface, we need five components: the first three we have the freedom to customize depending on the use-case of your model, and the last two are bound to rendering and deploying:
- An input component: defines the type of the input (file, textbox, image upload, etc.)
- An output component: defines the type of output (file, textbox, label, audio, etc.)
- The callable function: the primary inference function applied to the input and rendered in the output. That function could be anything from a simple print to a pre-trained model — check the list of the components.
- The Interface class: is a python class that maps the callable function with the inputs in a rendered interface.
- The launch() function is responsible for running the application on the gradio server.
Check out more detailed docs and Gradio’s getting started page
Behind the scenes, Gradio uses the Flask framework to build the interface components and runs it locally, then port forwards it on their domain so you have a deployed link (live for 24hr).
If you want a permanent link, you can set it up with a Gradio premium account and Gradio will host your entire application in a docker image on their servers.
Calling the launch() generates a public, shareable link that you can freely share as long as your server is on — as it shares the workspace session dependencies. In the case of working on a colab notebook, a sharable link is always automatically created. It usually looks like this: XXXXX.gradio.app. Although the link is associated with the gradio domain, it is only a proxy for your local server, and it doesn’t collect or store data from the hosted interface.
However, be vigilant that these shareable links are publicly accessible, meaning that anyone can access your interface. Accordingly, don’t expose any sensitive data through the input functions or allow any hazardous modifications to occur on your machine. We can overcome this issue by configuring the auth argument in the launch function by setting a username and a password.
If you set share=False (the default), only a local link is created, which you can share by port-forwarding with particular users.
In the next few steps, we will build a user interface for a PDF-to-audiobook converter using Gradio to get more familiar with the library.
Step 1: Logic for converting text to speech (the backend)
In the following code, I utilized pdfminer to convert pdf files into plain text. Next, I used Google Text-to-Speech to convert the text into audio format.
The function pdf_to_text() will be the callable function that we will pass into the interface.
Step 2: Define the input and output components
You can pass more than one input depending on the functionality and the use case. However, you need to pass multiple inputs as a list (array) structure. In our case, we will pass only one input component and one output component.
The input will be a file; the output will be an audio file. We can decide the kind of either the input or the output by just indicating the component name like the following:
import gradio as griface = gr.Interface(
fn = pdf_to_text,
inputs = 'file',
outputs = 'audio'
)
Step 3: Launch the app
Launching the app is initializing the flask app and triggering the localhost server to show the app. The launch() function has many arguments that allow you to share the interface, debug it on colab, display it inline, or open it in a browser. So, when they come together:
When you run the code snippet above, you will get something like the following:
Suppose you are working on a colab notebook. In that case, you could either use the interface directly or navigate the external URL associated with the gradio app at the top of the page. Then drag any pdf file, hit submit and wait for compiling.
Now, we have an audio version of the input text. Awesome!
We can also use the live URL to temporarily share the application publicly — as we discussed earlier, so people can try it without worrying about installing dependencies and having the essential skills to run the application on the local server. All you need to do is turn the share flag into true inside the launch(share = True) function. However, this link would be available to navigate for 24hr; if you want it hosted on the Gradio host permanently, you might consider creating a Gradio premium account.
Furthermore, we can turn the flag “live” to true inside the interface function for the synchronous response. You can also add a title, description, and even write an article or a report describing the interface. These arguments can accept text in either markdown or HTML, isn’t that awesome! You can check all the available interface options here.
Here is the final application after adding the previous features into the interface function:
As illustrated below, the paragraph we added resulted in creating a new div under the <p> tag with a class named article.
Deployment
To maintain a permanent link for the interface, you may need to subscribe to Gradio, which costs $7 per month. It is essential to subscribe with the same account of your GitHub repo. All you need to do is pick the project repository, branch name, executable file name, and the email you wish to receive the notification.
They are allowing everyone to deploy a free link in February using the FEBRUARY promo code
Once you hit the launch button, it would build the interface — it may take several minutes depending on the application size.
Finally, we have a permanent URL for the interface, you can try it live here.
It also looks neat and responsive on mobile devices 👌
If you navigate back to your account, you have the option to publish the interface with the community at the Gradio Hub.
Furthermore, you can access the deployment errors from the Logs link.
Closing notes
I hope this short article gave you a comprehensive understanding of using the gradio library. Once your work is live, you can have more feedback that ultimately empowers you to enhance the model. It is an iterative process, and feedback is an essential part of it. Using gradio could make this step more comfortable and agile, allowing you to focus exclusively on improving the model. If you have any questions, please comment on the comment section below; I would love to help. Thanks for reading!
