Gradio学习之旅（1）——Building Demo篇 Interface的使用（上）

AI_Y.

已于 2024-03-14 11:30:56 修改

阅读量2.5k

点赞数 27

分类专栏： Gradio学习之旅文章标签：学习 python chatgpt

于 2024-03-14 05:13:43 首次发布

本文链接：https://blog.csdn.net/qq_58475797/article/details/136639776

版权

Gradio学习之旅专栏收录该内容

3 篇文章 1 订阅

订阅专栏

在本篇文章中我们将介绍Gradio最常见的Building Demo——Interface。无论你是想做个文生图还是图生图甚至生成视频等的前端展示，在考虑便捷性和建议性的情况下，使用Interface是最好上手的选择。

前言

在Gradio的官方文档中，是这样描述Interface的：
“”"
Interface是Gradio的主要高级类，它允许你通过几行代码为一个机器学习模型（或任何Python函数）创建一个基于Web的图形用户界面（GUI）或演示。使用Interface时，你必须指定三个参数：

函数：为其创建GUI的函数。这通常是你的机器学习模型或任何你想要用户与之交互的Python函数。
输入组件：你希望用户提供的输入类型。这些可以是文本框、文件上传器、滑块、单选按钮等，具体取决于你的函数需要的输入类型。
输出组件：你希望展示给用户的输出类型。这可能包括文本、图像、音频或视频等，取决于函数返回的内容。

除了这些基本参数外，你还可以使用其他附加参数来控制演示的外观和行为。例如，你可以设置标题、描述、布局等，以及控制组件的样式和交互方式。
“”"
Interface类简化了创建交互式Web应用程序的过程，使得即使不具备前端开发经验的人也能快速构建出功能丰富的界面。此外，由于Gradio是基于Python的，因此你可以利用Python的强大功能和丰富的机器学习库来构建你的模型，并通过Gradio将其呈现给广大用户。

总之，Interface类是Gradio库的核心，它提供了一个直观、简洁的方式来创建机器学习模型的交互式Web演示，从而极大地提高了模型的可访问性和可用性。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Interface 参数介绍

参数名称	说明
fn（必须要有的）	fn这一参数是这个Interface要执行的函数，可以认为将输入的数据丢入fn，fn给出对应结果。函数的每个参数对应一个输入组件，并且该函数应返回一个单一值或值的元组，其中元组中的每个元素对应一个输出组件。（输入输出组件与函数参数一一对应）
inputs（必须要有的）	单一的组件、组件列表、None 组件可以是实例化对象传递，也可以通过其字符串快捷方式引用。输入组件的数量应与fn的参数数量匹配。如果设置为None，则只显示输出组件。
outputs （必须要有的）	单一的组件、组件列表、None 组件可以是实例化对象传递，也可以通过其字符串快捷方式引用。输出组件的数量应与fn的参数数量匹配。如果设置为None，则只显示输入组件。
examples	default:None 函数的示例输入，有两点注意： 1.为嵌套列表时其中外部列表由示例组成，每个内部列表由对应于每个输入组件的输入组成。 2.若提供示例目录的字符串路径，应在运行 gradio 应用程序的 python 文件所在的目录中。如果有多个输入组件并提供了一个目录，则必须在目录中提供 log.csv 文件以链接对应的输入。
cache_examples	default:None 缓存示例可加速运行时，适用于HuggingFace Spaces时默认开启。若函数为生成器，则使用最后生成的值作为输出。其他环境默认关闭缓存。
examples_per_page	default:10 每页展示多少个示例
live	default:False 如果任何输入发生改变，界面是否应该自动重新运行。
title	default:None 接口的标题；如果提供，则以大字体显示在输入和输出组件的上方。在浏览器窗口中打开时，也用作选项卡标题。
description	default:None 接口的描述；如果提供，则出现在输入和输出组件的上方，在标题的下方，以常规字体显示。
article	default:None 解释界面的扩展文章；如果提供，以常规字体出现在输入和输出组件的下方。接受 Markdown 和 HTML 内容。如果是一个可下载远程文件的 HTTP(S) 链接，则显示该文件的内容。
thumbnail	default:None 缩略图，当在社交媒体上分享Web演示时，用于显示图像的字符串路径或URL。
theme	default:None Theme对象或字符串表示一个主题。如果是一个字符串，将寻找一个内置的主题与该名称(例如“soft”或“default”)，或将尝试加载一个主题从Hugging Face Hub(例如“gradio/monochrome”)。如果没有，将使用默认主题。
css	default:None 自定义css作为一个字符串或css文件的路径。这个css将包括在演示网页中。
js	default:None 自定义js或js文件路径，在demo第一次加载时运行。这个javascript将包含在demo网页中。
allow_flagging	default:None（默认为manual）三个取值：“never”，“auto"或"manual”。用于选取标记输入输出 never:永远不会被标记； auto:自动标记； manual:点击标记按钮进行标记
flagging_options	default: None 仅在manual时使用如果提供，允许用户在标记时从选项列表中进行选择。可以是形式(label, value)的元组列表，其中label是将显示在按钮上的字符串，value是将存储在标记CSV中的字符串；或者它可以是一个字符串列表[“X”， “Y”]，在这种情况下，值将是字符串列表，标签将是[“Flag as X”， “Flag as Y”]，等等。
flagging_dir	default:flagged 如何命名存储标记数据的目录。
flagging_callback	default:flagged 当样本被标记时，将调用FlaggingCallback的子类实例。如果设置为None，将创建一个gradio.flagging.CSVLogger实例，日志将保存到flagging_dir中的本地CSV文件。默认为None。
head	default: None 自定义html插入到演示网页的头部。这可以用来添加自定义元标签，脚本，样式表等到页面。

