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

Gradio 和 Transformers 是构建具有网页界面的机器学习应用程序的强大组合。这两个库都有可以在浏览器中完全运行的无服务器版本：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/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
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 pipeline pipe = await pipeline('sentiment-analysis') demo = gr.Interface.from_pipeline(pipe) demo.launch() transformers-js-py

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

标签内的 Python 代码是 Gradio 应用程序代码。有关此部分的更多详细信息，请参阅 this article。标签用于指定除了 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 pipeline pipe = 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) 创建的界面将具有一个用于上传图像并显示分类结果的用户界面。gr.Interface.from_pipeline 函数会根据管道的类型自动创建适当的用户界面。

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

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

自定义用户界面

你可以使用Gradio的常规API来定义用户界面，而不是使用gr.Interface.from_pipeline()。这里有一个例子，其中标签内的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
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 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() transformers-js-py

结论

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

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

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

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