chainlit的基本概念聊天对话中的元素

文本消息是聊天机器人的组成部分，但我们通常希望向用户发送的不仅仅是文本，还包括图像、视频等。

这就是元素出现的地方。每个元素都是一段内容，可以附加到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 [e-mail]_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 [e-mail]_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 [e-mail]_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 [e-mail]_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 [e-mail]_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 [e-mail]_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 [e-mail]_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 [e-mail]_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 [e-mail]_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 [e-mail]_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()