diff --git a/_blog.yml b/_blog.yml index a28eb2cef9..00f437a424 100644 --- a/_blog.yml +++ b/_blog.yml @@ -2968,4 +2968,14 @@ - open-source-collab - onnxruntime - onnx - - inference \ No newline at end of file + - inference + +- local: gradio-lite + title: "Gradio-Lite: Serverless Gradio Running Entirely in Your Browser" + author: abidlabs + thumbnail: /blog/assets/167_gradio_lite/thumbnail.png + date: October 19, 2023 + tags: + - gradio + - open-source + - serverless diff --git a/assets/167_gradio_lite/thumbnail.png b/assets/167_gradio_lite/thumbnail.png new file mode 100644 index 0000000000..21ba25e2c6 Binary files /dev/null and b/assets/167_gradio_lite/thumbnail.png differ diff --git a/gradio-lite.md b/gradio-lite.md new file mode 100644 index 0000000000..3e561feac9 --- /dev/null +++ b/gradio-lite.md @@ -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 + + + + +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 + + + + + + +``` + +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 `` tags + +Somewhere in the body of your HTML page (wherever you'd like the Gradio app to be rendered), create opening and closing `` tags. + +```html + + + + + + + + + + +``` + +Note: you can add the `theme` attribute to the `` tag to force the theme to be dark or light (by default, it respects the system theme). E.g. + +```html + +... + +``` + +### 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 + + + + + + + + import gradio as gr + + def greet(name): + return "Hello, " + name + "!" + + gr.Interface(greet, "textbox", "textbox") + + + +``` + +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 `` tag. You can have as many `` 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 + + + +import gradio as gr +from utils import add + +demo = gr.Interface(fn=add, inputs=["number", "number"], outputs="number") + +demo.launch() + + + +def add(a, b): + return a + b + + + + +``` + +### 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 `` tags. + +Here, we install `transformers_js_py` to run a text classification model directly in the browser! + +```html + + + +transformers_js_py + + + +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() + + + + +``` + +**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 + + + + + + + + import gradio as gr + + def greet(name): + return "Hello, " + name + "!" + + gr.Interface(greet, "textbox", "textbox") + + + +``` + + +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 +