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

已于 2024-07-01 11:49:58 修改
阅读量1.3k 收藏
点赞数 12
文章标签： gradio-lite transformers_js requirements playground sharedworker
于 2024-06-29 20:57:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shao918516/article/details/140070323
版权

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

前言

本系列文章主要介绍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等。

本系列文章如下：

  1. 《全网最详细Gradio教程系列——Gradio简介》
  2. 《全网最详细Gradio教程系列——Gradio的安装与运行》
  3. 《全网最详细Gradio教程系列——Gradio的3+1种部署方式实践》
  4. 《全网最详细Gradio教程系列——浏览器集成Gradio-Lite》
  5. 《全网最详细Gradio教程系列——Gradio Client》
  6. 《全网最详细Gradio教程系列——Interfaces》
  7. 《全网最详细Gradio教程系列——Blocks》
  8. 《全网最详细Gradio教程系列——Custom Components》
  9. 《全网最详细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>

构建步骤如下：

  1. 首先，创建一个新的HTML文件并命名，如hello.html，并引入与@gradio/lite相关的JavaScript和CSS包，见内容；
  2. 在包含Gradio程序的HTML页内的标签内创建开合标签，也可以设置内的属性，比如theme；
  3. 在标签内添加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模式时，应注意以下几点：

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

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连接，但应用程序仍然可以工作，因为它完全在您的浏览器中运行）：
在这里插入图片描述代码说明：

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

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

4.5.2 局限性

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

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

参考文献

机器学习实战之模型的解释性：Scikit-Learn的SHAP和LIME库详解

