Spaces:

fastrtc
/

talk-to-claude

Running on CPU Upgrade

App Files Files Community

freddyaboulton HF staff commited on Feb 20

Commit

b141d5b

verified ·

1 Parent(s): 93cb0e6

Upload folder using huggingface_hub

Browse files

Files changed (2) hide show

app.py +37 -32
index.html +66 -26

app.py CHANGED Viewed

@@ -1,5 +1,6 @@
 import json
 import os
 from pathlib import Path
 import anthropic
@@ -13,6 +14,7 @@ from fastrtc import (
     AdditionalOutputs,
     ReplyOnPause,
     Stream,
     get_tts_model,
     get_twilio_turn_credentials,
 )
@@ -36,38 +38,41 @@ def response(
     audio: tuple[int, np.ndarray],
     chatbot: list[dict] | None = None,
 ):
-    chatbot = chatbot or []
-    messages = [{"role": d["role"], "content": d["content"]} for d in chatbot]
-    prompt = groq_client.audio.transcriptions.create(
-        file=("audio-file.mp3", audio_to_bytes(audio)),
-        model="whisper-large-v3-turbo",
-        response_format="verbose_json",
-    ).text
-    print("prompt", prompt)
-    chatbot.append({"role": "user", "content": prompt})
-    yield AdditionalOutputs(chatbot)
-    messages.append({"role": "user", "content": prompt})
-    response = claude_client.messages.create(
-        model="claude-3-5-haiku-20241022",
-        max_tokens=512,
-        messages=messages,  # type: ignore
-    )
-    response_text = " ".join(
-        block.text  # type: ignore
-        for block in response.content
-        if getattr(block, "type", None) == "text"
-    )
-    chatbot.append({"role": "assistant", "content": response_text})
-    import time
-    start = time.time()
-    print("starting tts", start)
-    for i, chunk in enumerate(tts_model.stream_tts_sync(response_text)):
-        print("chunk", i, time.time() - start)
-        yield chunk
-    print("finished tts", time.time() - start)
-    yield AdditionalOutputs(chatbot)
 chatbot = gr.Chatbot(type="messages")

 import json
 import os
+import time
 from pathlib import Path
 import anthropic
     AdditionalOutputs,
     ReplyOnPause,
     Stream,
+    WebRTCError,
     get_tts_model,
     get_twilio_turn_credentials,
 )
     audio: tuple[int, np.ndarray],
     chatbot: list[dict] | None = None,
 ):
+    try:
+        chatbot = chatbot or []
+        messages = [{"role": d["role"], "content": d["content"]} for d in chatbot]
+        prompt = groq_client.audio.transcriptions.create(
+            file=("audio-file.mp3", audio_to_bytes(audio)),
+            model="whisper-large-v3-turbo",
+            response_format="verbose_json",
+        ).text
+        print("prompt", prompt)
+        chatbot.append({"role": "user", "content": prompt})
+        yield AdditionalOutputs(chatbot)
+        messages.append({"role": "user", "content": prompt})
+        response = claude_client.messages.create(
+            model="claude-3-5-haiku-20241022",
+            max_tokens=512,
+            messages=messages,  # type: ignore
+        )
+        response_text = " ".join(
+            block.text  # type: ignore
+            for block in response.content
+            if getattr(block, "type", None) == "text"
+        )
+        chatbot.append({"role": "assistant", "content": response_text})
+        start = time.time()
+        print("starting tts", start)
+        for i, chunk in enumerate(tts_model.stream_tts_sync(response_text)):
+            print("chunk", i, time.time() - start)
+            yield chunk
+            print("finished tts", time.time() - start)
+            yield AdditionalOutputs(chatbot)
+    except Exception as e:
+        raise WebRTCError(str(e))
 chatbot = gr.Chatbot(type="messages")

index.html CHANGED Viewed

@@ -210,10 +210,28 @@
                 transform: scale(1.2);
             }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="chat-container">
             <div class="chat-messages" id="chat-messages"></div>
