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

介绍

重要提示：如果您刚开始，我们建议使用gr.ChatInterface来创建聊天机器人——它是一个高级抽象，可以快速创建漂亮的聊天机器人应用程序，通常只需一行代码。点击这里了解更多。

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

前提条件: 我们将使用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: 一个多模态聊天机器人，允许你对回答进行点赞和点踩。