Gradio is a popular Python library for creating interactive machine learning apps. Traditionally, gradient applications have been run relying on server-side infrastructure. This can be a hurdle for developers who need to host their applications.
Enter Gradio-Lite (@gradio/lite): A library that uses piodids to bring graders directly to the browser. In this blog post, we investigate what @Gradio/Lite is, proceed to sample code and explain the benefits it offers to run your Gradio application.
What is @gradio/lite?
@Gradio/Lite is a JavaScript library that allows you to run Gradio applications directly within a web browser. This accomplishes this by using Pyodide, a Python runtime for WebAssembly. This allows Python code to run in a browser environment. @Gradio/Lite allows you to write regular Python code for your Gradio applications, allowing you to run seamlessly in your browser without the need for server-side infrastructure.
Get started
Create a “Hello World” gradient app with @Gradio/Lite
1. Import JS and CSS
If you haven’t created a new HTML file, start by creating a new HTML file. Use the following code to import JavaScript and CSS corresponding to the @Gradio/Lite package:
HTML>
head>
script type=“Module” Cross Riggin 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>
Please note that you should generally use the latest version of @Gradio/Lite, available. You can see the version here.
2. Create a tag
Wherever the body of the HTML page (where you want to render the gradient app) creates an opening and closing tag.
HTML>
head>
script type=“Module” Cross Riggin 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>
Gradient light>
Gradient light>
body>
HTML>
Note: You can add a theme attribute to a tag to force the theme to dark or light (by default, honoring the system theme). for example
Gradient light theme=“dark”> …
Gradient light>
3. Write a gradient app inside the tag
Next, write your Gradio app in Python as normal! Note that this is Python, so white, indentation is important.
HTML>
head>
script type=“Module” Cross Riggin 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>
Gradient light> Import the grade as gr def greet (name): “hello”, + name + “!”! “Gr.Interface(Greet, “TextBox”, “Textbox”). launch()
Gradient light>
body>
HTML>
And that’s it! You can now open an HTML page in your browser and see the rendered gradient app. Note that it may take a little time for the Gradio app to load first, as Pyodide can take some time to install in your browser.
Debugging Note: To check for errors in the Gradio-Lite application, open the inspector in your web browser. All errors (including Python errors) will be printed there.
Other examples: Add additional files and requirements
What happens when I create a gradient app that spans multiple files? Or do you have custom Python requirements? Both are possible at @gradio/lite!
Multiple files
Adding multiple files within the @gradio/lite app is very easy. Use tags. You can use as many tags as you want, but each requires a name attribute, and the entry point to the Gradio app requires an entry point attribute.
Here is an example:
Gradient light>
Gradation file name=“app.py” Entry Points> Import GRAGIO as GR for UTILS import demo = gr.interface(fn = add, inputs = (“number”, “number”), outputs = “number”) demo.launch()
Gradation file>
Gradation file name=“utils.py” > def add(a,b): Returns a + b
Gradation file>
Gradient light>
Additional requirements
If your Gradio app has additional requirements, it is usually possible to install it in your browser using MicroPIP. I’ve created a wrapper to make this useful for Patiklar. Simply list requirements in contxt.txt with the same syntax as the requirements and enclose them with tags.
Here we will install Transformers_js_py and run the text classification model directly in the browser!
Gradient light>
Gradation request> Transformers_js_py
Gradation request>
Gradation file name=“app.py” Entry Points> Import Import_rint_transformers_js from transformers_js Import Grade Grade is GR Transformers = await inport_transformers_js() pipeline = transformers.pipeline pipe = async def classify(‘text): return wait(text) demo = gr.interface(text(text) demo(“json” “json” “json” “json” “json””json”)
Gradation file>
Gradient light>
Try it: You can see this example running on this embracing Face Static Space. This allows you to host Static (ServerLess) web applications for free. Visit the page and run machine learning models without internet access!
Benefits of using @Gradio/Lite
1. Serverless deployment
The main advantage of @Gradio/Lite is that it eliminates the need for a server infrastructure. This simplifies deployment, reduces server-related costs, and makes it easy to share grade applications with others.
2. Low latency
By running in a browser, @Gradio/Lite provides low latency interactions for users. No data is required to move data to and from the server. The result is a faster response and a smoother user experience.
3. Privacy and security
@Gradio/Lite provides increased privacy and security as all processing occurs within the user’s browser. User data remains on the device, providing peace of mind when processing data.
limit
Currently, the biggest limitation of using @Gradio/Lite is that grade apps usually take time (usually 5-15 seconds) to load into your browser first. This is because the browser needs to load the Pyodide runtime before rendering Python code.
Not all Python packages are supported by Pyodide. Gradio and many other popular packages (including Numpy, Scikit-Learn, Transformers-JS) can be installed on Pyodide, but if your app has many dependencies, it’s worth checking if the dependencies are included in Pyodide or if they can be installed with MicroPIP.
Please give it a try!
You can try @Gradio/Lite right away by copying and pasting this code into a local Index.html file and opening it in your browser.
HTML>
head>
script type=“Module” Cross Riggin 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>
Gradient light> Import the grade as gr def greet (name): “hello”, + name + “!”! “Gr.Interface(Greet, “TextBox”, “Textbox”). launch()
Gradient light>
body>
HTML>
We also created a play area on our gradient website. This allows you to interactively edit your code and see the results immediately.
Playground: https://www.gradio.app/playground
