自定义输出渲染允许您使用自己的自定义HTML页面来可视化运行输出和数据集引用输出。这在以下情况下特别有用：
- 特定领域格式化：以原生格式显示医疗记录、法律文档或其他专业数据类型。
- 自定义可视化：从数字或结构化输出数据创建图表、图形或图解。
在本页面中，您将学习如何：
- - **配置自定义渲染** 在 LangSmith UI 中。
- - **构建自定义渲染器** 来显示输出数据。
- - **了解自定义渲染显示的位置** 在 LangSmith 中。
配置自定义输出渲染
在两个级别配置自定义渲染：
- 对于数据集：将自定义渲染应用于与该数据集关联的所有运行，无论它们出现在实验、运行详情窗格还是标注队列中。
- 对于标注队列：将自定义渲染应用于特定标注队列内的所有运行，无论它们来自哪个数据集。这优先于数据集级别的配置。
对于追踪项目
要为追踪项目配置自定义输出渲染：
- 导航到 **追踪项目** page.
- 点击现有追踪项目或创建新项目。
- 在编辑追踪项目窗格中，向下滚动到 **自定义输出渲染** section.
- 切换 **启用自定义输出渲染**.
- 在 **URL** field.
- 点击 **保存**.
对于数据集
要为数据集配置自定义输出渲染：
- 在 **数据集与实验** page.
- 点击 **⋮** 右上角的（三点菜单）。
- 选择 **自定义输出渲染**.
- 切换 **启用自定义输出渲染**.
- 在 **URL** field.
- 点击 **保存**.
对于标注队列
要为标注队列配置自定义输出渲染：
- 导航到 **标注队列** page.
- 点击现有的标注队列或创建一个新的。
- 在标注队列设置窗格中，向下滚动到 **自定义输出渲染** section.
- 切换 **启用自定义输出渲染**.
- 在 **URL** field.
- 点击 **保存** or **创建**.
构建自定义渲染器
了解消息格式
您的 HTML 页面将通过 postMessage API接收输出数据。LangSmith 发送具有以下结构的消息：
{
type: "output" | "reference",
data: {
// The outputs (actual output or reference output)
// Structure varies based on your application
},
metadata: {
inputs: {
// The inputs that generated this output
// Structure varies based on your application
}
}
}- -
type：指示这是否为实际输出（"output"）或引用输出（"reference"). - -
data：输出数据本身。 - -
metadata.inputs：生成此输出的输入数据，仅供上下文参考。
示例实现
此示例监听传入的 postMessage 事件并在页面上显示它们。每条消息都编号并格式化为 JSON，便于检查 LangSmith 发送到渲染器的数据结构。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>PostMessage Echo</title>
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" />
</head>
<body>
<h1>PostMessage Messages</h1>
<script>
let count = 0;
window.addEventListener("message", (event) => {
count++;
const header = document.createElement("h3");
header.appendChild(document.createTextNode(`Message ${count}`));
const code = document.createElement("code");
code.appendChild(document.createTextNode(JSON.stringify(event.data, null, 2)));
const pre = document.createElement("pre");
pre.appendChild(code);
document.getElementById("messages").appendChild(header);
document.getElementById("messages").appendChild(pre);
});
</script>
</body>
</html>自定义渲染的显示位置
启用后，您的自定义渲染将替换以下位置的默认输出视图：
- 实验对比视图：在多个实验之间比较输出时：
- 运行详情窗格：查看与数据集关联的运行时：
- 标注队列：在标注队列中审核运行时：
