diff --git a/src/web/live_transcription.html b/src/web/live_transcription.html index 9c9abb2..dd819dc 100644 --- a/src/web/live_transcription.html +++ b/src/web/live_transcription.html @@ -15,17 +15,22 @@ #recordButton { width: 80px; height: 80px; - font-size: 36px; border: none; border-radius: 50%; background-color: white; cursor: pointer; - box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease, transform 0.2s ease; + border: 1px solid rgb(252, 230, 229); + border-bottom: 5px solid rgb(252, 230, 229); + display: flex; + align-items: center; + justify-content: center; } #recordButton.recording { - background-color: #ff4d4d; + background-color: rgba(255, 130, 123, 0.032); + border: 1px solid rgb(240, 198, 195); + border-bottom: 5px solid rgb(240, 198, 195); color: white; } @@ -33,6 +38,29 @@ transform: scale(0.95); } + .shape-container { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + } + + .shape { + width: 40px; + height: 40px; + background-color: rgb(209, 61, 53); + border-radius: 50%; + transition: border-radius 0.3s ease, background-color 0.3s ease; + } + + #recordButton.recording .shape { + border-radius: 10px; + width: 30px; + height: 30px; + + } + #status { margin-top: 20px; font-size: 16px; @@ -60,7 +88,8 @@ padding: 5px; border-radius: 5px; border: 1px solid #ddd; - background-color: #f9f9f9; + background-color: #ffffff; + max-height: 30px; } #websocketInput { @@ -94,12 +123,33 @@ } #speaker { - background-color: #ff4d4d27; + background-color: rgb(252, 230, 229); border-radius: 8px 8px 8px 0px; padding: 2px 10px; font-size: 14px; margin-bottom: 0px; } + .label_diarization { + background-color: #ffffff66; + border-radius: 8px 8px 8px 8px; + padding: 2px 10px; + margin-left: 10px; + font-size: 14px; + margin-bottom: 0px; + border-bottom: 3px solid rgb(155, 84, 84); + color: rgb(155, 84, 84) + } + + .label_transcription { + background-color: #ffffff66; + border-radius: 8px 8px 8px 8px; + padding: 2px 10px; + margin-left: 10px; + font-size: 14px; + margin-bottom: 0px; + border-bottom: 3px solid #8825255c; + color: #8825255c + } #timeInfo { color: #666; @@ -110,28 +160,35 @@ font-size: 16px; /* margin-left: 10px; */ padding-left: 10px; - border-left: 2px solid #ff4d4d27; + border-left: 3px solid rgb(252, 230, 229); margin-bottom: 10px; margin-top: 1px; padding-top: 5px; + border-radius: 0px 0px 0px 10px; } - .buffer { - color: rgb(180, 180, 180); - font-style: italic; + .buffer_diarization { + color: rgb(155, 84, 84); margin-left: 4px; } + .buffer_transcription { + color: #8825255c; + 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: 2px solid #8825255c; + border-top: 2px solid #882525e5; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-bottom: 2px; + margin-right: 5px; } @keyframes spin { @@ -155,6 +212,7 @@ padding: 2px 10px; font-size: 14px; margin-bottom: 0px; + } @@ -162,7 +220,11 @@
- +
@@ -248,34 +310,27 @@ // Handle messages from server websocket.onmessage = (event) => { const data = JSON.parse(event.data); - /* - The server might send: - { - "lines": [ - {"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": "..." - } - */ - const { lines = [], buffer = "" } = data; - renderLinesWithBuffer(lines, buffer); + + const { + lines = [], + buffer_transcription = "", + buffer_diarization = "", + remaining_time_transcription = 0, + remaining_time_diarization = 0 + } = data; + + renderLinesWithBuffer( + lines, + buffer_diarization, + buffer_transcription, + remaining_time_diarization, + remaining_time_transcription + ); }; }); } - function renderLinesWithBuffer(lines, buffer) { - if (!Array.isArray(lines) || lines.length === 0) { - if (buffer) { - linesTranscriptDiv.innerHTML = `${buffer}`; - } else { - linesTranscriptDiv.innerHTML = ""; - } - return; - } - + function renderLinesWithBuffer(lines, buffer_diarization, buffer_transcription, remaining_time_diarization, remaining_time_transcription) { const linesHtml = lines.map((item, idx) => { let timeInfo = ""; if (item.beg !== undefined && item.end !== undefined) { @@ -286,7 +341,7 @@ if (item.speaker === -2) { speakerLabel = `Silence${timeInfo}`; } else if (item.speaker == 0) { - speakerLabel = `${item.diff} second(s) of audio are undergoing diarization`; + speakerLabel = `${remaining_time_diarization} second(s) of audio are undergoing diarization`; } else if (item.speaker == -1) { speakerLabel = `${timeInfo}`; } else if (item.speaker !== -1) { @@ -294,8 +349,13 @@ } let textContent = item.text; - if (idx === lines.length - 1 && buffer) { - textContent += `${buffer}`; + if (idx === lines.length - 1 && buffer_diarization) { + speakerLabel += `Diarization lag${remaining_time_diarization}s` + textContent += `${buffer_diarization}`; + } + if (idx === lines.length - 1 && buffer_transcription) { + speakerLabel += `Transcription lag ${remaining_time_transcription}s` + textContent += `${buffer_transcription}`; } return textContent @@ -336,7 +396,7 @@ websocket = null; } - updateUI(); + updateUI(); } async function toggleRecording() {