A Beginner-Friendly Guide to Building and Hosting Web Apps for Your ML Models

First, we’ll guide you through building an interactive web app with Gradio, giving you a solid foundation in its functionality. Then, we’ll take it a step further by seamlessly integrating your model with HuggingFace Spaces, unlocking its full potential for the world to experience.

Are you ready to streamline your workflow and showcase your AI capabilities? Let’s get started!

What is Gradio?

Gradio is a Python library that lets you create user interfaces for your machine-learning models. It makes it easy to share your models and get feedback from others.

If you’ve used Streamlit before, Gradio works in a similar way. You can install Gradio using pip:

pip install gradio

Creating a Gradio App

Let’s make a simple Gradio app to understand how it works. You can create the app in a Jupyter Notebook or a Python script.

Let’s start by importing the necessary libraries:

import gradio as gr

# Use only if you are using a Jupyter notebook
%load_ext gradio

Gradio Components

Gradio provides pre-built components that you can use to build your app’s interface. Here are some common ones:

Markdown: Displays markdown text in your app.Textbox: Allows users to enter text input.Slider: Allows users to select a numeric value by sliding.Dropdown: This lets users choose one option from a list.Radio: Like a dropdown, but users can only select one option.Checkbox: Allows users to make a yes/no or true/false choice.CheckboxGroup: Let users select one or more options from a list.

You can find the complete list of components here.

Below is an example of how to use these components.

%%blocks
# Use `%%blocks` only if you are using Jupyter Notebook

