2.1 快速入门

Gradio 提供了两种不同的方式来创建聊天机器人：Gradio Blocks 和 gr.ChatInterface。Gradio Blocks是更底层的API，允许开发者完全自定义聊天机器人的界面和行为。开发者可以自定义各种组件的排列、样式和交互方式，可以自定义事件处理逻辑，适合需要复杂布局或特殊功能的应用。

下面我们先使用 gradio.Blocks 类来构建一个简单的聊天机器人示例，这个机器人会随机响应"How are you?", "I love you", "I'm very hungry"。

import gradio as gr

import random

import time

with gr.Blocks() as demo:

chatbot = gr.Chatbot()

msg = gr.Textbox()

clear = gr.ClearButton([msg, chatbot])

def respond(message, chat_history):

# chat_history是一个包含(message, bot_message)二元组的列表，表示历史对话记录

bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])

chat_history.append((message, bot_message))

time.sleep(2)# 模拟机器人响应的延迟

return "", chat_history# 返回一个二元组，第一个元素是一个空字符串，用于清空输入框

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

demo.launch()

这里有三个 Gradio 组件：

Chatbot：存储了整个对话历史，作为用户和机器人响应对的列表。Textbox：用户输入框，按回车或提交按钮以触发聊天机器人响应。ClearButton：清除 Textbox 和Chatbot。

respond函数接收整个聊天机器人的历史记录，并追加一个随机消息。在等待 2 秒后返回更新后的聊天历史。函数在返回时也会清除文本框。在实际应用中，你可以用更复杂的函数替换 respond，比如调用预训练模型或 API 来生成响应。

2.2 为聊天机器人添加流式响应

我们可以通过几种方式改进上面的聊天机器人用户体验。首先，我们可以流式传输响应，这样用户可以看到实时反馈。其次，我们可以在生成机器人的响应时也显示用户的消息。

import gradio as gr

import random

import time

with gr.Blocks() as demo:

chatbot = gr.Chatbot()

msg = gr.Textbox()

clear = gr.Button("Clear")

def user(user_message, history):

return "", history + [[user_message, None]]

def bot(history):

bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])

history[-1][1] = ""

for character in bot_message:

history[-1][1] += 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.queue()

demo.launch()

user函数 ：处理用户输入，将用户消息(user_message, None)添加到聊天历史中（其中 None 表示机器人尚未响应），同时清空输入框。此方法还使输入字段非交互式，以便用户在聊天机器人响应时无法发送另一条消息。

bot 函数：生成机器人的回复，并逐个字母地显示出来，每次暂停0.05s，模拟打字效果。这里没有创建新消息，只是用机器人的响应替换之前创建的 None 消息。Gradio 会自动将任何包含 yield 关键字的函数转换为流式输出界面。

.then()方法：主要功能是链式连接多个事件，实现复杂的交互逻辑。

顺序执行：使得一个事件在另一个事件完成后执行数据传递：一个事件的输出可以作为下一个事件的输入，使得数据流在整个链条中保持连贯。异步处理：可以处理异步操作，例如等待某个操作完成后再执行下一个操作。这对于处理API调用或复杂计算非常有用。提高可读性和维护性：通过链式调用，使代码更具可读性和结构化，方便理解和维护。

.then()方法主要参数为(fn,input,output,queue)，其中默认queue=True。通过设置queue=False可以禁用队列，以便立即执行。本例中，当用户提交消息时，通过.then()方法将三个事件链式连接：

msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False)：第一个事件，调用user函数，处理用户输入，更新聊天记录并清空输入框。.then(bot, chatbot, chatbot)：第二个事件，调用bot函数，更新聊天历史，用机器人的回复替换之前创建的None消息，并逐字显示回复内容。clear.click(lambda: None, None, chatbot, queue=False)：第三个事件，清空聊天窗口。输入框重新变为可交互状态，允许用户继续输入消息。

