Hugging Face's logo

Spaces:
yasserrmd
/
ggwave
Runtime error

App Files Community
ggwave / static /index.html
yasserrmd's picture
yasserrmd
Update static/index.html
5944eb7 verified
raw
history blame contribute delete
15.2 kB
 <!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data-over-Sound Interface</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<style>
body {
background-color: #f8f9fa;
padding-top: 30px;
}
.chat-container {
max-width: 700px;
margin: 0 auto;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
}
.btn-record {
background-color: #ff4b4b;
border-color: #ff4b4b;
}
.btn-record:hover {
background-color: #e43c3c;
border-color: #e43c3c;
}
.btn-record.recording {
animation: pulse 1.5s infinite;
}
.btn-generate {
background-color: #4c6ef5;
border-color: #4c6ef5;
}
.btn-generate:hover {
background-color: #3b5bdb;
border-color: #3b5bdb;
}
.icon-spacing {
margin-right: 8px;
}
.control-label {
font-size: 0.9rem;
color: #6c757d;
margin-bottom: 8px;
}
.audio-container {
background-color: #f1f3f5;
border-radius: 8px;
padding: 15px;
margin-top: 20px;
}
audio {
width: 100%;
}
.status-indicator {
font-size: 0.9rem;
margin-top: 10px;
height: 24px;
}
.response-container {
background-color: #f8f9fa;
border-radius: 8px;
padding: 15px;
margin-top: 20px;
border: 1px solid #dee2e6;
}
.header-info {
font-family: monospace;
padding: 10px;
background-color: #e9ecef;
border-radius: 6px;
margin-bottom: 15px;
font-size: 0.9rem;
}
.text-input {
margin-top: 15px;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="container">
<div class="chat-container">
<h1 class="text-center mb-4">
<i class="bi bi-soundwave text-primary"></i> Data-over-Sound
</h1>
<div class="text-input mb-4">
<label for="messageInput" class="form-label">Message to Encode:</label>
<textarea id="messageInput" class="form-control" rows="3" placeholder="Enter text to encode as sound..."></textarea>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="d-grid">
<p class="control-label text-center">Listen for Data</p>
<button id="recordButton" class="btn btn-lg text-white btn-record"><i class="bi bi-mic-fill icon-spacing"></i> Start Listening</button>
</div>
</div>
<div class="col-md-6">
<div class="d-grid">
<p class="control-label text-center">Transmit Data</p>
<button id="generateButton" class="btn btn-generate btn-lg text-white">
<i class="bi bi-broadcast icon-spacing"></i> Transmit
</button>
</div>
</div>
</div>
<div class="audio-container">
<p class="control-label mb-2">Audio Control</p>
<audio id="audioPlayer" controls=""></audio>
<div id="statusMessage" class="status-indicator text-center text-secondary">Error processing audio data. Please try again.</div>
</div>
<div class="response-container">
<h5><i class="bi bi-arrow-repeat icon-spacing"></i>Communication Headers</h5>
<div class="header-info">
<div id="userMessageHeader">X-User-Message: <span class="text-primary">Waiting for data...</span></div>
<div id="llmResponseHeader">X-LLM-Response: <span class="text-success">Waiting for response...</span></div>
</div>
<h5><i class="bi bi-reception-4 icon-spacing"></i>Data Received</h5>
<div id="receivedData" class="p-3 border rounded bg-white">
No data received yet.
</div>
</div>
</div>
</div>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
let mediaRecorder;
let audioChunks = [];
let audioStream;
const recordButton = document.getElementById("recordButton");
const generateButton = document.getElementById("generateButton");
const statusMessage = document.getElementById("statusMessage");
const messageInput = document.getElementById("messageInput");
const userMessageHeader = document.getElementById("userMessageHeader");
const llmResponseHeader = document.getElementById("llmResponseHeader");
const receivedData = document.getElementById("receivedData");
let recordingTimeout;
recordButton.addEventListener("click", async () => {
if (!mediaRecorder || mediaRecorder.state === "inactive") {
try {
// Stop any existing stream tracks before requesting a new one
if (audioStream) {
audioStream.getTracks().forEach(track => track.stop());
}
audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(audioStream, { mimeType: "audio/webm" });
mediaRecorder.ondataavailable = event => audioChunks.push(event.data);
mediaRecorder.onstop = async () => {
statusMessage.textContent = "Processing audio data...";
recordButton.innerHTML = '<i class="bi bi-mic-fill icon-spacing"></i> Start Listening';
recordButton.classList.remove("recording");
recordButton.classList.remove("btn-danger");
recordButton.classList.add("btn-record");
try {
const audioBlob = new Blob(audioChunks, { type: "audio/webm" });
const wavBlob = await convertWebMToWav(audioBlob);
// This is the original code from your first implementation
const formData = new FormData();
formData.append("file", wavBlob, "recording.wav");
const response = await fetch("/chat/", {
method: "POST",
body: formData
});
if (response.ok) {
// Display response headers that we know are sent back from the endpoint
const userMessage = response.headers.get("X-User-Message") || "No user message";
const llmResponse = response.headers.get("X-LLM-Response") || "No response";
// Update the header display
userMessageHeader.innerHTML = `X-User-Message: <span class="text-primary">${userMessage}</span>`;
llmResponseHeader.innerHTML = `X-LLM-Response: <span class="text-success">${llmResponse}</span>`;
// Update received data
receivedData.textContent = userMessage;
// Get audio blob from response and play it
const audioData = await response.blob();
document.getElementById("audioPlayer").src = URL.createObjectURL(audioData);
statusMessage.textContent = "Data decoded successfully!";
} else {
statusMessage.textContent = "Error processing audio data. Please try again.";
}
} catch (error) {
console.error("Error:", error);
statusMessage.textContent = "Error processing audio data. Please try again.";
}
// Clean up the audio tracks after processing is complete
if (audioStream) {
audioStream.getTracks().forEach(track => track.stop());
}
};
audioChunks = [];
mediaRecorder.start();
recordButton.innerHTML = '<i class="bi bi-stop-fill icon-spacing"></i> Listening...';
recordButton.classList.add("recording");
recordButton.classList.remove("btn-record");
recordButton.classList.add("btn-danger");
statusMessage.textContent = "Listening for data transmission...";
// Auto-stop after 5 seconds
recordingTimeout = setTimeout(() => {
if (mediaRecorder && mediaRecorder.state === "recording") {
mediaRecorder.stop();
}
}, 5000);
} catch (error) {
console.error("Error accessing microphone:", error);
statusMessage.textContent = "Could not access microphone. Please check permissions.";
}
} else if (mediaRecorder.state === "recording") {
// Stop recording if already recording
clearTimeout(recordingTimeout);
mediaRecorder.stop();
}
});
generateButton.addEventListener("click", async () => {
const text = messageInput.value.trim();
if (text) {
statusMessage.textContent = "Encoding data to sound...";
try {
const response = await fetch("/tts/", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ text })
});
if (response.ok) {
const audioData = await response.blob();
document.getElementById("audioPlayer").src = URL.createObjectURL(audioData);
statusMessage.textContent = "Data encoded as sound. Ready to transmit!";
// Auto-play option
document.getElementById("audioPlayer").play();
} else {
statusMessage.textContent = "Error encoding data. Please try again.";
}
} catch (error) {
console.error("Error:", error);
statusMessage.textContent = "Error encoding data. Please try again.";
}
} else {
statusMessage.textContent = "Please enter a message to transmit.";
}
});
async function convertWebMToWav(blob) {
return new Promise((resolve, reject) => {
try {
const reader = new FileReader();
reader.onload = function () {
const audioContext = new AudioContext();
audioContext.decodeAudioData(reader.result)
.then(buffer => {
const wavBuffer = audioBufferToWav(buffer);
resolve(new Blob([wavBuffer], { type: "audio/wav" }));
})
.catch(error => {
console.error("Error decoding audio data:", error);
reject(error);
});
};
reader.readAsArrayBuffer(blob);
} catch (error) {
console.error("Error in convertWebMToWav:", error);
reject(error);
}
});
}
function audioBufferToWav(buffer) {
let numOfChan = buffer.numberOfChannels,
length = buffer.length * numOfChan * 2 + 44,
bufferArray = new ArrayBuffer(length),
view = new DataView(bufferArray),
channels = [],
sampleRate = buffer.sampleRate,
offset = 0,
pos = 0;
setUint32(0x46464952); // "RIFF"
setUint32(length - 8);
setUint32(0x45564157); // "WAVE"
setUint32(0x20746d66); // "fmt " chunk
setUint32(16); // length = 16
setUint16(1); // PCM (uncompressed)
setUint16(numOfChan);
setUint32(sampleRate);
setUint32(sampleRate * 2 * numOfChan);
setUint16(numOfChan * 2);
setUint16(16); // bits per sample
setUint32(0x61746164); // "data" chunk
setUint32(length - pos - 4);
for (let i = 0; i < buffer.numberOfChannels; i++)
channels.push(buffer.getChannelData(i));
while (pos < length) {
for (let i = 0; i < numOfChan; i++) {
let sample = Math.max(-1, Math.min(1, channels[i][offset]));
sample = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
setUint16(sample);
}
offset++;
}
function setUint16(data) {
view.setUint16(pos, data, true);
pos += 2;
}
function setUint32(data) {
view.setUint32(pos, data, true);
pos += 4;
}
return bufferArray;
}
</script>
</body></html>