Switch TTS to browser SpeechSynthesis, fix chat API endpoint

app.py

@@ -3,13 +3,13 @@
 import os
 import base64
 import logging
-from flask import Flask, request, jsonify, render_template, send_from_directory
+from flask import Flask, request, jsonify, render_template
 
 from backend.language_config import get_curriculum_data, LANGUAGES
-from backend.teacher_profiles import get_all_teachers, get_teacher
+from backend.teacher_profiles import get_all_teachers
 from backend.session_manager import sessions
 from backend.tutor_engine import build_system_prompt, build_greeting_prompt, evaluate_pronunciation
-from backend.hf_client import chat_completion, text_to_speech, speech_to_text, get_model_info
+from backend.hf_client import chat_completion, speech_to_text, get_model_info
 
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
@@ -17,15 +17,11 @@ logger = logging.getLogger(__name__)
 app = Flask(__name__, static_folder="static", template_folder="templates")
 
 
-# --- Page Routes ---
-
 @app.route("/")
 def index():
     return render_template("index.html")
 
 
-# --- API Routes ---
-
 @app.route("/api/health", methods=["GET"])
 def health():
     return jsonify({"status": "ok", "models": get_model_info()})
@@ -43,23 +39,15 @@ def teachers():
 
 @app.route("/api/teacher/voice-sample", methods=["POST"])
 def teacher_voice_sample():
+    """Return sample text for client-side TTS preview."""
     data = request.json or {}
-    teacher_id = data.get("teacher_id", "anaya")
     target_lang = data.get("target_lang", "hindi")
 
     lang = LANGUAGES.get(target_lang)
     if not lang:
         return jsonify({"error": "Unknown language"}), 400
 
-    sample_text = lang.get("sample_text", "Hello!")
-    tts_model = lang.get("tts_model", "facebook/mms-tts-eng")
-
-    audio_bytes = text_to_speech(sample_text, tts_model)
-    if audio_bytes:
-        audio_b64 = base64.b64encode(audio_bytes).decode("utf-8")
-        return jsonify({"audio": audio_b64, "text": sample_text})
-
-    return jsonify({"audio": None, "text": sample_text, "error": "TTS unavailable"})
+    return jsonify({"text": lang.get("sample_text", "Hello!")})
 
 
 @app.route("/api/session/start", methods=["POST"])
@@ -88,16 +76,9 @@ def session_start():
     greeting = result.get("content", "Hello! Let's begin our lesson.")
     session.add_message("assistant", greeting)
 
-    # Generate TTS for greeting
-    lang = LANGUAGES.get(target_lang, {})
-    tts_model = lang.get("tts_model", "facebook/mms-tts-eng")
-    audio_bytes = text_to_speech(greeting, tts_model)
-    audio_b64 = base64.b64encode(audio_bytes).decode("utf-8") if audio_bytes else None
-
     return jsonify({
         "session_id": session.session_id,
         "greeting": greeting,
-        "audio": audio_b64,
         "teacher_id": teacher_id
     })
 
@@ -119,19 +100,10 @@ def chat():
     result = chat_completion(session.get_messages())
     reply = result.get("content", "")
     session.add_message("assistant", reply)
-
-    # XP for engaging
     session.add_xp(5)
 
-    # Generate TTS
-    lang = LANGUAGES.get(session.target_lang, {})
-    tts_model = lang.get("tts_model", "facebook/mms-tts-eng")
-    audio_bytes = text_to_speech(reply, tts_model)
-    audio_b64 = base64.b64encode(audio_bytes).decode("utf-8") if audio_bytes else None
-
     return jsonify({
         "reply": reply,
-        "audio": audio_b64,
         "xp": session.xp,
         "model": result.get("model", "")
     })
@@ -163,15 +135,9 @@ def voice():
     session.add_message("assistant", reply)
     session.add_xp(10)
 
