IT小白

这个屌丝很懒，什么也没留下！

热门标签

基于Gradio的快速搭建AI算法可视化Web界面部署教程_gradio框架

作者：IT小白 | 2024-04-17 03:14:49

踩

gradio框架

1 Gradio简介

1.1 视图框架

视图框架：快速构建针对人工智能的 python 的 webApp 库，封装前端页面 + 后端接口 + AI 算法模型推理，方便 AI 算法工程师快速展示成果，常用的两个展示层框架：
Gradio：
优势在于易用性，代码结构相比 Streamlit 简单，只需简单定义输入和输出接口即可快速构建简单的交互页面，更轻松部署模型。适合场景相对简单，想要快速部署应用的开发者；
Streamlit：
优势在于可扩展性，相比 Gradio 复杂。适合场景相对复杂，想要构建丰富多样交互页面的开发者。

1.2 Gradio介绍

Gradio是一个开源的Python库，用于快速构建机器学习和数据科学演示的应用。它可以帮助你快速创建一个简单漂亮的用户界面，以便向客户、合作者、用户或学生展示你的机器学习模型。此外，还可以通过自动共享链接快速部署模型，并获得对模型性能的反馈。在开发过程中，你可以使用内置的操作和解释工具来交互式地调试模型。
Gradio的优势在于易用性，代码结构简单，只需简单定义输入和输出接口即可快速构建简单的交互页面，更轻松部署模型。但Gradio适合场景相对简单，更容易快速部署应用的开发者。此外，Gradio还提供便利的分享功能，在启动应用时设置share=True参数创建外部分享链接，还可以直接在微信等平台上分享给用户使用。
官方网站:https://www.gradio.app/

官方文档：https://www.gradio.app/docs/interface
各个功能模块的介绍，以及一些代码示例：

以及一个AI 开源社区 SwanHub，有许多的基于gradio在线demo，有AI应用，计算机视觉，多模态等等demo可以进行尝试。
https://swanhub.co/models

2 功能模块

2.1 概述

Gradio 可以包装几乎任何 Python 函数为易于使用的用户界面。
常用的基础模块构成如下：

应用界面：gradio.Interface(简易场景), gradio.Blocks(定制化场景)
输入输出：gradio.Image(图像), gradio.Textbox(文本框), gradio.DataFrame(数据框), gradio.Dropdown(下拉选项), gradio.Number(数字), gradio.Markdown(Markdown), gradio.Files(文件)
控制组件：gradio.Button(按钮)
布局组件：gradio.Tab(标签页), gradio.Row(行布局), gradio.Column(列布局)

大部分功能模块都可以通过以下三个参数进行初始化：

fn：包装的函数
inputs：输入组件类型，（例如：“text”、"image）
ouputs：输出组件类型，（例如：“text”、"image）

2.2 模块介绍

2.2.1 gradio.File() 上传文件

当用户想要在前端页面上传自己的文件生成新的数据库时，gradio.File 可以很方便的完成这部分功能。
File 用于创建一个文件组件，允许用户上传通用文件（用作输入）或显示通用文件（用作输出）。

作为输入时，File 模块文件按照 file_count 以 tempfile._TemporaryFileWrapper 或 List[tempfile._TemporaryFileWrapper] 的格式传递给绑定的函数，或者按照 type 的值转化为 bytes/List[bytes]。
作为输出时，File 模块希望函数返回一个文件的路径/包含文件路径的列表（str / List[str]）。

file_count 允许用户上传文件的数量，返回类型将根据 “multiple” 或 “directory” 的情况为每个文件返回一个列表。

“single”，允许用户上传一个文件。
“multiple”，允许用户上传多个文件。
“directory”，允许用户上传所选目录中的所有文件。

file_types: 要上传的文件扩展名或文件类型的列表（例如[‘image’，‘.json’，‘.mp4’]）。字符串表示支持上传的文件类型，格式后缀表示支持上传的文件格式。

“file”: 允许上传任何文件
“image”: 仅允许上传图像文件
“audio”: 仅允许上传音频文件
“video”: 仅允许上传视频文件
“text”: 仅允许上传文本文件
“.pdf”: 仅允许上传 pdf 文件
“.md”: 仅允许上传 txt 文件

注意：当 file_count 为 “directory” 时，会忽略 “file_types” 的参数配置。
举例：

