connected translation with frontend

whisperlivekit/audio_processor.py

@@ -397,7 +397,8 @@ class AudioProcessor:
                         "text": "",
                         "beg": format_time(0),
                         "end": format_time(tokens[-1].end if tokens else 0),
-                        "diff": 0
+                        "diff": 0,
+                        "translation": ""
                     }]
                 
                 response = {
@@ -529,7 +530,7 @@ class AudioProcessor:
         translated = self.translator.translate_batch([tokenized[0]])
 
         translated_text = self.translation_tokenizer.detokenize(translated[0].hypotheses[0])
-        logger.info(f"Translated text: {translated_text}")
+        logger.info(f"Translated text {translated_text}")
         return translated_text
 
         

whisperlivekit/web/live_transcription.html

@@ -338,8 +338,8 @@
 
         const host = window.location.hostname || "localhost";
         const port = window.location.port || "8000";
-         // const defaultWebSocketUrl = `ws://${host}:${port}/asr`;
-        const defaultWebSocketUrl = `wss://${host}/asr`;
+        const defaultWebSocketUrl = `ws://${host}:${port}/asr`;
+        //const defaultWebSocketUrl = `wss://${host}/asr`;
         websocketInput.value = defaultWebSocketUrl;
         websocketUrl = defaultWebSocketUrl;
 
@@ -426,6 +426,7 @@
                         remaining_time_diarization = 0
                     } = data;
                     
+                    
                     renderLinesWithBuffer(
                         lines, 
                         buffer_diarization, 
@@ -433,7 +434,7 @@
                         remaining_time_diarization,
                         remaining_time_transcription
                     );
-                    renderLinesWithBufferUpper(
+                    renderLinesWithBufferTranslation(
                         lines, 
                         buffer_diarization,
                         buffer_transcription,
@@ -484,7 +485,7 @@
             linesTranscriptDiv.innerHTML = linesHtml;
         }
 
-        function renderLinesWithBufferUpper(lines, buffer_diarization, buffer_transcription, remaining_time_diarization, remaining_time_transcription) {
+        function renderLinesWithBufferTranslation(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) {
@@ -502,7 +503,7 @@
                     speakerLabel = `<span id="speaker">Speaker ${item.speaker}<span id='timeInfo'>${timeInfo}</span></span>`;
                 }
 
-                let textContent = item.text.toUpperCase();
+                let textContent = item.translation;
                 if (idx === lines.length - 1) {
                     speakerLabel += `<span class="label_transcription"><span class="spinner"></span>Transcription lag <span id='timeInfo'>${remaining_time_transcription}s</span></span>`
                 }