Draw STT latency to recording player by using stt metrics from opentelemetry (#551)

* support showing stt latency from otel stt.latency_ms

* wip
This commit is contained in:
Hoan Luu Huu
2025-07-29 20:57:35 +07:00
committed by GitHub
parent 7eaf25d13f
commit e02904f7f3

View File

@@ -161,6 +161,7 @@ export const Player = ({ call }: PlayerProps) => {
const drawSttRegionForSpan = (
s: JaegerSpan,
allSpans: JaegerSpan[],
startPoint: JaegerSpan,
channel = 0,
) => {
@@ -175,7 +176,36 @@ export const Player = ({ call }: PlayerProps) => {
const end =
(s.endTimeUnixNano - startPoint.startTimeUnixNano) / 1_000_000_000;
const endSpeechTime = getSilenceStartTime(start, end, channel);
const verbHookSpans = getSpansByNameRegex(allSpans, /verb:hook/);
const verbHookSpan = verbHookSpans.find(
(v) => v.parentSpanId === s.spanId,
);
let verbHookDurantion = 0;
let latency = 0;
if (verbHookSpan) {
verbHookDurantion =
(verbHookSpan.endTimeUnixNano - verbHookSpan.startTimeUnixNano) /
1_000_000_000;
}
const [sttLatencyMs] = getSpanAttributeByName(
s.attributes,
"stt.latency_ms",
);
let endSpeechTime = 0;
if (!sttLatencyMs) {
endSpeechTime = getSilenceStartTime(start, end, channel);
latency = Number(
(end - endSpeechTime - verbHookDurantion).toFixed(2),
);
} else {
endSpeechTime =
end -
Number(sttLatencyMs.value.stringValue) / 1_000 -
verbHookDurantion;
latency = Number(sttLatencyMs.value.stringValue) / 1_000;
}
const [sttResult] = getSpanAttributeByName(s.attributes, "stt.result");
let att: WaveSurferSttResult;
@@ -187,7 +217,7 @@ export const Player = ({ call }: PlayerProps) => {
transcript: data.alternatives[0].transcript,
confidence: data.alternatives[0].confidence,
language_code: data.language_code,
...(endSpeechTime > 0 && { latency: end - endSpeechTime }),
latency,
};
const [sttResolve] = getSpanAttributeByName(
@@ -206,7 +236,7 @@ export const Player = ({ call }: PlayerProps) => {
color: "rgba(255, 255, 0, 0.55)",
drag: false,
resize: false,
content: `${(end - endSpeechTime).toFixed(2)}s`,
content: `${latency}s`,
});
changeRegionMouseStyle(latencyRegion, channel);
@@ -353,7 +383,7 @@ export const Player = ({ call }: PlayerProps) => {
if (startPoint) {
const gatherSpans = getSpansByNameRegex(spans, /:gather{/);
gatherSpans.forEach((s) => {
drawSttRegionForSpan(s, startPoint);
drawSttRegionForSpan(s, spans, startPoint);
});
// Trasscription
@@ -363,6 +393,7 @@ export const Player = ({ call }: PlayerProps) => {
const channel = Number(cs.name.split(":")[1]);
drawSttRegionForSpan(
cs,
spans,
startPoint,
channel > 0 ? channel - 1 : channel,
);