Skip to main content
自定义输出渲染允许你使用自定义的 HTML 页面来可视化运行输出和数据集参考输出。这在以下场景中特别有用：
  • 领域特定格式化：以原生格式显示医疗记录、法律文件或其他专业数据类型。
  • 自定义可视化：从数值或结构化输出数据创建图表、图形或示意图。
在本页面中，你将学习如何：

​
配置自定义输出渲染

可以在两个级别配置自定义渲染：
  • 针对数据集：将自定义渲染应用于与该数据集关联的所有运行，无论它们出现在何处——在实验、运行详情面板或标注队列中。
  • 针对标注队列：将自定义渲染应用于特定标注队列内的所有运行，无论它们来自哪个数据集。此配置优先于数据集级别的配置。

​
针对追踪项目

要为追踪项目配置自定义输出渲染： 显示自定义输出渲染配置的追踪项目设置
  1. 导航到 追踪项目 页面。
  2. 点击现有追踪项目或创建一个新项目。
  3. 在编辑追踪项目面板中，滚动到 自定义输出渲染 部分。
  4. 切换 启用自定义输出渲染。
  5. 在 URL 字段中输入网页 URL。
  6. 点击 保存。

​
针对数据集

要为数据集配置自定义输出渲染： 显示“自定义输出渲染”选项的三点菜单的数据集页面
  1. 在 数据集与实验 页面中导航到你的数据集。
  2. 点击右上角的 ⋮（三点菜单）。
  3. 选择 自定义输出渲染。
  4. 切换 启用自定义输出渲染。
  5. 在 URL 字段中输入网页 URL。
  6. 点击 保存。
已填写字段的自定义输出渲染模态框

​
针对标注队列

要为标注队列配置自定义输出渲染： 显示自定义输出渲染配置的标注队列设置
  1. 导航到 标注队列 页面。
  2. 点击现有标注队列或创建一个新队列。
  3. 在标注队列设置面板中，滚动到 自定义输出渲染 部分。
  4. 切换 启用自定义输出渲染。
  5. 在 URL 字段中输入网页 URL。
  6. 点击 保存 或 创建。
当在多个级别应用自定义渲染设置时，优先级顺序如下：标注队列 > 数据集 > 追踪项目。

​
构建自定义渲染器

​
了解消息格式

你的 HTML 页面将通过 postMessage API 接收输出数据。LangSmith 发送的消息具有以下结构： 
{
  type: "output" | "reference",
  data: {
    // 输出（实际输出或参考输出）
    // 结构根据你的应用程序而异
  },
  metadata: {
    inputs: {
      // 生成此输出的输入
      // 结构根据你的应用程序而异
    }
  }
}
  • type：指示这是实际输出 ("output") 还是参考输出 ("reference")。
  • data：输出数据本身。
  • metadata.inputs：生成此输出的输入数据，提供上下文。
消息传递时机：LangSmith 使用指数退避重试机制，确保即使你的页面加载缓慢也能接收到数据。消息最多发送 6 次，延迟时间递增（100ms、200ms、400ms、800ms、1600ms、3200ms）。

​
示例实现

此示例监听传入的 postMessage 事件并将其显示在页面上。每条消息都被编号并格式化为 JSON，便于检查 LangSmith 发送给你的渲染器的数据结构。 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>PostMessage 回显</title>
        <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" />
    </head>
    <body>
        <h1>PostMessage 消息</h1>
        <div id="messages"></div>
        <script>
            let count = 0;
            window.addEventListener("message", (event) => {
                count++;
                const header = document.createElement("h3");
                header.appendChild(document.createTextNode(`消息 ${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>

​
自定义渲染出现的位置

启用后，你的自定义渲染将替换以下位置的默认输出视图：
  • 实验比较视图：在比较多个实验的输出时：
显示自定义渲染的实验比较视图
  • 运行详情面板：在查看与数据集关联的运行时：
显示自定义渲染的运行详情面板
  • 标注队列：在标注队列中审阅运行时：
显示自定义渲染的标注队列
Edit this page on GitHub or file an issue.
Connect these docs to Claude, VSCode, and more via MCP for real-time answers.