二、代码实现——初始化参数介绍

在我的一系列案例中，将会采取从一个最简单的demo一步一步增加功能到成为一个复杂demo的方式，来让大家切实的体会各个参数的效果。

1.样例demo

代码如下（样例）：

import gradio as gr

def function(cname,sname):
    return "你好!"+cname+"!我是"+sname+"!"

demo = gr.Interface(fn=function,inputs=["text","text"],outputs="text")
demo.launch()

（这其中的"text"就是快捷键方式）

运行效果如下：
01_样例

2.example

代码如下（example）：

import gradio as gr

def function(cname,sname):
    return "你好!"+cname+"!我是"+sname+"!"

my_example =[["A","B"],["B","C"],["C","D"]]

demo = gr.Interface(fn=function,inputs=["text","text"],outputs="text",examples=my_example)
demo.launch()

运行效果如下：
01_02 example
若使用log.csv，则将example设置为其所在目录，如下：

import gradio as gr

def function(cname,sname):
    return "你好!"+cname+"!我是"+sname+"!"

examples_dir="/home/aistudio/我的Gradio教学/01_Interface"

demo = gr.Interface(fn=function,inputs=["text","text"],outputs="text",examples=examples_dir,cache_examples=True)
demo.launch()

log文件中应各个输入一一对应，具体效果展示如下：
01_03 examole_log

3.cache_examples

cache_examples就是能提前先缓存好示例的输入和对应输出的参数，有需要可以设置为True，无需要则不用管，默认为None

4.examples_per_page

每页展示多少个样例，代码如下：

import gradio as gr

def function(cname,sname):
    return "你好!"+cname+"!我是"+sname+"!"

examples_dir="/home/aistudio/我的Gradio教学/01_Interface"

demo = gr.Interface(fn=function,inputs=["text","text"],outputs="text",examples=examples_dir,cache_examples=True,examples_per_page=5)
demo.launch()

效果如图，可以看到示例多于五个但却只展示了5个示例：

01_04 ex ca ex

5.live、title

由于live的效果不好展示，所以和title参数一起进行代码实现：

import gradio as gr

