Gradio Crash Course - Fastest way to build & share Machine Learning apps

Summary

In this informative video, Patrick from Assembly AI introduces Gradio, a Python framework simplifying the creation of attractive machine learning apps with user-friendly web interfaces. He demonstrates building apps with various input types like text, images, and audio, and shows how to integrate them with machine learning models for displaying outputs elegantly. Patrick also covers deploying and sharing these apps, including using Hugging Face Spaces for free hosting, and touches on handling state in Gradio apps.

Takeaways

• 📝 Gradio is a Python framework designed to simplify the creation of machine learning apps with user-friendly web interfaces.
• 🛠️ The framework allows for various input types such as text, images, and audio, which can be processed by machine learning models and displayed in an appealing manner.
• 🔧 To get started with Gradio, one can follow the official quick start guide and install it using pip.
• 📑 The script demonstrates creating a basic Gradio app with a Python file, where an interface is defined with input and output types and an execution function.
• 🌐 Running the app starts a server, making it accessible through a local host, showcasing a text input field and a submit button for user interaction.
• 📝 Gradio supports customization of input fields, including text boxes with multiline options and placeholders.
• 📈 The framework enables the use of multiple inputs and outputs, mixing different types of components like checkboxes, sliders, and text fields.
• 🖼️ Gradio simplifies the integration of image and audio components, allowing users to upload and process media files with machine learning models.
• 🧩 Gradio Blocks offer more flexibility for layout and data flow, allowing developers to define custom components and event handling.
• 🔄 The script includes an example of integrating Gradio with Hugging Face Transformers for tasks like translating text from English to German.
• 🔒 Gradio apps can manage state either through global variables shared across users or session-specific states that preserve user interactions.

Q & A

What is Gradio and its primary purpose?

Gradio is a Python framework designed to make it simple to build visually appealing machine learning apps with user-friendly web interfaces.

How do you install Gradio?

You can install Gradio using the command: `pip install gradio`.

What is the basic structure of a Gradio app?

A basic Gradio app involves importing Gradio, creating an interface with input and output types, defining a function to process the inputs and outputs, and launching the app with `demo.launch`.

What are some examples of input and output types that can be used in Gradio?

Examples include text, image, audio, checkbox, and slider for inputs, and text, number, and label for outputs.

How can you customize input fields in Gradio?

You can customize input fields by using Gradio components such as `gradio.Textbox`, specifying parameters like `lines` and `placeholder`.

How can multiple inputs and outputs be handled in Gradio?

Multiple inputs and outputs can be handled by using lists for the `inputs` and `outputs` parameters in the interface definition.

How does Gradio handle image and audio inputs?

Gradio provides specific components like `gradio.Image` for image inputs and `gradio.Audio` for audio inputs, which automatically handle file uploads and conversions to formats like numpy arrays.

What is the difference between Gradio Interface and Gradio Blocks?

Gradio Interface offers a high-level abstraction with default layout and components, while Gradio Blocks provides more flexibility for customizing layout and data flow.

How can state be managed in a Gradio app?

State can be managed using a global state variable, which is shared across all users, or using session state, which is unique to each user's session.

What are the two options for sharing and hosting a Gradio app?

You can share a Gradio app by setting `share=True` in the `demo.launch` method to get a public URL, or you can host it permanently for free on Hugging Face Spaces.

How can you deploy a Gradio app on Hugging Face Spaces?

To deploy on Hugging Face Spaces, create a new space, select the Gradio template, add your app code and requirements, and commit the changes. Your app will be hosted and available via a public URL.

What should you do if you have an existing GitHub repository and want to deploy your Gradio app to Hugging Face Spaces?

You can add the Hugging Face Spaces URL as a second remote to your GitHub repository and push the code using the provided commands to deploy the app.

Outlines

00:00

🛠️ Introduction to Gradio Framework

Patrick from Assembly AI introduces Gradio, a Python framework designed to simplify the creation of attractive machine learning applications. Gradio enables developers to construct web interfaces with various input types such as text, images, or audio, which can be processed by machine learning models and then displayed in an appealing manner. The video provides a step-by-step guide on getting started with Gradio, including installation via pip, creating a basic interface with input and output fields, and launching a demo application. It also touches on deploying and sharing these applications, showcasing the ease of building and customizing interfaces with Gradio.

05:02

📚 Deep Dive into Gradio's Features and Components

