Gradio全解5——Interface：高级抽象界面类（上）

前言

本系列文章主要介绍WEB界面工具Gradio。Gradio是Hugging Face发布的简易WebUI开发框架，它基于FastAPI和svelte，可以使用机器学习模型、python函数或API开发多功能界面，并可部署人工智能模型，是当前非常热门且易于展示机器学习大语言模型LLM及扩散模型DM的WebUI框架。
本系列文章分为三部分：Gradio介绍、Gradio基础功能实战和Gradio高级功能实战。第一部分Gradio介绍，方便读者对Gradio整体把握，包括三章内容：第一章先介绍Gradio的概念，包括详细技术架构、历史、应用场景、与其他框架Gradio/NiceGui/StreamLit/Dash/PyWebIO的区别，然后详细讲述Gradio的安装与运行，安装包括Linux/Win/Mac三类系统安装，运行包括普通方式和热重载方式；第二章介绍Gradio的4种部署方式，包括本地部署launch()、huggingface托管、FastAPI挂载和Gradio-Lite浏览器集成；第三章介绍Gradio的三种客户端（Client），包括python客户端、javascript客户端和curl客户端。第二部分实战Gradio基础功能，进入本系列文章的核心，包括四章内容：第四章讲解Gradio库的模块架构和环境变量，第五章讲解Gradio高级抽象界面类Interface，第六章讲解Gradio底层区块类Blocks，第七章讲解补充特性Additional Features。第三部分讲解并实战Gradio的高级功能，包括五章内容：第八章讲解融合大模型的多模态聊天机器人组件Chatbot，第九章讲解Gradio Tools工具库的使用及构建方法，第十章讲述讲述数据科学与绘图Data Science And Plots；第十一章讲述流式传输Streaming的多模态应用；第十二章讲述由Gradio App创建Discord Bot/Slack Bot/Website Widget。
本系列文章讲解细致，涵盖Gradio及相关框架的大部分组件和功能，代码均可运行并附有大量运行截图，方便读者理解并应用到开发中，Gradio一定会成为每个技术人员实现各种奇思妙想的最称手工具。

本系列文章目录如下：

1. 《Gradio全解1——Gradio简介：大模型WebUI框架（上）》
2. 《Gradio全解1——Gradio简介：大模型WebUI框架（下）》
3. 《Gradio全解2——Gradio的四种部署方式（上）》
4. 《Gradio全解2——Gradio的四种部署方式（下）》
5. 《Gradio全解3——Gradio三种客户端：Python、JavaScript与Curl（一）——python》
6. 《Gradio全解3——Gradio三种客户端：Python、JavaScript与Curl（二）——javascript》
7. 《Gradio全解3——Gradio三种客户端：Python、JavaScript与Curl（三）——curl》
8. 《Gradio全解4——Gradio库的模块架构和环境变量》
9. 《Gradio全解5——Interface：高级抽象界面类（上）》
10. 《Gradio全解5——Interface：高级抽象界面类（下）》
11. 《Gradio全解6——Blocks：底层区块类（上）》
12. 《Gradio全解6——Blocks：底层区块类（下）》
13. 《Gradio全解7——Additional Features：补充特性（上）》
14. 《Gradio全解7——Additional Features：补充特性（下）》
15. 《Gradio全解8——Chatbot：融合大模型的多模态聊天机器人》
16. 《Gradio全解9——Data Science And Plots：数据科学与绘图》
17. 《Gradio全解10——Streaming：流式传输的多模态应用》
18. 《Gradio全解11——Gradio Tools：工具库》
19. 《Gradio全解12——由Gradio App创建Discord Bot/Slack Bot/Website Widget》
20. 《Gradio全解13——使用Gradio构建MCP的客户端与服务器》

第5章 Interface：高级抽象界面类

本章介绍Gradio的高级抽象类：Interfaces，即界面类，它非常简单易用，是整个Gradio的最基础最常用的类。按照惯例，先详细介绍Interface类的简介、各种构造参数和成员函数，然后进行实践。实践分为基础类演示和高级类演示，基础类演示包括不同数量输入输出组件的演示、组件属性、Interface类的描述性内容和使用Accordion折叠式的附加输入；高级类演示包括多媒体输入输出、Flagging标记数据、Examples示例和Interface状态，下面逐一讲述。

5.1 Interface类详解

本节首先简单介绍Interface类的作用。gr.Interface是Gradio的主要高级抽象类，它仅需几行代码即可为机器学习模型或任何python函数创建基于Web的GUI或Demo。使用gr.Interface必须指定三个参数：①需创建GUI的函数；②所需输入组件；③所需输出组件，其他参数可用于控制demo的外观和行为。下面通过一个例子来了解Interface的用法。官方资料见Gradio - Building Demos - Interface🖇️链接5-1。

5.1.1 Interface示例

