update frontend for new variables

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_diarization {
+            color: rgb(155, 84, 84);
+            margin-left: 4px;
         }
 
-        .buffer {
-            color: rgb(180, 180, 180);
-            font-style: italic;
+        .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;
+
         }
     </style>
 </head>
@@ -162,7 +220,11 @@
 <body>
 
     <div class="settings-container">
-        <button id="recordButton">🎙️</button>
+        <button id="recordButton">
+            <div class="shape-container">
+                <div class="shape"></div>
+            </div>
+        </button>
         <div class="settings">
             <div>
                 <label for="chunkSelector">Chunk size (ms):</label>
@@ -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 = `<span class="buffer">${buffer}</span>`;
-                } 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 = `<span class="silence">Silence<span id='timeInfo'>${timeInfo}</span></span>`;
                 } 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'>${remaining_time_diarization} second(s) of audio are undergoing diarization</span></span>`;
                 } else if (item.speaker == -1) {
                     speakerLabel = `<span id="speaker"><span id='timeInfo'>${timeInfo}</span>`;
                 } else if (item.speaker !== -1) {
@@ -294,8 +349,13 @@
                 }
 
                 let textContent = item.text;
-                if (idx === lines.length - 1 && buffer) {
-                    textContent += `<span class="buffer">${buffer}</span>`;
+                if (idx === lines.length - 1 && buffer_diarization) {
+                    speakerLabel += `<span class="label_diarization"><span class="spinner"></span>Diarization lag<span id='timeInfo'>${remaining_time_diarization}s</span></span>`
+                    textContent += `<span class="buffer_diarization">${buffer_diarization}</span>`;
+                }
+                if (idx === lines.length - 1 && buffer_transcription) {
+                    speakerLabel += `<span class="label_transcription"><span class="spinner"></span>Transcription lag <span id='timeInfo'>${remaining_time_transcription}s</span></span>`
+                    textContent += `<span class="buffer_transcription">${buffer_transcription}</span>`;
                 }
 
                 return textContent
@@ -336,7 +396,7 @@
                 websocket = null;
             }
 
-            updateUI();
+            updateUI();	
         }
 
         async function toggleRecording() {