Update static/js/design.js

static/js/design.js

@@ -2,9 +2,12 @@ let isRecording = false;
 let mediaRecorder;
 let recordedChunks = [];
 
+// Get the elements
 const micContainer = document.getElementsByClassName('mic-container')[0];
 const circle = micContainer.getElementsByClassName('circle')[0];
+const outputContainer = document.getElementById('output');
 
+// Handle the click event for the microphone container
 micContainer.addEventListener('click', function () {
     if (!isRecording) {
         startRecording();
@@ -25,7 +28,7 @@ function startRecording() {
 
             // Update UI for recording
             circle.classList.add('active');
-            document.getElementById('output').textContent = 'Recording...';
+            outputContainer.textContent = 'Recording...';
             isRecording = true;
         })
         .catch(function (err) {
@@ -43,29 +46,32 @@ function stopRecording() {
 
         // Update UI after recording
         circle.classList.remove('active');
-        document.getElementById('output').textContent = 'Click to Transcribe';
+        outputContainer.textContent = 'Click to Transcribe';
 
-        // Handle the Transcribe button click
-        document.getElementById('output').addEventListener('click', function () {
-            transcribeAudio(blob);
-        });
+        // Ensure only one event listener is attached
+        outputContainer.removeEventListener('click', handleTranscribeClick);
+        outputContainer.addEventListener('click', handleTranscribeClick);
 
         isRecording = false;
     };
 }
 
-function transcribeAudio(blob) {
+function handleTranscribeClick() {
+    transcribeAudio();
+}
+
+function transcribeAudio() {
+    const blob = new Blob(recordedChunks, { type: 'audio/webm' });
     const formData = new FormData();
     formData.append('audio', blob, 'audio.webm');
 
-    //fetch('https://tri4-semalab.hf.space/transcribe', { // https://jikoni-semabox.hf.space/transcribe
-    fetch('https://jikoni-semabox.hf.space/transcribe', { // https://tri4-semalab.hf.space/transcribe
+    fetch('https://tri4-semalab.hf.space/transcribe', {
         method: 'POST',
         body: formData
     })
     .then(response => response.json())
     .then(data => {
-        document.getElementById('output').textContent = data.transcription;
+        outputContainer.textContent = `Transcription: ${data.transcription}`;
     })
     .catch(error => {
         console.error('Error:', error);