触发回调函数lambda: None回调函数返回None，不进行任何操作。输出目标是chatbot，因此Gradio清除chatbot组件的内容queue=False确保这个操作立即执行，不会被排队。

最后，我们通过运行 demo.queue() 启用队列功能，以便实现中间流式输出的功能。

2.3 添加点赞和点踩功能

可以为聊天机器人添加点赞和点踩功能，以便用户可以对每条机器人的回复进行评价。通过附加.like()事件，就可以在每条机器人消息旁边自动显示点赞和点踩图标。

.like()方法需要传入一个函数，当用户点击图标时调用该函数。该函数应有一个gr.LikeData类型的参数，Gradio会自动传入包含被点赞或点踩消息信息的对象。下面是一个简单的示例：

import gradio as gr

def greet(history, input):

return history + [(input, "Hello, " + input)]

def vote(data: gr.LikeData):

if data.liked:

print("You upvoted this response: " + data.value)

else:

print("You downvoted this response: " + data.value)

with gr.Blocks() as demo:

chatbot = gr.Chatbot()

textbox = gr.Textbox()

textbox.submit(greet, [chatbot, textbox], [chatbot]) # 调用greet函数更新聊天记录，显示在聊天机器人组件中

chatbot.like(vote, None, None) # 绑定vote函数。当用户点击点赞或点踩图标时，调用vote函数处理投票数据。

demo.launch()

vote：投票函数，接收一个gr.LikeData类型的参数data，包含关于被点赞或点踩消息的信息。根据data.liked的值，打印用户是否点赞或点踩了该消息。chatbot.like(vote, None, None) ：

inputs: None 表示回调函数 vote 不需要从其他组件接收输入。Gradio 会自动传递 gr.LikeData 对象给 vote 函数。outputs: None 表示回调函数 vote 不需要更新任何组件的输出。因为点赞或点踩操作只是记录用户的反馈，没有必要更新界面上的其他组件。

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

gr.Chatbot组件支持一部分Markdown格式，包括加粗、斜体和代码。例如，可以用加粗的文本回复用户消息，如“That’s cool!”。

def bot(history):

response = "**That's cool!**"

history[-1][1] = response

return history

gr.Chatbot可以处理媒体文件，如图片、音频和视频。使用MultimodalTextbox组件，可以方便地上传各种类型的媒体文件到聊天机器人。传递媒体文件的格式是一个包含两个字符串的元组，如(filepath, alt_text)。后者是可选的，所以也可以只传一个包含单个元素的元组(filepath,)。

def add_message(history, message):

for x in message["files"]:

history.append(((x["path"],), None))

if message["text"] is not None:

history.append((message["text"], None))

return history, gr.MultimodalTextbox(value=None, interactive=False, file_types=["image"])

下面是完整的示例代码，我们使用MultimodalTextbox组件创建了一个带有多模态文本框的多模态聊天机器人。

import gradio as gr

import os

import plotly.express as px

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

def random_plot():

df = px.data.iris()

fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species",code>

size='petal_length', hover_data=['petal_width'])code>

return fig

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(((x,), None))

if message["text"] is not None:

history.append((message["text"], None))

return history, gr.MultimodalTextbox(value=None, interactive=False)

def bot(history):

history[-1][1] = "Cool!"

return history

fig = random_plot()

with gr.Blocks(fill_height=True) as demo:

chatbot = gr.Chatbot(

elem_id="chatbot",code>

bubble_full_width=False,

scale=1,

)

chat_input = gr.MultimodalTextbox(interactive=True,

file_count="multiple",code>

placeholder="Enter message or upload file...", show_label=False)code>

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")code>

bot_msg.then(lambda: gr.MultimodalTextbox(interactive=True), None, [chat_input])

chatbot.like(print_like_dislike, None, None)

demo.queue()

demo.launch()

三、通过Gradio Apps创建 Discord 机器人（略）