mirror of
https://github.com/gradio-app/gradio.git
synced 2024-12-27 02:30:17 +08:00
196 lines
7.6 KiB
Markdown
196 lines
7.6 KiB
Markdown
|
# 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](https://pyodide.org/en/stable/) to bring Gradio directly to your browser.
|
||
|
|
|
||
|
|
## 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. The best way to use @gradio/lite currently is via the CDN. Import the JavaScript and CSS corresponding to the `@gradio/lite` package by using the following code:
|
||
|
|
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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](https://www.jsdelivr.com/package/npm/@gradio/lite?tab=files).
|
||
|
|
|
||
|
|
### 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.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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 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.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<gradio-lite theme="dark">
|
||
|
|
...
|
||
|
|
</gradio-lite>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 3. Write your Gradio app inside of the tags
|
||
|
|
|
||
|
|
Now, write your Gradio app as you would normally, in Python! Keep in mind that since this is Python, whitespace and indentations matter.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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's it! You should now be able to open your HTML page in the browser and see the Gradio app rendered! Note that it may take a little while for the Gradio app to load initially since Pyodide can take a while to install 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) will be printed there.
|
||
|
|
|
||
|
|
## More Examples: Adding Additional Files and Requirements
|
||
|
|
|
||
|
|
What if you want to create a Gradio app that spans multiple files? Or that has custom Python requirements? Both are possible with `@gradio/lite`!
|
||
|
|
|
||
|
|
### Multiple Files
|
||
|
|
|
||
|
|
Adding multiple files within a `@gradio/lite` app is very straightrward: use the `<gradio-file>` tag. You can have as many `<gradio-file>` tags as you want, but each one needs to have a `name` attribute and the entry point to your Gradio app should have the `entrypoint` attribute.
|
||
|
|
|
||
|
|
Here's an example:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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
|
||
|
|
|
||
|
|
If your Gradio app has additional requirements, it is usually possible to [install them in the browser using micropip](https://pyodide.org/en/stable/usage/loading-packages.html#loading-packages). We've created a wrapper to make this paticularly convenient: simply list your requirements in the same syntax as a `requirements.txt` and enclose them with `<gradio-requirements>` tags.
|
||
|
|
|
||
|
|
Here, we install `transformers_js_py` to run a text classification model directly in the browser!
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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 can see this example running in [this Hugging Face Static Space](https://huggingface.co/spaces/abidlabs/gradio-lite-classify), which lets you host static (serverless) web applications for free. Visit the page and you'll be able to run a machine learning model without internet access!
|
||
|
|
|
||
|
|
## Benefits of Using `@gradio/lite`
|
||
|
|
|
||
|
|
### 1. Serverless Deployment
|
||
|
|
The primary advantage of @gradio/lite is that it eliminates the need 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 in the browser, @gradio/lite offers low-latency interactions for users. There's no need for data to travel to and from a server, resulting in faster responses and a smoother user experience.
|
||
|
|
|
||
|
|
### 3. Privacy and Security
|
||
|
|
Since all processing occurs within the user's browser, `@gradio/lite` enhances privacy and security. User data remains on their device, providing peace of mind regarding data handling.
|
||
|
|
|
||
|
|
### Limitations
|
||
|
|
|
||
|
|
* Currently, the biggest limitation in using `@gradio/lite` is that your Gradio apps will generally take more time (usually 5-15 seconds) to load initially in the browser. This is because the browser needs to load the Pyodide runtime before it can render Python code.
|
||
|
|
|
||
|
|
* Not every Python package is supported by Pyodide. While `gradio` and many other popular packages (including `numpy`, `scikit-learn`, and `transformers-js`) can be installed in Pyodide, if your app has many dependencies, its worth checking whether whether the dependencies are included in Pyodide, or can be [installed with `micropip`](https://micropip.pyodide.org/en/v0.2.2/project/api.html#micropip.install).
|
||
|
|
|
||
|
|
## Try it out!
|
||
|
|
|
||
|
|
You can immediately try out `@gradio/lite` by copying and pasting this code in a local `index.html` file and opening it with your browser:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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've also created a playground on the Gradio website that allows you to interactively edit code and see the results immediately!
|
||
|
|
|
||
|
|
Playground: https://www.gradio.app/playground
|
||
|
|
|
||
|
|
|