From 58eba2a1f6f1c4bc3bba3e2aea7a7ef1299f85c2 Mon Sep 17 00:00:00 2001 From: Quentin Fuxa Date: Wed, 19 Feb 2025 14:41:19 +0100 Subject: [PATCH] Enhance live transcription UI with improved speaker and silence indicators; add time information display --- src/web/live_transcription.html | 82 +++++++++++++++++++++++++++------ 1 file changed, 69 insertions(+), 13 deletions(-) diff --git a/src/web/live_transcription.html b/src/web/live_transcription.html index af48481..b9d4ea6 100644 --- a/src/web/live_transcription.html +++ b/src/web/live_transcription.html @@ -78,12 +78,59 @@ #linesTranscript strong { color: #333; } - /* Grey buffer styling */ + #speaker { + background-color: #dcefff; + border-radius: 30px; + padding: 2px 10px; + font-size: 14px; + } + #timeInfo { + color: #666; + margin-left: 10px; + } + .textcontent { + font-size: 16px; + margin-left: 10px; + padding-left: 10px; + border-left: 2px solid #dcefff; + margin-bottom: 10px; + } .buffer { color: rgb(180, 180, 180); font-style: italic; margin-left: 4px; } + .spinner { + display: inline-block; + width: 8px; + height: 8px; + border: 2px solid rgba(0, 0, 0, 0.2); + border-top: 2px solid #333; + border-radius: 50%; + animation: spin 0.6s linear infinite; + vertical-align: middle; + margin-bottom: 2px; + } + + @keyframes spin { + to { + transform: rotate(360deg); + } + } + .silence { + color: #666; + background-color: #f3f3f3; + font-size: 13px; + border-radius: 30px; + padding: 2px 10px; + } + .loading { + color: #666; + background-color: #eff9ff; + font-size: 14px; + border-radius: 30px; + padding: 2px 10px; + } @@ -188,7 +235,7 @@ } */ const { lines = [], buffer = "" } = data; - renderLinesWithBuffer(lines, buffer); + renderLinesWithBuffer( lines, buffer); }; }); } @@ -199,27 +246,36 @@ linesTranscriptDiv.innerHTML = ""; return; } + + + 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}]`; + timeInfo = ` ${item.beg} - ${item.end}`; } + + let speakerLabel = ""; + if (item.speaker === -2) { + speakerLabel = `Silence${timeInfo}`; + } else if (item.speaker == -1) { + speakerLabel = ` ${item.diff} second(s) of audio are undergoing diarization`; + } else if (item.speaker == -3) { + speakerLabel = `${timeInfo}`; + } else if (item.speaker !== -1) { + speakerLabel = `Speaker ${item.speaker}${timeInfo}`; + } + + let textContent = item.text; if (idx === lines.length - 1 && buffer) { textContent += `${buffer}`; } - return speakerLabel - ? `

${speakerLabel}${timeInfo} ${textContent}

` - : `

${textContent}

`; + return textContent + ? `

${speakerLabel}

${textContent}

` + : `

${speakerLabel}

`; }).join(""); linesTranscriptDiv.innerHTML = linesHtml;