Update frontend to use Supertonic 2 TTS API

frontend/app/voice/page.tsx

@@ -62,63 +62,49 @@ export default function OraVoice() {
         }
     };
 
-    const speak = (text: string) => {
+    const speak = async (text: string) => {
         setState("SPEAKING");
 
-        // Cancel any ongoing speech
-        window.speechSynthesis.cancel();
-
-        const utterance = new SpeechSynthesisUtterance(text);
-
-        // Get available voices and select the best one
-        const voices = window.speechSynthesis.getVoices();
-
-        // Priority order for natural-sounding voices
-        const preferredVoices = [
-            "Microsoft Zira - English (United States)",
-            "Google US English Female",
-            "Samantha",
-            "Karen",
-            "Moira",
-            "Tessa"
-        ];
-
-        let selectedVoice = voices.find(v =>
-            preferredVoices.some(pv => v.name.includes(pv))
-        );
-
-        // Fallback to any female English voice
-        if (!selectedVoice) {
-            selectedVoice = voices.find(v =>
-                v.lang.includes("en") && v.name.toLowerCase().includes("female")
-            );
-        }
+        try {
+            // Call backend TTS API for professional voice
+            const res = await fetch("/api/tts", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ text }),
+            });
 
-        // Final fallback
-        if (!selectedVoice && voices.length > 0) {
-            selectedVoice = voices[0];
-        }
+            if (!res.ok) {
+                throw new Error("TTS failed");
+            }
 
-        if (selectedVoice) {
-            utterance.voice = selectedVoice;
-        }
+            // Get audio blob and play it
+            const audioBlob = await res.blob();
+            const audioUrl = URL.createObjectURL(audioBlob);
+            const audio = new Audio(audioUrl);
+
+            audio.onended = () => {
+                setState("IDLE");
+                URL.revokeObjectURL(audioUrl);
+            };
 
-        // Voice parameters for warmth and naturalness
-        utterance.rate = 0.9;      // Slightly slower for clarity
-        utterance.pitch = 0.95;    // Slightly lower for warmth
-        utterance.volume = 1.0;    // Full volume
+            audio.onerror = () => {
+                setState("IDLE");
+                URL.revokeObjectURL(audioUrl);
+            };
 
-        utterance.onend = () => setState("IDLE");
-        utterance.onerror = () => setState("IDLE");
+            await audio.play();
 
-        window.speechSynthesis.speak(utterance);
+        } catch (error) {
+            console.error("TTS error:", error);
+            setState("IDLE");
+        }
     };
 
     const toggleListen = () => {
         if (state === "IDLE") {
             recognitionRef.current?.start();
         } else if (state === "SPEAKING") {
-            window.speechSynthesis.cancel();
+            // Audio will stop naturally or can be stopped via audio element
             setState("IDLE");
         }
     };