全网最详细Gradio教程系列——浏览器集成部署Gradio-Lite

全网最详细Gradio教程系列——浏览器集成Gradio-Lite

前言
本篇摘要
4 浏览器集成Gradio-Lite
- 4.1 Gradio-Lite介绍
- 4.2 构建Hello World例程
- 4.3 routines
- - 4.3.1 multiple files
  - 4.3.2 Additional Requirements
  - 4.3.3 SharedWorker mode
  - 4.3.4 Code and Demo Playground
- 4.4 与Transformers.js一起构建无服务器的ML Apps
- - 4.4.1 transformers_js_py
  - 4.4.2 定制化model、pipeline和UI
- 4.5 优缺点分析
- - 4.5.1 @gradio/lite的优点
  - 4.5.2 局限性
参考文献

前言

本系列文章主要介绍WEB界面工具Gradio。Gradio是Hugging Face发布的一个简易的webui开发框架，它基于FastAPI和svelte，便于部署人工智能模型，是当前热门的非常易于开发和展示机器大语言模型及扩散模型的UI框架。本系列文章不仅从概念上介绍Gradio的详细技术架构、历史、应用场景、与其他框架Gradio/NiceGui/StreamLit/Dash/PyWebIO的区别，还进行了大量实践讲解。实践部分先讲解了多种不同的安装、运行和部署方式，然后实践了基础类的Interfaces、Blocks和Custom Components，最后对详解Gradio的多种高级特性，比如Gradio-Lite、Gradio Client和Tabular Data Science And Plots等。

本系列文章如下：

《全网最详细Gradio教程系列——Gradio简介》
《全网最详细Gradio教程系列——Gradio的安装与运行》
《全网最详细Gradio教程系列——Gradio的3+1种部署方式实践》
《全网最详细Gradio教程系列——浏览器集成Gradio-Lite》
《全网最详细Gradio教程系列——Gradio Client》
《全网最详细Gradio教程系列——Interfaces》
《全网最详细Gradio教程系列——Blocks》
《全网最详细Gradio教程系列——Custom Components》
《全网最详细Gradio教程系列——Tabular Data Science And Plots 》

本篇摘要

本篇详细介绍了Gradio的第四种部署方式：无服务器的浏览器集成部署Gradio-Lite。

4 浏览器集成Gradio-Lite

4.1 Gradio-Lite介绍

传统上，Gradio应用程序依赖服务器端基础设施来运行，这对需要托管应用程序的开发人员来说可能是一个阻碍，Gradio-Lite应运而生。本节我们将探讨Gradio-Lite是什么，浏览示例代码，并讨论它为运行gradio应用程序提供的好处。

Gradio-lite (官方资料也写作@gradio/lite)是一个JavaScript库，它利用Pyodide直接在web浏览器中运行gradio应用程序。Pyodide是基于WebAssembly的 py平台，它可以在浏览器环境下执行python代码。WebAssembly（简称wasm）是一个虚拟指令集体系架构（virtual ISA），是面向Web的二进制格式，整体架构包括核心的ISA定义、二进制编码、程序语义的定义与执行，以及面向不同的嵌入环境（如Web）的应用编程接口（WebAssembly API）。其初始目标是为C/C++等语言编写的程序经过编译，在确保安全和接近原生应用的运行速度更好地在Web平台上运行。

而使用Gradio-Lite可以为gradio应用程序编写常规Python代码，并在浏览器中无缝运行，而无需服务器端的基础设施。

4.2 构建Hello World例程

下面我们通过构建示例程序Hello World来揭示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>
		import gradio as gr

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

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

构建步骤如下：

首先，创建一个新的HTML文件并命名，如hello.html，并引入与@gradio/lite相关的JavaScript和CSS包，见内容；
在包含Gradio程序的HTML页内的标签内创建开合标签，也可以设置内的属性，比如theme；
在标签内添加python格式的Gradio代码。

注意：作者在用firefox打开HTML文件时，遇到错误提示无法打开：Gtk-Message: Failed to load module “canberra-gtk-module”，搜索解决办法无果，后来用chromium，虽然同样报错但可以顺利打开并正确执行Gradio程序，读者也可以尝试其它的浏览器。运行输出信息如下：

$ chromium gradio_file.html 
(chrome:46749): Gtk-WARNING **: 20:08:24.912: GTK+ module /snap/chromium/2890/gnome-platform/usr/lib/gtk-2.0/modules/libcanberra-gtk-module.so cannot be loaded.
GTK+ 2.x symbols detected. Using GTK+ 2.x and GTK+ 3 in the same process is not supported.
Gtk-Message: 20:08:24.912: Failed to load module "canberra-gtk-module"
[46749:46749:0627/200825.142461:ERROR:object_proxy.cc(576)] Failed to call method: org.freedesktop.ScreenSaver.GetActive: object_path= /org/freedesktop/ScreenSaver: org.freedesktop.DBus.Error.NotSupported: This method is not implemented

等待几秒钟后，运行效果如下图所示：
在这里插入图片描述

4.3 routines

为了加深理解和实践应用，我们多展示几个Gradio-Lite例程。

4.3.1 multiple files

第一个示例，多文件集成。在@gradio/lite应用程序中添加多个文件非常简单：使用标记。您可以有任意多个＜gradio file＞标签，但每个标签都需要有一个name属性，并且gradio应用程序的入口点应该有entrypoint属性。

html的head和body标签部分与上例相同，故省略，例程代码如下：

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

4.3.2 Additional Requirements

第二个示例，导入附加requirements。如果您的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>

运行效果如下图：
在这里插入图片描述

4.3.3 SharedWorker mode

