如何使用 Gradio Blocks 创建自定义聊天机器人

简介

重要提示：如果你是初学者，我们建议使用 `gr.ChatInterface` 创建聊天机器人——它是一个高级抽象，可以快速创建漂亮的聊天机器人应用程序，通常只需一行代码。在此处了解更多信息。

本教程将展示如何使用 Gradio 的低级 Blocks API 从头开始制作聊天机器人 UI。这将使你能够完全控制聊天机器人 UI。你将首先创建一个简单的聊天机器人来显示文本，然后是第二个用于流式传输文本响应的聊天机器人，最后是一个可以处理媒体文件的聊天机器人。我们创建的聊天机器人界面将如下所示

先决条件：我们将使用 `gradio.Blocks` 类来构建我们的聊天机器人演示。如果你还不熟悉，可以先阅读 Blocks 指南。另外，请确保你正在使用 Gradio 的最新版本：`pip install --upgrade gradio`。

一个简单的聊天机器人演示

让我们从重新创建上面的简单演示开始。你可能已经注意到，我们的机器人只会随机回复“你好吗？”，“今天是美好的一天”，或者“我非常饿”来响应任何输入。这是使用 Gradio 创建此功能的代码

import gradio as gr
import random
import time

with gr.Blocks() as demo:
    chatbot = gr.Chatbot(type="messages")
    msg = gr.Textbox()
    clear = gr.ClearButton([msg, chatbot])

    def respond(message, chat_history):
        bot_message = random.choice(["How are you?", "Today is a great day", "I'm very hungry"])
        chat_history.append({"role": "user", "content": message})
        chat_history.append({"role": "assistant", "content": bot_message})
        time.sleep(2)
        return "", chat_history

    msg.submit(respond, [msg, chatbot], [msg, chatbot])

demo.launch()

这里有三个 Gradio 组件

一个 `Chatbot` 组件，其值存储整个对话历史记录，作为用户和机器人之间的响应对列表。
一个 `Textbox` 组件，用户可以在其中输入消息，然后按回车/提交以触发聊天机器人响应
一个 `ClearButton` 按钮，用于清除文本框和整个聊天机器人历史记录

我们有一个名为 `respond()` 的函数，它接收聊天机器人的整个历史记录，追加一条随机消息，等待 1 秒，然后返回更新的聊天历史记录。`respond()` 函数在返回时还会清除文本框。

当然，在实际应用中，你可以用自己更复杂的函数替换 `respond()`，该函数可能会调用预训练模型或 API 来生成响应。

提示： 为了在你的 IDE 中获得更好的类型提示和自动补全，你可以使用 `gr.ChatMessage` 数据类

from gradio import ChatMessage

def chat_function(message, history):
    history.append(ChatMessage(role="user", content=message))
    history.append(ChatMessage(role="assistant", content="Hello, how can I help you?"))
    return history

为你的聊天机器人添加流式传输

我们可以通过几种方式改进上述聊天机器人的用户体验。首先，我们可以流式传输响应，这样用户就不必等待很长时间才能生成消息。其次，我们可以让用户消息立即显示在聊天历史中，同时生成聊天机器人的响应。以下是实现此目的的代码

import gradio as gr
import random
import time

with gr.Blocks() as demo:
    chatbot = gr.Chatbot(type="messages")
    msg = gr.Textbox()
    clear = gr.Button("Clear")

    def user(user_message, history: list):
        return "", history + [{"role": "user", "content": user_message}]

    def bot(history: list):
        bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
        history.append({"role": "assistant", "content": ""})
        for character in bot_message:
            history[-1]['content'] += character
            time.sleep(0.05)
            yield history

    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then(
        bot, chatbot, chatbot
    )
    clear.click(lambda: None, None, chatbot, queue=False)

demo.launch()

你会注意到，当用户提交消息时，我们现在链式触发两个事件，使用 .then()

