本章目錄如下：

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()重新渲染。