政安晨【零基础玩转各类开源AI项目】基于本地Ubuntu (Linux ) 系统应用Gradio-Lite：无服务器 Gradio 完全在浏览器中运行

简介

什么是@gradio/lite？

入门

1.导入 JS 和 CSS

2. 创建标签

3. 在标签内编写你的 Gradio 应用程序

更多示例：添加其他文件和要求

多个文件

其他要求

SharedWorker 模式

代码和演示playground

1.无服务器部署

2.低延迟

3. 隐私和安全

限制

尝试一下！

政安晨的个人主页：政安晨

欢迎 👍点赞✍评论⭐收藏

希望政安晨的博客能够对您有所裨益，如有不足之处，欢迎在评论区提出指正！

简介

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

输入 Gradio-lite（@gradio/lite）：一个利用 Pyodide将 Gradio 直接带到浏览器的库。

Pyodide 是基于 WebAssembly 的浏览器和 Node. js 的 Python 发行版。

Pyodide 是 CPython 到 WebAssembly/ Emscripten的移植。

Pyodide 允许使用 micropip在浏览器中安装和运行 Python 包。PyPI 上任何带有 wheel 的纯 Python 包均受支持。许多带有 C 扩展的包也已移植到 Pyodide 中。其中包括许多通用包，例如 regex、pyyaml、lxml 和科学 Python 包，包括 numpy、pandas、scipy、matplotlib 和 scikit-learn。

Pyodide 带有强大的 Javascript ⟺ Python 外部函数接口，因此您可以在代码中自由混合这两种语言，而不会产生任何麻烦。这包括对错误处理（在一种语言中抛出错误，在另一种语言中捕获错误）、async/await 等的完全支持。

在浏览器中使用时，Python 可以完全访问 Web API。

在这篇文章中，我们将探讨 @gradio/lite 是什么，回顾示例代码，并讨论它为运行 Gradio 应用程序提供的好处。

什么是@gradio/lite？

@gradio/lite是一个 JavaScript 库，可让您直接在 Web 浏览器中运行 Gradio 应用程序。它通过利用 Pyodide（WebAssembly 的 Python 运行时）来实现这一点，它允许在浏览器环境中执行 Python 代码。有了@gradio/lite，您可以为 Gradio 应用程序编写常规 Python 代码，它们将在浏览器中无缝运行，而无需服务器端基础设施。

入门

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

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>

注意：您可以将theme属性添加到<gradio-lite>标签以强制主题为深色或浅色（默认情况下，它遵循系统主题）。例如：

<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 应用程序的呈现效果！请注意，由于 Pyodide 可能需要一段时间才能安装在您的浏览器中，因此 Gradio 应用程序可能需要一段时间才能首次加载。

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

更多示例：添加其他文件和要求

如果您想创建一个跨多个文件的 Gradio 应用程序怎么办？或者有自定义 Python 要求？两者都可以@gradio/lite！

多个文件

在应用程序中添加多个文件@gradio/lite非常简单：使用标签。

您可以拥有任意<gradio-file>数量的标签，但每个标签都需要有一个属性，并且 Gradio 应用程序的入口点也应该具有该属性。<gradio-file>nameentrypoint

以下是一个例子：

<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 在浏览器中安装它们。我们创建了一个包装器，使这特别方便：只需以与 a 相同的语法列出您的要求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 应用程序。访问该页面，您将能够在没有互联网访问的情况下运行机器学习模型！

<!DOCTYPE html>
<html lang="en">
	<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>
		<h2>
			Gradio-lite (Gradio running entirely in your browser!)
		</h2>
		<p>Try it out! Once the Gradio app loads (can take 10-15 seconds), disconnect your Wifi and the machine learning model will still work!</p>

		<gradio-lite theme="dark">

		<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", examples=["It's a happy day in the neighborhood", "I'm an evil penguin", "It wasn't a bad film."])
		demo.launch()
		</gradio-file>

		</gradio-lite>
	</body>
</html>

SharedWorker 模式

默认情况下，Gradio-Lite使用Pyodide运行时在Web Worker中执行 Python 代码，并且每个 Gradio-Lite 应用都有自己的 Worker。它具有环境隔离等优势。

但是，当同一页面中有许多 Gradio-Lite 应用时，可能会导致性能问题，例如内存使用率过高，因为每个应用都有自己的工作器和 Pyodide 运行时。在这种情况下，您可以使用SharedWorker 模式在多个 Gradio-Lite 应用之间共享SharedWorker中的单个 Pyodide 运行时。要启用 SharedWorker 模式，请将shared-worker属性设置为<gradio-lite>标签。

<!-- These two Gradio-Lite apps share a single worker -->

<gradio-lite shared-worker>
import gradio as gr
# ...
</gradio-lite>

<gradio-lite shared-worker>
import gradio as gr
# ...
</gradio-lite>

使用SharedWorker模式时需要注意以下几点：

这些应用共享相同的 Python 环境，这意味着它们可以访问相同的模块和对象。例如，如果一个应用对某些模块进行了更改，则其他应用也可以看到这些更改。
文件系统在应用程序之间共享，同时每个应用程序的文件都挂载在每个主目录中，因此每个应用程序都可以访问其他应用程序的文件。

代码和演示playground

如果您想同时查看代码和演示，只需将playground属性传递给 gradio-lite 元素。

这将创建一个交互式操场，允许您更改代码并更新演示！如果您使用操场，您还可以将布局设置为“垂直”或“水平”，这将决定代码编辑器和预览是并排还是彼此叠放（默认情况下，它对页面宽度有响应）。

<gradio-lite playground layout="horizontal">
import gradio as gr

gr.Interface(fn=lambda x: x,
			inputs=gr.Textbox(),
			outputs=gr.Textbox()
		).launch()
</gradio-lite>

使用的好处@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>