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

在本篇文章中我们将介绍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 参数介绍

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

在我的一系列案例中，将会采取从一个最简单的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()
1
2
3
4
5
6
7

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

运行效果如下：

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()
1
2
3
4
5
6
7
8
9

运行效果如下：

若使用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()
1
2
3
4
5
6
7
8
9

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()
1
2
3
4
5
6
7
8
9

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

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()

1
2
3
4
5
6
7
8
9
10
11

效果图如下：

可以看见它的标签页也变成了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()

1
2
3
4
5
6
7
8
9
10
11

效果图如下：

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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果图如下：

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()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

具体效果就不过多展示，这两个参数可以将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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

具体效果如下：

flag文件如下，前几次是之前的记录：

10. head（未实现）

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

11.更多

鉴于其初始化参数过于冗长，而上述参数在一般开发过程中已经足够使用，故在下方简要介绍不常用的参数.
如果您的开发设计到了部署、并发、批处理问题等在上述参数中没有涉及的内容，可以查看下方的代码内容。具体如下：（无专门说明，缺省值都为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的初始化参数进行了初步的了解，在之后的内容中，我们将对更多的方法以及一些特性进行展开介绍。