-
Notifications
You must be signed in to change notification settings - Fork 787
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
215 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,204 @@ | ||
| --- | ||
| title: Gradio-Lite: Serverless Gradio Running Entirely in Your Browser | ||
| thumbnail: /blog/assets/167_gradio_lite/thumbnail.png | ||
| authors: | ||
| - user: abidlabs | ||
| - user: whitphx | ||
| - user: aliabd | ||
| --- | ||
|
|
||
|
|
||
| # Gradio-Lite: Serverless Gradio Running Entirely in Your Browser | ||
|
|
||
| <!-- {blog_metadata} --> | ||
| <!-- {authors} --> | ||
|
|
||
| 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. 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 | ||
| <html> | ||
| <head> | ||
| <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/[email protected]/dist/lite.js"></script> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/[email protected]/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/[email protected]/dist/lite.js"></script> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/[email protected]/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/[email protected]/dist/lite.js"></script> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/[email protected]/dist/lite.css" /> | ||
| </head> | ||
| <body> | ||
| <gradio-lite> | ||
| import gradio as gr | ||
|
|
||
| def greet(name): | ||
| return "Hello, " + name + "!" | ||
|
|
||
| gr.Interface(greet, "textbox", "textbox") | ||
| </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 Pyiodide can take a while to install in your browser. | ||
|
|
||
| ## 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 Space, which lets you run a machine learning model without internet access: https://huggingface.co/spaces/abidlabs/gradio-lite-classify | ||
|
|
||
| ## 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 Pyiodide runtime before it can render Python code. | ||
|
|
||
| * Not every Python package is supported by Pyiodide. While `gradio` and many other popular packages (including `numpy`, `scikit-learn`, and `transformers-js`) can be installed in Pyiodide, if your app has many dependencies, its worth checking whether whether the dependencies are included in Pyiodide, 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/[email protected]/dist/lite.js"></script> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/[email protected]/dist/lite.css" /> | ||
| </head> | ||
| <body> | ||
| <gradio-lite> | ||
| import gradio as gr | ||
|
|
||
| def greet(name): | ||
| return "Hello, " + name + "!" | ||
|
|
||
| gr.Interface(greet, "textbox", "textbox") | ||
| </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/demos | ||
|
|