基于gradio的chatbot

基于gradio对chatbot做一个网页可视化，可以通过网页端，更换模型，以及调整模型的一些参数。
alt text

Gradio 是一个开源 Python 软件包，可让快速为机器学习模型、API 或任意 Python 函数构建演示或 Web 应用程序。然后，您可以使用 Gradio 的内置共享功能在几秒钟内通过公共链接分享您的演示。

gradio快速入门ps(一手资料永远是最香的)

常用功能记录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 页面创建
import gradio as gr 

def greet(name, intensity):
    return "Hello, " + name + "!" * int(intensity)

demo = gr.Interface(
    fn=greet,
    inputs=["text", "slider"],
    outputs=["text"],
)

# fn：包装用户界面 (UI) 的函数
# inputs：用于输入的 Gradio 组件。组件数量应与函数中的参数数量相匹配。
# outputs：用于输出的 Gradio 组件。组件数量应与函数的返回值数量相匹配。

demo.launch() # share=True launch()就会为您的演示创建一个可公开访问的 URL

alt text

社区组件：社区组件也会有一些现成的案例，我们可以在此基础上进行修改来完成自己的项目。

1.布局

1.1 列和行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import gradio as gr

with gr.Blocks() as demo: # 使用 `gr.Blocks()` 创建一个 Gradio 界面上下文，命名为 `demo`
    with gr.Row(): # 第一行
        text1 = gr.Textbox(label="t1")
        slider2 = gr.Textbox(label="s2")
        drop3 = gr.Dropdown(["a", "b", "c"], label="d3")
    with gr.Row(): # 第二行
        with gr.Column(scale=1, min_width=300): # 第二行的第一列 占1个单位 最
            text1 = gr.Textbox(label="prompt 1")
            text2 = gr.Textbox(label="prompt 2")
            inbtw = gr.Button("Between")
            text4 = gr.Textbox(label="prompt 1")
            text5 = gr.Textbox(label="prompt 2")
        with gr.Column(scale=2, min_width=300): # 第二行的第二列 占两个单位
            img1 = gr.Image("images/cheetah.jpg")
            btn = gr.Button("Go")

demo.launch()

1.2 填充浏览器高度/宽度

要通过移除侧边距来让应用占据浏览器的整个宽度，请使用gr.Blocks(fill_width=True)。

1
2
3
4
import gradio as gr
with gr.Blocks(fill_height=True) as demo:
    gr.Chatbot(scale=1)
    gr.Textbox(scale=0)

1.3 标签和折叠面板

使用with gr.Tab(‘tab_name’):子句创建选项卡。在上下文中创建的任何组件with gr.Tab(‘tab_name’):都会出现在该选项卡中。连续的选项卡子句组合在一起，以便一次可以选择一个选项卡，并且仅显示该选项卡上下文中的组件。

Accordion 是一种可以切换打开或关闭的布局。与 一样Tabs，它是一个可以选择性隐藏或显示内容的布局元素。

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
import numpy as np
import gradio as gr

def flip_text(x):
    return x[::-1]

def flip_image(x):
    return np.fliplr(x)

with gr.Blocks() as demo:
    gr.Markdown("Flip text or image files using this demo.")
    with gr.Tab("Flip Text"):
        text_input = gr.Textbox()
        text_output = gr.Textbox()
        text_button = gr.Button("Flip")
    with gr.Tab("Flip Image"):
        with gr.Row():
            image_input = gr.Image()
            image_output = gr.Image()
        image_button = gr.Button("Flip")

    with gr.Accordion("Open for More!", open=False):
        gr.Markdown("Look at me...")
        temp_slider = gr.Slider(
            0, 1,
            value=0.1,
            step=0.1,
            interactive=True,
            label="Slide me",
        )

    text_button.click(flip_text, inputs=text_input, outputs=text_output)
    image_button.click(flip_image, inputs=image_input, outputs=image_output)

demo.launch()

alt text

2. 组件属性

gradio有很多有用的组件，都可以在官方文档中找到，在有需要的时候可以进行查询

1
2
3
4
5
6
7
8
9
10
11
12
gr.Chatbot(label="聊天机器人")# 创建一个聊天机器人组件，显示对话记录

gr.Button("提交")  # 创建一个提交按钮

gr.File(label="上传文件") # 创建一个文件组件，允许上传一个或多个通用文件

gr.Dropdown() # 创建一个下拉菜单

gr.Slider() # 创建一个滑块

gr.Radio()# 创建一个单选按钮

3.功能函数

当我们构建好布局和组件之后，我们需要对每个组件进行一些功能定义，比如我们点击按钮之后应该出发什么事件。

1
2
3
4
5
6
7
8
9
10
11
12
# 以按钮为例
# 当用户点击提交按钮时，触发预处理和预测函数
    submit_btn.click(
        fn=fn_prehandle_user_input,  # 绑定的函数为fn_prehandle_user_input 函数是预先定义好的全局函数
        inputs=[user_input_textbox, chatbot],  # 输入为文本输入框和聊天记录
        outputs=[chatbot]  # 输出为聊天记录
    ).then(
        fn=fn_predict,  # 然后调用fn_predict函数
        inputs=[user_input_textbox, chatbot, model_dropdown, max_tokens_slider, temperature_slider, stream_radio],  # 输入为文本输入框、聊天记录、模型选择、最大令牌数滑块、温度滑块和流式输出单选按钮
        outputs=[chatbot]  # 输出为聊天记录
    )

gradio的基础使用大概就是这样，要完成实现基于gradio的chatbot，还需要接入LLM，这里使用openai的api导入gpt模型进行测试，后续会接入本地模型，以及数据库，完成rag的构建

项目记录

https://github.com/DummyV07/ChatBot_Gradio