This section delves deeper into Gradio's capabilities, exploring the use of different input and output widgets such as text boxes, images, audio files, and sliders. It explains how to customize these components and handle multiple inputs and outputs within an application. Patrick demonstrates how to apply image processing, like a sepia filter, and audio processing, suggesting the potential for speech-to-text functionality. The video also introduces Gradio Blocks for more layout flexibility and complex data flows, and it shows how to integrate Gradio with Hugging Face Transformers for tasks like translation, highlighting the framework's extensibility.

10:04

🔗 Managing State and Deployment of Gradio Apps

The final part of the script discusses state management in Gradio apps, illustrating two methods: global state, which is shared among all users, and session state, which is unique to each user session. A chatbot example is given to demonstrate session state usage. Additionally, the video outlines two methods for sharing and hosting Gradio apps: using the 'share=True' parameter in the demo launch for a public URL, and utilizing Hugging Face Spaces for free, permanent hosting. The process for setting up an app on Hugging Face Spaces is detailed, including creating a space, committing files, and pushing updates via Git. The video concludes with instructions for linking an existing GitHub repository to Hugging Face Spaces, offering a comprehensive guide to deploying Gradio applications.

Keywords

💡Gradio

Gradio is a Python framework designed to simplify the process of building web interfaces for machine learning applications. It allows developers to create visually appealing and user-friendly apps that can handle various input types like text, images, or audio. In the video, Gradio is introduced as the main tool for creating machine learning apps, with the script demonstrating how to install it and use it to build an interface that interacts with a machine learning model.

💡Machine Learning Model

A machine learning model is an algorithm that learns from data to make predictions or decisions. In the context of the video, the model is the backend component that processes inputs received from the Gradio interface and produces outputs. The script shows how to pass data to the model and display the model's results within the app.

💡Web Interface

A web interface is the visual and interactive part of a website or web application that allows users to access features and services. In the video, the script focuses on building web interfaces using Gradio, which are used to input data into a machine learning model and display the model's outputs in a user-friendly manner.

💡Input Types

Input types refer to the different kinds of data that a web interface can accept, such as text, images, or audio. The script discusses how Gradio enables the creation of interfaces with various input types, showcasing examples like text fields, image uploads, and audio file inputs.

💡Output

In the context of the video, output refers to the result produced by the machine learning model after processing the input data. The script explains how to display these outputs in the Gradio interface, such as showing text or images that are the result of the model's processing.

💡Interface Components

Interface components are the individual elements of a web interface, such as text boxes, sliders, or buttons. The video script describes how to use Gradio to create and customize these components, tailoring the interface to the needs of the machine learning application.

💡Deploy

To deploy an application means to make it available to users by launching it on a server or hosting platform. The script explains how to deploy Gradio apps, providing options for sharing a local URL or using platforms like Hugging Face Spaces for hosting.

💡Hugging Face Spaces

Hugging Face Spaces is a hosting platform for machine learning models and applications. The script mentions it as a service for deploying Gradio apps, allowing developers to share their applications publicly without managing their own servers.

💡Global State

Global state refers to data that is accessible throughout an application, regardless of user sessions. The script discusses using global variables to maintain state in a Gradio app, but also notes the limitation that it shares this state among all users.

💡Session State

Session state is data that is specific to an individual user's session within an application. The video script explains how to use session state in Gradio apps to maintain a chat history or other user-specific data that persists only for the duration of a single user's interaction with the app.

💡Transformers

Transformers, in the context of this video, refer to a type of architecture for machine learning models, particularly those used in natural language processing tasks. The script includes an example of integrating Gradio with Hugging Face's Transformers library to create an app that translates English text to German.

Highlights

Introduction to Gradio, a Python framework for building machine learning apps with user-friendly web interfaces.

Gradio simplifies the process of creating web interfaces with various input types such as text, images, or audio for machine learning models.

Demonstration of deploying and sharing Gradio apps, showcasing the ease of use and accessibility.

Quick start guide for installing Gradio using pip and setting up a basic app with Python code.

Explanation of how to create a Gradio interface with input and output types and an executable function.

Live demonstration of a running Gradio app with a text input field and output display.

Deep dive into customizing input and output fields with Gradio's widgets for more control.

Example of using multiple inputs and outputs in a Gradio app, including text components, checkboxes, and sliders.

Showcasing image and audio components in Gradio for uploading and processing media files with machine learning models.

Introduction to Gradio Blocks for more flexible layouts and data flows in app development.

Integration of Gradio with Hugging Face Transformers for tasks like translating text from English to German.

Demonstration of using Gradio Blocks to create a more complex app layout with rows and columns.

Explanation of handling state in Gradio apps, with both global and session state options.

Live example of a chatbot using session state in Gradio to maintain conversation history.