def function(cname,sname):
    return "你好!"+cname+"!我是"+sname+"!"

examples_dir="/home/aistudio/我的Gradio教学/01_Interface"
picture_path="/home/aistudio/我的Gradio教学/01_Interface/picture.jpg"

demo = gr.Interface(fn=function,inputs=["text","text"],outputs="text",examples=examples_dir,cache_examples=True,examples_per_page=5,live=True,title="Interface()学习")
demo.launch()

效果图如下：

01_05 li ti
可以看见它的标签页也变成了title的值，而在将live设置成True后，它的确认按钮消失了我们输入值它就自行进行了输出。

6.description、article、thumbnail

此处thumbnail效果不好展示，记住它就是我们常见的图标就行，所以此处重点看看description和article的代码实现：

import gradio as gr

def function(cname,sname):
    return "你好!"+cname+"!我是"+sname+"!"

examples_dir="/home/aistudio/我的Gradio教学/01_Interface"
picture_path="/home/aistudio/我的Gradio教学/01_Interface/picture.jpg"

demo = gr.Interface(fn=function,inputs=["text","text"],outputs="text",examples=examples_dir,cache_examples=True,examples_per_page=5,live=True,title="Interface()学习",description="这是description展示内容",article="这是article展示内容",thumbnail=picture_path)
demo.launch()

效果图如下：
01_06 de ar th

7.theme

theme代码实现,效果直观：

import gradio as gr

def function(cname,sname):
    return "你好!"+cname+"!我是"+sname+"!"

examples_dir="/home/aistudio/我的Gradio教学/01_Interface"
picture_path="/home/aistudio/我的Gradio教学/01_Interface/picture.jpg"

demo = gr.Interface(
    fn=function,
    inputs=["text","text"],
    outputs="text",
    examples=examples_dir,
    cache_examples=True,
    examples_per_page=5,
    live=True,
    title="Interface()学习",
    description="这是description展示内容",
    article="这是article展示内容",  
    thumbnail=picture_path,
    theme= "soft"
    
    )
demo.launch()

效果图如下：
01_07 theme

8.css、js

css、js熟悉前端的小伙伴们应该很熟悉这两个这里不过多展开介绍，代码实现：

import gradio as gr

def function(cname,sname):
    return "你好!"+cname+"!我是"+sname+"!"

examples_dir="/home/aistudio/我的Gradio教学/01_Interface"
picture_path="/home/aistudio/我的Gradio教学/01_Interface/picture.jpg"
css_path="/home/aistudio/我的Gradio教学/01_Interface/style.css"
js_path="/home/aistudio/我的Gradio教学/01_Interface/script.js"

demo = gr.Interface(
    fn=function,
    inputs=["text","text"],
    outputs="text",
    examples=examples_dir,
    cache_examples=True,
    examples_per_page=5,
    live=True,
    title="Interface()学习",
    description="这是description展示内容",
    article="这是article展示内容",  
    thumbnail=picture_path,
    theme= "soft",
    css=css_path,
    js=js_path
    )
demo.launch()

具体效果就不过多展示，这两个参数可以将css和js文件添加到这个网页中，有助于前端UI的美化和开发。

9.allow_flagging、flagging_options、flagging_dir、flagging_callback：

鉴于回调函数需要涉及到类的实例化，这不在这里对flagging_callback进行具体的展示了，等后续学到相关的实例化或者具体项目需要，再进行详细的实现，这里只对前三个进行展示，代码如下：

import gradio as gr

def function(cname,sname):
    return "你好!"+cname+"!我是"+sname+"!"

