Hugging Face's logo

Spaces:
yasserrmd
/
ggwave
Sleeping

App Files Community
yasserrmd commited on
Commit
4d40c8a
·
verified ·
1 Parent(s): f34a837

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +77 -18
static/index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Voice Chat Interface</title>
7
  <!-- Bootstrap CSS -->
8
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
  <!-- Bootstrap Icons -->
@@ -14,7 +14,7 @@
14
  padding-top: 30px;
15
  }
16
  .chat-container {
17
- max-width: 600px;
18
  margin: 0 auto;
19
  background-color: white;
20
  border-radius: 12px;
@@ -62,6 +62,24 @@
62
  margin-top: 10px;
63
  height: 24px;
64
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  @keyframes pulse {
66
  0% { transform: scale(1); }
67
  50% { transform: scale(1.05); }
@@ -73,13 +91,18 @@
73
  <div class="container">
74
  <div class="chat-container">
75
  <h1 class="text-center mb-4">
76
- <i class="bi bi-mic-fill text-primary"></i> Voice Chat
77
  </h1>
78
 
 
 
 
 
 
79
  <div class="row g-4">
80
  <div class="col-md-6">
81
  <div class="d-grid">
82
- <p class="control-label text-center">Voice Recognition</p>
83
  <button id="recordButton" class="btn btn-record btn-lg text-white">
84
  <i class="bi bi-mic-fill icon-spacing"></i> Start Listening
85
  </button>
@@ -87,19 +110,32 @@
87
  </div>
88
  <div class="col-md-6">
89
  <div class="d-grid">
90
- <p class="control-label text-center">Text to Speech</p>
91
  <button id="generateButton" class="btn btn-generate btn-lg text-white">
92
- <i class="bi bi-soundwave icon-spacing"></i> Generate Speech
93
  </button>
94
  </div>
95
  </div>
96
  </div>
97
 
98
  <div class="audio-container">
99
- <p class="control-label mb-2">Audio Playback</p>
100
  <audio id="audioPlayer" controls></audio>
101
  <div id="statusMessage" class="status-indicator text-center text-secondary"></div>
102
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  </div>
104
  </div>
105
 
@@ -111,6 +147,10 @@
111
  const recordButton = document.getElementById("recordButton");
112
  const generateButton = document.getElementById("generateButton");
113
  const statusMessage = document.getElementById("statusMessage");
 
 
 
 
114
  let recordingTimeout;
115
 
116
  recordButton.addEventListener("click", async () => {
@@ -122,7 +162,7 @@
122
  mediaRecorder.ondataavailable = event => audioChunks.push(event.data);
123
 
124
  mediaRecorder.onstop = async () => {
125
- statusMessage.textContent = "Processing audio...";
126
  recordButton.innerHTML = '<i class="bi bi-mic-fill icon-spacing"></i> Start Listening';
127
  recordButton.classList.remove("recording");
128
  recordButton.classList.remove("btn-danger");
@@ -140,15 +180,27 @@
140
  });
141
 
142
  if (response.ok) {
 
 
 
 
 
 
 
 
 
 
 
 
143
  const audioData = await response.blob();
144
  document.getElementById("audioPlayer").src = URL.createObjectURL(audioData);
145
- statusMessage.textContent = "Response ready!";
146
  } else {
147
- statusMessage.textContent = "Error processing audio. Please try again.";
148
  }
149
  } catch (error) {
150
  console.error("Error:", error);
151
- statusMessage.textContent = "Error processing audio. Please try again.";
152
  }
153
  };
154
 
@@ -159,7 +211,7 @@
159
  recordButton.classList.add("recording");
160
  recordButton.classList.remove("btn-record");
161
  recordButton.classList.add("btn-danger");
162
- statusMessage.textContent = "Listening (5 seconds)...";
163
 
164
  // Auto-stop after 5 seconds
165
  recordingTimeout = setTimeout(() => {
@@ -179,27 +231,34 @@
179
  });
180
 
181
  generateButton.addEventListener("click", async () => {
182
- const text = prompt("Enter text to convert to speech:");
183
  if (text) {
184
- statusMessage.textContent = "Generating speech...";
185
  try {
186
  const response = await fetch("/tts/", {
187
  method: "POST",
188
- headers: { "Content-Type": "application/json" },
 
 
 
189
  body: JSON.stringify({ text })
190
  });
191
 
192
  if (response.ok) {
193
  const audioData = await response.blob();
194
  document.getElementById("audioPlayer").src = URL.createObjectURL(audioData);
195
- statusMessage.textContent = "Speech generated successfully!";
 
 
196
  } else {
197
- statusMessage.textContent = "Error generating speech. Please try again.";
198
  }
199
  } catch (error) {
200
  console.error("Error:", error);
201
- statusMessage.textContent = "Error generating speech. Please try again.";
202
  }
 
 
203
  }
204
  });
205
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Data-over-Sound Interface</title>
7
  <!-- Bootstrap CSS -->
8
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
  <!-- Bootstrap Icons -->
 
14
  padding-top: 30px;
15
  }