我们可以在习惯使用的代码编辑器Jupyter notebook、Google Colab等任何编写Python的地方运行Gradio。

1. 代码及运行

第一个Interface示例程序如下：

import gradio as gr
def image_classifier(inp):
    return {'cat': 0.3, 'dog': 0.7}
demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label")
demo.launch()

运行界面如图5-1：

2. 代码解析

首先引入gradio模块，然后定义用于图像分类的Python伪函数image_classifier，第三步创建基于函数的gr.Interface的实例demo，最后启动demo。从中可以看到Interface类有三个核心参数：

• fn：包裹于用户界面（UI）的函数。它非常灵活，可以传递任何你想用UI包装的Python函数，从音乐生成器到税务计算器，再到预训练机器学习模型的预测函数等都可以。
• inputs：用于输入的Gradio组件，组件的数量应与函数输入参数数量相匹配。
• outputs：用于输出的Gradio组件，组件的数量应与函数返回值的数量相匹配。

关于Gradio组件：可以看出，示例中输入和输出参数采用一个或多个Gradio组件，Gradio包括30多个为机器学习应用程序设计的内置组件，如gr.Textbox()、gr.Image()和gr.HTML()等。对于“inputs”和“outputs”参数，我们可以通过字符串（“textbox”）或类的实例（gr.textbox()）传递这些组件。如果函数接受多个参数，请按顺序向输入传递一个输入组件列表，每个输入组件对应于函数的一个参数。如果函数返回多个值，情况也是如此：只需向输出传递一个组件列表。

这种灵活性使Interface类成为创建演示的一种非常强大的方法。在初步了解Interface的用法后，我们接下来更全面深入地探讨gr.Interface，看看其内部的构造参数和成员函数。

5.1.2 Interface构造参数

在使用界面类gr.Interface之前，我们先详细了解下它的构造参数，才能做到需要时物尽其用，表5-1只陈列较为重要的构造参数，更详细信息请参考官方文档：

本小节几乎罗列Interface所有的API参数，为减少篇幅，其参数在后续类出现时将不再重复介绍。读者在实践时遇到不懂的API参数，可返回本小节查找其说明。下面介绍Interface类的成员函数。

5.1.3 Interface的成员函数

Interface类包含5个成员函数：launch()、load()、from_pipeline()、integrate()和queue()，它们是Interface界面运行的关键，下面逐一介绍。

1. launch()

函数的调用形式为gradio.Interface.launch(···)，它启动一个为演示demo提供服务的简易web服务器，还可以通过设置参数share=True来创建公共链接，即允许任何人从浏览器访问演示。

在前面文章Gradio的部署方式之一的本地部署launch()中，已对launch()函数做了较为详细的介绍，读者可参考其例程。本章着重讲解launch()函数的API参数，其示例伪代码如下：

import gradio as gr
def reverse(text):
    return text[::-1]
demo = gr.Interface(reverse, "text", "text")
demo.launch(share=True, auth=("username", "password"))

表5-2只展示较为重要的API参数，更详细的API信息请参考官方文档：

此外还有node_server_name，node_port等，官方未作详细说明，需要的读者可时刻关注官方更新。

2. load()

当界面Interface最初加载到浏览器中时，会触发此侦听器，它的调用形式为：gradio.Interface.load(block, ···)

表5-3只展示较为重要的API参数，更详细的API信息请参考官方文档：

此外还有block、time_limit、stream_every、like_user_message等参数，其中time_limit、stream_every可参考上一节的同名参数，block、like_user_message官方未作详细说明，需要的读者可时刻关注官方更新。

3. from_pipeline()

from_pipeline()是类方法，它用于从HuggingFace的对象transformers.Pipeline或diffusers.DiffusionPipeline中构造Interface，此时输入和输出组件由pipeline中的大模型自动确定。它的调用形式为gradio.Interface.from_pipeline(pipeline, ···)，示例如下：

import gradio as gr
from transformers import pipeline
pipe = pipeline("text-classification", model="uer/roberta-base-finetuned-dianping-chinese")
gr.Interface.from_pipeline(pipe).launch()

运行过程中需要加载一个400MB的模型，启动后界面如图5-2：

API参数如表5-4：

4. integrate()

integrate()是一种用于与其他库集成的笼统（catch-all）的方法，应在launch()后运行，其调用形式为gradio.Interface.integrate(···)，API参数如表5-5：

5. queue()

通过启用队列queue()，我们可以控制用户何时知道他们在队列中的位置，并设置允许的最大事件数限制。其调用形式为gradio.Interface.queue(···)
示例如下：

demo = gr.Interface(image_generator, gr.Textbox(), gr.Image())
demo.queue(max_size=20)
demo.launch()

API参数如表5-6：

在讲解完Interface的API参数和成员函数后，让我们用示例代码进行实践以便加深理解。