gr.File(label='请选择知识库目录',file_count='directory',
                file_types=['.txt', '.md', '.docx', '.pdf'])
1
2

2.2.2 gradio.Slider() 配置滑动条

可交互控制的滑动条，通过前端来进行参数的配置，但同时希望将参数限制在一个区间内，这时 gr.text 无法满足我们的需求。gradio.Slider 是可以胜任这个任务的组件。

gradio.Slider 允许用户通过滑动滑块在指定的范围内选择一个值

minimum：滑块的最小值，默认为 0。
maximum：滑块的最大值，默认为 100。
value: 滑块的默认值，即作为可调用对象时的默认值。
step：滑块的步长，即每次滑动的增量，默认为None。
label：组件在界面中显示的名称，默认为None。
interactive: 滑块是否可调节。如果未提供，则根据组件是用作输入还是输出进行推断。

举例：

temperature = gr.Slider(0,
        1,
        value=0.00,
        step=0.01,
        label="llm temperature",
        interactive=True)
1
2
3
4
5
6

2.2.3 gr.Textbox() 文本框

gradio.inputs.Textbox(self, lines=1, placeholder=None, default=“”, label=None, optional=False)
该组件为用户提供一个输入框，需提供一个字符串为参数的包装函数
输入类型：str（字符型）

参数：

lines (int) - 输入区域行数
placeholder (str) - placeholder学过前端的应该都知道，就是在输入框中的一个提示文本。
default (str) - 默认文本
label (str) - 在接口中的该输入组件的组件名（下面所有组件同理）

2.2.4 gradio.Dropdown() 建立下拉列表

刚刚我们介绍了 gradio 对于连续值的选择方法，现在我们来介绍下对于离散值的选择方法。
我们可以切换不同的模型，尝试不同模型的效果。我们用 gradio.Dropdown 来建立一个下拉列表，让用户从提供的模型中选择一个模型。

choices：可供选择的选项列表。
value：默认选中的值。如果为 None，则没有默认选中值。如果为可调用对象，则在应用程序加载时调用该函数以设置组件的初始值。
type：组件返回的值的类型。"value（返回选择的字符串），“index”（返回选择的索引）。
multiselect：是否可以选择多个选项。
max_choices：可选择的最大选项数。如果为None，则不限制数量。
interactive: 滑块是否可调节。如果未提供，则根据组件是用作输入还是输出进行推断。

llm = gr.Dropdown(
    llm_model_list,
    label="large language model",
    value=init_llm,
    interactive=True)
1
2
3
4
5

同样，我们可以对生成 Embedding 的模型进行对应的配置。
将组件作为输入绑定在对应的函数中，即可完成对应参数的切换。

2.2.5 gradio.interface()搭建简易界面：

固定化输入和输出:
举例子：

import gradio as gr

def quickstart(name):
    return "welcome!, " + name + "!!!"
demo = gr.Interface(fn=quickstart, inputs="text", outputs="text")


demo.launch()
1
2
3
4
5
6
7
8

核心 Interface 类需要使用三个参数进行初始化：

fn：被 UI 装饰的函数
inputs：输入组件。如"text"、“image”、"audio"等
outputs：输出组件。如"text"、“image”、"label"等

Interface.launch()方法返回三个值:

app，为 Gradio 演示提供支持的 FastAPI 应用程序
local_url，本地地址
share_url，公共地址，当share=True时生成还可以生成公共链接，只需要在launch函数里面指定share=True即可

interface.launch(share=True)
1

这样就除了一个本地URL之外还有一个72小时有效期的公共外链，很方便的让不同地区的用户来体验。

2.2.6 gradio.Markdown() 编写 Markdown 模块

之前介绍的都是交互式组件，我们可以用 markdown 为我们的界面加一些说明，使整个界面看起来更加美观。同时可以增加一些辅助信息。

value：要在Markdown组件中显示的值。如果可调用，则每当加载应用程序以设置组件的初始值时，都会调用该函数。
rtl（bool）：是否从右到左呈现文本。如果为True，则将渲染文本的方向设置为从右到左。默认值为False，它从左到右呈现文本。
latex_delimiters（list[dict[str，str|bool]]）：将用于呈现 LaTeX 表达式的形式｛“left”：打开分隔符（str）、“right”：关闭分隔符（str）、“display”：是否以换行符（bool）显示｝形式的dict列表。如果未提供，则将latex_delimitters’设置为[{ “left”: “”,“声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】