16
  .chat-container {
17
+ max-width: 700px;
18
  margin: 0 auto;
19
  background-color: white;
20
  border-radius: 12px;
 
62
  margin-top: 10px;
63
  height: 24px;
64
  }
65
+ .response-container {
66
+ background-color: #f8f9fa;
67
+ border-radius: 8px;
68
+ padding: 15px;
69
+ margin-top: 20px;
70
+ border: 1px solid #dee2e6;
71
+ }
72
+ .header-info {
73
+ font-family: monospace;
74
+ padding: 10px;
75
+ background-color: #e9ecef;
76
+ border-radius: 6px;
77
+ margin-bottom: 15px;
78
+ font-size: 0.9rem;
79
+ }
80
+ .text-input {
81
+ margin-top: 15px;
82
+ }
83
  @keyframes pulse {
84
  0% { transform: scale(1); }
85
  50% { transform: scale(1.05); }
 
91
  <div class="container">
92
  <div class="chat-container">
93
  <h1 class="text-center mb-4">
94
+ <i class="bi bi-soundwave text-primary"></i> Data-over-Sound
95
  </h1>
96
 
97
+ <div class="text-input mb-4">
98
+ <label for="messageInput" class="form-label">Message to Encode:</label>
99
+ <textarea id="messageInput" class="form-control" rows="3" placeholder="Enter text to encode as sound..."></textarea>
100
+ </div>
101
+
102
  <div class="row g-4">
103
  <div class="col-md-6">
104
  <div class="d-grid">
105
+ <p class="control-label text-center">Listen for Data</p>
106
  <button id="recordButton" class="btn btn-record btn-lg text-white">
107
  <i class="bi bi-mic-fill icon-spacing"></i> Start Listening
108
  </button>
 
110
  </div>
111
  <div class="col-md-6">
112
  <div class="d-grid">
113
+ <p class="control-label text-center">Transmit Data</p>
114
  <button id="generateButton" class="btn btn-generate btn-lg text-white">
115
+ <i class="bi bi-broadcast icon-spacing"></i> Transmit
116
  </button>
117
  </div>
118
  </div>
119
  </div>
120
 
121
  <div class="audio-container">
122
+ <p class="control-label mb-2">Audio Control</p>
123
  <audio id="audioPlayer" controls></audio>
124
  <div id="statusMessage" class="status-indicator text-center text-secondary"></div>
125
  </div>
126
+
127
+ <div class="response-container">
128
+ <h5><i class="bi bi-arrow-repeat icon-spacing"></i>Communication Headers</h5>
129
+ <div class="header-info">
130
+ <div id="userMessageHeader">X-User-Message: <span class="text-primary">Waiting for data...</span></div>
131
+ <div id="llmResponseHeader">X-LLM-Response: <span class="text-success">Waiting for response...</span></div>
132
+ </div>
133
+
134
+ <h5><i class="bi bi-reception-4 icon-spacing"></i>Data Received</h5>
135
+ <div id="receivedData" class="p-3 border rounded bg-white">
136
+ No data received yet.
137
+ </div>
138
+ </div>
139
  </div>
140
  </div>
141
 
 
147
  const recordButton = document.getElementById("recordButton");
148
  const generateButton = document.getElementById("generateButton");
149
  const statusMessage = document.getElementById("statusMessage");
150
+ const messageInput = document.getElementById("messageInput");
151
+ const userMessageHeader = document.getElementById("userMessageHeader");
152
+ const llmResponseHeader = document.getElementById("llmResponseHeader");
153
+ const receivedData = document.getElementById("receivedData");
154
  let recordingTimeout;
155
 
156
  recordButton.addEventListener("click", async () => {
 
162
  mediaRecorder.ondataavailable = event => audioChunks.push(event.data);
163
 
164
  mediaRecorder.onstop = async () => {
165
+ statusMessage.textContent = "Processing audio data...";
166
  recordButton.innerHTML = '<i class="bi bi-mic-fill icon-spacing"></i> Start Listening';
167
  recordButton.classList.remove("recording");
168
  recordButton.classList.remove("btn-danger");
 
180
  });
181
 
182
  if (response.ok) {
183
+ // Extract headers
184
+ const userMessage = response.headers.get("X-User-Message") || "No user message";
185
+ const llmResponse = response.headers.get("X-LLM-Response") || "No response";
186
+
187
+ // Update the UI with the header information
188
+ userMessageHeader.innerHTML = `X-User-Message: <span class="text-primary">${userMessage}</span>`;
189
+ llmResponseHeader.innerHTML = `X-LLM-Response: <span class="text-success">${llmResponse}</span>`;
190
+
191
+ // Update received data display
192
+ receivedData.textContent = userMessage;
193
+
194
+ // Get audio response if any
195
  const audioData = await response.blob();
196
  document.getElementById("audioPlayer").src = URL.createObjectURL(audioData);
197
+ statusMessage.textContent = "Data decoded successfully!";
198
  } else {
199
+ statusMessage.textContent = "Error processing audio data. Please try again.";
200
  }
201
  } catch (error) {
202
  console.error("Error:", error);
203
+ statusMessage.textContent = "Error processing audio data. Please try again.";
204
  }
205
  };
