Enhancement: Added multilingual support and UI improvements

demo/web/app.py

@@ -25,6 +25,8 @@
 from vibevoice.modular.streamer import AudioStreamer
 
 import copy
+from googletrans import Translator
+translator = Translator()
 
 BASE = Path(__file__).parent
 SAMPLE_RATE = 24_000
@@ -364,7 +366,15 @@ def streaming_tts(text: str, **kwargs) -> Iterator[np.ndarray]:
 async def websocket_stream(ws: WebSocket) -> None:
     await ws.accept()
     text = ws.query_params.get("text", "")
+    language = ws.query_params.get("language", "en")
     print(f"Client connected, text={text!r}")
+    try:
+            if language and language != "en":
+                translated = translator.translate(text, dest=language)
+                text = translated.text
+                print(f"Translated text: {text}")
+    except Exception as e:
+        print(f"Translation error: {e}")
     cfg_param = ws.query_params.get("cfg")
     steps_param = ws.query_params.get("steps")
     voice_param = ws.query_params.get("voice")

demo/web/index.html

@@ -347,8 +347,21 @@ <h1>VibeVoice-Realtime TTS Demo</h1>
           <option value="">Loading...</option>
         </select>
       </div>
+      <div class="inline-field">
+        <span class="field-label">Language</span>
+        <select id="languageSelect" class="select-control">
+          <option value="en">English</option>
+          <option value="ta">Tamil</option>
+          <option value="hi">Hindi</option>
+        </select>
+      </div>
 
       <div class="control-row">
+        <label class="range-control">
+        <span>Speed</span>
+        <input id="speedControl" type="range" min="0.5" max="2" step="0.1" value="1" />
+        <span class="range-value" id="speedValue">1.0</span>
+        </label>
         <label class="range-control">
           <span>CFG</span>
           <input id="cfgScale" type="range" min="1.3" max="3" step="0.05" value="1.5" />
@@ -400,8 +413,11 @@ <h1>VibeVoice-Realtime TTS Demo</h1>
   const streamingPreview = document.getElementById('streamingPreview');
   const controlBtn = document.getElementById('playback');
   const cfgSelect = document.getElementById('cfgScale');
+  const speedControl = document.getElementById('speedControl');
+  const speedValueLabel = document.getElementById('speedValue');
   const stepsSelect = document.getElementById('inferenceSteps');
   const voiceSelect = document.getElementById('voiceSelect');
+  const languageSelect = document.getElementById('languageSelect');
   const cfgValueLabel = document.getElementById('cfgValue');
   const stepsValueLabel = document.getElementById('stepsValue');
   const modelGeneratedLabel = document.getElementById('modelGenerated');
@@ -490,6 +506,9 @@ <h1>VibeVoice-Realtime TTS Demo</h1>
   };
 
   cfgSelect.addEventListener('input', updateCfgDisplay);
+  const updateSpeedDisplay = () => {speedValueLabel.textContent = Number(speedControl.value).toFixed(1);};
+  speedControl.addEventListener('input', updateSpeedDisplay);
+  updateSpeedDisplay();
   stepsSelect.addEventListener('input', updateStepsDisplay);
   updateCfgDisplay();
   updateStepsDisplay();
@@ -920,6 +939,8 @@ <h1>VibeVoice-Realtime TTS Demo</h1>
 
     const params = new URLSearchParams();
     params.set('text', textValue);
+    params.set('speed', speedControl.value);
+    params.set('language', languageSelect.value);
     if (!Number.isNaN(cfgValue)) {
       params.set('cfg', cfgValue.toFixed(3));
     }