Instructions on sharing and hosting Gradio apps, including creating a public URL for sharing.

Guide on hosting Gradio apps for free on Hugging Face Spaces, providing a platform for app deployment.

Additional note on using Git commands to push existing GitHub repositories to Hugging Face Spaces for hosting.

Closing remarks encouraging viewers to like, subscribe, and look forward to future videos.

Transcripts

hi everyone I'm Patrick from assembly Ai

and in this video we learn about radio

gradio is a python framework that makes

it super simple to build nice looking

machine learning apps so with this you

can build friendly web interfaces that

have different types of inputs for

example text images or audio and then

you can pass this to your machine

learning model and then you can show the

output in a nice way so in this video I

show you everything you need to get

started and in the end I also show you

how we can deploy and share these apps

so let's get started so to get started

let's follow the official quick start

guide so we can install this with Pip

install radio and now let's copy the

first example code and switch to our

editor so here I already have a file

app.pi and I also already installed this

so let's paste in the code so we import

gradual sgr and then we create a gradual

interface an interface provides a high

level abstraction to create these demos

so it gets input types and output types

and then a function that is executed in

between and then we say demo.launch and

now if we run python app.pi then this

will start a server so now our app is

running and we can visit our localhost

and here we see we have a text input

field where we can put in a name and

then click on submit and then the

function is executed and then we see the

output field which is also a text field

so this is what we specified here with

just a string the inputs is a text the

outputs is a text and in between we

execute this function so this function

needs one parameter since we have one

input parameter and then it also needs

one output that we one return parameter

that we return because we also have one

output field so yeah this is the

simplest way how to get started and how

to build these interfaces and now let's

dive into this a little bit deeper so

first of all sa input or output field we

can just use a string like here so we

used a text we can also use an image or

a audio field or for example a label for

the output and then it will

automatically create these switches for

us or if we want a little bit more

control we can create them ourselves so

instead of just using the string we use

gradio and then we can use the different

widgets for example here we use a text

box and then if we have a look at the

parameters so for example we can say we

want lines equals two and we want a

placeholder so we say name here and now

let's save this and then let's rerun our

app and by the way to see all the

available widgets we can have a look at

the official documentation so here you

see all the different components that

you can use and we have a look at a few

of them in a few moments but now let's

actually reload our app and now here we

see we have our text box now with two

lines and everything else is still the

same so this is one thing that we can do

and now we can also use multiple inputs

and outputs so let's see how to do this

so to use multiple inputs and outputs

instead of just using one component here

we can use a list and then for example

let's use a text component then we also

want a check box and then we also want a

radio dot slider from 0 to 100 so we can

mix and match strings and the actual

components and then for the outputs so

let's reformat this a little bit for the

outputs we also use a list where we want

a text field and then let's also use a

number field for example and then we

also have to modify the functions so now

let me copy and paste this here so since

we have three inputs we also need three

parameters here and then we need to

return turn two outputs here since we

have two outputs and now here for

example we make the salutation dependent

on the is morning Boolean so this is a

check box so then this is a Boolean

parameter and this is a number already

because we use a slider so this is

automatically done for us and then we

return these two outputs so let's again

restart our app and then let's have a

look at this so if we reload this so now

we see we have three Fields I can put my

name I can use the jackbox and I can

have the slider here and then I submit

this and we get two different outputs so

yeah this is how we can use multiple

inputs and outputs then let me quickly

show you how this image and audio

components look like because they also

make it super simple to upload images or

audio files and then pass them to our

models so let me copy and paste the code

here for you so here we use a gradient

your image component as input and here

we specify a shape and then for the

output we just use a string and then for

the function we get an input image as

input parameter and this is already a

numpy array so here we can for example

apply a sepia filter by saying by using

the numpy dot product and then we also

return a image and now if we restart our

app and wait a few moments and then if

we go to our app and reloads the page

then here we see we have an image

component as the input so here we can

drop an image or we can click to upload

and then here we can select an image for

example and then click on submit and now

we see we have the Sapia filter applied

so this is how easily we can work here

with image components in gradual and the

same with audio files so let me copy and

paste this here as well so for the audio

we simply use this radio dot audio

component and now if if we again restart

our app then let's have a look how this

looks like so here I noticed now it's

it's using a separate Port so here I

have to open this as well and here we

can again drop our file or click to

upload and then for example select this

and now here we can even listen to this

so let's listen deep learning that

builds

puppy eyes to

do and then we can submit this and here

for example we could apply speech to

text and then display this as a text

field so yeah this is how images and

audio components look like now let's

learn about radio blocks so until now we

always use the gradual interface which

is a very high level abstraction so it

does a lot of things for you for example

it already adds these two buttons and it

already defines a two column layout so

if you want more flexibility about the

layouts and data flows you can use a

gradual block so for this let me copy

and paste this here as well so here we

say with radio blocks as demo so we

always use this as a context manager and

then inside we Define our components

again and then for example a button and

then here we add an event so we say

button click and then what will happen

so here we again execute the function

and it gets these inputs and outputs and

now let's restart our app so then if we

have a look at this now we see we know

longer have two columns by default so

here we have our input and output box

and then we have the grid function so

this works as well and now let's have a

look at a more complex example so as a

second blocks example let me copy and

paste this as well so here I also show

you how we can integrate this with

hugging face Transformers so for this of

course we have to also install pip

install Transformers then we download a

model from the hugging face Hub so here

this is a model that does translation

from English to German so in this

function we return we run our model and

then return the German text then again

we say with gradual blocks and then here

we Define our layout so we say with

gradual row and then we add two columns

so all of these are used as context

managers and then here we add our Fields

then we have a button and again say

button click where we add this function

that should be X executed and then the

fields and then we also add some

examples in the bottom so let's again

restart the app and have a look at how

this looks like so here we get two

columns again and here we have an

English text and then here we also have

examples so let's select one and then we

can click on translate and now this is

running the model and here we have the

German text so this is actually correct

so yeah this is how we can use the

gradual blocks and in a moment I also

show you how we can deploy this app so

and then share this so but first I want

to show you one more thing so I want to

show you how we can handle State and

graduate apps and for this let me copy

and paste the code in here and there are

two ways how to do it first we can use a

global State and for this we use a

global variable for example data equals

a list and now inside the function we

can add items to this list the only

problem with a global state is that this

is shared between all use user so if

multiple users use your app then they

all add items to the same Global

variable so there is a second way to do

this and for this we can use a session

state so here as the last parameter

inside the function we add the history

and now in this example we use a chat

bot and then for the inputs and outputs

as last input field we use the state for

the inputs and the outputs and now

inside the function we can now access

the session State and then say this is a

list and then we can add their responses

to this list and then we also have to

return this as last parameter here

because we want to keep this as the

output and now we have this as session

state so let's run the app so now here

we can chat with our bot so we can say

hello and then here we see the output

fields and now it's not very clever so

it says I don't know and then we can ask

for example how many and then we get a

new answer so as you can see the old

responses are still stored so this is

how we can use session State and now let

me show you how we can share and host

the apps now let me show you how we can

share and host a radio app so for this

we have two options and the first one is

when we say demo launch we can say share

equals true and now when we run this

then this will also create a public URL

that we can use for sharing so let's

wait a few moments and there we have it

so we have a local URL but now we also

get this public URL and if we visit this

URL then here we have our app that is up

and running so we have the example that

we've seen before where we can put in a

English text and then click on translate

and now this will run the model and here

we get the translation so this is the

first option or as a second option so

here we see for free permanent hosting

we can check out hacking phase

basis so if we go to this website then

of course we need an account so we can

create this for free then we can click

on create a new space and now we can

give this a name for example demo then

we can also select the stars for

streamlit or gradual or static for

example a flask app in this case I want

radio and now I say public and then

create space and then there are

different ways to get started for

example we can say git clone and then

add our file and then push this or we

can add a this remote to an existing git

repository that we already have or we

can do this manually so in this case I

say app file and then create new file

and then we need a file that is called

app.pi and now let me copy and paste the

code from here and now here we can

remove share equals true and then we can

commit this and now in this example

since we also use the Transformers we

need to specify this as requirement so

here we say create new file and now in

this case we want a require

requirements.txt and in this case I know

that we need torch and then the

Transformers then again we don't have to

specify gradual here this is already

included then we say commit new file and

now we go back to this side and now here

it says your app should be running on

this page after a few moments so let's

wait a little bit and now after

refreshing we have our app hosted on

hugging face spaces and now here again

we can select an English text and click

on translate and now this is running the

model in the background and this is

working as well so this is how we can

host a grade your app for free on

hugging face spaces and now one more

note if we already have a existing

GitHub git repository for example that

is already on GitHub then we can use

this command by saying git remote at

space and then this address so if we go

to the website and here this is the full

URL and then we add this as a separate a

second remote and then we say git push

and this command and now we can also

push this to to this space again via git

so yeah this is all I wanted to show you

I hope you enjoyed this video leave us a

like and consider subscribing to our

Channel and then I hope to see you next

time bye