206
 
 
211
  recordButton.classList.add("recording");
212
  recordButton.classList.remove("btn-record");
213
  recordButton.classList.add("btn-danger");
214
+ statusMessage.textContent = "Listening for data transmission...";
215
 
216
  // Auto-stop after 5 seconds
217
  recordingTimeout = setTimeout(() => {
 
231
  });
232
 
233
  generateButton.addEventListener("click", async () => {
234
+ const text = messageInput.value.trim();
235
  if (text) {
236
+ statusMessage.textContent = "Encoding data to sound...";
237
  try {
238
  const response = await fetch("/tts/", {
239
  method: "POST",
240
+ headers: {
241
+ "Content-Type": "application/json",
242
+ "X-User-Message": text
243
+ },
244
  body: JSON.stringify({ text })
245
  });
246
 
247
  if (response.ok) {
248
  const audioData = await response.blob();
249
  document.getElementById("audioPlayer").src = URL.createObjectURL(audioData);
250
+ statusMessage.textContent = "Data encoded as sound. Ready to transmit!";
251
+ // Auto-play option
252
+ document.getElementById("audioPlayer").play();
253
  } else {
254
+ statusMessage.textContent = "Error encoding data. Please try again.";
255
  }
256
  } catch (error) {
257
  console.error("Error:", error);
258
+ statusMessage.textContent = "Error encoding data. Please try again.";
259
  }
260
+ } else {
261
+ statusMessage.textContent = "Please enter a message to transmit.";
262
  }
263
  });
264