# Markdown
gr.Markdown(“## Gradio app”)

# Textbox
gr.Textbox(lines=1, label=”Description”, info=”Provide a short description”, placeholder=”Enter your text here…”)

# Slider
gr.Slider(minimum=1, maximum=10, step=1, value=1, label=”Number of drinks”, info=”How many drinks do you want to order?”)

# Radio
gr.Radio(choices=[“Takeaway”, “Dine-in”], label=”Order type”, info=”Do you want to take away or dine in?”, value=”Takeaway”)

# Dropdown
gr.Dropdown(choices=[“Coffee”, “Tea”, “Hot Chocolate”], label=”Type of drink”, info=”What type of drink do you want to order?”, value=”Coffee”)

# Dropdown with multiselect
gr.Dropdown(choices=[“Reading”, “Writing”, “Coding”], label=”Activities”, info=”What do you want to do while drinking?”, value=[“Reading”, “Coding”], multiselect=True)

# Checkbox
gr.Checkbox(label=”Visit”, info=”Do you want to visit the countries this year?”, value=False)

# Checkbox group
gr.CheckboxGroup(choices=[“Australia”, “Canada”, “USA”], label=”Countries”, info=”Where do you want to order from?”, value=[“Australia”, “Canada”])Gradio Components

Simple Gradio App

Let’s put what we’ve learned into practice by creating a simple sentence generator app using Gradio. Here are the steps:

Create a new Python file called app.py and add the following code:import gradio as gr

def sentence_generator(drinks_count, drink_type, order_type, countries, activities, visit):
“”” Generate a sentence based on the inputs “””
return f”I want to order {drinks_count} {drink_type} for {order_type}. I want to visit {‘ and ‘.join(countries)} {‘this year’ if visit else ‘next year’}. I want to do {‘ and ‘.join(activities)}.”

# Slider
drinks_count = gr.Slider(minimum=1, maximum=10, step=1, value=1, label=”Number of drinks”, info=”How many drinks do you want to order?”)

# Dropdown
drink_type = gr.Dropdown(choices=[“Coffee”, “Tea”, “Hot Chocolate”], label=”Type of drink”, info=”What type of drink do you want to order?”, value=”Coffee”)

# Radio
order_type = gr.Radio(choices=[“Takeaway”, “Dine-in”], label=”Order type”, info=”Do you want to take away or dine in?”, value=”Takeaway”)

# Checkbox group
countries = gr.CheckboxGroup(choices=[“Australia”, “Canada”, “USA”], label=”Countries”, info=”Where do you want to order from?”, value=[“Australia”, “Canada”])

# Dropdown with multiselect
activities = gr.Dropdown(choices=[“Reading”, “Writing”, “Coding”], label=”Activities”, info=”What do you want to do while drinking?”, value=[“Reading”, “Coding”], multiselect=True)

# Checkbox
visit = gr.Checkbox(label=”Visit”, info=”Do you want to visit the countries this year?”, value=False)

demo = gr.Interface(
fn=sentence_generator,
inputs=[drinks_count, drink_type, order_type, countries, activities, visit],
outputs=”text”,
examples=[
[2, “Coffee”, “Takeaway”, [“Australia”], [“Reading”], False],
[4, “Tea”, “Dine-in”, [“Australia”, “Canada”], [“Reading”, “Writing”], True],
[1, “Hot Chocolate”, “Takeaway”, [“Australia”, “Canada”, “USA”], [“Reading”, “Writing”, “Coding”], False] ])
demo.launch()Save the file and run it using the command python app.py. This will launch the Gradio app.The output in your terminal/command prompt will display a local URL. Visit this URL in your web browser.Simple Gradio App

If you’d like to experience the app without running it locally, you can visit the deployed version on my Hugging Face space: here

This basic example demonstrates how Gradio allows you to wrap your function (in this case,sentence_generator) and create an interactive UI around it effortlessly.

Here’s what each part of the code does:

The sentence_generator function takes in the values you select from the interface and generates a sentence based on those values. For example, if you select 2 Coffees for Takeaway, want to visit Australia and Canada next year, and want to do Reading and Coding, the sentence will be: “I want to order 2 Coffee for Takeaway. I want to visit Australia and Canada next year. I want to do Reading and Coding.”The next part of the code creates the different components of the user interface, such as sliders, dropdowns, checkboxes, and radio buttons. Each of these components corresponds to a different option you can choose from.
– The drinks_count slider allows you to select the number of drinks you want to order (from 1 to 10).
– The drink_type dropdown allows you to choose the type of drink (Coffee, Tea, or Hot Chocolate).
– The order_type radio button lets you choose whether you want your order for Takeaway or Dine-in.
– The countries checkbox group lets you select one or more countries from the list (Australia, Canada, USA).
– The activities dropdown with multi-select allows you to choose one or more activities you want to do while drinking (Reading, Writing, Coding).
– The visit checkbox lets you specify whether you want to visit the selected countries this year or next year.Finally, the demo object is created using Interface, which combines the sentence_generator function and the user interface components. It also provides some example inputs to demonstrate how the interface works.The demo.launch() line starts the user interface, allowing you to interact with it and generate sentences based on your selections.

Creating UIs with Gradio

Gradio provides two main ways to build web-based user interfaces:

InterfaceBlocks

Interface

The Interface class streamlines the process, allowing you to build a GUI in just a few lines of code. Simply provide:

The functionInput componentsOutput components

Gradio interface automatically generates handy buttons like Clear and Submit for you.

But that’s not all! You can also include example inputs, giving users a glimpse into how your model works with just a click.

Blocks

While Interface offers simplicity, Blocks provide granular control over your UI’s layout, event handling, and data flow between inputs and outputs. This low-level approach empowers you to craft intricate user experiences, including grouping related demos into tabs for seamless navigation.

To harness the power of Blocks, you’ll create a Blocks object and define the layouts, components, and events within its context. Once everything is set up, calling the launch() method brings your creation to life.

Organizing with Block Layouts

Within the Blocks framework, layouts are the key to organizing your components. Gradio offers a versatile array of layout options, including Row, Column, Tab, Group, Box, and Accordion, enabling you to structure your UI elements in a way that best suits your app’s needs.

Arranging Components Horizontally with Row

To organize your components side-by-side, the Row layout is your go-to solution. It allows you to place elements horizontally.

import gradio as gr

def sentence_generator(drinks_count, drink_type, order_type, countries, activities, visit):
“”” Generate a sentence based on the inputs “””
return f”I want to order {drinks_count} {drink_type} for {order_type}. I want to visit {‘ and ‘.join(countries)} {‘this year’ if visit else ‘next year’}. I want to do {‘ and ‘.join(activities)}.”

with gr.Blocks() as demo:
with gr.Row():
# Slider
drinks_count = gr.Slider(minimum=1, maximum=10, step=1, value=1, label=”Number of drinks”, info=”How many drinks do you want to order?”)

# Dropdown
drink_type = gr.Dropdown(choices=[“Coffee”, “Tea”, “Hot Chocolate”], label=”Type of drink”, info=”What type of drink do you want to order?”, value=”Coffee”)

with gr.Row():
# Radio
order_type = gr.Radio(choices=[“Takeaway”, “Dine-in”], label=”Order type”, info=”Do you want to take away or dine in?”, value=”Takeaway”)

# Checkbox group
countries = gr.CheckboxGroup(choices=[“Australia”, “Canada”, “USA”], label=”Countries”, info=”Where do you want to order from?”, value=[“Australia”, “Canada”])

# Dropdown with multiselect
activities = gr.Dropdown(choices=[“Reading”, “Writing”, “Coding”], label=”Activities”, info=”What do you want to do while drinking?”, value=[“Reading”, “Coding”], multiselect=True)

# Checkbox
visit = gr.Checkbox(label=”Visit”, info=”Do you want to visit the countries this year?”, value=False)

# Button
sentence_generator_btn = gr.Button(“Generate Sentence”)

# Output
output = gr.Textbox(lines=1, label=”Generated Sentence”, info=”Generated sentence will appear here”)

# What happens when we click on the button
sentence_generator_btn.click(fn=sentence_generator, inputs=[drinks_count, drink_type, order_type, countries, activities, visit], outputs=output)

demo.launch()

Each component is placed in a gr.Row object appear on the same row. You can visit the deployed version on my Hugging Face space: here.

Gradio Row Layout

Stacking Components Vertically with Column

While Row aligns components horizontally, Column offers a vertical arrangement, allowing you to stack elements one on top of the other. This layout is ideal for forms, menus, or any scenario where a top-to-bottom organization makes sense.

import gradio as gr

def sentence_generator(drinks_count, drink_type, order_type, countries, activities, visit):
“”” Generate a sentence based on the inputs “””
return f”I want to order {drinks_count} {drink_type} for {order_type}. I want to visit {‘ and ‘.join(countries)} {‘this year’ if visit else ‘next year’}. I want to do {‘ and ‘.join(activities)}.”

with gr.Blocks() as demo:
with gr.Row():
with gr.Column():
# Slider
drinks_count = gr.Slider(minimum=1, maximum=10, step=1, value=1, label=”Number of drinks”, info=”How many drinks do you want to order?”)

# Dropdown
drink_type = gr.Dropdown(choices=[“Coffee”, “Tea”, “Hot Chocolate”], label=”Type of drink”, info=”What type of drink do you want to order?”, value=”Coffee”)

with gr.Column():
# Radio
order_type = gr.Radio(choices=[“Takeaway”, “Dine-in”], label=”Order type”, info=”Do you want to take away or dine in?”, value=”Takeaway”)

# Checkbox group
countries = gr.CheckboxGroup(choices=[“Australia”, “Canada”, “USA”], label=”Countries”, info=”Where do you want to order from?”, value=[“Australia”, “Canada”])

with gr.Row(equal_height=False):
# Dropdown with multiselect
activities = gr.Dropdown(choices=[“Reading”, “Writing”, “Coding”], label=”Activities”, info=”What do you want to do while drinking?”, value=[“Reading”, “Coding”], multiselect=True)

# Checkbox
visit = gr.Checkbox(label=”Visit”, info=”Do you want to visit the countries this year?”, value=False)

# Button
sentence_generator_btn = gr.Button(“Generate Sentence”)

# Output
output = gr.Textbox(lines=1, label=”Generated Sentence”, info=”Generated sentence will appear here”)

# What happens when we click on the button
sentence_generator_btn.click(fn=sentence_generator, inputs=[drinks_count, drink_type, order_type, countries, activities, visit], outputs=output)

demo.launch()

In this code snippet, we create a Row that contains two Columns. The first Column has drinks_count slider and drink_type dropdown, while the second Column has order_type radio and countries checkbox group.

By nesting Column layouts within a Row, we achieve an organized, two-column form layout. This combination demonstrates the flexibility of Gradio’s layouts, allowing you to create intricate structures that cater to your specific UI requirements.

You can visit the deployed version on my Hugging Face space: here.

Gradio Column Layout

Organizing Components with Tabs

Gradio’s Tab layout is a powerful tool for creating organized and user-friendly interfaces. It allows you to group related components into separate tabs, ensuring a clutter-free experience for your users.

import gradio as gr

def order_generator(drinks_count, drink_type, order_type):
“”” Generate a sentence based on the inputs “””
return f”I want to order {drinks_count} {drink_type} for {order_type}”

def travel_generator(countries, activities, visit):
“”” Generate a sentence based on the inputs “””
return f”I want to visit {‘ and ‘.join(countries)} {‘this year’ if visit else ‘next year’}. I want to do {‘ and ‘.join(activities)}.”

with gr.Blocks() as demo:
with gr.Tab(“Order Drinks”):
with gr.Row():
with gr.Column():
# Slider
drinks_count = gr.Slider(minimum=1, maximum=10, step=1, value=1, label=”Number of drinks”, info=”How many drinks do you want to order?”)

# Dropdown
drink_type = gr.Dropdown(choices=[“Coffee”, “Tea”, “Hot Chocolate”], label=”Type of drink”, info=”What type of drink do you want to order?”, value=”Coffee”)

with gr.Column():
# Radio
order_type = gr.Radio(choices=[“Takeaway”, “Dine-in”], label=”Order type”, info=”Do you want to take away or dine in?”, value=”Takeaway”)

# Button
order_btn = gr.Button(“Order”)

# Output
order_output = gr.Textbox(lines=1, label=”Generated Sentence”, info=”Generated sentence will appear here”)

with gr.Tab(“Travel”):
with gr.Row(equal_height=False):
# Checkbox group
countries = gr.CheckboxGroup(choices=[“Australia”, “Canada”, “USA”], label=”Countries”, info=”Where do you want to order from?”, value=[“Australia”, “Canada”])

# Dropdown with multiselect
activities = gr.Dropdown(choices=[“Reading”, “Writing”, “Coding”], label=”Activities”, info=”What do you want to do while drinking?”, value=[“Reading”, “Coding”], multiselect=True)

# Checkbox
visit = gr.Checkbox(label=”Visit”, info=”Do you want to visit the countries this year?”, value=False)

# Button
travel_btn = gr.Button(“Travel”)

# Output
travel_output = gr.Textbox(lines=1, label=”Generated Sentence”, info=”Generated sentence will appear here”)

# What happens when we click on the button
order_btn.click(fn=order_generator, inputs=[drinks_count, drink_type, order_type], outputs=order_output)
travel_btn.click(fn=travel_generator, inputs=[countries, activities, visit], outputs=travel_output)

demo.launch()Gradio Tab Layout

In this code, we create two tabs using gr.Tab: “Order Drinks” and “Travel”. When you run this app, you’ll see two tabs at the top, allowing users to seamlessly switch between the “Order Drinks” and “Travel” sections.

This layout helps keep your interface organized and focused, as only the components within the currently selected tab are visible.

You can visit the deployed version on my Hugging Face space: here.

Toggling Component Visibility with Accordion

Gradio’s Accordion layout provides a neat way to manage the visibility of components, helping you create a clean and organized interface. This layout allows you to group related components and toggle their visibility with a simple click.

import gradio as gr

def sentence_generator(drinks_count, drink_type, order_type, countries, activities, visit):
“”” Generate a sentence based on the inputs “””
return f”I want to order {drinks_count} {drink_type} for {order_type}. I want to visit {‘ and ‘.join(countries)} {‘this year’ if visit else ‘next year’}. I want to do {‘ and ‘.join(activities)}.”

with gr.Blocks() as demo:
with gr.Row():
with gr.Column():
# Slider
drinks_count = gr.Slider(minimum=1, maximum=10, step=1, value=1, label=”Number of drinks”, info=”How many drinks do you want to order?”)

# Dropdown
drink_type = gr.Dropdown(choices=[“Coffee”, “Tea”, “Hot Chocolate”], label=”Type of drink”, info=”What type of drink do you want to order?”, value=”Coffee”)

with gr.Column():
# Radio
order_type = gr.Radio(choices=[“Takeaway”, “Dine-in”], label=”Order type”, info=”Do you want to take away or dine in?”, value=”Takeaway”)

# Checkbox group
countries = gr.CheckboxGroup(choices=[“Australia”, “Canada”, “USA”], label=”Countries”, info=”Where do you want to order from?”, value=[“Australia”, “Canada”])

with gr.Accordion(label=”Show elements if you want to travel”, open=False):
with gr.Row(equal_height=False):
# Dropdown with multiselect
activities = gr.Dropdown(choices=[“Reading”, “Writing”, “Coding”], label=”Activities”, info=”What do you want to do while drinking?”, value=[“Reading”, “Coding”], multiselect=True)

# Checkbox
visit = gr.Checkbox(label=”Visit”, info=”Do you want to visit the countries this year?”, value=False)

# Button
sentence_generator_btn = gr.Button(“Generate Sentence”)

# Output
output = gr.Textbox(lines=1, label=”Generated Sentence”, info=”Generated sentence will appear here”)

# What happens when we click on the button
sentence_generator_btn.click(fn=sentence_generator, inputs=[drinks_count, drink_type, order_type, countries, activities, visit], outputs=output)

demo.launch()Gradio Accordion Layout

In this code, we create one Accordion to toggle in case the user wants to travel. Inside the Accordion, we define the components that should be grouped together.

By default, the Accordion is closed initially by setting open=False. This means that the components are hidden until the user expands the Accordion.

The Accordion layout is particularly useful when you have multiple sections of components that may only be needed at a time. By allowing users to expand or collapse sections as needed, you can create a more streamlined and focused interface, reducing clutter and enhancing the overall user experience.

You can visit the deployed version on my Hugging Face space: here.

Deploying Your ML Model on Hugging Face Spaces

Now that we’ve explored how to create interactive UIs with Gradio, let’s put that knowledge into action and deploy our machine-learning model on the powerful Hugging Face platform.

Creating a New Space

First, you’ll need to create a Hugging Face account if you haven’t already. Don’t worry, it’s completely free! Once you’re logged in, follow these simple steps to create a new Space for your model:

Go to the Hugging Face Spaces page and click on “Create New Space”.Give your space a descriptive name.Select “Gradio” as the Space SDK.Click “Create Space”.

Cloning Your Space Locally

With your new Space created, it’s time to set up your local development environment. Open a terminal or command prompt and run the git clone command to clone your Space repository to your local machine.

Before we proceed, make sure you have git lfs installed on your system. This tool is essential for handling large files, such as your ML model’s weights. If you haven’t installed it yet, follow the instructions provided on the official Git LFS website: here.

Setting Up the Directory Structure

To keep our project organized and easy to navigate, we’ll follow a specific directory structure. Here’s how it will look:

.
├── README.md
├── app.py
├── data
│ └── zone_lookup.csv
├── examples
│ ├── basset.jpg
│ ├── cat.jpg
│ ├── dog.jpg
│ └── dunno.jpg
├── models
│ ├── lin_reg.bin
│ └── model.pkl
└── requirements.txt

You should already have the README.md and .gitattributes files in your cloned repository. We’ll be adding the following new files and directories:

app.py: This is where we’ll write our Gradio application code.data/zone_lookup.csv: A CSV file containing data for our application.examples/: This directory will hold example image files for demonstrating our application.models/: This directory will contain our trained machine-learning models.
lin_reg.bin: A linear regression model used to predict taxi trip durations.
model.pkl: A machine learning model for classifying images as dogs or cats.requirements.txt: A text file listing the Python packages required by our application.

You can download the data, examples, and models directories from this link: here

As for the requirements.txt file, add the following content:

fastai
pandas
scikit-learn

Creating app.py file

We’ll now create the app.py file in the root directory of our Hugging Face Space. This file will contain the code for our Gradio application, integrating both the taxi trip duration prediction model and the dog vs. cat image classification model.

import pickle
import random
import pandas as pd
import gradio as gr
from fastai.vision.all import *

zone_lookup = pd.read_csv(‘./data/zone_lookup.csv’)

with open(‘./models/lin_reg.bin’, ‘rb’) as handle:
dv, model = pickle.load(handle)

def prepare_features(pickup, dropoff, trip_distance):
“””Helper function for predicting taxi trip duration”””
pickupId = zone_lookup[zone_lookup[“borough_zone”] == pickup].LocationID
dropoffId = zone_lookup[zone_lookup[“borough_zone”] == dropoff].LocationID
trip_distance = round(trip_distance, 4)

features = {}
features[‘PU_DO’] = ‘%s_%s’ % (pickupId, dropoffId)
features[‘trip_distance’] = trip_distance
return features

def predict(pickup, dropoff, trip_distance):
“””Helper function for predicting taxi trip duration”””
features = prepare_features(pickup, dropoff, trip_distance)
X = dv.transform(features)
preds = model.predict(X)
duration = float(preds[0])
return “The predicted duration is %.4f minutes.” % duration

with gr.Blocks() as demo:
gr.Markdown(“””
This demo is a simple example of how to use Gradio to create a web interface for your machine learning models.
Models used in this demo are very simple and are not meant to perform well. The goal is to show how to use Gradio with a simple model.
“””)

gr.Markdown(“Predict Taxi Duration or Classify dog vs cat using this demo”)

with gr.Tab(“Predict Taxi Duration”):
with gr.Row():
with gr.Column():
with gr.Row():
pickup = gr.Dropdown(
choices=list(zone_lookup[“borough_zone”]),
label=”Pickup Location”,
info=”The location where the passenger(s) were picked up”,
value=lambda: random.choice(zone_lookup[“borough_zone”])
)

dropoff = gr.Dropdown(
choices=list(zone_lookup[“borough_zone”]),
label=”Dropoff Location”,
info=”The location where the passenger(s) were dropped off”,
value=lambda: random.choice(zone_lookup[“borough_zone”])
)

trip_distance = gr.Slider(
minimum=0.0,
maximum=100.0,
step=0.1,
label=”Trip Distance”,
info=”The trip distance in miles calculated by the taximeter”,
value=lambda: random.uniform(0.0, 100.0)
)
with gr.Column():
output = gr.Textbox(label=”Output Box”)
predict_btn = gr.Button(“Predict”)

examples = gr.Examples([[“Queens – Bellerose”, “Bronx – Schuylerville/Edgewater Park”, 25], [“Bronx – Norwood”, “rooklyn – Sunset Park West”, 55]], inputs=[pickup, dropoff, trip_distance])

with gr.Tab(“Classify Dog vs Cat”):
def is_cat(x): return x[0].isupper()

learn = load_learner(‘./models/model.pkl’)

categories = (‘Dog’, ‘Cat’)

def classify_image(img):
pred, idx, probs = learn.predict(img)
return dict(zip(categories, map(float,probs)))

with gr.Row():
image = gr.inputs.Image(shape=(192, 192))
label = gr.outputs.Label()

examples = gr.Examples([‘./examples/dog.jpg’, ‘./examples/cat.jpg’, ‘./examples/dunno.jpg’, ‘./examples/basset.jpg’], inputs=[image])

classify_btn = gr.Button(“Predict”)

predict_btn.click(fn=predict, inputs=[pickup, dropoff, trip_distance], outputs=output, api_name=”predict-duration”)
classify_btn.click(fn=classify_image, inputs=image, outputs=label, api_name=”classify-dog-breed”)

demo.launch()

In this section, we:

Import required libraries and load the necessary data and pre-trained models.Define helper functions for the taxi trip duration prediction model.Create a Gradio Blocks interface with two tabs: “Predict Taxi Duration” and “Classify Dog vs Cat”.Set up the input and output components for each tab, including dropdowns, sliders, image upload, and output display.Define button click events to trigger the prediction functions for each model.Finally, launch the Gradio application with demo.launch().

This app.py file combines the functionality of both machine learning models into a single, user-friendly web interface using Gradio’s powerful components and layouts.

Pushing the Code to Your Hugging Face Space

Now that we’ve created the app.py file and set up the directory structure, it’s time to push our code to the Hugging Face Space we created earlier.

Open a terminal or command prompt and navigate to the root directory of your local repository.

# Add all the files to the Git staging area using the following command:
git add .

# Commit the changes with a descriptive message:
git commit -m “Initial commit”

# Push the committed changes to your Hugging Face Space:
git push

You’ll be prompted to enter your Hugging Face username and password. Once you’ve entered the correct credentials, the code will be pushed to your Space.

Tracking Large Files with Git LFSIf you need to add large files to your Space, such as pre-trained models or datasets, it’s recommended to use Git Large File Storage (LFS) to handle these files efficiently.# Track the large file(s) with Git LFS:
git lfs track <FILE_NAME>

# git lfs install
git lfs install

# Add the tracked files to the staging area:
git add .

# Commit the changes:
git commit -m “Add model files”

# Finally, push the changes to your Space:
git push

Accessing Your Deployed App

Once the code is successfully pushed, navigate to your Hugging Face Space and click on the “App” tab. You should see the deployed web application with the taxi trip duration prediction and dog vs. cat image classification models integrated.

You can now share the URL of your Space with others, allowing them to interact with your machine-learning models through the user-friendly Gradio interface.

You can visit the deployed version on my Hugging Face space: here.

Deployed ML model on Hugging Face Space

Conclusion

Throughout this tutorial, we explored the power of Gradio for creating interactive web applications and deploying machine learning models. We learned how to craft user-friendly interfaces, leverage Gradio’s components and layouts, and integrate pre-trained models into our applications.

If you have any questions or need further assistance, feel free to reach out to me on Twitter or via email. I’ll be happy to clarify any doubts or provide additional guidance.

👏 if you liked it, 💬 if you loved it. Hope to see you guys in the next one. ✌️

Effortlessly Deploying Machine Learning Models on Hugging Face Spaces with Gradio was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

​ Level Up Coding – Medium

about Infinite Loop Digital

We support businesses by identifying requirements and helping clients integrate AI seamlessly into their operations.

Gartner
Gartner Digital Workplace Summit Generative Al

GenAI sessions:

  • 4 Use Cases for Generative AI and ChatGPT in the Digital Workplace
  • How the Power of Generative AI Will Transform Knowledge Management
  • The Perils and Promises of Microsoft 365 Copilot
  • How to Be the Generative AI Champion Your CIO and Organization Need
  • How to Shift Organizational Culture Today to Embrace Generative AI Tomorrow
  • Mitigate the Risks of Generative AI by Enhancing Your Information Governance
  • Cultivate Essential Skills for Collaborating With Artificial Intelligence
  • Ask the Expert: Microsoft 365 Copilot
  • Generative AI Across Digital Workplace Markets
10 – 11 June 2024

London, U.K.