Gradio全解8——ChatInterfaceChatbot：聊天界面类与聊天机器人（3）——ChatInterface的多模态功能与附加输入输出

本章目录如下：

1. 《ChatInterface&Chatbot：聊天界面类与聊天机器人（1）——ChatInterface类示例与构造参数》
2. 《ChatInterface&Chatbot：聊天界面类与聊天机器人（2）——ChatInterface的自定义函数和界面》
3. 《ChatInterface&Chatbot：聊天界面类与聊天机器人（3）——ChatInterface的多模态功能与附加输入输出》
4. 《ChatInterface&Chatbot：聊天界面类与聊天机器人（4）——返回复杂响应与直接修改Chatbot值》
5. 《ChatInterface&Chatbot：聊天界面类与聊天机器人（5）——通过API加载、聊天历史和用户反馈》
6. 《ChatInterface&Chatbot：聊天界面类与聊天机器人（6）——gr.ChatInterface与流行LLM库和API结合》
7. 《ChatInterface&Chatbot：聊天界面类与聊天机器人（7）——组件gr.Chatbot及gr.ChatMessage》
8. 《ChatInterface&Chatbot：聊天界面类与聊天机器人（8）——组件Chatbot的特殊Events》
9. 《ChatInterface&Chatbot：聊天界面类与聊天机器人（9）——使用Blocks创建自定义聊天机器人》
10. 《ChatInterface&Chatbot：聊天界面类与聊天机器人（10）——使用显示思考和引用构建UI》

8.3 ChatInterface的多模态功能与附加输入输出

ChatInterface同样支持文件、音频、视频上传的多模态功能，并且可添加额外的输入和输出。

8.3.1 多模态功能

支持多模态功能需要设置参数multimodal，同时改变函数fn的参数结构，并需传入组件MultimodalTextbox实例。

1. 设置multimodal和fn参数

我们可能希望为聊天界面添加多模态功能，比如上传图像或文件并可询问相关问题。这时可以向gr.ChatInterface类传递一个参数multimodal=True，使聊天机器人具备多模态功能，此时聊天函数fn的特征会略有变化，如下所述：

• 函数的第一个参数message应接受一个字典，该字典由文本和上传文件组成，格式如下：

{"text": "user input", "files": ["updated_file_1_path.ext","updated_file_2_path.ext", ...]
}

• 聊天函数的第二个参数history将保持与之前相同的OpenAI样式的字典格式。但如果历史记录中包含上传的文件，content键的值将不再是字符串，而是包含文件路径的单元素元组，因此每个文件将作为历史记录中的一条单独消息。在上传两个文件并提问后，历史记录可能如下所示：

[{"role": "user", "content": ("cat1.png")},{"role": "user", "content": ("cat2.png")},{"role": "user", "content": "What's the difference between these two images?"},
]

设置multimodal=True时，聊天函数的返回类型不会改变（即在最简单的情况下，仍应返回一个字符串值）。我们将在后续返回复杂响应中讨论更复杂的情况，例如返回文件。

2. 传入MultimodalTextbox组件及构造参数

当自定义多模态聊天界面时，textbox参数应该传递MultimodalTextbox的实例，其参数说明如下：

• value：类型为str | dict[str, str | list] | Callable | None，默认为None，表示显示在MultimodalTextbox中的默认值。可以是一个字符串值，或者一个字典形式的对象，例如：{"text": "sample text", "files": [{path: "files/file.jpg", orig_name: "file.jpg", url: "http://image_url.jpg", size: 100}]}。如果是一个可调用对象（函数），则每当应用加载时都会调用该函数来设置组件的初始值。
• sources：类型为list[Literal['upload', 'microphone']] | Literal['upload', 'microphone'] | None，默认为None。指定允许的输入来源列表。"upload"会创建一个按钮，用户可以通过点击上传或拖放文件；“microphone"会创建一个麦克风输入。如果为None，则默认值会设为"upload”。
• file_count：类型为Literal['single', 'multiple', 'directory']，默认为“single”单个文件，“multiple"可上传多个文件，如果设置为"directory”，用户将上传所选目录中的所有文件。在"multiple"或"directory"的情况下，返回类型将是文件列表。
• file_types：类型为list[str] | None，默认为None。"file"允许上传任何文件，"image"仅允许上传图片文件，"audio"仅允许上传音频文件，"video"仅允许上传视频文件，“text” 仅允许上传文本文件。

读者可根据自己需要设置，更多参数请参照官方文档。

3. 提交文件数示例

以下是一个提交文件数示例，展示了如何设置和自定义多模态聊天函数及聊天界面：

import gradio as gr
def count_images(message, history):num_images = len(message["files"]) # 本次上传文件history_images = 0for message in history: # 历史文件if isinstance(message["content"], tuple):history_images += 1return f"You just uploaded {num_images} images, total uploaded: {history_images+num_images}"demo = gr.ChatInterface(fn=count_images, type="messages", examples=[{"text": "No files", "files": []}], multimodal=True,textbox=gr.MultimodalTextbox(file_count="multiple", file_types=["image"])
)
demo.launch()

