详细看看Gradio中，Chatbot()长啥样

背景

最近在捯饬Gradio，顺便记录Chatbot()在页面上随着参数的配置如何变化 。
因为这两个组件虽然很快就可以构建出页面，但是配置还是挺丰富的，所以在尝试的过程中顺便记录一下。

前置

• 已经安装了Gradio 并且 Version: 4.40.0

• 写好了必要的页面展示框架：

  import gradio as gr
  
  css = """
  .outer {
  width: 100%;
  height: 900px;
  display: inline-block;
  overflow-y: scroll;
  }
  .title {
  height: 100px;
  width: 100%;
  }
  """
  
  with gr.Blocks(
        css=css,
        title="页签标题 | 现学现卖~有限正确",
  ) as lookDemo:
    with gr.Column(variant="default", elem_classes="outer"):
        with gr.Column(elem_classes="title"):
            gr.Markdown(" # <center>一起看看Gradio里面的对话框各种配置长啥样。 </center>")
            gr.Markdown(" ###### <center>let's see what it is looks like</center>")
  
        with gr.Column():
            chatbot = gr.Chatbot()
  
  if __name__ == "__main__":
    lookDemo.launch()

• 对界面配置的记录从chatbot = gr.Chatbot()这行开始。

一些界面样式情况

0. 当前界面的形态

是前置中代码跑出来的效果，也就是默认的形态:

1. 显示预制的对话效果（默认） value

增加value的配置，可以增加多组:

chatbot = gr.Chatbot(
[("hello", "hello的意思是你好。"), ("how are you", "I am fine, thank you, and you?")]
)

2. 另一种对话效果 type="messages"

设定对话格式类型，支持tuples和messages。
· tuples——默认的所以不写也行，value的格式就如第 1 点所述。
· messages——符合大多数LLM API的形式，可以扩展更多的形式输出。

chatbot = gr.Chatbot(
                [
                    {"role": "user", "content": "你好，我是Fiestina"},
                    {"role": "assistant", "content": "你好，我是你的AI小助手，这是你自己预制的一个信息。"},
                    {"role": "assistant", "content": "这条消息下想说明的是：如果 Chatbot 的 type 参数为 'messages'，那么发送到/从 Chatbot "
                                                     "的数据将是一个包含 role 和 content 键的字典列表。这种格式符合大多数 LLM API（如 "
                                                     "HuggingChat、OpenAI、Claude）期望的格式。role 键可以是 'user' 或 "
                                                     "'assistant'，content 键可以是一个字符串（支持 markdown/html 格式），一个 "
                                                     "FileDataDict（用于表示在 Chatbot 中显示的文件），或者一个 gradio 组件。"}
                ],
                type="messages",
            )