shao918516
关注
gradio-master_AnywhereWithYou_gradio-master_
10-01
在"gradio-master"压缩包中，我们可以期待找到一系列用于构建gradio应用的文件，如Python源代码、配置文件、示例数据等。这些文件通常包含以下部分： 1. **主程序文件**（如`main.py`）：这是整个应用的入口点，...
全网最最实用--教你用gradio搭网页、部署模型等（代码粘贴即用、不讲虚的）
m0_56243424的博客
07-09 3024
Gradio 是一个用于快速创建和共享机器学习模型的 Python 库。它允许开发者通过简单的代码定义输入和输出组件，创建一个Web 界面，用户可以通过该界面进行机器学习模型的交互。Gradio 支持多种输入和输出类型，包括文本、视频、文件、滑块、单选、收听等，使得用户说过的演示模型。pip install gradio #安装，python大于等于3.8。Gradio 提供了多种组件，用于创建交互式界面。gr.Interface：用来构建可视化界面。gr.Image：用于图像输入和输出。
手把手Gradio教程，超全！！！（附实战代码）
m0_72410588的博客
04-27 1万+
本篇博客介绍了Gradio的基础知识和入门步骤，包括安装Gradio、构建Gradio应用、Gradio的输入和输出组件以及Gradio的高级功能等。相信通过这篇博客的学习，读者能够快速掌握Gradio，并使用它来构建自己的AI应用程序。
Gradio入门
最新发布
加州暖阳的博客
08-16 883
Gradio是一个用于构建和部署机器学习和数据科学应用的开源库。本文是一个简单的Gradio入门示例。
Gradio入门详细教程
githubcurry
12-15 3862
fn=greet,# 自定义输入框# 具体设置方法查看官方文档要获得额外的样式功能，您可以设置行内css属性将任何样式给应用程序。如下所示。#修改blocks的背景颜色。
使用gradio库的File模块实现文件上传和生成可下载文件
风吹落叶的博客
09-01 1万+
gradio是一个功能强大的Python库，用于构建交互式的机器学习和深度学习应用程序。其中的File模块提供了文件上传和展示的功能。File模块是gradio库中的一个组件，用于创建一个文件组件，允许用户上传通用文件（用作输入）或显示通用文件（用作输出）。
Gradio官方教程一：Gradio生态系统、主要组件及Interface class简介
qq_56591814的博客
06-25 3950
Gradio 是一个用于快速构建机器学习模型界面的 Python 库，使用 Gradio 内置的共享功能，您可以在几秒钟内分享您的演示或网络应用程序链接，无需任何 JavaScript、CSS 或网页托管经验！
基于Gradio的快速搭建AI算法可视化Web界面部署教程
Alexa_的博客
12-04 3800
视图框架：快速构建针对人工智能的 python 的 webApp 库，封装前端页面 + 后端接口 + AI 算法模型推理优势在于易用性，代码结构相比 Streamlit 简单，只需简单定义输入和输出接口即可快速构建简单的交互页面，更轻松部署模型。适合场景相对简单，想要快速部署应用的开发者；优势在于可扩展性，相比 Gradio 复杂。适合场景相对复杂，想要构建丰富多样交互页面的开发者。Gradio是一个开源的Python库，用于快速构建机器学习和数据科学演示的应用。
PyTorch-Gradio-APP-master.zip
07-01
使用PyTorch MLP实现手写数字的Gradio APP
gradio-master.zip
12-19
这个名为"gradio-master.zip"的压缩包，包含了Gradio的核心代码和资源，让我们一起深入了解一下Gradio的功能和用法。 Gradio的核心理念是让机器学习模型的输出结果直观可感知，使非技术人员也能理解和评估模型的...
Python库 | gradio-2.6.1a0-py3-none-any.whl
04-22
资源分类：Python库 所属语言：Python 使用前提：需要解压 资源全名：gradio-2.6.1a0-py3-none-any.whl 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
gradio-3.32.0库离线安装包
03-01
gradio-3.32.0库离线安装包，gradio-3.32.0库离线安装包，gradio-3.32.0库离线安装包，gradio-3.32.0库离线安装包，gradio-3.32.0库离线安装包，gradio-3.32.0库离线安装包。
Gradio入门到进阶全网最详细教程：快速搭建AI算法可视化部署演示(侧重参数详解和案例实践)
2201_75761617的博客
08-22 3961
假设还是阅读理解任务，但是我们这次不适用基于pipeline的加载方式，而是自定义实现，要求输入包含context、question，输出包含answer和score，但是这里的answer要求要把问题拼接上，如前面的示例，answer为普希金，这里的答案要变为：著名诗歌《假如生活欺骗了你》的作者是：普希金 ，针对这一需求，我们看下要如何实现。前面的内容中构建演示系统都是基于pipeline的，各个部分的模块都是定义好的，快速启动的同时，在灵活性上有所欠缺。可以在页面下方添加供用户选择的测试样例。
Gradio入门到进阶全网最详细教程
Hfengxiang的博客
07-29 1422
fn=greet,# 自定义输入框# 具体设置方法查看官方文档Interface.launch()方法返回三个值app，为 Gradio 演示提供支持的 FastAPI 应用程序local_url，本地地址share_url，公共地址，当share=True时生成fn=greet,要获得额外的样式功能，您可以设置行内css属性将任何样式给应用程序。如下所示。#修改blocks的背景颜色。
Gradio基础教程
ahahayaa的博客
03-21 1253
当有多个单独的interface之后, 可以使用combining-interface功能将他们组合起来,展示到同一个页面上(不是同一个标签页)如果各个接口之间的输入是相同的, 并且输出是相关的, 还可以使用其中的功能对并行比较接口之间的输出效果如果各个接口的输入和输出是有前后关联的, 还可以将众多接口组合成一个更完整且庞大的功能。
Gradio库的安装和使用教程
这家伙很懒，什么都没有留下
12-03 6250
Gradio支持多种输入和输出格式，包括文本、图像、音频等。如果你的模型需要接受或生成其他类型的输入/输出数据，你可以通过自定义格式来实现。例如，你可以使用inputs="image"和outputs="classification"来指定输入为图像，输出为分类结果。Gradio提供了自定义UI和UX的选项，这意味着你可以根据需要更改Gradio应用界面的外观和行为。例如，你可以使用CSS样式表来自定义应用界面的外观，或使用JavaScript来实现更复杂的交互功能。
Gradio详细教程
全栈川川
05-08 2589
Gradio详细教程
Python - Gradio 文档使用心得与文档解读
热门推荐
DreamingBetter的博客
03-31 2万+
前言 我也是第一天看，第一天用，读文档使用过程遇到的情况浅浅记录一下，直接进入正题。 创建Interface实例 这是Interface的参数 gradio.Interface(self, fn, inputs=None, outputs=None, examples=None, examples_per_page=10, live=False, layout="unaligned", interpretation=None, num_shap=2.0, theme=None, title=None, d
从零开始-与大语言模型对话学技术-gradio篇（1）
记录我的学习历程
07-05 5014
使用gradio设计简单UI
gradio interactive
07-17
Gradio是一个开源工具，它允许开发者创建交互式的API演示和模型解释器，无需编写前端代码。通过Gradio，用户可以直接在浏览器中运行预定义的界面，输入数据，然后查看模型的响应结果。这个工具特别适用于机器学习、深度学习模型，方便其他人快速体验和理解模型的工作原理。Gradio支持多种模型类型，包括Python函数、TensorFlow、PyTorch等库的模型。 使用Gradio，你可以按照以下步骤操作： 1. 安装gradio库：`pip install gradio` 2. 创建或加载模型。 3. 定义一个处理用户输入并返回预测结果的函数。 4. 使用gradio.Interface()创建一个交互式界面，并显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值