커스텀 출력 렌더링
커스텀 출력 렌더링
커스텀 출력 렌더링을 사용하면 자체 커스텀 HTML 페이지로 런 출력과 데이터셋 참조 출력을 시각화할 수 있어요. 이는 다음 경우에 특히 유용해요:
- 도메인별 형식 지정: 의료 기록, 법률 문서 또는 기타 특수 데이터 유형을 원래 형식으로 표시.
- 커스텀 시각화: 숫자 또는 구조화된 출력 데이터에서 차트, 그래프 또는 다이어그램 생성.
이 페이지에서 다음을 배우게 됩니다:
- LangSmith UI에서 **커스텀 렌더링을 구성**하는 방법.
- 출력 데이터를 표시하는 커스텀 렌더러 구축 방법.
- LangSmith에서 커스텀 렌더링이 어디에 표시되는지 이해하기.
출처: 문서
본문
커스텀 출력 렌더링 구성하기
두 가지 수준에서 커스텀 렌더링을 구성해요:
- 데이터셋의 경우: 해당 데이터셋과 연관된 모든 런에, 실험, 런 상세 창 또는 주석 큐 등 어디에 나타나든 커스텀 렌더링을 적용해요.
- 주석 큐의 경우: 특정 주석 큐 내의 모든 런에, 어느 데이터셋에서 왔는지와 관계없이 커스텀 렌더링을 적용해요. 이는 데이터셋 수준 구성보다 우선해요.
추적 프로젝트의 경우
추적 프로젝트에 대한 커스텀 출력 렌더링을 구성하려면:
- Tracing Projects 페이지로 이동하세요.
- 기존 추적 프로젝트를 클릭하거나 새로 만드세요.
- 추적 프로젝트 편집 창에서 Custom Output Rendering 섹션으로 스크롤하세요.
- Enable custom output rendering을 켜세요.
- URL 필드에 웹페이지 URL을 입력하세요.
- Save를 클릭하세요.
데이터셋의 경우
데이터셋에 대한 커스텀 출력 렌더링을 구성하려면:
- Datasets & Experiments 페이지에서 데이터셋으로 이동하세요.
- 오른쪽 상단의 ⋮(세 점 메뉴)을 클릭하세요.
- Custom Output Rendering을 선택하세요.
- Enable custom output rendering을 켜세요.
- URL 필드에 웹페이지 URL을 입력하세요.
- Save를 클릭하세요.
주석 큐의 경우
주석 큐에 대한 커스텀 출력 렌더링을 구성하려면:
- Annotation Queues 페이지로 이동하세요.
- 기존 주석 큐를 클릭하거나 새로 만드세요.
- 주석 큐 설정 창에서 Custom Output Rendering 섹션으로 스크롤하세요.
- Enable custom output rendering을 켜세요.
- URL 필드에 웹페이지 URL을 입력하세요.
- Save 또는 Create를 클릭하세요.
여러 수준에서 커스텀 렌더링 설정이 적용되면 우선순위는 다음과 같아요: 주석 큐 > 데이터셋 > 추적 프로젝트.
커스텀 렌더러 구축하기
메시지 형식 이해하기
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: 이 출력을 생성한 입력 데이터로, 맥락을 위해 제공돼요.
메시지 전달 타이밍: LangSmith는 페이지가 느리게 로드되더라도 데이터를 수신하도록 지수 백오프 재시도 메커니즘을 사용해요. 메시지는 증가하는 지연(100ms, 200ms, 400ms, 800ms, 1600ms, 3200ms)으로 최대 6번 전송돼요.
구현 예시
이 예시는 들어오는 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>
<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>
커스텀 렌더링이 표시되는 위치
활성화하면 커스텀 렌더링이 다음 위치에서 기본 출력 보기를 대체해요:
- 실험 비교 뷰: 여러 실험의 출력을 비교할 때:
- 런 상세 창: 데이터셋과 연관된 런을 볼 때:
- 주석 큐: 주석 큐에서 런을 검토할 때:
