Gradio is a preferred Python library for creating interactive machine learning apps. Traditionally, Gradio applications have relied on server-side infrastructure to run, which generally is a hurdle for developers who have to host their applications.
Enter Gradio-lite (@gradio/lite): a library that leverages Pyodide to bring Gradio on to your browser. On this blog post, we’ll explore what @gradio/lite is, go over example code, and discuss the advantages it offers for running Gradio applications.
What’s @gradio/lite?
@gradio/lite is a JavaScript library that lets you run Gradio applications directly inside your web browser. It achieves this by utilizing Pyodide, a Python runtime for WebAssembly, which allows Python code to be executed within the browser environment. With @gradio/lite, you may write regular Python code on your Gradio applications, and they’re going to run seamlessly within the browser without the necessity for server-side infrastructure.
Getting Began
Let’s construct a “Hello World” Gradio app in @gradio/lite
1. Import JS and CSS
Start by making a recent HTML file, should you do not have one already. Importing the JavaScript and CSS corresponding to the @gradio/lite package through the use of the next code:
<html>
<head>
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js">script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
head>
html>
Note that it’s best to generally use the most recent version of @gradio/lite that is out there. You may see the versions available here.
2. Create the
Somewhere within the body of your HTML page (wherever you would like the Gradio app to be rendered), create opening and shutting
<html>
<head>
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js">script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
head>
<body>
<gradio-lite>
gradio-lite>
body>
html>
Note: you may add the theme attribute to the
<gradio-lite theme="dark">
...
gradio-lite>
3. Write your Gradio app within the tags
Now, write your Gradio app as you’d normally, in Python! Remember that since that is Python, whitespace and indentations matter.
<html>
<head>
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js">script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
head>
<body>
<gradio-lite>
import gradio as gr
def greet(name):
return "Hello, " + name + "!"
gr.Interface(greet, "textbox", "textbox").launch()
gradio-lite>
body>
html>
And that is it! It’s best to now have the option to open your HTML page within the browser and see the Gradio app rendered! Note that it could take just a little while for the Gradio app to load initially since Pyodide can take some time to put in in your browser.
Note on debugging: to see any errors in your Gradio-lite application, open the inspector in your web browser. All errors (including Python errors) might be printed there.
More Examples: Adding Additional Files and Requirements
What if you ought to create a Gradio app that spans multiple files? Or that has custom Python requirements? Each are possible with @gradio/lite!
Multiple Files
Adding multiple files inside a @gradio/lite app may be very straightforward: use the name attribute and the entry point to your Gradio app must have the entrypoint attribute.
Here’s an example:
<gradio-lite>
<gradio-file name="app.py" entrypoint>
import gradio as gr
from utils import add
demo = gr.Interface(fn=add, inputs=["number", "number"], outputs="number")
demo.launch()
gradio-file>
<gradio-file name="utils.py" >
def add(a, b):
return a + b
gradio-file>
gradio-lite>
Additional Requirements
In case your Gradio app has additional requirements, it is frequently possible to install them within the browser using micropip. We have created a wrapper to make this paticularly convenient: simply list your requirements in the identical syntax as a requirements.txt and enclose them with
Here, we install transformers_js_py to run a text classification model directly within the browser!
<gradio-lite>
<gradio-requirements>
transformers_js_py
gradio-requirements>
<gradio-file name="app.py" entrypoint>
from transformers_js import import_transformers_js
import gradio as gr
transformers = await import_transformers_js()
pipeline = transformers.pipeline
pipe = await pipeline('sentiment-analysis')
async def classify(text):
return await pipe(text)
demo = gr.Interface(classify, "textbox", "json")
demo.launch()
gradio-file>
gradio-lite>
Try it out: You may see this instance running in this Hugging Face Static Space, which helps you to host static (serverless) web applications without spending a dime. Visit the page and you will have the option to run a machine learning model without web access!
Advantages of Using @gradio/lite
1. Serverless Deployment
The first advantage of @gradio/lite is that it eliminates the necessity for server infrastructure. This simplifies deployment, reduces server-related costs, and makes it easier to share your Gradio applications with others.
2. Low Latency
By running within the browser, @gradio/lite offers low-latency interactions for users. There is not any need for data to travel to and from a server, leading to faster responses and a smoother user experience.
3. Privacy and Security
Since all processing occurs inside the user’s browser, @gradio/lite enhances privacy and security. User data stays on their device, providing peace of mind regarding data handling.
Limitations
-
Currently, the most important limitation in using
@gradio/liteis that your Gradio apps will generally take more time (often 5-15 seconds) to load initially within the browser. It is because the browser must load the Pyodide runtime before it will possibly render Python code. -
Not every Python package is supported by Pyodide. While
gradioand lots of other popular packages (includingnumpy,scikit-learn, andtransformers-js) may be installed in Pyodide, in case your app has many dependencies, its value checking whether the dependencies are included in Pyodide, or may be installed withmicropip.
Try it out!
You may immediately check out @gradio/lite by copying and pasting this code in an area index.html file and opening it together with your browser:
<html>
<head>
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js">script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
head>
<body>
<gradio-lite>
import gradio as gr
def greet(name):
return "Hello, " + name + "!"
gr.Interface(greet, "textbox", "textbox").launch()
gradio-lite>
body>
html>
We have also created a playground on the Gradio website that lets you interactively edit code and see the outcomes immediately!
Playground: https://www.gradio.app/playground
