diff --git a/src/web/live_transcription.html b/src/web/live_transcription.html index 0c6d0ba..af48481 100644 --- a/src/web/live_transcription.html +++ b/src/web/live_transcription.html @@ -179,8 +179,9 @@ The server might send: { "lines": [ - {"speaker": 0, "text": "Hello."}, - {"speaker": 1, "text": "Bonjour."}, + {"speaker": 0, "text": "Hello.", "beg": "00:00", "end": "00:01"}, + {"speaker": -2, "text": "Hi, no speaker here.", "beg": "00:01", "end": "00:02"}, + {"speaker": -1, "text": "...", "beg": "00:02", "end": "00:03" }, ... ], "buffer": "..." @@ -198,14 +199,27 @@ linesTranscriptDiv.innerHTML = ""; return; } - // Build the HTML - // The buffer is appended to the last line if it's non-empty const linesHtml = lines.map((item, idx) => { + let speakerLabel = ""; + if (item.speaker === -2) { + speakerLabel = "No speaker"; + } else if (item.speaker !== -1) { + speakerLabel = `Speaker ${item.speaker}`; + } + + let timeInfo = ""; + if (item.beg !== undefined && item.end !== undefined) { + timeInfo = ` [${item.beg}, ${item.end}]`; + } + let textContent = item.text; if (idx === lines.length - 1 && buffer) { textContent += `${buffer}`; } - return `
Speaker ${item.speaker}: ${textContent}
`; + + return speakerLabel + ? `${speakerLabel}${timeInfo} ${textContent}
` + : `${textContent}
`; }).join(""); linesTranscriptDiv.innerHTML = linesHtml;