Fix: Initial runtime errors with integration

README.md

@@ -86,7 +86,7 @@ You will need active accounts and API keys for the following services:
     GOOGLE_APPLICATION_CREDENTIALS="/path/to/your/google-credentials.json"
 
     # Your DeepL API Key
-    DEPL_API_KEY="YOUR_DEEPL_API_KEY"
+    DEEPL_API_KEY="YOUR_DEEPL_API_KEY"
 
     # Your ElevenLabs API Key and Voice ID
     ELEVENLABS_API_KEY="YOUR_ELEVENLABS_API_KEY"

index.html

@@ -32,11 +32,13 @@
         const connectWebSocket = () => {
             const proto = window.location.protocol === "https:" ? "wss:" : "ws:";
             const wsUri = `${proto}//${window.location.host}/ws`;
+            console.log("[CLIENT] Attempting to connect to WebSocket:", wsUri);
             status.textContent = `Status: Connecting to ${wsUri}...`;
             socket = new WebSocket(wsUri);
 
             socket.onopen = () => {
                 status.textContent = 'Status: Connected. Ready to start.';
+                console.log("[CLIENT] WebSocket connection opened. Enabling start button.");
                 startButton.disabled = false;
             };
 
@@ -62,13 +64,14 @@
             };
 
             socket.onclose = () => {
+                console.log("[CLIENT] WebSocket connection closed.");
                 status.textContent = 'Status: Disconnected. Please refresh the page.';
                 startButton.disabled = false; // Allow user to try starting again
                 stopButton.disabled = true; 
             };
 
             socket.onerror = (error) => {
-                console.error("WebSocket Error:", error);
+                console.error("[CLIENT] WebSocket Error:", error);
                 status.textContent = 'Status: Connection error. Check console for details.';
             };
         };
@@ -121,6 +124,7 @@
         };
 
         startButton.onclick = async () => {
+            console.log("[CLIENT] Start button clicked.");
             // AudioContext must be created or resumed by a user gesture.
             if (!audioContext) {
                 audioContext = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 16000 });
@@ -128,6 +132,7 @@
                 await audioContext.resume();
             }
 
+            console.log("[CLIENT] Requesting microphone access...");
             navigator.mediaDevices.getUserMedia({ audio: { sampleRate: 16000, channelCount: 1 } })
                 .then(stream => {
                     mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm; codecs=opus' });
@@ -137,18 +142,20 @@
                         }
                     };
                     mediaRecorder.start(250); // Send data every 250ms
+                    console.log("[CLIENT] Microphone access granted. MediaRecorder started.");
 
                     startButton.disabled = true;
                     stopButton.disabled = false;
                     status.textContent = 'Status: Translating...';
                 })
                 .catch(err => {
-                    console.error('Error getting user media:', err);
+                    console.error('[CLIENT] Error getting user media:', err);
                     status.textContent = 'Error: Could not access microphone.';
                 });
         };
 
         stopButton.onclick = () => {
+            console.log("[CLIENT] Stop button clicked.");
             if (mediaRecorder) {
                 mediaRecorder.stop();
             }
@@ -160,6 +167,7 @@
         };
 
         window.onload = () => {
+            console.log("[CLIENT] Page loaded. Initializing...");
             startButton.disabled = true;
             stopButton.disabled = true;
             connectWebSocket(); // Connect automatically on page load

server.py

@@ -18,8 +18,16 @@ deepl_key = os.getenv("DEEPL_API_KEY")
 eleven_key = os.getenv("ELEVENLABS_API_KEY")
 voice_id = os.getenv("ELEVENLABS_VOICE_ID")
 
+# --- Start Debug Prints ---
+print("--- API Key Status ---")
+print(f"GOOGLE_APPLICATION_CREDENTIALS loaded: {bool(google_creds)}")
+print(f"DEEPL_API_KEY loaded: {bool(deepl_key)}")
+print(f"ELEVENLABS_API_KEY loaded: {bool(eleven_key)}")
+print(f"ELEVENLABS_VOICE_ID loaded: {bool(voice_id)}")
+print("----------------------")
+
 if not all([google_creds, deepl_key, eleven_key, voice_id]):
-    raise ValueError("Missing one or more required API keys in .env file.")
+    raise ValueError("CRITICAL: Missing one or more required API keys. Please check your Hugging Face secrets.")
 
 translator = VoiceTranslator(deepl_key, eleven_key, voice_id)
 
@@ -69,15 +77,18 @@ async def handle_audio_input(websocket: WebSocket, input_queue: asyncio.Queue):
 
 @app.websocket("/ws") # This was correct, the error was in the old HTML. No change needed here, but confirming it's /ws.
 async def websocket_endpoint(websocket: WebSocket):
+    print("[SERVER] WebSocket endpoint called. Awaiting connection...")
     await websocket.accept()
-    print("WebSocket connection accepted.")
+    print("[SERVER] WebSocket connection accepted.")
 
     output_sender_task = None
     input_handler_task = None
 
     try:
         # Start translation and audio processing tasks
+        print("[SERVER] Calling translator.start_translation()...")
         translator.start_translation()
+        print("[SERVER] translator.start_translation() returned. Creating tasks...")
         output_sender_task = asyncio.create_task(
             audio_output_sender(websocket, translator.output_queue)
         )
@@ -85,18 +96,19 @@ async def websocket_endpoint(websocket: WebSocket):
             handle_audio_input(websocket, translator.input_queue)
         )
 
+        print("[SERVER] Awaiting asyncio.gather for I/O tasks...")
         await asyncio.gather(input_handler_task, output_sender_task)
 
     except WebSocketDisconnect:
-        print("Client disconnected.")
+        print("[SERVER] Client disconnected via WebSocketDisconnect.")
     except Exception as e:
-        print(f"An error occurred: {e}")
+        print(f"[SERVER] An error occurred in websocket_endpoint: {e}")
     finally:
-        print("Stopping translation and cleaning up...")
+        print("[SERVER] Cleaning up tasks and stopping translation...")
         if output_sender_task:
             output_sender_task.cancel()
         if input_handler_task:
             input_handler_task.cancel()
         translator.stop_translation()
         await websocket.close()
-        print("WebSocket connection closed.")
+        print("[SERVER] WebSocket connection closed.")