单一产品网站如何做seo桂林新闻桂林人论坛
文本消息是聊天机器人的组成部分,但我们通常希望向用户发送的不仅仅是文本,还包括图像、视频等。
这就是元素出现的地方。每个元素都是一段内容,可以附加到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用于创建和处理要在聊天机器人用户界面中发送和显示的图像元素。
您必须提供一个 URL 或路径或内容字节。
属性
-  
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 的 URL 或本地 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() 

