Hugging Face's logo

Spaces:
fastrtc
/
talk-to-openai
Running on CPU Upgrade

App Files Community
freddyaboulton HF staff commited on
Commit
740c635
·
verified ·
1 Parent(s): 603a837

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +46 -0
index.html CHANGED
@@ -131,10 +131,28 @@
131
  transform: translateX(-0%) scale(var(--audio-level, 1));
132
  transition: transform 0.1s ease;
133
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
134
  </style>
135
  </head>
136
 
137
  <body>
 
 
138
  <div class="container">
139
  <div class="logo">
140
  <h1>OpenAI Real-Time Chat</h1>
@@ -204,6 +222,17 @@
204
  updateAudioLevel();
205
  }
206
 
 
 
 
 
 
 
 
 
 
 
 
207
  async function setupWebRTC() {
208
  isConnecting = true;
209
  const config = __RTC_CONFIGURATION__;
@@ -229,6 +258,12 @@
229
  });
230
 
231
  const dataChannel = peerConnection.createDataChannel('text');
 
 
 
 
 
 
232
 
233
  const offer = await peerConnection.createOffer();
234
  await peerConnection.setLocalDescription(offer);
@@ -265,6 +300,15 @@
265
  });
266
 
267
  const serverResponse = await response.json();
 
 
 
 
 
 
 
 
 
268
  await peerConnection.setRemoteDescription(serverResponse);
269
 
270
  const eventSource = new EventSource('/outputs?webrtc_id=' + webrtc_id);
@@ -275,6 +319,8 @@
275
  });
276
  } catch (err) {
277
  console.error('Error setting up WebRTC:', err);
 
 
278
  }
279
  }
280
 
 
131
  transform: translateX(-0%) scale(var(--audio-level, 1));
132
  transition: transform 0.1s ease;
133
  }
134
+
135
+ /* Add styles for toast notifications */
136
+ .toast {
137
+ position: fixed;
138
+ top: 20px;
139
+ left: 50%;
140
+ transform: translateX(-50%);
141
+ background-color: #f44336;
142
+ color: white;
143
+ padding: 16px 24px;
144
+ border-radius: 4px;
145
+ font-size: 14px;
146
+ z-index: 1000;
147
+ display: none;
148
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
149
+ }
150
  </style>
151
  </head>
152
 
153
  <body>
154
+ <!-- Add toast element after body opening tag -->
155
+ <div id="error-toast" class="toast"></div>
156
  <div class="container">
157
  <div class="logo">
158
  <h1>OpenAI Real-Time Chat</h1>
 
222
  updateAudioLevel();
223
  }
224
 
225
+ function showError(message) {
226
+ const toast = document.getElementById('error-toast');
227
+ toast.textContent = message;
228
+ toast.style.display = 'block';
229
+
230
+ // Hide toast after 5 seconds
231
+ setTimeout(() => {
232
+ toast.style.display = 'none';
233
+ }, 5000);
234
+ }
235
+
236
  async function setupWebRTC() {
237
  isConnecting = true;
238
  const config = __RTC_CONFIGURATION__;
 
258
  });
259
 
260
  const dataChannel = peerConnection.createDataChannel('text');
261
+ dataChannel.onmessage = (event) => {
262
+ const eventJson = JSON.parse(event.data);
263
+ if (eventJson.type === "error") {
264
+ showError(eventJson.message);
265
+ }
266
+ };
267
 
268
  const offer = await peerConnection.createOffer();
269
  await peerConnection.setLocalDescription(offer);
 
300
  });
301
 
302
  const serverResponse = await response.json();
303
+
304
+ if (serverResponse.status === 'failed') {
305
+ showError(serverResponse.meta.error === 'concurrency_limit_reached'
306
+ ? `Too many connections. Maximum limit is ${serverResponse.meta.limit}`
307
+ : serverResponse.meta.error);
308
+ stop();
309
+ return;
310
+ }
311
+
312
  await peerConnection.setRemoteDescription(serverResponse);
313
 
314
  const eventSource = new EventSource('/outputs?webrtc_id=' + webrtc_id);
 
319
  });
320
  } catch (err) {
321
  console.error('Error setting up WebRTC:', err);
322
+ showError('Failed to establish connection. Please try again.');
323
+ stop();
324
  }
325
  }
326