第三个示例，共享工作空间模式。默认情况下，Gradio-Lite在具有Pyodide的Web工作空间中执行Python代码，并且每个Gradio-Lite应用程序都有自己的工作空间。它有一些好处，例如环境隔离。然而，当同一页面中有多个Gradio-Lite应用程序时，可能会导致性能问题，如内存使用率高，因为每个应用程序都需加载自己的工作空间和Pyodide的py平台。

在这种情况下，我们可以使用SharedWorker模式在多个Gradio-Lite应用程序之间共享一个SharedWorker中的单个Pyodide的py平台。

要启用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环境，这意味着它们可以访问相同的模块和对象。例如，如果一个应用程序对某些模块进行了更改，也会影响到其他应用程序。
文件系统在应用程序之间共享。因为每个应用程序的文件都挂载在主目录中，因此每个应用程序都可以访问其他应用程序的文档。

4.3.4 Code and Demo Playground

第四个示例，代码和demo空间。如果您希望代码与演示并排，只需在gradio-lite元素中设置playground属性即可。这将创建一个可以同步更新代码和demo的交互式空间，同时也可以将布局设置为“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>

运行效果如下图所示：
在这里插入图片描述

4.4 与Transformers.js一起构建无服务器的ML Apps

Gradio和Transformers是构建具有web界面的机器学习应用程序的强大组合，这两个库都有可以完全在浏览器中运行的无服务器版本：Gradio-Lite和Transformers.js。在本节，我们将介绍如何使用Gradio-Lite和Transformers.js创建无服务器的机器学习应用程序。我们只需在一个静态HTML文件中编写Python代码并托管它，而无需设置服务器端的py平台。

常规Transformers库与浏览器环境不兼容，而Transformers.js是Transformers库的JavaScript版本，这导致浏览器中Gradio-Lite应用程序的Python代码不能直接使用Transformers库和Transformers.js。为此，我们使用了一个名为Transformers.js.py的包装库，它包含了在浏览器环境中使用Python代码中的Transformers.js所需的所有技术堆栈。

下面看一些routines。

4.4.1 transformers_js_py

将Gradio-Lite与Transformers.js通过transformers_js_py结合，以pipeline的情感分析sentiment-analysis为例，创建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>

使用浏览器打开html文件，以下是上面代码的运行示例（加载应用程序后可以断开Internet连接，但应用程序仍然可以工作，因为它完全在您的浏览器中运行）：
在这里插入图片描述代码说明：

标签内是gradio应用程序代码，用于指定要安装的包或Gradio-Lite及其依赖项，这里使用Transformers.js.py (transformers-js-py)。
pipe = await pipeline(‘sentiment-analysis’) ：创建了一个Transformers.js的情感分析pipeline，关于更多pipeline的类型和用法，请参考Transformers.js的官方文档：
demo = gr.Interface.from_pipeline(pipe)：通过向gr.Interface.from_pipeline()传入Transformers.js.py类型的pipeline，创建了一个Gradio应用程序实例Interface，该接口利用了pipeline中预定义的输入和输出组件以生成WEBUI。
demo.launch() 启动创建的应用程序。

4.4.2 定制化model、pipeline和UI

在上例中，可以修改pipeline()的参数来尝试不同的任务或模型，比如pipe = await pipeline(‘sentiment-analysis’, ‘Xenova/bert-base-multilingual-uncased-sentiment’)，第二个参数用于制定情根分析任务的模型名称，如果像第一个示例中没有指定，则使用默认模型。

另外比如pipe = await pipeline(‘image-classification’)，创建图像分类的pipeline，此时Interface会自动转换为上传图像和展示分类结果的界面。函数gr.Interface.from_pipeline()会基于pipeline类型自动创建合适UI。
注意：如果您使用音频管道，如自动语音识别，则在处理音频文件时需要在中引入transformers js-py[audio]。

如果不想使用gr.Interface.from_pipeline()中自定义的UI，也可以通过Gradio的常规API定义用户界面。以下示例中，我们修改了代码以手动构建Gradio用户界面，这样我们就可以将结果输出为JSON：

<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-Lite和Transformers.js（通过Transformers.js.py），可以创建完全在浏览器中运行的无服务器机器学习应用程序。Gradio-Lite通过gr.Interface.from_pipeline()来为给定的Transformers.js pipeline创建接口，此方法根据管道的任务类型自动构造UI，也可以Gradio的常规API手动定义接口。通过使用这些库，我们就可以可以构建和部署机器学习应用程序，而无需服务器端Python设置或外部依赖。

4.5 优缺点分析

4.5.1 @gradio/lite的优点

使用@gradio/lite的好处包括：

无服务器部署：@gradio/lite的主要优点是它消除了对服务器基础设施的需求。这简化了部署，降低了与服务器相关的成本，并使Gradio应用程序易于分享。
低延迟：通过在浏览器中运行，@gradio/lite为用户提供了低延迟的交互。不需要数据往返于服务器，从而实现更快的响应和更流畅的用户体验。
隐私和安全：由于所有处理都发生在用户的浏览器中，用户数据只在本地设备上流转，因此@gradio/lite增强了隐私和安全性。

4.5.2 局限性

目前，使用@gradio/lite的最大限制是初始加载时间。浏览器初始加载gradio应用程序通常需要较长时间（通常为5-15秒），这是因为浏览器在渲染Python代码之前需要加载Pyodide运行时。

另外，Pyodide并不支持所有Python包。虽然gradio和许多其他流行的软件包（包括numpy、scikit learn和transformers js）可以安装在Pyodide中，但当应用程序有很多依赖项，还是需要检查这些依赖与Pyodide的兼容性，以及是否可以通过micropip安装。