主题
自定义输出渲染允许您使用自定义 HTML 页面来可视化运行输出和数据集参考输出。这在以下场景中特别有用：
- 领域特定格式化：以原生格式显示医疗记录、法律文档或其他专业数据类型。
- 自定义可视化：根据数值或结构化输出数据创建图表、图形或示意图。
在本页面中，您将学习如何：
配置自定义输出渲染
可以在两个级别配置自定义渲染：
- 针对数据集：将自定义渲染应用于与该数据集关联的所有运行，无论它们出现在何处——在实验、运行详情面板或标注队列中。
- 针对标注队列：将自定义渲染应用于特定标注队列内的所有运行，无论它们来自哪个数据集。此配置优先于数据集级别的配置。
针对追踪项目
要为追踪项目配置自定义输出渲染：
- 导航到 追踪项目 页面。
- 点击现有追踪项目或创建一个新项目。
- 在编辑追踪项目面板中，滚动到 自定义输出渲染 部分。
- 切换 启用自定义输出渲染。
- 在 URL 字段中输入网页 URL。
- 点击 保存。
针对数据集
要为数据集配置自定义输出渲染：
- 在 数据集与实验 页面中导航到您的数据集。
- 点击右上角的 ⋮（三点菜单）。
- 选择 自定义输出渲染。
- 切换 启用自定义输出渲染。
- 在 URL 字段中输入网页 URL。
- 点击 保存。
针对标注队列
要为标注队列配置自定义输出渲染：
- 导航到 标注队列 页面。
- 点击现有标注队列或创建一个新队列。
- 在标注队列设置面板中，滚动到 自定义输出渲染 部分。
- 切换 启用自定义输出渲染。
- 在 URL 字段中输入网页 URL。
- 点击 保存 或 创建。
当在多个级别应用自定义渲染设置时，优先级如下：标注队列 > 数据集 > 追踪项目。
构建自定义渲染器
理解消息格式
您的 HTML 页面将通过 postMessage API 接收输出数据。LangSmith 发送的消息具有以下结构：
typescript
{
type: "output" | "reference",
data: {
// 输出数据（实际输出或参考输出）
// 结构根据您的应用程序而异
},
metadata: {
inputs: {
// 生成此输出的输入数据
// 结构根据您的应用程序而异
}
}
}type：指示这是实际输出 ("output") 还是参考输出 ("reference")。data：输出数据本身。metadata.inputs：生成此输出的输入数据，作为上下文提供。
消息传递时机：LangSmith 使用指数退避重试机制，确保即使您的页面加载缓慢也能收到数据。消息最多会发送 6 次，延迟时间递增（100ms、200ms、400ms、800ms、1600ms、3200ms）。
示例实现
此示例监听传入的 postMessage 事件并将其显示在页面上。每条消息都被编号并格式化为 JSON，便于检查 LangSmith 发送给渲染器的数据结构。
html
<!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>
<div id="messages"></div>
<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>自定义渲染的应用位置
启用后，您的自定义渲染将替换以下位置的默认输出视图：
- 实验比较视图：在比较多个实验的输出时：
- 运行详情面板：在查看与数据集关联的运行时：
- 标注队列：在标注队列中审阅运行时：