-    lang = LANGUAGES.get(session.target_lang, {})
-    tts_model = lang.get("tts_model", "facebook/mms-tts-eng")
-    audio_resp = text_to_speech(reply, tts_model)
-    audio_b64 = base64.b64encode(audio_resp).decode("utf-8") if audio_resp else None
-
     return jsonify({
         "transcribed": transcribed,
         "reply": reply,
-        "audio": audio_b64,
         "xp": session.xp
     })
 

static/js/app.js

@@ -3,6 +3,22 @@
 (function () {
   "use strict";
 
+  // ===== Language to BCP-47 voice mapping =====
+  const LANG_VOICE_MAP = {
+    hindi: "hi-IN",
+    tamil: "ta-IN",
+    telugu: "te-IN",
+    bengali: "bn-IN",
+    marathi: "mr-IN",
+    gujarati: "gu-IN",
+    kannada: "kn-IN",
+    malayalam: "ml-IN",
+    english: "en-US",
+    spanish: "es-ES",
+    french: "fr-FR",
+    japanese: "ja-JP",
+  };
+
   // ===== State =====
   const state = {
     step: 1,
@@ -21,54 +37,66 @@
     teachersData: null,
   };
 
-  // ===== Audio Manager =====
-  const AudioManager = {
+  // ===== Speech Manager (Browser TTS) =====
+  const SpeechManager = {
+    speaking: false,
     queue: [],
-    playing: false,
-    currentAudio: null,
 
-    play(base64Audio) {
-      if (state.isMuted || !base64Audio) return;
-      this.queue.push(base64Audio);
-      if (!this.playing) this._playNext();
+    speak(text) {
+      if (state.isMuted || !text) return;
+      // Clean markup/special blocks from text
+      const clean = text
+        .replace(/\[CULTURAL NOTE:.*?\]/gs, "")
+        .replace(/\[DIALOGUE\].*?\[\/DIALOGUE\]/gs, "")
+        .replace(/\[SENTENCE_BUILDER:.*?\]/gs, "")
+        .replace(/\*\*/g, "")
+        .replace(/\*/g, "")
+        .replace(/\[.*?\]/g, "")
+        .trim();
+      if (!clean) return;
+      this.queue.push(clean);
+      if (!this.speaking) this._speakNext();
     },
 
-    _playNext() {
+    _speakNext() {
       if (this.queue.length === 0) {
-        this.playing = false;
+        this.speaking = false;
         AvatarController.setIdle();
         return;
       }
-      this.playing = true;
+      this.speaking = true;
       AvatarController.setSpeaking();
-      const b64 = this.queue.shift();
-      const audio = new Audio("data:audio/wav;base64," + b64);
-      this.currentAudio = audio;
-      audio.onended = () => {
-        this.currentAudio = null;
-        this._playNext();
-      };
-      audio.onerror = () => {
-        this.currentAudio = null;
-        this._playNext();
-      };
-      audio.play().catch(() => this._playNext());
+
+      const text = this.queue.shift();
+      const synth = window.speechSynthesis;
+      const utt = new SpeechSynthesisUtterance(text);
+
+      // Try to pick a voice matching the target language
+      const langCode = LANG_VOICE_MAP[state.targetLang] || "en-US";
+      const voices = synth.getVoices();
+      const match = voices.find(
+        (v) => v.lang === langCode || v.lang.startsWith(langCode.split("-")[0])
+      );
+      if (match) utt.voice = match;
+      utt.lang = langCode;
+      utt.rate = 0.9;
+
+      utt.onend = () => this._speakNext();
+      utt.onerror = () => this._speakNext();
+
+      synth.speak(utt);
     },
 
     stop() {
       this.queue = [];
-      if (this.currentAudio) {
-        this.currentAudio.pause();
-        this.currentAudio = null;
-      }
-      this.playing = false;
+      window.speechSynthesis.cancel();
+      this.speaking = false;
       AvatarController.setIdle();
     },
   };
 
   // ===== Avatar Controller =====
   const AvatarController = {
-    speakInterval: null,
     blinkInterval: null,
 
     load(teacherId, color) {
@@ -85,44 +113,16 @@
         teacherId.charAt(0).toUpperCase() + teacherId.slice(1);
       document.getElementById("avatarName").style.color = color;
 
-      // Set teacher color theme
       document.documentElement.style.setProperty("--teacher-color", color);
-
       this.startBlinking();
     },
 
     setSpeaking() {
-      const container = document.getElementById("avatarContainer");
-      container.classList.add("speaking");
-
-      // Animate mouth via SVG inside if accessible
-      this._animateMouth(true);
+      document.getElementById("avatarContainer").classList.add("speaking");
     },
 
     setIdle() {
-      const container = document.getElementById("avatarContainer");
-      container.classList.remove("speaking");
-      this._animateMouth(false);
-    },
-
-    _animateMouth(speaking) {
-      try {
-        const container = document.getElementById("avatarContainer");
-        const svg =
-          container.querySelector("svg") ||
-          container.querySelector("img")?.getSVGDocument?.();
-        if (!svg) return;
-        const mouth = svg.querySelector("#mouth");
-        if (!mouth) return;
-
-        if (speaking) {
-          mouth.style.animation = "mouthSpeak 300ms ease infinite";
-        } else {
-          mouth.style.animation = "none";
-        }
-      } catch (e) {
-        // SVG cross-origin or not loaded yet
-      }
+      document.getElementById("avatarContainer").classList.remove("speaking");
     },
 
     startBlinking() {
@@ -194,10 +194,10 @@
       if (key === preselectKey) card.classList.add("selected");
       card.dataset.key = key;
       card.innerHTML = `
-                <span class="card-icon">${lang.flag}</span>
-                <span class="card-title">${lang.name}</span>
-                <span class="card-subtitle">${lang.native_name}</span>
-            `;
+        <span class="card-icon">${lang.flag}</span>
+        <span class="card-title">${lang.name}</span>
+        <span class="card-subtitle">${lang.native_name}</span>
+      `;
       card.onclick = () => {
         container
           .querySelectorAll(".selection-card")
@@ -240,15 +240,15 @@
       card.className = "teacher-card";
       card.style.setProperty("--teacher-color", t.color);
       card.innerHTML = `
-                <div class="teacher-avatar-preview" style="background:${t.color_light}">
-                    <img src="/static/svg/${t.avatar}" alt="${t.name}">
-                </div>
-                <h3>${t.name}</h3>
-                <div class="teacher-title" style="color:${t.color}">${t.title}</div>
-                <div class="teacher-style">${t.style}</div>
-                <div class="teacher-desc">${t.description}</div>
-                <button class="btn-voice-preview" data-teacher="${t.id}">Preview Voice</button>
-            `;
+        <div class="teacher-avatar-preview" style="background:${t.color_light}">
+          <img src="/static/svg/${t.avatar}" alt="${t.name}">
+        </div>
+        <h3>${t.name}</h3>
+        <div class="teacher-title" style="color:${t.color}">${t.title}</div>
+        <div class="teacher-style">${t.style}</div>
+        <div class="teacher-desc">${t.description}</div>
+        <button class="btn-voice-preview" data-teacher="${t.id}">Preview Voice</button>
+      `;
       card.onclick = (e) => {
         if (e.target.classList.contains("btn-voice-preview")) return;
         container
@@ -269,7 +269,7 @@
       container.appendChild(card);
     }
 
-    // Voice preview buttons
+    // Voice preview buttons — use browser TTS
     container.querySelectorAll(".btn-voice-preview").forEach((btn) => {
       btn.onclick = async (e) => {
         e.stopPropagation();
@@ -283,9 +283,21 @@
           }),
         });
         btn.textContent = "Preview Voice";
-        if (data.audio) {
-          const audio = new Audio("data:audio/wav;base64," + data.audio);
-          audio.play().catch(() => {});
+        if (data.text) {
+          const synth = window.speechSynthesis;
+          const utt = new SpeechSynthesisUtterance(data.text);
+          const langCode =
+            LANG_VOICE_MAP[state.targetLang] || "en-US";
+          const voices = synth.getVoices();
+          const match = voices.find(
+            (v) =>
+              v.lang === langCode ||
+              v.lang.startsWith(langCode.split("-")[0])
+          );
+          if (match) utt.voice = match;
+          utt.lang = langCode;
+          utt.rate = 0.9;
+          synth.speak(utt);
         }
       };
     });
@@ -301,10 +313,10 @@
       const card = document.createElement("div");
       card.className = "selection-card";
       card.innerHTML = `
-                <span class="card-icon">${t.icon}</span>
-                <span class="card-title">${t.title}</span>
-                <span class="card-subtitle">${t.description}</span>
-            `;
+        <span class="card-icon">${t.icon}</span>
+        <span class="card-title">${t.title}</span>
+        <span class="card-subtitle">${t.description}</span>
+      `;
       card.onclick = () => {
         container
           .querySelectorAll(".selection-card")
@@ -364,13 +376,9 @@
     ) || { color: "#E91E63" };
     AvatarController.load(state.teacherId, teacher.color);
 
-    // Show greeting
+    // Show greeting and auto-speak
     addMessage("tutor", data.greeting);
-
-    // Auto-speak greeting
-    if (data.audio) {
-      AudioManager.play(data.audio);
-    }
+    SpeechManager.speak(data.greeting);
 
     document.getElementById("inputMessage").focus();
   }
@@ -383,33 +391,25 @@
     div.innerHTML = formatMessage(text);
     container.appendChild(div);
 
-    // Render any special blocks
     renderSpecialBlocks(div, text);
-
     scrollToBottom();
   }
 
   function formatMessage(text) {
-    // Escape HTML
     let html = text
       .replace(/&/g, "&amp;")
       .replace(/</g, "&lt;")
       .replace(/>/g, "&gt;");
 
-    // Bold
     html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
-    // Italic
     html = html.replace(/\*(.+?)\*/g, "<em>$1</em>");
-    // Line breaks
     html = html.replace(/\n/g, "<br>");
 
-    // Cultural notes
     html = html.replace(
       /\[CULTURAL NOTE:\s*(.*?)\]/gs,
       '<div class="cultural-note"><div class="cultural-note-title">Cultural Insight</div>$1</div>'
     );
 
-    // Dialogue blocks
     html = html.replace(
       /\[DIALOGUE\](.*?)\[\/DIALOGUE\]/gs,
       '<div class="dialogue-block">$1</div>'
@@ -419,10 +419,7 @@
   }
 
   function renderSpecialBlocks(msgEl, text) {
-    // Sentence builder
-    const sbMatch = text.match(
-      /\[SENTENCE_BUILDER:\s*(.*?)\]/
-    );
+    const sbMatch = text.match(/\[SENTENCE_BUILDER:\s*(.*?)\]/);
     if (sbMatch) {
       const words = sbMatch[1].split("|").map((w) => w.trim());
       const shuffled = [...words].sort(() => Math.random() - 0.5);
@@ -431,17 +428,16 @@
       const block = document.createElement("div");
       block.className = "sentence-builder";
       block.innerHTML = `
-                <div class="sentence-builder-title">Arrange the words in the correct order:</div>
-                <div class="word-tiles">${shuffled.map((w) => `<span class="word-tile" data-word="${escapeAttr(w)}">${w}</span>`).join("")}</div>
-                <div class="sentence-drop-zone" data-correct="${escapeAttr(correctOrder)}"></div>
-                <div class="sentence-builder-actions">
-                    <button class="btn-check-sentence">Check</button>
-                    <button class="btn-reset-sentence">Reset</button>
-                </div>
-            `;
+        <div class="sentence-builder-title">Arrange the words in the correct order:</div>
+        <div class="word-tiles">${shuffled.map((w) => `<span class="word-tile" data-word="${escapeAttr(w)}">${w}</span>`).join("")}</div>
+        <div class="sentence-drop-zone" data-correct="${escapeAttr(correctOrder)}"></div>
+        <div class="sentence-builder-actions">
+          <button class="btn-check-sentence">Check</button>
+          <button class="btn-reset-sentence">Reset</button>
+        </div>
+      `;
       msgEl.appendChild(block);
 
-      // Tile click handlers
       const tiles = block.querySelectorAll(".word-tile");
       const dropZone = block.querySelector(".sentence-drop-zone");
 
@@ -542,10 +538,8 @@
       updateXP();
     }
 
-    // Auto-speak
-    if (data.audio) {
-      AudioManager.play(data.audio);
-    }
+    // Auto-speak using browser TTS
+    SpeechManager.speak(data.reply);
   }
 
   // ===== Voice Input =====
@@ -597,19 +591,16 @@
     }
     if (data.reply) {
       addMessage("tutor", data.reply);
+      SpeechManager.speak(data.reply);
     }
     if (data.xp) {
       state.xp = data.xp;
       updateXP();
     }
-    if (data.audio) {
-      AudioManager.play(data.audio);
-    }
   }
 
   // ===== Event Handlers =====
   function bindEvents() {
-    // Send message
     document.getElementById("btnSend").onclick = sendMessage;
     document.getElementById("inputMessage").onkeydown = (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
@@ -618,10 +609,8 @@
       }
     };
 
