模拟多模态大模型gradio使用教程_gradio使用大模型

---

前言

最近，在看多模态推理模块，涉及到gradio相关用法。介于此，我将介绍网页界面gradio如何与大模型结合使用，实现与模型交互。我主要用到gr.Row()与gr.Column()方法实现界面部署，使用button方法触发事件，以及如何界面输入或输出使用图片等内容。读懂该部分基本已可实现大模型界面基本设置，也能更易解读别人源码。

---

一、使用change监听demo

我使用change使用blocks创建网页方法，使用Markdown给出网页显示(如下图)，使用Textbox构建文本，placeholder这个为文本内的提示。在使用change直接监听，实际直接调用welcome函数，直接给到out。

1、代码

import gradio as gr
def welcome(name):
    return f"Welcome to Gradio, your input:{name}!"
with gr.Blocks() as demo:
    gr.Markdown(
    """
    # 欢迎使用！
    Start typing below to see the output.
    """)
    inp = gr.Textbox(placeholder="your input here")  # 文本框定义类型与提示
    out = gr.Textbox()  # 这个就是定义类型
    inp.change(welcome, inp, out)  # 输入为inp，通过welcome函数调用返回out,而change是监听，就是不需要点击直接调用函数执行给出结果out
def demo_one():
    # demo.launch()  # 这个是本地使用
    demo.launch(server_name='192.168.1.92', server_port=8080)  # 局域网ip共享访问，若外网访问需托管

if __name__ == "__main__":
    demo_one()
## 2、参数说明
change参数说明如下：