@@ -270,6 +288,17 @@
             }
         }
         async function setupWebRTC() {
             const config = __RTC_CONFIGURATION__;
             peerConnection = new RTCPeerConnection(config);
@@ -329,7 +358,32 @@
                 // Create data channel for messages
                 const dataChannel = peerConnection.createDataChannel('text');
-                dataChannel.onmessage = handleMessage;
                 // Create and send offer
                 const offer = await peerConnection.createOffer();
@@ -362,6 +416,15 @@
                 });
                 const serverResponse = await response.json();
                 await peerConnection.setRemoteDescription(serverResponse);
                 // Start visualization
@@ -375,31 +438,8 @@
                 });
             } catch (err) {
                 console.error('Error setting up WebRTC:', err);
-            }
-        }
-        function handleMessage(event) {
-            const eventJson = JSON.parse(event.data);
-            const typingIndicator = document.getElementById('typing-indicator');
-            if (eventJson.type === "send_input") {
-                fetch('/input_hook', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        webrtc_id: webrtc_id,
-                        chatbot: chatHistory
-                    })
-                });
-            } else if (eventJson.type === "log") {
-                if (eventJson.data === "pause_detected") {
-                    typingIndicator.style.display = 'block';
-                    chatMessages.scrollTop = chatMessages.scrollHeight;
-                } else if (eventJson.data === "response_starting") {
-                    typingIndicator.style.display = 'none';
-                }
             }
         }

                 transform: scale(1.2);
             }
         }
+        /* Add styles for toast notifications */
+        .toast {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #f44336;
+            color: white;
+            padding: 16px 24px;
+            border-radius: 4px;
+            font-size: 14px;
+            z-index: 1000;
+            display: none;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        }
     </style>
 </head>
 <body>
+    <!-- Add toast element after body opening tag -->
+    <div id="error-toast" class="toast"></div>
     <div class="container">
         <div class="chat-container">
             <div class="chat-messages" id="chat-messages"></div>
             }
         }
+        function showError(message) {
+            const toast = document.getElementById('error-toast');
+            toast.textContent = message;
+            toast.style.display = 'block';
+            // Hide toast after 5 seconds
+            setTimeout(() => {
+                toast.style.display = 'none';
+            }, 5000);
+        }
         async function setupWebRTC() {
             const config = __RTC_CONFIGURATION__;
             peerConnection = new RTCPeerConnection(config);
                 // Create data channel for messages
                 const dataChannel = peerConnection.createDataChannel('text');
+                dataChannel.onmessage = (event) => {
+                    const eventJson = JSON.parse(event.data);
+                    const typingIndicator = document.getElementById('typing-indicator');
+                    if (eventJson.type === "error") {
+                        showError(eventJson.message);
+                    } else if (eventJson.type === "send_input") {
+                        fetch('/input_hook', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify({
+                                webrtc_id: webrtc_id,
+                                chatbot: chatHistory
+                            })
+                        });
+                    } else if (eventJson.type === "log") {
+                        if (eventJson.data === "pause_detected") {
+                            typingIndicator.style.display = 'block';
+                            chatMessages.scrollTop = chatMessages.scrollHeight;
+                        } else if (eventJson.data === "response_starting") {
+                            typingIndicator.style.display = 'none';
+                        }
+                    }
+                };
                 // Create and send offer
                 const offer = await peerConnection.createOffer();
                 });
                 const serverResponse = await response.json();
+                if (serverResponse.status === 'failed') {
+                    showError(serverResponse.meta.error === 'concurrency_limit_reached'
+                        ? `Too many connections. Maximum limit is ${serverResponse.meta.limit}`
+                        : serverResponse.meta.error);
+                    stop();
+                    return;
+                }
                 await peerConnection.setRemoteDescription(serverResponse);
                 // Start visualization
                 });
             } catch (err) {
                 console.error('Error setting up WebRTC:', err);
+                showError('Failed to establish connection. Please try again.');
+                stop();
             }
         }