-    // Voice
     document.getElementById("btnMic").onclick = () => startRecording();
 
-    // Mute toggle
     document.getElementById("btnMute").onclick = () => {
       state.isMuted = !state.isMuted;
       document
@@ -630,54 +619,60 @@
       document
         .getElementById("iconMuted")
         .classList.toggle("hidden", !state.isMuted);
-      if (state.isMuted) AudioManager.stop();
+      if (state.isMuted) SpeechManager.stop();
     };
 
-    // Back button
     document.getElementById("btnBack").onclick = () => {
-      AudioManager.stop();
+      SpeechManager.stop();
       state.sessionId = null;
       document.getElementById("chatMessages").innerHTML = "";
       document.getElementById("lesson").classList.add("hidden");
       document.getElementById("onboarding").classList.remove("hidden");
       document.getElementById("btnStart").textContent = "Start Lesson";
       document.getElementById("btnStart").disabled = true;
-      // Reset topic selection
       document
         .querySelectorAll("#topicGrid .selection-card")
         .forEach((c) => c.classList.remove("selected"));
     };
 
-    // Start button
     document.getElementById("btnStart").onclick = startLesson;
+
+    // Pre-load voices
+    if (window.speechSynthesis) {
+      window.speechSynthesis.getVoices();
+      window.speechSynthesis.onvoiceschanged = () => {
+        window.speechSynthesis.getVoices();
+      };
+    }
   }
 
   // ===== Init =====
   async function init() {
     bindEvents();
 
-    // Load data in parallel
     const [currData, teachData] = await Promise.all([
       loadCurriculum(),
       loadTeachers(),
     ]);
 
-    // Render Step 1: Target language
     renderLanguageGrid("targetLangGrid", (key) => {
       state.targetLang = key;
       setTimeout(() => {
-        renderLanguageGrid("instructionLangGrid", (k) => {
-          state.instructionLang = k;
-          setTimeout(() => {
-            renderLevelCards();
-            renderStep(3);
-          }, 300);
-        }, "english");
+        renderLanguageGrid(
+          "instructionLangGrid",
+          (k) => {
+            state.instructionLang = k;
+            setTimeout(() => {
+              renderLevelCards();
+              renderStep(3);
+            }, 300);
+          },
+          "english"
+        );
         renderStep(2);
       }, 300);
     });
   }
 
-  // Boot
   document.addEventListener("DOMContentLoaded", init);
 })();