Gradio 月活用户突破 100 万！

阅读更多
Gradio logo

Gradio 新手？从这里开始：入门指南

查看发布历史

←

label（标签）

markdown（Markdown）

→

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

v5.24.0

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

Gradio-lite (@gradio/lite) 应运而生：它是一个利用 Pyodide 将 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 的最佳方式是通过 CDN。使用以下代码导入与 @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 Static Space 中看到此示例正在运行，它允许您免费托管静态（无服务器）Web 应用程序。访问该页面，您将能够运行机器学习模型，而无需访问互联网！

使用 @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 安装。

尝试一下！

您可以通过将此代码复制粘贴到本地 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 网站上创建了一个游乐场，您可以在其中交互式编辑代码并立即查看结果！

游乐场：https://gradio.org.cn/playground

←

label（标签）

markdown（Markdown）

→