SyncAI.news, a Varaisys broadcasting
Gradio-Lite: Serverless Gradio Running Entirely in Your Browser
HF

Hugging Face Blog

· 1 min read

AI LabsHugging Face Blog

Gradio-Lite: Serverless Gradio Running Entirely in Your Browser

Gradio is a popular Python library for creating interactive machine learning apps. Traditionally, Gradio applications have relied on server-side infrastructure to run, which can be a hurdle for developers who need to host their applications.

Enter Gradio-lite (@gradio/lite): a library that leverages Pyodide to bring Gradio directly to your browser. In this blog post, we'll explore what @gradio/lite is, go over example code, and discuss the benefits it offers for running Gradio applications.

What is @gradio/lite?

@gradio/lite is a JavaScript library that enables you to run Gradio applications directly within your web browser. It achieves this by utilizing Pyodide, a Python runtime for WebAssembly, which allows Python code to be executed in the browser environment. With @gradio/lite, you can write regular Python code for your Gradio applications, and they will run seamlessly in the browser without the need for server-side infrastructure.

Getting Started

Let's build a "Hello World" Gradio app in @gradio/lite

1. Import JS and CSS

Start by creating a new HTML file, if you don't have one already. Importing the JavaScript and CSS corresponding to the @gradio/lite package by using the following 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 you should generally use the latest version of @gradio/lite that is available. You can see the versions available here.

2. Create the <gradio-lite> tags

Somewhere in the body of your HTML page (wherever you'd like the Gradio app to be rendered), create opening and closing <gradio-lite> tags.

Note: you can add the theme attribute to the <gradio-lite> tag to force the theme to be dark or light (by default, it respects the system theme). E.g.

<gradio-lite theme="dark">
...
</gradio-lite>

Original source

This story was published by Hugging Face Blog. SyncAI.news shows a preview; the complete article is on the publisher's site.

Read the full story on huggingface.co

Similar News