examples_dir="/home/aistudio/我的Gradio教学/01_Interface"
picture_path="/home/aistudio/我的Gradio教学/01_Interface/picture.jpg"
css_path="/home/aistudio/我的Gradio教学/01_Interface/style.css"
js_path="/home/aistudio/我的Gradio教学/01_Interface/script.js"
flag_dir="/home/aistudio/我的Gradio教学/01_Interface/flagged"
demo = gr.Interface(
    fn=function,
    inputs=["text","text"],
    outputs="text",
    examples=examples_dir,
    cache_examples=True,
    examples_per_page=5,
    live=True,
    title="Interface()学习",
    description="这是description展示内容",
    article="这是article展示内容",  
    thumbnail=picture_path,
    theme= "soft",
    css=css_path,
    js=js_path,
    allow_flagging="manual",
    flagging_options=["Good","Bad"],
    flagging_dir=flag_dir
    )
demo.launch()

具体效果如下：

01_09 flag
flag文件如下，前几次是之前的记录：
log-flag

10. head（未实现）

可能操作有问题暂时添加了没有反应，若有dalao使用成功还望赐教

11.更多

鉴于其初始化参数过于冗长，而上述参数在一般开发过程中已经足够使用，故在下方简要介绍不常用的参数.
如果您的开发设计到了部署、并发、批处理问题等在上述参数中没有涉及的内容，可以查看下方的代码内容。具体如下：（无专门说明，缺省值都为None）

参数名称	说明
analytics_enabled	是否允许基本的遥测。如果没有，将使用GRADIO_ANALYTICS_ENABLED环境变量(如果定义)，或默认为True。
batch	default: False 如果True，那么函数应该处理一批输入，这意味着它应该接受每个参数的输入值列表.列表应该具有相同的列长度(并且列表中元素个数，即行数不超过 max_batch_size ).然后函数需要返回一个列表元组(即使只有一个输出组件)，元组中的每个列都对应于一个输出组件.
max_batch_size	default: 4 如果从队列调用此方法，则批处理的同时最大处理个数(仅在batch=True时相关)
api_name	default: “predict” 定义了端点在API文档中出现的方式。API端点在文档中的显示方式可配置为字符串、None或False。字符串将作为端点名，None则使用预测函数名，False则不在文档中显示该端点，且下游应用无法使用此事件。
allow_duplication	default: False 为真，则显示一个 ‘Duplicate Spaces’ 按钮在Hugging Face Spaces上
concurrency_limit	default: “default” 事件可以同时运行的最大数量。可以设置为None，意味着没有concurrency_limit(任何数量的这个事件都可以同时运行)。设置为“default”，使用默认并发限制(由 .queue() 中的 default_concurrency_limit 参数定义，默认值为1)。
delete_cache	一个元组，对应于[frequency, age]，都以秒为单位。如果自从文件创建以来已经超过了 age 秒，那么每 frequency 秒，这个Blocks实例创建的临时文件将被删除。例如，将这个设置为(86400, 86400)将每天删除临时文件。当服务器重启时，缓存将被完全删除。如果设置为None，则不会发生缓存删除。

ps：关于参数additional_inputs、additional_inputs_accordion、submit_btn、stop_btn、clear_btn在使用Interface这个Building Demo时作用体现不太明显，故将会在后续ChatInterface时介绍additional_inputs、additional_inputs_accordion，在Block时介绍submit_btn、stop_btn、clear_btn

三、总结

在本文章中，我们已对Interface的初始化参数进行了初步的了解，在之后的内容中，我们将对更多的方法以及一些特性进行展开介绍。

AI_Y.

关注

27
点赞
踩
44

收藏

觉得还不错? 一键收藏
1
评论
Gradio学习之旅（1）——Building Demo篇 Interface的使用（上）

在Gradio的官方文档中，是这样描述Interface的：“”"Interface是Gradio的主要高级类，它允许你通过几行代码为一个机器学习模型（或任何Python函数）创建一个基于Web的图形用户界面（GUI）或演示。使用Interface时，你必须指定三个参数：函数：为其创建GUI的函数。这通常是你的机器学习模型或任何你想要用户与之交互的Python函数。输入组件：你希望用户提供的输入类型。这些可以是文本框、文件上传器、滑块、单选按钮等，具体取决于你的函数需要的输入类型。
复制链接

扫一扫