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 库，使您能够在网页浏览器中直接运行 Gradio 应用程序。它通过利用 Pyodide（一个用于 WebAssembly 的 Python 运行时）来实现这一点，从而允许在浏览器环境中执行 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/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. 创建 标签

在HTML页面的某个位置（您希望Gradio应用程序渲染的地方），创建开始和结束的标签。

<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 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应用程序中的任何错误，请在您的网页浏览器中打开检查器。所有错误（包括Python错误）都将打印在那里。

更多示例：添加额外文件和需求

如果你想创建一个跨多个文件的Gradio应用程序，或者有自定义的Python需求，该怎么办？这两种情况都可以通过@gradio/lite实现！

多个文件

在@gradio/lite应用程序中添加多个文件非常简单：使用标签。你可以有任意数量的标签，但每个标签都需要有一个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相同的语法列出你的需求，并用标签包围它们。

在这里，我们安装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应用程序。访问该页面，你将能够在没有互联网连接的情况下运行一个机器学习模型！

SharedWorker 模式

默认情况下，Gradio-Lite 在 Web Worker 中使用 Pyodide 运行时执行 Python 代码，每个 Gradio-Lite 应用都有自己的 worker。 这样做有一些好处，比如环境隔离。

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

<!-- 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属性传递给gradio-lite元素。这将创建一个交互式游乐场，允许你更改代码并更新演示！如果你使用游乐场，你还可以将布局设置为'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秒）。这是因为浏览器在渲染Python代码之前需要加载Pyodide运行时。

  • 并非所有的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>

我们还在Gradio网站上创建了一个游乐场，允许您交互式地编辑代码并立即查看结果！

游乐场: https://www.gradio.app/playground

←

Gradio 与 Llm 代理

Gradio Lite 和 Transformers Js

→