```json
fn：函数，通常是机器学习模型的预测函数。函数的每个参数对应一个输入组件，函数应该返回单个值或一个值元组，其中元组中的每个元素对应一个输出组件。
inputs：用作输入的组件列表，如果函数不需要输入，应该是一个空列表。
outputs：用作输出的组件列表，如果函数不返回输出，应该是一个空列表。
api_name：字符串，用于在API文档中公开该端点。
status_tracker：无，预留参数。
scroll_to_output：布尔值，如果为True，在完成时将滚动到输出组件。
show_progress：字符串，控制是否显示进度动画。
queue：布尔值，如果为True，将在队列中排队请求（如果已启用队列）。如果为False，即使启用了队列，也不会将此事件放入队列。如果为None，则使用Gradio应用的队列设置。
batch：布尔值，如果为True，函数应处理一批输入，这意味着它应接受每个参数的输入值列表。列表应该具有相等的长度（最大长度为max_batch_size）。然后，函数必须强制返回一个元组列表（即使只有一个输出组件），元组中的每个列表对应一个输出组件。
max_batch_size：整数，如果从队列调用此方法，最大批量处理输入的数量（仅当batch=True时有效）。
preprocess：布尔值，如果为False，则在运行’fn’之前不会运行组件数据的预处理（例如，如果使用Image组件调用此方法，则保留其作为base64字符串）。
postprocess：布尔值，如果为False，则在将’fn’的输出返回给浏览器之前不会运行组件数据的后处理。
cancels：其他事件的字典或列表，当触发此监听器时取消其他事件。例如，设置cancels=[click_event]将取消click_event，其中click_event是另一个组件的.click方法的返回值。尚未运行的函数（或正在迭代的生成器）将被取消
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
31
32
33
34
35
36

3、网页结果显示

4、输入信息结果显示

二、Button功能的demo

1、代码

这个demo在gr.Blocks中使用了title与宽度等参数，使用Button点击方式实现函数调用，其代码如下：

def demo_two():
    import gradio as gr
    block_css = """

        #buttons button {
            min-width: min(120px,100%);
        }

        """
    def greet(name):
        return "你好 " + name + "!"

    with gr.Blocks(title='LLava-owen', theme=gr.themes.colors.green,css=block_css) as demo:
        name = gr.Textbox(label="姓名")
        output = gr.Textbox(label="问候输出")
        greet_btn = gr.Button("生成")
        greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")

    demo.launch(server_name='192.168.1.92', server_port=8080)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

其中theme=gr.themes.Base()就是修改主题的，有以下几种情况：

gr.themes.Base() 是一个基础主题，它提供了一个简单的外观，可以作为您创建自定义主题的起点。
gr.themes.Default() 是 Gradio 的默认主题，它提供了一个现代、简洁的外观。
gr.themes.Glass() 是一个玻璃主题，它提供了一种半透明的外观。
gr.themes.Monochrome() 是一个单色主题，它提供了一种简洁、黑白的外观。
gr.themes.Soft() 是一个柔和主题，它提供了一种温和、柔和的外观。

2、结果显示

结果图如下：

3、变换参数结果显示

比如使用gr.themes.Glass()变成如下：

三、参数gr.Slider滑动demo

1、代码

直接给出代码，主要使用gr.Slider方法实现，其源码如下：

def demo_two():
    import gradio as gr
    block_css = """

        #buttons button {
            min-width: min(120px,100%);
        }

        """
    def greet(name):
        return "你好 " + name + "!"

    with gr.Blocks(title='LLava-owen', css=block_css) as demo:
        name = gr.Textbox(label="姓名")
        output = gr.Textbox(label="问候输出")
        greet_btn = gr.Button("生成")
        greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")

        # with gr.Accordion("Parameters", open=False) as parameter_row:
        temperature = gr.Slider(minimum=0.0, maximum=1.0, value=0.2, step=0.1, interactive=True,
                                label="Temperature", )
        top_p = gr.Slider(minimum=0.0, maximum=1.0, value=0.7, step=0.1, interactive=True, label="Top P", )
        max_output_tokens = gr.Slider(minimum=0, maximum=1024, value=512, step=64, interactive=True,
                                      label="Max output tokens", )



    demo.launch(server_name='192.168.2.92', server_port=8080)


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

2、结果显示

3、具有下拉参数代码

需要替换上面代码（如下）进行修改，即可实现具有下拉功能。

temperature = gr.Slider(minimum=0.0, maximum=1.0, value=0.2, step=0.1, interactive=True,
                                label="Temperature", )
        top_p = gr.Slider(minimum=0.0, maximum=1.0, value=0.7, step=0.1, interactive=True, label="Top P", )
        max_output_tokens = gr.Slider(minimum=0, maximum=1024, value=512, step=64, interactive=True,
                                      label="Max output tokens", )
1
2
3
4
5

将上面代码替换：

        with gr.Accordion("Parameters", open=False) as parameter_row:
            temperature = gr.Slider(minimum=0.0, maximum=1.0, value=0.2, step=0.1, interactive=True,
                                    label="Temperature", )
            top_p = gr.Slider(minimum=0.0, maximum=1.0, value=0.7, step=0.1, interactive=True, label="Top P", )
            max_output_tokens = gr.Slider(minimum=0, maximum=1024, value=512, step=64, interactive=True,
                                          label="Max output tokens", )
1
2
3
4
5
6

4、具有下拉结果显示

四、模拟多模态大模型网页demo

1、代码

这里，我直接介绍如何在网页界面布局，主要用到gr.Row()与gr.Column()方法实现，也介绍如何使用button方法触发事件，以及如何界面输入或输出使用图片等内容。读懂该部分基本已可实现大模型界面基本设置，也能更易解读别人源码。其详细代码如下：

import gradio as gr
import os



cur_dir = os.path.dirname(os.path.abspath(__file__))
examples = [
    ["图像描述了一个丰富场景，能告诉我们很多信息。",
     "你获得了什么？",
     f"{cur_dir}/gradio_web/1.jpg"
     ],
    ["Gradio 做了一件事情，就是将这三个部分封装到一个 python 接口里，用户通过实现其封装的接口，将自己训练的算法模型以 web 服务的形式展现给大众使用。",
     "Gradio是干什么的",
    f"{cur_dir}/gradio_web/2.jpg"
     ]

    ]




#预测函数
def custom_predict(context, question,img):
    # 这个函数是加载模型函数
    # answer_result = model(context=context, question=question)

    answer = "模型输出answer，假设为输入question:"+ question
    score = "模型输出score，假设为输入context:"+ context


    return answer, score, img

#清除输入输出
def clear_input():
    return "", "", "", "",""

#构建Blocks上下文
with gr.Blocks(title='demo') as demo:
    gr.Markdown("# 这里输入指定不变内容")
    gr.Markdown("模拟大模型使用gradio方法demo")

    # 我做一行排列一个图像与输入内容,那么我使用Row()实现行，再使用2个列即可实现一行2列排序
    with gr.Row():
        with gr.Column():
            imagebox = gr.Image(type="pil")

        with gr.Column():    # 列排列，就是一列排列多少个
            context = gr.Textbox(label="context")
            question = gr.Textbox(label="question")


    # 下一个使用行排列，搞2个Button键，用于控制某些事件触发
    with gr.Row():       # 行排列，就是一行排列多少个
        clear = gr.Button("clear")
        submit = gr.Button("submit")

    with gr.Row():
        with gr.Column(scale=1):    # 列排列
            answer = gr.Textbox(label="answer")
            score = gr.Label(label="score")
        with gr.Column(scale=2):
            output_img = gr.Image(type="pil")



    # 上面已经构建了context, question, answer, score，imagebox，output_img等模块，下面可以通过函数任意组合，输入输出可以是列表指定。
    # 为创建的button键构造执行命令，绑定submit点击函数
    submit.click(fn=custom_predict, inputs=[context, question, imagebox], outputs=[answer, score, output_img])
    # 绑定clear点击函数，使用clear_input函数，让其返回为空即可清除，则ouputs指定为空模块即可
    clear.click(fn=clear_input, inputs=[], outputs=[context, question, answer, score, output_img])

    gr.Examples(examples, inputs=[context, question, imagebox])
    gr.Markdown("继续使用Markdown构建页面固定文字:感兴趣的小伙伴阅读")

demo.launch(server_name='192.168.2.91', server_port=8081,share=True)

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

2、界面显示内容

在不输入任何命令执行界面显示如下：

3、函数解读

gr.Markdown函数

用于界面展示内容固定语句，使用这个函数。但也存在布局。

gr.Image(type=“pil”)函数

用于构建图像模块，若在输入则可载入图片，若在输出则无法载入。

gr.Textbox函数

构建文本框内容

gr.Button(“clear”)函数

构架按键按钮，用于触发事件，这个与clear.click使用，内部是一个函数、输入、输出。

gr.Examples函数

将输入按照subit方式，即可调用，我理解应该是根据输入调用函数

注意：都是模块，需如何使用需组合，模块都遵循排序。

4、输入信息页面显示

输入图像与context内容，点击submit显示如下图：

使用案列图像显示如下：