第一个方法 `user()` 用用户消息更新聊天机器人并清除输入字段。由于我们希望它立即发生，因此我们将 `queue=False`，这将跳过任何已启用的队列。聊天机器人的历史记录会附加 `{"role": "user", "content": user_message}`。
第二个方法 `bot()` 用机器人的响应更新聊天机器人历史记录。最后，我们逐字构建消息，并在构建过程中 `yield` 中间输出。Gradio 会自动将任何带有 `yield` 关键字的函数转换为流式输出界面。

当然，在实际应用中，你可以用自己更复杂的函数替换 `bot()`，该函数可能会调用预训练模型或 API 来生成响应。

添加 Markdown、图像、音频或视频

`gr.Chatbot` 组件支持 Markdown 的子集，包括粗体、斜体和代码。例如，我们可以编写一个函数，用粗体字 太酷了！ 回复用户消息，像这样

def bot(history):
    response = {"role": "assistant", "content": "**That's cool!**"}
    history.append(response)
    return history

此外，它还可以处理图像、音频和视频等多媒体文件。你可以使用 `MultimodalTextbox` 组件轻松将所有类型的媒体文件上传到你的聊天机器人。你可以通过传入 `sources` 参数（一个要启用的源列表）进一步自定义 `MultimodalTextbox`。要传入媒体文件，我们必须传入一个字典，其中包含指向本地文件的 `path` 键和 `alt_text` 键。`alt_text` 是可选的，所以你也可以只传入一个包含单个元素 `{"path": "filepath"}` 的元组，像这样

def add_message(history, message):
    for x in message["files"]:
        history.append({"role": "user", "content": {"path": x}})
    if message["text"] is not None:
        history.append({"role": "user", "content": message["text"]})
    return history, gr.MultimodalTextbox(value=None, interactive=False, file_types=["image"], sources=["upload", "microphone"])

综合这些，我们可以创建一个多模态聊天机器人，它带有一个多模态文本框，供用户提交文本和媒体文件。其余代码与之前基本相同

import gradio as gr
import time

# Chatbot demo with multimodal input (text, markdown, LaTeX, code blocks, image, audio, & video). Plus shows support for streaming text.


def print_like_dislike(x: gr.LikeData):
    print(x.index, x.value, x.liked)


def add_message(history, message):
    for x in message["files"]:
        history.append({"role": "user", "content": {"path": x}})
    if message["text"] is not None:
        history.append({"role": "user", "content": message["text"]})
    return history, gr.MultimodalTextbox(value=None, interactive=False)


def bot(history: list):
    response = "**That's cool!**"
    history.append({"role": "assistant", "content": ""})
    for character in response:
        history[-1]["content"] += character
        time.sleep(0.05)
        yield history


with gr.Blocks() as demo:
    chatbot = gr.Chatbot(elem_id="chatbot", bubble_full_width=False, type="messages")

    chat_input = gr.MultimodalTextbox(
        interactive=True,
        file_count="multiple",
        placeholder="Enter message or upload file...",
        show_label=False,
        sources=["microphone", "upload"],
    )

    chat_msg = chat_input.submit(
        add_message, [chatbot, chat_input], [chatbot, chat_input]
    )
    bot_msg = chat_msg.then(bot, chatbot, chatbot, api_name="bot_response")
    bot_msg.then(lambda: gr.MultimodalTextbox(interactive=True), None, [chat_input])

    chatbot.like(print_like_dislike, None, None, like_user_message=True)

demo.launch()

大功告成！这就是构建聊天机器人模型界面所需的全部代码。最后，我们将以一些在 Spaces 上运行的聊天机器人链接作为本指南的结尾，以便你了解更多可能性

project-baize/Baize-7B：一个风格化的聊天机器人，允许你停止生成以及重新生成响应。
MAGAer13/mPLUG-Owl：一个多模态聊天机器人，允许你对响应进行点赞和踩。