Gradio 发布 Gradio-Lite：在浏览器中直接运行 Gradio 应用

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

Gradio-lite（@gradio/lite）应运而生：这是一个利用 Pyodide 将 Gradio 直接带入浏览器的库。在这篇博客文章中，我们将探讨 @gradio/lite 是什么，浏览示例代码，并讨论它为运行 Gradio 应用带来的好处。

什么是 @gradio/lite？

@gradio/lite 是一个 JavaScript 库，使你能够直接在网页浏览器中运行 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/npm/@gradio/lite/dist/lite.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/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/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>

注意：你可以在 <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/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>

就这样！你现在应该能够在浏览器中打开你的 HTML 页面，并看到 Gradio 应用渲染出来！请注意，Gradio 应用首次加载可能需要一点时间，因为 Pyodide 在你的浏览器中安装可能需要一段时间。

关于调试的说明：要查看 Gradio-lite 应用中的任何错误，请在网页浏览器中打开检查器。所有错误（包括 Python 错误）都会在那里打印出来。

更多示例：添加额外文件和依赖项

如果你想创建一个跨多个文件的 Gradio 应用呢？或者有自定义的 Python 依赖项？这两者都可以用 @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 和许多其他流行包（包括 numpy、scikit-learn 和 transformers-js）都可以安装在 Pyodide 中，但如果你的应用有很多依赖项，值得检查一下这些依赖项是否包含在 Pyodide 中，或者可以通过 micropip 安装。

试试看！

你可以立即尝试 @gradio/lite，只需将这段代码复制粘贴到本地的 index.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>

我们还在 Gradio 网站上创建了一个演练场，让你可以交互式地编辑代码并立即查看结果！

演练场：https://www.gradio.app/playground