admin-valentin/WhisperLiveKit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

format html and change mapping id <-> speakers

Browse source
This commit is contained in:
Quentin Fuxa 2025-02-23 23:13:18 +01:00
parent f200f2cad4
commit 34b707d84e
1 changed files with 328 additions and 306 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/web/live_transcription.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -10,6 +11,7 @@
margin: 20px; margin: 20px;
text-align: center; text-align: center;
} }
#recordButton { #recordButton {
width: 80px; width: 80px;
height: 80px; height: 80px;
@ -21,18 +23,22 @@
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, transform 0.2s ease; transition: background-color 0.3s ease, transform 0.2s ease;
} }
#recordButton.recording { #recordButton.recording {
background-color: #ff4d4d; background-color: #ff4d4d;
color: white; color: white;
} }
#recordButton:active { #recordButton:active {
transform: scale(0.95); transform: scale(0.95);
} }
#status { #status {
margin-top: 20px; margin-top: 20px;
font-size: 16px; font-size: 16px;
color: #333; color: #333;
} }
.settings-container { .settings-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -40,12 +46,14 @@
gap: 15px; gap: 15px;
margin-top: 20px; margin-top: 20px;
} }
.settings { .settings {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 5px; gap: 5px;
} }
#chunkSelector, #chunkSelector,
#websocketInput { #websocketInput {
font-size: 16px; font-size: 16px;
@ -54,17 +62,21 @@
border: 1px solid #ddd; border: 1px solid #ddd;
background-color: #f9f9f9; background-color: #f9f9f9;
} }
#websocketInput { #websocketInput {
width: 200px; width: 200px;
} }
#chunkSelector:focus, #chunkSelector:focus,
#websocketInput:focus { #websocketInput:focus {
outline: none; outline: none;
border-color: #007bff; border-color: #007bff;
} }
label { label {
font-size: 14px; font-size: 14px;
} }
/* Speaker-labeled transcript area */ /* Speaker-labeled transcript area */
#linesTranscript { #linesTranscript {
margin: 20px auto; margin: 20px auto;
@ -72,22 +84,27 @@
text-align: left; text-align: left;
font-size: 16px; font-size: 16px;
} }
#linesTranscript p { #linesTranscript p {
margin: 5px 0; margin: 5px 0;
} }
#linesTranscript strong { #linesTranscript strong {
color: #333; color: #333;
} }
#speaker { #speaker {
background-color: #dcefff; background-color: #dcefff;
border-radius: 30px; border-radius: 30px;
padding: 2px 10px; padding: 2px 10px;
font-size: 14px; font-size: 14px;
} }
#timeInfo { #timeInfo {
color: #666; color: #666;
margin-left: 10px; margin-left: 10px;
} }
.textcontent { .textcontent {
font-size: 16px; font-size: 16px;
margin-left: 10px; margin-left: 10px;
@ -95,11 +112,13 @@
border-left: 2px solid #dcefff; border-left: 2px solid #dcefff;
margin-bottom: 10px; margin-bottom: 10px;
} }
.buffer { .buffer {
color: rgb(180, 180, 180); color: rgb(180, 180, 180);
font-style: italic; font-style: italic;
margin-left: 4px; margin-left: 4px;
} }
.spinner { .spinner {
display: inline-block; display: inline-block;
width: 8px; width: 8px;
@ -117,6 +136,7 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.silence { .silence {
color: #666; color: #666;
background-color: #f3f3f3; background-color: #f3f3f3;
@ -124,6 +144,7 @@
border-radius: 30px; border-radius: 30px;
padding: 2px 10px; padding: 2px 10px;
} }
.loading { .loading {
color: #666; color: #666;
background-color: #eff9ff; background-color: #eff9ff;
@ -133,6 +154,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div class="settings-container"> <div class="settings-container">
@ -241,14 +263,15 @@
} }
function renderLinesWithBuffer(lines, buffer) { function renderLinesWithBuffer(lines, buffer) {
// Clears if no lines
if (!Array.isArray(lines) || lines.length === 0) { if (!Array.isArray(lines) || lines.length === 0) {
if (buffer) {
linesTranscriptDiv.innerHTML = `<span class="buffer">${buffer}</span>`;
} else {
linesTranscriptDiv.innerHTML = ""; linesTranscriptDiv.innerHTML = "";
}
return; return;
} }
const linesHtml = lines.map((item, idx) => { const linesHtml = lines.map((item, idx) => {
let timeInfo = ""; let timeInfo = "";
if (item.beg !== undefined && item.end !== undefined) { if (item.beg !== undefined && item.end !== undefined) {
@ -258,16 +281,14 @@
let speakerLabel = ""; let speakerLabel = "";
if (item.speaker === -2) { if (item.speaker === -2) {
speakerLabel = `<span class="silence">Silence<span id='timeInfo'>${timeInfo}</span></span>`; speakerLabel = `<span class="silence">Silence<span id='timeInfo'>${timeInfo}</span></span>`;
} else if (item.speaker == -1) { } else if (item.speaker == 0) {
speakerLabel = `<span class='loading'><span class="spinner"></span><span id='timeInfo'>${item.diff} second(s) of audio are undergoing diarization</span></span>`; speakerLabel = `<span class='loading'><span class="spinner"></span><span id='timeInfo'>${item.diff} second(s) of audio are undergoing diarization</span></span>`;
} else if (item.speaker == -3) { } else if (item.speaker == -1) {
speakerLabel = `<span id="speaker"><span id='timeInfo'>${timeInfo}</span>`; speakerLabel = `<span id="speaker"><span id='timeInfo'>${timeInfo}</span>`;
} else if (item.speaker !== -1) { } else if (item.speaker !== -1) {
speakerLabel = `<span id="speaker">Speaker ${item.speaker}<span id='timeInfo'>${timeInfo}</span></span>`; speakerLabel = `<span id="speaker">Speaker ${item.speaker}<span id='timeInfo'>${timeInfo}</span></span>`;
} }
let textContent = item.text; let textContent = item.text;
if (idx === lines.length - 1 && buffer) { if (idx === lines.length - 1 && buffer) {
textContent += `<span class="buffer">${buffer}</span>`; textContent += `<span class="buffer">${buffer}</span>`;
@ -336,4 +357,5 @@
recordButton.addEventListener("click", toggleRecording); recordButton.addEventListener("click", toggleRecording);
</script> </script>
</body> </body>
</html> </html>