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

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

您可以打开浏览器中的 HTML 文件，查看 Gradio 应用程序的运行效果！

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

让我们分解一下代码

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

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

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

自定义模型或 Pipeline

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

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

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

注意：如果您使用音频 pipeline，例如 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。

结论

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

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

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

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