Fix TTS CORS issues with backend proxy endpoint

Add TTS synthesis proxy at /tts/synthesize to avoid CORS:
- Backend calls Gradio TTS service directly (no CORS issues)
- Frontend calls our proxy endpoint instead of external service
- Add gradio-client dependency for TTS integration
- Simplify TTS workflow with direct response handling

Resolves TTS CORS and 502 Bad Gateway errors

v1.0.10

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/api/chat_widget.py

@@ -414,45 +414,31 @@ async def chat_widget(request: Request):
                     try {{
                         console.log('🎵 Synthesizing TTS for:', text.substring(0, 50) + '...');
 
-                        // Call TTS service directly (HuggingFace to HuggingFace)
-                        const response = await fetch('https://pgits-kyutai-tts-service-v3.hf.space/call/predict', {{
+                        // Call our TTS proxy endpoint (no CORS issues)
+                        const response = await fetch('{base_url}/tts/synthesize', {{
                             method: 'POST',
                             headers: {{
                                 'Content-Type': 'application/json',
                             }},
                             body: JSON.stringify({{
-                                data: [
-                                    text,
-                                    'expresso/ex03-ex01_happy_001_channel1_334s.wav'
-                                ]
+                                text: text,
+                                voice: 'expresso/ex03-ex01_happy_001_channel1_334s.wav'
                             }})
                         }});
 
                         if (!response.ok) {{
-                            throw new Error(`TTS service error: ${{response.status}}`);
+                            throw new Error(`TTS proxy error: ${{response.status}}`);
                         }}
 
                         const result = await response.json();
                         console.log('🎵 TTS response:', result);
 
-                        // Handle Gradio queue response
-                        let audioUrl;
-                        if (result.event_id) {{
-                            // If queued, wait for completion
-                            audioUrl = await this.waitForTTSResult(result.event_id);
-                        }} else if (result.data && result.data[0]) {{
-                            // Direct response
-                            audioUrl = result.data[0];
-                        }} else {{
-                            throw new Error('No audio URL in TTS response');
-                        }}
-
-                        if (!audioUrl) {{
-                            throw new Error('TTS generation failed - no audio URL');
+                        if (!result.success || !result.audio_url) {{
+                            throw new Error('TTS generation failed');
                         }}
 
-                        // Convert relative URL to absolute
-                        const fullAudioUrl = audioUrl.startsWith('http') ? audioUrl : `https://pgits-kyutai-tts-service-v3.hf.space/file=${{audioUrl}}`;
+                        // Convert relative URL to absolute if needed
+                        const fullAudioUrl = result.audio_url.startsWith('http') ? result.audio_url : `https://pgits-kyutai-tts-service-v3.hf.space/file=${{result.audio_url}}`;
                         console.log('🔊 Fetching audio from:', fullAudioUrl);
 
                         // Fetch the audio file

app/api/main.py

@@ -408,11 +408,44 @@ async def stream_chat(request: ChatRequest):
                 "Access-Control-Allow-Origin": "*",
             }
         )
-        
+
     except Exception as e:
         raise HTTPException(status_code=500, detail=f"Stream chat error: {str(e)}")
 
 
+@app.post("/tts/synthesize")
+async def tts_synthesize(request: Dict[str, Any]):
+    """TTS synthesis proxy to avoid CORS issues."""
+    try:
+        from gradio_client import Client
+
+        text = request.get("text", "")
+        voice = request.get("voice", "expresso/ex03-ex01_happy_001_channel1_334s.wav")
+
+        if not text.strip():
+            raise HTTPException(status_code=400, detail="Text is required")
+
+        logger.info(f"🎵 TTS synthesis request: {text[:50]}...")
+
+        # Connect to TTS service
+        client = Client("https://pgits-kyutai-tts-service-v3.hf.space")
+        result = client.predict(text, voice, api_name="/predict")
+
+        if not result:
+            raise HTTPException(status_code=500, detail="TTS generation failed")
+
+        # Return the audio file URL
+        return {
+            "success": True,
+            "audio_url": result,
+            "text": text
+        }
+
+    except Exception as e:
+        logger.error(f"TTS synthesis error: {e}")
+        raise HTTPException(status_code=500, detail=f"TTS synthesis failed: {str(e)}")
+
+
 @app.get("/auth/login", response_model=AuthResponse)
 async def google_auth_login(request: Request, state: Optional[str] = None):
     """Initiate Google OAuth login."""

requirements.txt

@@ -19,4 +19,5 @@ python-multipart>=0.0.6
 python-jose>=3.3.0
 PyJWT>=2.8.0
 httpx>=0.25.0
-python-dotenv>=1.0.0
+python-dotenv>=1.0.0
+gradio-client>=0.17.0