当前位置： 首页 > news >正文

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

news 2025/7/19 11:57:00

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

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

在这里插入图片描述

http://www.lryc.cn/news/429138.html

相关文章：

  • 【LeetCode：3】无重复字符串的最长子串（Java）
  • C#对字典使用Linq查询
  • 【Vue】Vue基础
  • 贪心 + 分层图bfs，newcoder 76652/B
  • 如何在Linux上部署Java Web应用程序
  • SpringBoot 整合 Excel 轻松实现数据自由导入导出
  • PyTorch 基础学习（13）- 混合精度训练
  • Mycat分片-垂直拆分
  • 一元四次方程求解-【附MATLAB代码】
  • 【极限性能，尽在掌控】ROG NUC：游戏与创作的微型巨擘
  • Ecosmos开启公测，将深度赋能CIOE中国光博会元宇宙参会新体验
  • 【Kubernetes】k8s集群之包管理器Helm
  • 嵌入式linux系统镜像制作day3（构建镜像）
  • 【生日视频制作】教师节中秋节国庆节车模特美女举牌AE模板修改文字软件生成器教程特效素材【AE模板】
  • RongCallKit iOS 端本地私有 pod 方案
  • C++11：可变参数模板
  • C++ 与 QML 之间进行数据交互的几种方法
  • Javaweb学习之Vue项目的创建（二）
  • 『深度长文』4种有效提高LLM输出质量的方法！
  • 【工业机器人】工业异常检测大模型AnomalyGPT
  • 【PGCCC】PostgreSQL案例：planning time超长问题分析#PG初级
  • 【图文并茂】ant design pro 如何给后端发送 json web token - 请求拦截器的使用
  • 【微信小程序】自定义组件 - behaviors
  • Linux ubuntu 24.04 安装运行《帝国时代3》免安装绿色版游戏，解决 “Could not load DATAP.BAR”等问题
  • Springboot 图片
  • LIMS实验室管理系统如何实现数据自动采集
  • 全自动商用油炸锅介绍：
  • CE修改器的简单使用
  • element-plus el-cascader懒加载怎么指定对应的label和value。最后一级怎么判断？
  • pdf查看密码