diff --git a/whisperlivekit/web/live_transcription.css b/whisperlivekit/web/live_transcription.css
index 40d32f0..0ce7065 100644
--- a/whisperlivekit/web/live_transcription.css
+++ b/whisperlivekit/web/live_transcription.css
@@ -534,22 +534,6 @@ label {
color: var(--muted);
}
-.label_language img {
- width: 12px;
- height: 12px;
-}
-
-.silence-icon {
- width: 14px;
- height: 14px;
- vertical-align: text-bottom;
-}
-
-.speaker-icon {
- width: 16px;
- height: 16px;
- vertical-align: text-bottom;
-}
.speaker-badge {
display: inline-flex;
diff --git a/whisperlivekit/web/live_transcription.js b/whisperlivekit/web/live_transcription.js
index 83fce97..d828ebb 100644
--- a/whisperlivekit/web/live_transcription.js
+++ b/whisperlivekit/web/live_transcription.js
@@ -40,6 +40,11 @@ const timerElement = document.querySelector(".timer");
const themeRadios = document.querySelectorAll('input[name="theme"]');
const microphoneSelect = document.getElementById("microphoneSelect");
+const translationIcon = ``
+const silenceIcon = ``;
+const languageIcon = ``
+const speakerIcon = ``;
+
function getWaveStroke() {
const styles = getComputedStyle(document.documentElement);
const v = styles.getPropertyValue("--wave-stroke").trim();
@@ -335,19 +340,17 @@ function renderLinesWithBuffer(
let speakerLabel = "";
if (item.speaker === -2) {
- const silenceIcon = ``;
speakerLabel = `${silenceIcon}${timeInfo}`;
} else if (item.speaker == 0 && !isFinalizing) {
speakerLabel = `${fmt1(
remaining_time_diarization
)} second(s) of audio are undergoing diarization`;
} else if (item.speaker !== 0) {
- const speakerIcon = `
`;
const speakerNum = `${item.speaker}`;
speakerLabel = `${speakerIcon}${speakerNum}${timeInfo}`;
if (item.detected_language) {
- speakerLabel += `
${item.detected_language}`;
+ speakerLabel += `${languageIcon}${item.detected_language}`;
}
}
@@ -388,7 +391,7 @@ function renderLinesWithBuffer(
if (item.translation) {
currentLineText += `