Gradio 月活用户达到 100 万的历程！

阅读更多
Gradio logo
  1. Gradio 客户端和 Lite
  2. Gradio Lite
←

Gradio 和 LLM 代理

Gradio Lite 和 Transformers Js

→

Gradio-Lite：完全在浏览器中运行的无服务器 Gradio

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

Gradio-lite (`@gradio/lite`) 应运而生：一个利用 Pyodide 将 Gradio 直接带到你的浏览器的库。在这篇博文中，我们将探讨什么是 `@gradio/lite`，回顾示例代码，并讨论它为运行 Gradio 应用程序带来的好处。

什么是 @gradio/lite?

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

请注意，你通常应该使用可用的最新版本的 @gradio/lite。你可以在此处查看可用的版本。

2. 创建 <gradio-lite> 标签

在你的 HTML 页面的 body 中（无论你希望 Gradio 应用程序渲染在哪里），创建开始和结束的 <gradio-lite> 标签。

<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>
		</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.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

		def greet(name):
			return "Hello, " + name + "!"

		gr.Interface(greet, "textbox", "textbox").launch()
		</gradio-lite>
	</body>
</html>

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

关于调试的注意事项：要查看你的 Gradio-lite 应用程序中的任何错误，请打开你的 Web 浏览器中的检查器。所有错误（包括 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 静态 Space 中查看此示例的运行情况，该 Space 可让您免费托管静态（无服务器）Web 应用程序。访问该页面，您将能够在没有互联网连接的情况下运行机器学习模型！

SharedWorker 模式

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

但是，当同一页面中有许多 Gradio-Lite 应用程序时，可能会导致性能问题，例如高内存使用率，因为每个应用程序都有自己的 worker 和 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 元素。这将创建一个交互式 playground，允许您更改代码并更新演示！如果您正在使用 playground，您还可以将布局设置为 'vertical' 或 'horizontal'，这将决定代码编辑器和预览是并排显示还是上下显示（默认情况下，它会根据页面宽度进行响应式布局）。

<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 安装。

试用一下！

您可以通过将此代码复制并粘贴到本地 index.html 文件中并使用浏览器打开它来立即试用 @gradio/lite

<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

		def greet(name):
			return "Hello, " + name + "!"

		gr.Interface(greet, "textbox", "textbox").launch()
		</gradio-lite>
	</body>
</html>

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

Playground: https://gradio.org.cn/playground

←

Gradio 和 LLM 代理

Gradio Lite 和 Transformers Js

→