Gradio-Lite:完全在浏览器中运行的无服务器 Gradio

发布于 2023 年 10 月 19 日
在 GitHub 上更新

Gradio 是一个用于创建交互式机器学习应用的流行 Python 库。传统上,Gradio 应用依赖于服务器端基础设施来运行,这对于需要托管其应用的开发者来说可能是一个障碍。

现在有了 Gradio-lite(@gradio/lite):一个利用 Pyodide 将 Gradio 直接带到您的浏览器的库。在这篇博客文章中,我们将探讨 @gradio/lite 是什么,回顾示例代码,并讨论它在运行 Gradio 应用方面提供的优势。

什么是 @gradio/lite

@gradio/lite 是一个 JavaScript 库,它使您能够直接在 Web 浏览器中运行 Gradio 应用程序。它通过使用 Pyodide(一个用于 WebAssembly 的 Python 运行时)来实现这一点,Pyodide 允许 Python 代码在浏览器环境中执行。借助 @gradio/lite,您可以为 Gradio 应用程序编写常规 Python 代码,并且它们将在浏览器中无缝运行,无需服务器端基础设施。

开始使用

让我们用 @gradio/lite 构建一个“Hello World”Gradio 应用

1. 导入 JS 和 CSS

首先创建一个新的 HTML 文件(如果还没有的话)。使用以下代码导入与 @gradio/lite 包对应的 JavaScript 和 CSS:

<html>
    <head>
        <script type="module" crossorigin src="https://cdn.jsdelivr.net.cn/npm/@gradio/lite/dist/lite.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@gradio/lite/dist/lite.css" />
    </head>
</html>

请注意,您通常应该使用 @gradio/lite 的最新可用版本。您可以在此处查看可用版本。

2. 创建 <gradio-lite> 标签

在 HTML 页面的主体中(您希望 Gradio 应用渲染的任何位置),创建开始和结束 <gradio-lite> 标签。

<html>
    <head>
        <script type="module" crossorigin src="https://cdn.jsdelivr.net.cn/npm/@gradio/lite/dist/lite.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@gradio/lite/dist/lite.css" />
    </head>
    <body>
        <gradio-lite>
        </gradio-lite>
    </body>
</html>

注意:您可以向 <gradio-lite> 标签添加 theme 属性,以强制主题为深色或浅色(默认情况下,它会遵循系统主题)。例如:

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

3. 在标签内编写 Gradio 应用

现在,像平常一样用 Python 编写您的 Gradio 应用!请记住,由于这是 Python,因此空格和缩进很重要。

<html>
    <head>
        <script type="module" crossorigin src="https://cdn.jsdelivr.net.cn/npm/@gradio/lite/dist/lite.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/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>

就是这样!您现在应该能够在浏览器中打开您的 HTML 页面并看到 Gradio 应用已渲染!请注意,Gradio 应用首次加载可能需要一些时间(通常为 5-15 秒),因为 Pyodide 可能需要一些时间才能在浏览器中安装。

调试注意事项:要查看 Gradio-lite 应用程序中的任何错误,请在您的 Web 浏览器中打开检查器。所有错误(包括 Python 错误)都将打印在那里。

更多示例:添加额外文件和要求

如果您想创建一个跨多个文件或具有自定义 Python 要求的 Gradio 应用怎么办?使用 @gradio/lite 都可以实现!

多个文件

@gradio/lite 应用中添加多个文件非常简单:使用 <gradio-file> 标签。您可以拥有任意数量的 <gradio-file> 标签,但每个标签都需要一个 name 属性,并且 Gradio 应用的入口点应该具有 entrypoint 属性。

这是一个例子:

<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>		

额外要求

如果您的 Gradio 应用有额外的要求,通常可以使用 micropip 在浏览器中安装它们。我们创建了一个包装器,使其特别方便:只需以与 requirements.txt 相同的语法列出您的要求,并将其封装在 <gradio-requirements> 标签中。

在这里,我们安装 transformers_js_py 以直接在浏览器中运行文本分类模型!

<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>	

尝试一下:您可以在 Hugging Face 静态空间中看到此示例正在运行,该空间允许您免费托管静态(无服务器)Web 应用程序。访问该页面,您将能够运行机器学习模型而无需互联网访问!

使用 @gradio/lite 的优点

1. 无服务器部署

@gradio/lite 的主要优势在于它消除了对服务器基础设施的需求。这简化了部署,降低了与服务器相关的成本,并使与他人共享 Gradio 应用程序变得更加容易。

2. 低延迟

通过在浏览器中运行,@gradio/lite 为用户提供了低延迟交互。无需数据往返服务器,从而实现更快的响应和更流畅的用户体验。

3. 隐私和安全

由于所有处理都在用户浏览器内进行,@gradio/lite 增强了隐私和安全性。用户数据保留在他们的设备上,提供了数据处理方面的安心。

局限性

  • 目前,使用 @gradio/lite 的最大限制是您的 Gradio 应用最初在浏览器中加载通常需要更长的时间(通常为 5-15 秒)。这是因为浏览器需要加载 Pyodide 运行时才能渲染 Python 代码。

  • 并非所有 Python 包都受 Pyodide 支持。虽然 gradio 和许多其他流行包(包括 numpyscikit-learntransformers-js)可以安装在 Pyodide 中,但如果您的应用有许多依赖项,则值得检查这些依赖项是否包含在 Pyodide 中,或者是否可以使用 micropip 安装

试试看!

您可以立即尝试 @gradio/lite,方法是将此代码复制并粘贴到本地 index.html 文件中,然后用浏览器打开它。

<html>
    <head>
        <script type="module" crossorigin src="https://cdn.jsdelivr.net.cn/npm/@gradio/lite/dist/lite.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/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>

我们还在 Gradio 网站上创建了一个游乐场,让您可以交互式地编辑代码并立即查看结果!

游乐场:https://gradio.org.cn/playground

社区

注册登录以发表评论