Spaces:

victor
/

omni-docker

Sleeping

App Files Files Community

victor HF Staff commited on Sep 10, 2024

Commit

e1c3a1a

1 Parent(s): bd6c0c0

feat: implement pure web demo with audio recording and chat functionality

Browse files

Files changed (1) hide show

webui/index.html +125 -24

webui/index.html CHANGED Viewed

@@ -3,13 +3,36 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Web Page</title>
 </head>
-<body style="background-color: black; color: white;">
     <div id="svg-container"></div>
-    <button id="play-button">play</button>
     <main>
-        <p>Current status: listening</p>
     </main>
 </body>
 <script>
@@ -31,17 +54,17 @@ const audioContext = new (window.AudioContext || window.webkitAudioContext)();
 const analyser = audioContext.createAnalyser();
 analyser.fftSize = 256;
-// Load audio file
-const audio = new Audio('/heath_ledger.mp3');
-const source = audioContext.createMediaElementSource(audio);
-source.connect(analyser);
-analyser.connect(audioContext.destination);
 // Animation variables
 let isAudioPlaying = false;
 let lastBlinkTime = 0;
 let eyeMovementOffset = { x: 0, y: 0 };
 // Idle eye animation function
 function animateIdleEyes(timestamp) {
   const leftEye = document.getElementById('left-eye');
@@ -135,23 +158,101 @@ function animate(timestamp) {
 // Start animation
 animate();
-// Handle audio play/pause
-audio.addEventListener('play', () => {
-  isAudioPlaying = true;
-  audioContext.resume();
-});
-audio.addEventListener('pause', () => {
-  isAudioPlaying = false;
-});
-audio.addEventListener('ended', () => {
-  isAudioPlaying = false;
-});
-// Play audio (you might want to trigger this with a user interaction)
-document.getElementById('play-button').addEventListener('click', () => {
   audio.play();
-});
 </script>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mini-Omni Chat Demo</title>
+    <style>
+        body {
+            background-color: black;
+            color: white;
+            font-family: Arial, sans-serif;
+        }
+        #chat-container {
+            height: 300px;
+            overflow-y: auto;
+            border: 1px solid #444;
+            padding: 10px;
+            margin-bottom: 10px;
+        }
+        #status-message {
+            margin-bottom: 10px;
+        }
+        button {
+            margin-right: 10px;
+        }
+    </style>
 </head>
+<body>
     <div id="svg-container"></div>
+    <div id="chat-container"></div>
+    <div id="status-message">Current status: idle</div>
+    <button id="start-button">Start</button>
+    <button id="stop-button" disabled>Stop</button>
     <main>
+        <p id="current-status">Current status: idle</p>
     </main>
 </body>
 <script>
 const analyser = audioContext.createAnalyser();
 analyser.fftSize = 256;
 // Animation variables
 let isAudioPlaying = false;
 let lastBlinkTime = 0;
 let eyeMovementOffset = { x: 0, y: 0 };
+// Chat variables
+let mediaRecorder;
+let audioChunks = [];
+let isRecording = false;
+const API_URL = 'http://127.0.0.1:60808/chat';
 // Idle eye animation function
 function animateIdleEyes(timestamp) {
   const leftEye = document.getElementById('left-eye');
 // Start animation
 animate();
+// Chat functions
+function startRecording() {
+  navigator.mediaDevices.getUserMedia({ audio: true })
+    .then(stream => {
+      mediaRecorder = new MediaRecorder(stream);
+      mediaRecorder.ondataavailable = event => {
+        audioChunks.push(event.data);
+      };
+      mediaRecorder.onstop = sendAudioToServer;
+      mediaRecorder.start();
+      isRecording = true;
+      updateStatus('Recording...');
+      document.getElementById('start-button').disabled = true;
+      document.getElementById('stop-button').disabled = false;
+    })
+    .catch(error => {
+      console.error('Error accessing microphone:', error);
+      updateStatus('Error: ' + error.message);
+    });
+}
+function stopRecording() {
+  if (mediaRecorder && isRecording) {
+    mediaRecorder.stop();
+    isRecording = false;
+    updateStatus('Processing...');
+    document.getElementById('start-button').disabled = false;
+    document.getElementById('stop-button').disabled = true;
+  }
+}
+function sendAudioToServer() {
+  const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+  const reader = new FileReader();
+  reader.readAsDataURL(audioBlob);
+  reader.onloadend = function() {
+    const base64Audio = reader.result.split(',')[1];
+    fetch(API_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ audio: base64Audio }),
+    })
+    .then(response => response.blob())
+    .then(blob => {
+      const audioUrl = URL.createObjectURL(blob);
+      playResponseAudio(audioUrl);
+      updateChatHistory('User', 'Audio message sent');
+      updateChatHistory('Assistant', 'Audio response received');
+    })
+    .catch(error => {
+      console.error('Error:', error);
+      updateStatus('Error: ' + error.message);
+    });
+  };
+  audioChunks = [];
+}
+function playResponseAudio(audioUrl) {
+  const audio = new Audio(audioUrl);
+  audio.onloadedmetadata = () => {
+    const source = audioContext.createMediaElementSource(audio);
+    source.connect(analyser);
+    analyser.connect(audioContext.destination);
+  };
+  audio.onplay = () => {
+    isAudioPlaying = true;
+    updateStatus('Playing response...');
+  };
+  audio.onended = () => {
+    isAudioPlaying = false;
+    updateStatus('Idle');
+  };
   audio.play();
+}
+function updateChatHistory(role, message) {
+  const chatContainer = document.getElementById('chat-container');
+  const messageElement = document.createElement('p');
+  messageElement.textContent = `${role}: ${message}`;
+  chatContainer.appendChild(messageElement);
+  chatContainer.scrollTop = chatContainer.scrollHeight;
+}
+function updateStatus(status) {
+  document.getElementById('status-message').textContent = status;
+  document.getElementById('current-status').textContent = 'Current status: ' + status;
+}
+// Event listeners
+document.getElementById('start-button').addEventListener('click', startRecording);
+document.getElementById('stop-button').addEventListener('click', stopRecording);
+// Initialize
+updateStatus('Idle');
 </script>
 </html>