超级会员免费看
Gradio全解2——Gradio的四种部署方式实践（下）——浏览器集成Gradio-Lite
本章目录如下：
2.4 浏览器集成Gradio-Lite
本节介绍Gradio的第四种部署方式：无服务器的浏览器集成部署Gradio-Lite。传统上，Gradio应用程序依赖服务器端基础设施来运行，这对需要托管应用程序的开发人员来说可能是一个阻碍，因此Gradio-Lite应运而生。本节我们将探讨Gradio-Lite是什么，通过示例代码讨论它为运行gradio应用程序提供的便利，然后介绍它如何与Transformers.js一起构建无服务器的机器学习Apps，最后分析优缺点。
2.4.1 Gradio-Lite介绍
Gradio-Lite是一个JavaScript库，官方有时也写作@gradio/lite，它利用Pyodide直接在网页浏览器中运行gradio应用程序。Pyodide是基于WebAssembly的py平台（指支持Python运行的上下文环境），它可以在浏览器环境下执行Python代码。WebAssembly（简称wasm）是一个虚拟指令集体系架构（virtual ISA），是面向Web的二进制格式，整体架构包括核心的ISA定义、二进制编码、程序语义的定义与执行，以及面向不同的嵌入环境（如Web）的应用编程接口（WebAssembly API）；其初始目标是为编译后的C/C++等语言程序，在确保安全和接近原生应用运行速度的基础上，更好地在Web平台上运行。
利用Pyodide，Gradio-Lite可以为Gradio应用程序编写常规Python代码，并在浏览器中无缝运行，而无需服务器端的基础设施。
2.4.2 构建例程
为了加深理解和实践应用，我们多展示几个Gradio-Lite例程，并演示不同功能。
1. HelloWorld例程
第一个例程，HelloWorld。下面我们通过构建示例程序HelloWorld来揭示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包，见<head>部分。
- 在HTML页的<body>标签内创建<gradio-lite>开合标签，也可以设置<gradio-lite>内的属性，比如theme。
- 在标签<gradio-lite>内添加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
等待几秒钟后，运行效果如图2-9所示：
2. 多文件集成
第二个示例，多文件集成（Multiple Files）。@gradio/lite应用程序中添加多个文件非常简单：使用<gradio-file>标记。我们可以有任意多个<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>
3. 附件需求
第三个示例，导入附件需求（Additional Requirements）。如果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>
运行效果如图2-10：
4. 共享工作空间模式
第四个示例，共享工作空间模式（SharedWorker mode）。默认情况下，Gradio-Lite在具有Pyodide的Web工作空间中执行Python代码，并且每个Gradio-Lite应用程序都有自己的工作空间。它有一些好处，例如环境隔离。然而，当同一页面中有多个Gradio-Lite应用程序时，可能会导致性能问题，如内存使用率高，因为每个应用程序都需加载自己的工作空间和Pyodide的py平台。
在这种情况下，我们可以使用SharedWorker模式在多个Gradio-Lite应用程序之间共享一个shared-worker中的单个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环境，这意味着它们可以访问相同的模块和对象。例如，如果一个应用程序对某些模块进行了更改，也会影响到其他应用程序。
- 文件系统在应用程序之间共享。因为每个应用程序的文件都挂载在主目录中，因此每个应用程序都可以访问其他应用程序的文档。
5. 代码和演示空间
第五个示例，代码和演示空间（Code and Demo Playground）。如果您希望代码与演示并排展示，只需在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>
运行效果如图2-11所示：
2.4.3 与Transformers.js一起构建无服务器App
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。
1. transformers-js-py
将Gradio-Lite与Transformers.js通过transformers_js_py结合，以pipeline的情感分析sentiment-analysis为例，创建html并输入代码：
<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>
注意：加载应用程序后可以断开Internet连接，但应用程序仍然可以工作，因为它完全在浏览器中运行。使用浏览器打开html文件，上面代码的运行界面如图2-12：
代码说明：
- 标签<gradio-lite> 内是gradio应用程序代码，<gradio-requirements>用于指定要安装的包或Gradio-Lite依赖项，这里使用Transformers.js.py（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()启动创建的应用程序。
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。
注意：如果使用音频管道，如自动语音识别，则在处理音频文件时，需要在<gradio-requirements>中引入transformers js-py[audio]。
如果不想使用gr.Interface.from_pipeline()中自定义的UI，也可以通过Gradio的常规API定义用户界面。以下示例中，我们修改了代码以手动构建Gradio用户界面，这样我们就可以将结果输出为JSON：
<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>
通过结合Gradio-Lite和经由Transformers.js.py的Transformers.js，可以创建完全在浏览器中运行的无服务器形式的机器学习应用。Gradio-Lite通过gr.Interface.from_pipeline()来为给定的Transformers.js pipeline创建接口，此方法根据管道的任务类型自动构造用户界面，也可以通过Gradio的常规API手动定义界面。通过使用这些库，我们就可以构建和部署各类机器学习应用，而无需设置Python服务器或外部依赖。
2.4.4 优缺点分析
任何事物都有优缺点，@gradio/lite的优缺点比较鲜明。
1. @gradio/lite的优点
使用@gradio/lite的好处包括：
- 无服务器部署：@gradio/lite的主要优点是它消除了对服务器基础设施的需求。这简化了部署，降低了与服务器相关的成本，并使Gradio应用程序易于分享。
- 低延迟：通过在浏览器中运行，@gradio/lite为用户提供了低延迟的交互。不需要数据往返于服务器，从而实现更快的响应和更流畅的用户体验。
- 隐私和安全：由于所有处理都发生在用户的浏览器中，用户数据只在本地设备上流转，因此@gradio/lite增强了隐私和安全性。
2. 缺点及局限性
目前，使用@gradio/lite的最大限制是初始加载时间。浏览器初始加载gradio应用程序通常需要较长时间（通常为5-15秒），这是因为浏览器在渲染Python代码之前需要加载Pyodide运行时。
另外，Pyodide并不支持所有Python包。虽然gradio和许多其他流行的软件包（包括numpy、scikit-learn和transformers-js）可以安装在Pyodide中，但当应用程序有很多依赖项，还是需要检查这些依赖与Pyodide的兼容性，以及是否可以通过micropip安装。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
