Spaces:

fastrtc
/

hello-computer-gradio

Running on CPU Upgrade

App Files Files Community

freddyaboulton HF Staff commited on Feb 20, 2025

Commit

ec9410c

verified ·

1 Parent(s): 86fc8e0

Upload folder using huggingface_hub

Browse files

Files changed (2) hide show

app.py +11 -12
index.html +43 -1

app.py CHANGED Viewed

@@ -38,30 +38,29 @@ def response(
 ):
     gradio_chatbot = gradio_chatbot or []
     conversation_state = conversation_state or []
-    text = stt(audio)
-    sample_rate, array = audio
-    gradio_chatbot.append(
-        {"role": "user", "content": gr.Audio((sample_rate, array.squeeze()))}
-    )
-    yield AdditionalOutputs(gradio_chatbot, conversation_state)
-    conversation_state.append({"role": "user", "content": text})
-    try:
         request = client.chat.completions.create(
             model="Meta-Llama-3.2-3B-Instruct",
-            messages=conversation_state,
             temperature=0.1,
             top_p=0.1,
         )
         response = {"role": "assistant", "content": request.choices[0].message.content}
-    except Exception:
         import traceback
         traceback.print_exc()
-        raise WebRTCError(traceback.format_exc())
     conversation_state.append(response)
     gradio_chatbot.append(response)

 ):
     gradio_chatbot = gradio_chatbot or []
     conversation_state = conversation_state or []
+    try:
+        text = stt(audio)
+        sample_rate, array = audio
+        gradio_chatbot.append(
+            {"role": "user", "content": gr.Audio((sample_rate, array.squeeze()))}
+        )
+        yield AdditionalOutputs(gradio_chatbot, conversation_state)
+        conversation_state.append({"role": "user", "content": text})
         request = client.chat.completions.create(
             model="Meta-Llama-3.2-3B-Instruct",
+            messages=conversation_state,  # type: ignore
             temperature=0.1,
             top_p=0.1,
         )
         response = {"role": "assistant", "content": request.choices[0].message.content}
+    except Exception as e:
         import traceback
         traceback.print_exc()
+        raise WebRTCError(str(e) + "\n" + traceback.format_exc())
     conversation_state.append(response)
     gradio_chatbot.append(response)

index.html CHANGED Viewed

@@ -176,10 +176,28 @@
                 transform: scale(1.2);
             }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="logo">
             <h1>Hello Computer 💻</h1>
@@ -257,11 +275,24 @@
             updateAudioLevel();
         }
         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: {
@@ -336,6 +367,15 @@
                 });
                 const serverResponse = await response.json();
                 await peerConnection.setRemoteDescription(serverResponse);
                 eventSource = new EventSource('/outputs?webrtc_id=' + webrtc_id);
@@ -347,6 +387,8 @@
                 });
             } catch (err) {
                 console.error('Error setting up WebRTC:', err);
             }
         }

                 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="logo">
             <h1>Hello Computer 💻</h1>
             updateAudioLevel();
         }
+        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);
+        }
         function handleMessage(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: {
                 });
                 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);
                 eventSource = new EventSource('/outputs?webrtc_id=' + webrtc_id);
                 });
             } catch (err) {
                 console.error('Error setting up WebRTC:', err);
+                showError('Failed to establish connection. Please try again.');
+                stop();
             }
         }