Update app.js

app.js

@@ -7,6 +7,7 @@ window.onerror = (msg, url, line) => {
 // CONFIG & STATE
 // ============================================================
 const STREAM_API_URL = "https://aqhedgyiworhbfkrzreb.supabase.co/functions/v1/quick-processor";
+const TTS_API_URL = "https://aqhedgyiworhbfkrzreb.supabase.co/functions/v1/swift-worker";
 const RAZORPAY_KEY_ID = "rzp_test_TZ9SeSSO5G8eCq";
 const firebaseConfig = { apiKey: "AIzaSyAChu97QI-tyulpisxH6aECBYlj88DGB1o", authDomain: "arki-ai-280b8.firebaseapp.com", projectId: "arki-ai-280b8", storageBucket: "arki-ai-280b8.firebasestorage.app", messagingSenderId: "1075792140029", appId: "1:1075792140029:web:9f3af7c6b89530c7ee9094", measurementId: "G-PL1YY34MBZ" };
 
@@ -35,7 +36,7 @@ let userPersona = safeGet('arki_persona', ''), userName = safeGet('arki_username
 let currentUser = null, currentPlan = "Free", selectedModel = 'orki-3.0', currentDailyUsage = 0;
 let isAuthRegister = false, abortController = null, isGenerating = false, currentChatId = null;
 let currentChatMessages = [], selectedCycle = 'monthly', cachedThreads = [], isIncognito = false;
-let mediaRecorder = null, audioChunks = [], isRecording = false, gradioClient = null;
+let mediaRecorder = null, audioChunks = [], isRecording = false;
 let currentAudio = null, activeTtsBtn = null, ttsAudioCache = new Map();
 let auth = null, db = null;
 
@@ -147,7 +148,7 @@ function updateUiLangUI() {
 }
 
 // ============================================================
-// CORE LOGIC
+// CORE LOGIC & TTS ENGINE
 // ============================================================
 function buildPersonaContext() {
   return [userName ? `The user's name is ${userName}; address them by name naturally.` : '', userPersona].filter(Boolean).join(' ');
@@ -178,26 +179,30 @@ function toggleDrawer(open) {
   drawerBackdrop.classList.toggle('hidden', !open);
 }
 
-async function getGradioClient() {
-  if (!gradioClient) {
-    const { Client } = await import("https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js");
-    gradioClient = await Client.connect("ai4bharat/indic-parler-tts");
-  }
-  return gradioClient;
-}
-
 function cleanTextForTTS(rawText) {
-  return rawText.replace(/[#*_`~>\[\]\(\)]/g, '').replace(/[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{2600}-\u{26FF}]/gu, '').trim();
+  return rawText
+    .replace(/[#*_`~>\[\]\(\)]/g, '')
+    .replace(/[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{2600}-\u{26FF}]/gu, '')
+    .trim();
 }
 
 async function playBodoSpeech(btn, text) {
-  if (activeTtsBtn === btn && currentAudio && !currentAudio.paused) { currentAudio.pause(); btn.innerHTML = `🔊 Listen`; return; }
-  if (currentAudio) { currentAudio.pause(); if (activeTtsBtn) activeTtsBtn.innerHTML = `🔊 Listen`; }
+  if (activeTtsBtn === btn && currentAudio && !currentAudio.paused) {
+    currentAudio.pause();
+    btn.innerHTML = `🔊 Listen`;
+    return;
+  }
+  if (currentAudio) {
+    currentAudio.pause();
+    if (activeTtsBtn) activeTtsBtn.innerHTML = `🔊 Listen`;
+  }
   const cleanText = cleanTextForTTS(text);
   if (!cleanText) return;
 
   if (ttsAudioCache.has(cleanText)) {
-    activeTtsBtn = btn; btn.disabled = false; btn.innerHTML = `⏹ Stop`;
+    activeTtsBtn = btn;
+    btn.disabled = false;
+    btn.innerHTML = `⏹ Stop`;
     currentAudio = new Audio(ttsAudioCache.get(cleanText));
     currentAudio.onended = () => { btn.innerHTML = `🔊 Listen`; activeTtsBtn = null; currentAudio = null; };
     try { await currentAudio.play(); } catch { btn.innerHTML = `⚠️ Retry`; }
@@ -205,36 +210,50 @@ async function playBodoSpeech(btn, text) {
   }
 
   try {
-    activeTtsBtn = btn; btn.disabled = true; btn.innerHTML = `<span class="animate-pulse">⏳ Rendering...</span>`;
-    const app = await getGradioClient();
-    let result;
-    try { result = await app.predict(0, [cleanText, "Maya speaks in a clear, pleasant voice with natural pacing in studio quality.", 2.0]); }
-    catch { result = await app.predict("/generate_base", [cleanText, "Maya speaks in a clear, pleasant voice with natural pacing in studio quality.", 2.0]); }
-    
-    const audioData = result.data?.[0];
-    const audioUrl = typeof audioData === 'string' ? audioData : audioData?.url;
-    if (!audioUrl) throw new Error("Audio URL missing");
-    
+    activeTtsBtn = btn;
+    btn.disabled = true;
+    btn.innerHTML = `<span class="animate-pulse">⏳ Rendering...</span>`;
+
+    const res = await fetch(TTS_API_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text: cleanText })
+    });
+
+    if (!res.ok) {
+      const errData = await res.json().catch(() => ({}));
+      throw new Error(errData.error || `Server status ${res.status}`);
+    }
+
+    const data = await res.json();
+    const audioUrl = data.audioUrl || (data.data && (typeof data.data[0] === 'string' ? data.data[0] : data.data[0]?.url));
+    if (!audioUrl) throw new Error("Audio URL missing from TTS worker");
+
     ttsAudioCache.set(cleanText, audioUrl);
-    btn.disabled = false; btn.innerHTML = `⏹ Stop`;
+    btn.disabled = false;
+    btn.innerHTML = `⏹ Stop`;
     currentAudio = new Audio(audioUrl);
     currentAudio.onended = () => { btn.innerHTML = `🔊 Listen`; activeTtsBtn = null; currentAudio = null; };
     await currentAudio.play();
   } catch (err) {
-    console.error("TTS error:", err); btn.disabled = false; btn.innerHTML = `⚠️ Retry`;
+    console.error("TTS generation error:", err);
+    btn.disabled = false;
+    btn.innerHTML = `⚠️ Retry`;
     alert("Voice queue is busy or timed out. Please tap retry in a moment.");
   }
 }
 
 function attachTtsButton(bubble, text) {
-  if (!bubble) return;
+  if (!bubble || !text.trim()) return;
   const actionRow = document.createElement('div');
   actionRow.className = "flex items-center gap-2 mt-2 pt-1 border-t border-zinc-700/30";
   const ttsBtn = document.createElement('button');
-  ttsBtn.type = "button"; ttsBtn.className = "text-[11px] font-medium text-zinc-400 hover:text-emerald-400 flex items-center gap-1 transition cursor-pointer";
+  ttsBtn.type = "button";
+  ttsBtn.className = "text-[11px] font-medium text-zinc-400 hover:text-emerald-400 flex items-center gap-1 transition cursor-pointer";
   ttsBtn.innerHTML = `🔊 Listen`;
   ttsBtn.onclick = () => playBodoSpeech(ttsBtn, text.trim());
-  actionRow.appendChild(ttsBtn); bubble.appendChild(actionRow);
+  actionRow.appendChild(ttsBtn);
+  bubble.appendChild(actionRow);
 }
 
 function createBubbleElement(role) {
@@ -358,7 +377,13 @@ async function handleSend() {
       attachTtsButton(aiBubble, finalizedText);
     } else {
       thinking && thinking.classList.add('hidden');
-      appendMessage('model', err.message.includes('429') ? 'Rate limit hit (5 req/min). 15s नेनानै फिन लिर।' : `Error: ${err.message}`);
+      let friendlyMsg = err.message;
+      if (err.message.includes('429')) {
+        friendlyMsg = currentScript === 'roman' ? 'Rate limit hit. 15s nena-nwi fin lwir.' : 'रेत लिमिट थफैबाय। 15 सेकेन्द नेनानै फिन लिर।';
+      } else if (err.message.includes('high demand') || err.message.includes('503')) {
+        friendlyMsg = currentScript === 'roman' ? 'Server-ao traffic baraydwng. 10s unao fin sonanai nay.' : 'सार्भार आव मानसि बारा जादों। 10 सेकेन्द उनाव फिन नाजा।';
+      }
+      appendMessage('model', friendlyMsg);
     }
   } finally {
     thinking && thinking.classList.add('hidden');
@@ -762,4 +787,4 @@ on('auth-submit-btn', 'click', async () => {
 // ============================================================
 // INIT
 // ============================================================
-updateScriptUI(); updateUiLangUI(); updatePricingUI(); updateUsageUI(); updateIncognitoUI(); applyUILanguage(uiLanguage);
+updateScriptUI(); updateUiLangUI(); updatePricingUI(); updateUsageUI(); updateIncognitoUI(); applyUILanguage(uiLanguage);