Gradio — Build, deploy, and share your Machine Learning Models —

Ismailouahbi
5 min readFeb 24, 2023

--

Gradio

In my previous article, I described how visualpython could help non-programmers run their EDA processes easily & gain time. Since this kind of tutorial has helped a lot of beginners diving into the world of data science, I’ve decided to start a series of hands-on ML tools in which I will share with you unique tools to help you reduce time and focus on what is important.

Our tool today is named Gradio, which is a new and fast way to demo your machine-learning models using interactive web interfaces.

What can Gradio create?

  • Interfaces (web-based GUI)
Gradio Docs
  • Components (ready-to-use components)
button component example (Gradio Docs)
  • Helpers (methods to interact with components)
Flip image helper (Gradio Docs)
  • Routes (interact with API’s)
Request example (Gradio Docs)

Now that we know some basic functionalities of Gradio let’s discover more during my own demonstration.

A step-by-step guide:

To demonstrate what I’m talking about, I’m going to write down the steps to follow in order to use this tool as well as an example from my jupyter notebook, Enjoy!

1- Install the package:

pip install gradio

2- Hello world demo:

# import gradio package
import gradio as gr

# define a function that receives a name and displays "hello name!"
def greet(name):
return "Hello " + name + "!"

# the gradio Interface class
### with:
##fn: the function to wrap a UI around
##inputs: which component(s) to use for the input
##outputs: which component(s) to use for the output

demo = gr.Interface(fn=greet, inputs="text", outputs="text")

# launch the app!
demo.launch()
Hello world demo

3- Share the Hello world demo:

To create a public link, set `share=True` in launch()

Let’s do it!

Introducing Vondy — the ultimate AI-powered platform revolutionizing the way you accomplish tasks. With Vondy, you gain access to a diverse range of powerful apps, all driven by cutting-edge artificial intelligence. From simplifying complex tasks to enhancing productivity, Vondy empowers you to achieve more than ever before. Get started today and experience the limitless possibilities.

vondy
# import gradio package
import gradio as gr

# define a function that receives a name and displays "hello name!"
def greet(name):
return "Hello " + name + "!"

# the gradio Interface class
### with:
##fn: the function to wrap a UI around
##inputs: which component(s) to use for the input
##outputs: which component(s) to use for the output

demo = gr.Interface(fn=greet, inputs="text", outputs="text")

# launch the app and create shareable links!
demo.launch(share=True)

This outputs the following things:

Create shareable link

Now I’m able to access my GUI locally(localhost) or via a public link(using huggingface platform), let’s demonstrate that!

4- Local access to the Hello world demo:

LocalHost access

5- Public access to the Hello world demo:

well, Gradio gives you a shareable public link but, it expires within 75 hours.

Let’s jump to hugginface platform!

Hugging Face Spaces provides the infrastructure to permanently host your machine learning model for free!

After signing up to the platform and confirming my account, I created a new space like shown in the below image

create new space in huggingface

After that, I pushed my script.py file to the repository created,

push and commit to the space

After that, I switched to the app section where I can preview my app

preview the app within huggingface interface
  • Get the app link:

Just click the right button within huggingface interface and select “Embed this Space” and a pop-up menu appears showing you a lot of options:

various options to make your app accessible

Success! I can now share the app with my friends and discover it using various devices!

Refer to https://ismailouahbi-hello-world-demo.hf.space to preview this app and let me know if you’ve enjoyed this article!

  • For more:

Sharing Your App (gradio.app)

Thanks for reading.

Visit my website: Home — IsmailOuahbi.com
Follow me on LinkedIn for more.

Follow me on Twitter.

--

--

Ismailouahbi

I share my unique experiences and insights, unraveling the complexities of machine learning and data science in an engaging and accessible manner.