运行界面如图8-5：

图8-5

从示例中可以看到，通过组件gr.MultimodalTextbox()，我们可以同时上传多个图像、音频、视频类文件并可配有文字说明。处理函数count_images两个入参的格式已发生变化，函数中做了相应处理，请仔细观察区别。

8.3.2 additional_inputs：附加输入

附加输入输出功能为聊天函数添加额外的输入或输出，以便实现更复杂和定制化的功能。ChatInterface类支持additional_inputs参数，它在聊天函数中添加额外的输入，并通过聊天界面向用户展示这些输入。例如添加一个用于系统提示的文本框，或者设置一个响应中令牌数量的滑块。关于additional_inputs，在Interface的5.2.4节已讲过，可作为参考，此处稍有不同，请注意区分。

1. 定义并渲染组件示例

additional_inputs参数接受一个组件或组件列表，可以直接传递组件实例，或者使用它们的字符串快捷方式（例如使用 “textbox” 而不是gr.Textbox()）。如果传递组件实例，并且尚未被渲染，那么组件将出现在聊天机器人下方的gr.Accordion()中。以下是一个完整的示例：

import gradio as gr
import time
def echo(message, history, system_prompt, tokens):response = f"System prompt: {system_prompt}\n Message: {message}."for i in range(min(len(response), int(tokens))):time.sleep(0.05)yield response[: i + 1]
demo = gr.ChatInterface(echo,type="messages",additional_inputs=[gr.Textbox("You are helpful AI.", label="System Prompt"),gr.Slider(10, 100),],
)
demo.launch()

运行界面如图8-6：

图8-6

2. 先定义后渲染组件示例

如果传递给additional_inputs的组件已经在父级gr.Blocks()中渲染过，那么它们不会在折叠面板中重新渲染，这为设置输入组件的布局提供了灵活性。在下面的示例中，我们将gr.Textbox()放置在聊天机器人界面的顶部，同时将滑块保留在下方（注意render的设置）：

with gr.Blocks() as demo:system_prompt = gr.Textbox("You are helpful AI.", label="System Prompt")slider = gr.Slider(10, 100, render=False)gr.ChatInterface(echo, additional_inputs=[system_prompt, slider], type="messages")

拖动滑条并输入信息，运行界面如图8-7：

图8-7

我们还可以为附加输入添加示例值，将示例值的列表传递给examples参数，其中每个内部列表代表一个样本，示例将以表格形式呈现在聊天界面下方。每个内部列表的长度应为1 + len(additional_inputs)，其第一个元素应为聊天消息的示例值，随后的每个元素应为额外输入的示例值，按顺序排列。

如需要创建自定义程度更高的内容，最好使用低级的gr.Blocks()构建聊天机器人界面，8.8节会单独讲述使用Blocks创建聊天机器人界面。

8.3.3 additional_outputs：附加输出

与接受附加输入到聊天函数中的方式相同，我们还可以返回附加输出。只需将组件列表传递给gr.ChatInterface中的additional_outputs参数，并从聊天函数中为每个组件返回额外的值。以下是一个提取代码并将其输出到单独的gr.Code组件中的示例：

import gradio as gr
python_code = """
def fib(n):if n <= 0:return 0elif n == 1:return 1else:return fib(n-1) + fib(n-2)
"""
js_code = """
function fib(n) {if (n <= 0) return 0;if (n === 1) return 1;return fib(n - 1) + fib(n - 2);
}
"""
def chat(message, history):if "python" in message.lower():return "Type Python or JavaScript to see the code.", gr.Code(language="python", value=python_code)elif "javascript" in message.lower():return "Type Python or JavaScript to see the code.", gr.Code(language="javascript", value=js_code)else:return "Please ask about Python or JavaScript.", Nonewith gr.Blocks() as demo:code = gr.Code(render=False)with gr.Row():with gr.Column():gr.Markdown("<center><h1>Write Python or JavaScript</h1></center>")gr.ChatInterface(chat,examples=["Python", "JavaScript"],additional_outputs=[code],type="messages")with gr.Column():gr.Markdown("<center><h1>Code Artifacts</h1></center>")code.render()
demo.launch()

运行界面如图8-8：

图8-8

函数chat返回响应和示例代码，响应显示在聊天输出框，而示例代码显示在附加输出的code中。
注意：与附加输入的情况不同，传递给additional_outputs的组件必须在gr.Blocks上下文中预先定义——它们不会自动渲染。如果需要在gr.ChatInterface之后渲染它们，可以在首次定义时设置render=False，然后在gr.Blocks()中需要显示时的适当部分调用组件的方法.render()重新渲染。