做网站维护有前途吗湖人队最新消息
文本消息是聊天机器人的组成部分,但我们通常希望向用户发送的不仅仅是文本,还包括图像、视频等。
这就是元素出现的地方。每个元素都是一段内容,可以附加到Message或Step 并显示在用户界面上。
chainlit
支持的元素如下:
- 文本元素
- 图像元素
- PDF元素
- 文件元素
- 音频元素
- 视频元素
- Plotly 图表元素
- Pyplot 图表元素
- 任务列表元素
文本元素
该类Text
允许您在聊天机器人 UI
中显示文本元素。该类采用字符串并创建可发送到 UI
的文本元素。它支持使用 markdown
语法来格式化文本。
您必须提供一个 URL
或路径或内容字节。
属性
-
name
str
要在 UI 中显示的文本元素的名称。 -
content
Union[str, bytes]
应显示为文本元素内容的文本字符串或字节。 -
url
str
文本源的远程 URL。 -
path
str
文本文件的本地文件路径。 -
display
ElementDisplay
确定文本元素在 UI 中的显示方式。选项包括“侧面”(默认)、“内联”或“页面”。 -
language
str
语言的代码如果文字是一段代码。有关支持的语言列表,请参阅https://react-code-blocks-rajinwonderland.vercel.app/?path=/story/codeblock -supported-languages。
例子
import chainlit as cl@cl.on_chat_start
async def start():text_content = "Hello, this is a text element."elements = [cl.Text(name="simple_text", content=text_content, display="inline")]await cl.Message(content="Check out this text element!",elements=elements,).send()
图像元素
该类Image
用于创建和处理要在聊天机器人用户界面中发送和显示的图像元素。
您必须提供一个 UR
L 或路径
或内容字节
。
属性
-
name
str
要在UI中显示的图像的名称。 -
display
ElementDisplay
确定图像元素在UI中的显示方式。选项是 “side” (default), “inline”, or “page”. -
size
ElementSize
确定图片的显示大小,仅在 display=“inline”时生效,选项是 “small”, “medium” (default), or “large”. -
url
str
图像源的远程网址 -
path
str
图片在本地的文件路径。 -
content
bytes
以字节格式表示图像的文件内容。
例子
import chainlit as cl@cl.on_chat_start
async def start():image = cl.Image(path="./cat.jpeg", name="image1", display="inline")# Attach the image to the messageawait cl.Message(content="This message has an image!",elements=[image],).send()
文件元素
该类File
允许您显示一个按钮,让用户下载文件的内容。
您必须提供一个 URL
或路径
或内容字节
。
属性
-
name
str
文件的名称。这将显示给用户。 -
url
str
文件图像源的远程 URL。 -
path
str
文件映像的本地文件路径。 -
content
bytes
文件图像的文件内容(以字节格式)。
例子
import chainlit as cl@cl.on_chat_start
async def start():elements = [cl.File(name="hello.py",path="./hello.py",display="inline",),]await cl.Message(content="This message has a file element", elements=elements).send()
PDF 查看器元素
该类Pdf
允许您在聊天机器人 UI 中显示远程或本地托管的 PDF
。该类可以采用在线托管 PDF
的 UR
L 或本地 PDF
的路径。
属性
-
name
str
要在 UI 中显示的 PDF 的名称。 -
display
ElementDisplay
确定 PDF 元素在 UI 中的显示方式。选项包括“侧面”(默认)、“内联”或“页面”。 -
url
str
PDF 文件的远程 URL。必须提供远程 PDF 的 URL(或本地 PDF 的路径或内容)。 -
path
str
PDF 的本地文件路径。必须提供本地 PDF 的路径或内容(或远程 PDF 的 URL)。 -
content
bytes
PDF 的文件内容(以字节格式表示)。必须提供本地 PDF 的路径或内容(或远程 PDF 的 URL)。
例子
Inline
import chainlit as cl@cl.on_chat_start
async def main():# Sending a pdf with the local file pathelements = [cl.Pdf(name="pdf1", display="inline", path="./pdf1.pdf")]cl.Message(content="Look at this local pdf!", elements=elements).send()
Side and Page
您必须在消息内容中包含 PDF 的名称才能创建链接,点开后会在侧面展示。
import chainlit as cl@cl.on_chat_start
async def main():# Sending a pdf with the local file pathelements = [cl.Pdf(name="pdf1", display="side", path="./pdf1.pdf")]# Reminder: The name of the pdf must be in the content of the messageawait cl.Message(content="Look at this local pdf1!", elements=elements).send()
音频元素
该类Audio
允许您在聊天机器人用户界面中显示特定音频文件的音频播放器。
您必须提供一个 URL
或路径
或内容字节
。
属性
-
name
str
要在 UI 中显示的音频文件的名称。这会显示给用户。 -
display
ElementDisplay
确定元素应在 UI 中的显示位置。选项包括“侧面”(默认)、“内联”或“页面”。 -
url
str
音频的远程 URL。 -
path
str
音频的本地文件路径。 -
content
bytes
音频的文件内容(以字节格式)。 -
auto_play
bool
音频是否应自动开始播放。
例子
import chainlit as cl@cl.on_chat_start
async def main():elements = [cl.Audio(name="example.mp3", path="./example.mp3", display="inline"),]await cl.Message(content="Here is an audio file",elements=elements,).send()
视频元素
该类Video
允许您在聊天机器人用户界面中显示特定视频文件的视频播放器。
您必须提供一个 URL
或路径
或内容字节
。
属性
-
name
str
要在 UI 中显示的视频文件的名称。这会显示给用户。 -
display
ElementDisplay
确定元素应在 UI 中的显示位置。选项包括“侧面”(默认)、“内联”或“页面”。 -
url
str
视频的远程 URL。 -
path
str
视频的本地文件路径。 -
content
bytes
以字节格式表示的视频文件内容。
例子
import chainlit as cl@cl.on_chat_start
async def main():elements = [cl.Video(name="example.mp4", path="./example.mp4", display="inline"),]await cl.Message(content="Here is an video file",elements=elements,).send()
Plotly 图表元素
该类Plotly
允许您在聊天机器人 UI
中显示 Plotly
图表。该类采用 Plotly
图形。
Plotly
元素相对于Pyplot
元素的优势在于它是交互式的(例如,用户可以放大图表)。
属性
-
name
str
要在UI中显示的图表的名称。 -
display
ElementDisplay
确定图表元素在UI中的显示方式。选项是“side” (default), “inline”, or “page”. -
size
ElementSize·
确定图标的尺寸, 只有当display=“inline”才生效,选项是 “small”, “medium” (default), or “large”. -
figure
str
The plotly.graph_objects.Figure instance that you want to display.
例子
import plotly.graph_objects as go
import chainlit as cl@cl.on_chat_start
async def start():fig = go.Figure(data=[go.Bar(y=[2, 1, 3])],layout_title_text="An example figure",)elements = [cl.Plotly(name="chart", figure=fig, display="inline")]await cl.Message(content="This message has a chart", elements=elements).send()
Pyplot图表元素
该类Pyplot
允许您在聊天机器人 UI
中显示 Matplotlib pyplot
图表。该类采用 pyplot
图形。
该元素与元素的区别在于Plotly
,使用时向用户显示的是图表的静态图像Pyplot
。
属性
-
name
str
要在UI中显示的图表的名称。 -
display
ElementDisplay
确定图表元素在UI中的显示方式。可以选择有 “side” (default), “inline”, or “page”. -
size
ElementSize
确定图表的大小。仅适用于display= " inline"的时候。可以选择的有 “small”, “medium” (default), or “large”. -
figure
str
要显示的matplotlib.figure.Figure实例。
例子
import matplotlib.pyplot as plt
import chainlit as cl@cl.on_chat_start
async def main():fig, ax = plt.subplots()ax.plot([1, 2, 3, 4], [1, 4, 2, 3])elements = [cl.Pyplot(name="plot", figure=fig, display="inline"),]await cl.Message(content="Here is a simple plot",elements=elements,).send()
任务列表元素
该类TaskList
允许您在聊天机器人 UI
旁边显示任务列表。
属性
-
status
str
任务列表的状态。我们建议使用一些简短的词,比如 “Ready”, “Running…”, “Failed”, “Done”. -
tasks
Task
要在UI中显示的任务列表。
用法
TaskList
元素与其他元素稍有不同,它不附加到消息
或步骤
,但可以直接发送到聊天界面。
import chainlit as cl@cl.on_chat_start
async def main():# Create the TaskListtask_list = cl.TaskList()task_list.status = "Running..."# Create a task and put it in the running statetask1 = cl.Task(title="Processing data", status=cl.TaskStatus.RUNNING)await task_list.add_task(task1)# Create another task that is in the ready statetask2 = cl.Task(title="Performing calculations")await task_list.add_task(task2)# Optional: link a message to each task to allow task navigation in the chat historymessage = await cl.Message(content="Started processing data").send()task1.forId = message.id# Update the task list in the interfaceawait task_list.send()# Perform some action on your endawait cl.sleep(1)# Update the task statusestask1.status = cl.TaskStatus.DONEtask2.status = cl.TaskStatus.RUNNINGtask_list.status = "OK"await task_list.send()