背景
最近在捯饬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’中的一个。任何其他角色都不会在输出中显示。
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,则不显示占位符。