3. 修改左上角`label'

chatbot = gr.Chatbot(
                [
                    {"role": "user", "content": "你好，我是Fiestina"},
                    {"role": "assistant", "content": "你好，我是你的NPC，但这是你自己预制的信息。"},
                ],
                type="messages",
                label="NPC-你就当我是"
            )

4. 隐藏左上角 show_label=False

设定以后，哪怕之前已经设置过也不会显示了。

chatbot = gr.Chatbot(
                [
                    {"role": "user", "content": "你好，我是 Fiestina"},
                    {"role": "assistant", "content": "你好，我是你的NPC，但这是你自己预制的信息。"},
                ],
                type="messages",
                label="NPC-你就当我是",
                show_label=False,
                ...

            )

5. 对话框的 渲染 render | 可见 visible

两个都可以让对话框整个消失，不同之处和原生HTML的作用类似，
· render——元素被渲染，设为False就是没被渲染。如果通过参数控制的话，变为True的时候现场开始渲染。
· visible——元素是渲染好的。如果通过参数控制的话，变为True的时候直接展示。

render=False/True
visible=False/True

6. 框体高度 height

height=300

7. 句子从右到左显示 rtl

这个是为了一些外语准备的，汉语测试除了标点符号倒过去了，其他都没有变化。

rtl=True

8. 分享和复制

show_share_button: 如果为True，将在组件的角落显示一个分享图标，允许用户将输出分享到Hugging Face Spaces讨论区。如果为False，图标不会出现。如果设置为None（默认行为），则在Gradio应用程序在Spaces上启动时会出现该图标，否则不会出现。
show_copy_button: 如果为True，将为每条聊天机器人消息显示一个复制按钮。

9. 设定头像 avatar_images

用户和机器人（按顺序）的两个头像图片路径或URL的元组。如果要跳过用户或机器人图像，则传递None。必须在Gradio应用程序的工作目录内或者是外部URL。

avatar_images=("user_avatar.jpg", "bot_avatar.jpg"),

10. 对话形式 layout

如果为“panel”，将以llm样式布局显示聊天机器人。如果为“bubble”，将以消息气泡形式显示聊天机器人，用户和机器人的消息在交替的两侧显示。默认为“bubble”。

 layout="panel"

全部参数的翻译参考

value: 在聊天机器人中显示的默认值。如果可调用，该函数将在应用程序加载时被调用，以设置组件的初始值。

type: 消息的格式。如果是'tuples'，则期望一个list[list[str | None | tuple]]，即一个列表的列表。内部列表应包含2个元素：用户消息和响应消息。单个消息可以是：(1) 符合有效Markdown格式的字符串，(2) 如果发送文件，则可以是元组：(文件的路径或URL，[可选的替代文本]) - 如果文件是图像/视频/音频，则会在聊天机器人中显示，或者(3) None，此时消息不会被显示。如果是'messages'，则将值作为带有'role'和'content'键的字典列表传递。content键的值支持'tuples'格式支持的所有内容。'role'键应该是'user'或'assistant'中的一个。任何其他角色都不会在输出中显示。

every: 如果value是一个函数（否则没有影响），则连续调用value来重新计算它。可以提供一个定时器，其滴答声会重置value，或者提供一个浮点数作为重置定时器的常规间隔。

inputs: 作为输入用于计算value的组件，如果value是一个函数（否则没有影响）。任何时候输入发生变化，value都会被重新计算。

show_label: 如果为True，将显示标签。

container: 如果为True，将把组件放置在容器中 - 在边框周围提供一些额外的填充。

scale: 相对于相邻组件的相对大小。例如，如果组件A和B在一行中，A的scale=2，B的scale=1，那么A将比B宽一倍。应该是一个整数。scale适用于行，并且适用于fill_height=True的块中的顶级组件。

min_width: 最小像素宽度，如果不足以满足此值的屏幕空间，将换行。如果某个特定的scale值导致该组件比min_width更窄，首先将尊重min_width参数。

visible: 如果为False，组件将被隐藏。

elem_id: 一个可选的字符串，作为该组件在HTML DOM中的id分配。可用于定位CSS样式。

elem_classes: 一个可选的字符串列表，作为该组件在HTML DOM中的类分配。可用于定位CSS样式。

render: 如果为False，组件将不会在块上下文中呈现。如果打算现在分配事件侦听器，但稍后呈现组件，应该使用此选项。

key: 如果分配了，将用于在重新呈现时假定身份。在重新呈现过程中具有相同键的组件将保留其值。

height: 组件的高度，如果传递了一个数字，则以像素为单位指定，如果传递了一个字符串，则以CSS单位指定。

latex_delimiters: 一个字典列表，格式为{"left": 开始分隔符（字符串）, "right": 结束分隔符（字符串）, "display": 是否在新行中显示（布尔值）}，将用于呈现LaTeX表达式。如果未提供，latex_delimiters将设置为[{ "left": "$$", "right": "$$", "display": True }]，因此只有用$$分隔符括起的表达式才会被呈现为LaTeX，并显示在新行中。传入一个空列表以禁用LaTeX呈现。

rtl: 如果为True，将渲染文本的方向设置为从右到左。默认为False，将文本呈现为从左到右。

show_share_button: 如果为True，将在组件的角落显示一个分享图标，允许用户将输出分享到Hugging Face Spaces讨论区。如果为False，图标不会出现。如果设置为None（默认行为），则在Gradio应用程序在Spaces上启动时会出现该图标，否则不会出现。

show_copy_button: 如果为True，将为每条聊天机器人消息显示一个复制按钮。
avatar_images: 用户和机器人（按顺序）的两个头像图片路径或URL的元组。如果要跳过用户或机器人图像，则传递None。必须在Gradio应用程序的工作目录内或者是外部URL。

sanitize_html: 如果为False，将禁用聊天机器人消息的HTML清理。这不被推荐，因为它可能导致安全漏洞。

render_markdown: 如果为False，将禁用聊天机器人消息的Markdown渲染。

bubble_full_width: 如果为False，聊天气泡将适应消息的内容。如果为True（默认值），聊天气泡将占据整个组件的宽度。

line_breaks: 如果为True（默认值），将在聊天机器人消息中启用Github风格的Markdown换行。如果为False，单个换行将被忽略。仅当render_markdown为True时才适用。

likeable: 聊天消息是否显示喜欢或不喜欢按钮。由.like方法自动设置，但必须在签名中存在才能显示在配置中。

layout: 如果为“panel”，将以llm样式布局显示聊天机器人。如果为“bubble”，将以消息气泡形式显示聊天机器人，用户和机器人的消息在交替的两侧显示。默认为“bubble”。

placeholder: 在聊天机器人为空时在其中显示的占位消息。在聊天机器人中垂直和水平居中显示。支持Markdown和HTML。如果为None，则不显示占位符。