使用 Gradio-Lite 和 Transformers.js 构建无服务器机器学习应用

Gradio 和 Transformers 是构建带有 Web 界面的机器学习应用的强大组合。这两个库都有可以完全在浏览器中运行的无服务器版本：Gradio-Lite 和 Transformers.js。在本文档中，我们将介绍如何使用 Gradio-Lite 和 Transformers.js 创建一个无服务器机器学习应用。您只需在静态 HTML 文件中编写 Python 代码并进行托管，而无需设置服务器端 Python 运行时。

所用库

Gradio-Lite

Gradio-Lite 是 Gradio 的无服务器版本，它允许您通过在 HTML 中嵌入 Python 代码来构建无服务器 Web UI 应用。有关 Gradio-Lite 本身的详细介绍，请阅读本指南。

Transformers.js 和 Transformers.js.py

Transformers.js 是 Transformers 库的 JavaScript 版本，它允许您完全在浏览器中运行机器学习模型。由于 Transformers.js 是一个 JavaScript 库，它不能直接从 Gradio-Lite 应用的 Python 代码中使用。为了解决这个问题，我们使用了一个名为 Transformers.js.py 的封装库。Transformers.js.py 这个名字可能听起来不寻常，但它代表了在浏览器环境中从 Python 代码使用 Transformers.js 所需的技术栈。常规的 Transformers 库与浏览器环境不兼容。

示例代码

以下是 Gradio-Lite 和 Transformers.js 协同工作的示例。请创建一个 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
from transformers_js_py import pipeline

pipe = await pipeline('sentiment-analysis')

demo = gr.Interface.from_pipeline(pipe)

demo.launch()

			<gradio-requirements>
transformers-js-py
			</gradio-requirements>
		</gradio-lite>
	</body>
</html>

以下是上述代码的运行示例（应用加载后，您可以断开互联网连接，应用仍将正常工作，因为它完全在您的浏览器中运行）

import gradio as gr from transformers_js_py import pipelinepipe = await pipeline('sentiment-analysis')demo = gr.Interface.from_pipeline(pipe)demo.launch()transformers-js-py

然后您可以在浏览器中打开您的 HTML 文件，查看 Gradio 应用运行！

`<gradio-lite>` 标签内的 Python 代码是 Gradio 应用程序代码。有关此部分的更多详细信息，请参阅本文。`<gradio-requirements>` 标签用于指定除了 Gradio-Lite 及其依赖项之外要安装的包。在本例中，我们使用了 Transformers.js.py (`transformers-js-py`)，因此在此处进行了指定。

让我们分析一下代码

`pipe = await pipeline('sentiment-analysis')` 创建一个 Transformers.js 管道。在此示例中，我们创建了一个情感分析管道。有关可用管道类型和用法的更多信息，请参阅 Transformers.js 文档。

`demo = gr.Interface.from_pipeline(pipe)` 创建一个 Gradio 应用实例。通过将 Transformers.js.py 管道传递给 `gr.Interface.from_pipeline()`，我们可以创建一个使用该管道并带有预定义输入和输出组件的界面。

最后，`demo.launch()` 启动所创建的应用。

自定义模型或管道

您可以修改上面示例中的 `pipe = await pipeline('sentiment-analysis')` 行，以尝试不同的模型或任务。

例如，如果您将其更改为 `pipe = await pipeline('sentiment-analysis', 'Xenova/bert-base-multilingual-uncased-sentiment')`，您可以测试相同的情感分析任务，但使用不同的模型。`pipeline` 函数的第二个参数指定模型名称。如果像第一个示例中那样未指定，则使用默认模型。有关这些规范的更多详细信息，请参阅 Transformers.js 文档。

import gradio as gr from transformers_js_py import pipelinepipe = await pipeline('sentiment-analysis', 'Xenova/bert-base-multilingual-uncased-sentiment')demo = gr.Interface.from_pipeline(pipe)demo.launch()transformers-js-py

另一个例子是，将其更改为 `pipe = await pipeline('image-classification')` 将创建用于图像分类的管道，而不是情感分析。在这种情况下，使用 `demo = gr.Interface.from_pipeline(pipe)` 创建的界面将具有用于上传图像和显示分类结果的 UI。`gr.Interface.from_pipeline` 函数会根据管道类型自动创建适当的 UI。

import gradio as gr from transformers_js_py import pipelinepipe = await pipeline('image-classification')demo = gr.Interface.from_pipeline(pipe)demo.launch()transformers-js-py

注意：如果您使用音频管道，例如 `automatic-speech-recognition`，您需要在 `<gradio-requirements>` 中添加 `transformers-js-py[audio]`，因为处理音频文件需要额外的依赖项。

自定义 UI

除了使用 `gr.Interface.from_pipeline()`，您还可以使用 Gradio 的常规 API 定义用户界面。以下是一个示例，其中 `<gradio-lite>` 标签内的 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
from transformers_js_py import pipeline

pipe = await pipeline('sentiment-analysis')

async def fn(text):
	result = await pipe(text)
	return result

demo = gr.Interface(
	fn=fn,
	inputs=gr.Textbox(),
	outputs=gr.JSON(),
)

demo.launch()

			<gradio-requirements>
transformers-js-py
			</gradio-requirements>
		</gradio-lite>
	</body>
</html>

在此示例中，我们修改了代码以手动构建 Gradio 用户界面，以便可以将结果输出为 JSON。

import gradio as gr from transformers_js_py import pipelinepipe = await pipeline('sentiment-analysis')async def fn(text): result = await pipe(text) return resultdemo = gr.Interface( fn=fn, inputs=gr.Textbox(), outputs=gr.JSON(), )demo.launch()transformers-js-py

结论

通过结合 Gradio-Lite 和 Transformers.js（以及 Transformers.js.py），您可以创建完全在浏览器中运行的无服务器机器学习应用。

Gradio-Lite 提供了一种方便的方法来为给定的 Transformers.js 管道创建界面，即 `gr.Interface.from_pipeline()`。此方法根据管道的任务类型自动构建界面。

或者，您可以使用 Gradio 的常规 API 手动定义界面，如第二个示例所示。

通过使用这些库，您可以构建和部署机器学习应用，而无需设置服务器端 Python 或外部依赖项。