Update static/script.js

static/script.js

@@ -1,24 +1,67 @@
-document.getElementById('submit-audio').addEventListener('click', async () => {
-    const audioInput = document.getElementById('audio-input');
-    if (audioInput.files.length === 0) {
-        alert('Please select an audio file.');
-        return;
-    }
+document.addEventListener("DOMContentLoaded", function() {
+    const recordBtn = document.getElementById("record-btn");
+    const audioPlayer = document.getElementById("audio-player");
+    const chatContainer = document.getElementById("chat-container");
+
+    recordBtn.addEventListener("click", function() {
+        // Implement audio recording logic here
+        // You can use the MediaRecorder API or a library like RecordRTC
 
-    const formData = new FormData();
-    formData.append('audio', audioInput.files[0]);
+        // Once the audio is recorded, send it to the server for transcription
+        const formData = new FormData();
+        formData.append("audio", audioBlob);
 
-    try {
-        const response = await fetch('/process_audio', {
-            method: 'POST',
+        fetch("/transcribe", {
+            method: "POST",
             body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+            const transcribedText = data.text;
+            displayUserMessage(transcribedText);
+
+            // Send the transcribed text to the server for generating a response
+            const responseFormData = new FormData();
+            responseFormData.append("text", transcribedText);
+
+            fetch("/generate_response", {
+                method: "POST",
+                body: responseFormData
+            })
+            .then(response => response.json())
+            .then(data => {
+                const responseText = data.response;
+                displayAssistantMessage(responseText);
+
+                // Send the response text to the server for audio inference
+                const inferenceFormData = new FormData();
+                inferenceFormData.append("text", responseText);
+
+                fetch("/inference", {
+                    method: "POST",
+                    body: inferenceFormData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    const audioUrl = data.audio_url;
+                    audioPlayer.src = audioUrl;
+                    audioPlayer.style.display = "block";
+                });
+            });
         });
-        const data = await response.json();
-        document.querySelector('.response-text').textContent = data.response_text;
-        const audioElement = document.querySelector('.response-audio');
-        audioElement.src = data.response_audio_url;
-        audioElement.style.display = 'block';
-    } catch (error) {
-        console.error('Error:', error);
+    });
+
+    function displayUserMessage(text) {
+        const messageElement = document.createElement("div");
+        messageElement.classList.add("user-message");
+        messageElement.textContent = text;
+        chatContainer.appendChild(messageElement);
+    }
+
+    function displayAssistantMessage(text) {
+        const messageElement = document.createElement("div");
+        messageElement.classList.add("assistant-message");
+        messageElement.textContent = text;
+        chatContainer.appendChild(messageElement);
     }
-});
+});