Update static/js/design.js

static/js/design.js

@@ -1,94 +1,67 @@
-let isRecording = false;
+const micContainer = document.querySelector('.mic-container');
+const circle = document.querySelector('.circle');
+const audioPlayback = document.getElementById('audioPlayback');
+const transcribeButton = document.getElementById('transcribeButton');
+const transcriptionResult = document.getElementById('transcriptionResult');
+const loadingSpinner = document.getElementById('loadingSpinner');
+
 let mediaRecorder;
-let recordedChunks = [];
+let audioChunks = [];
+let audioBlob;
+let audioUrl;
 
-// Handles the recording button click event
-document.getElementById('recordButton').addEventListener('click', function () {
-    if (!isRecording) {
-        startRecording();
-    } else {
+micContainer.addEventListener('click', async () => {
+    if (circle.classList.contains('active')) {
         stopRecording();
+    } else {
+        await startRecording();
     }
 });
 
-function startRecording() {
-    navigator.mediaDevices.getUserMedia({ audio: true })
-        .then(function (stream) {
-            mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
-
-            mediaRecorder.ondataavailable = function (e) {
-                if (e.data.size > 0) {
-                    recordedChunks.push(e.data);
-                }
-            };
-
-            mediaRecorder.start();
-            console.log("Recording started");
-
-            // Update button text and style
-            document.getElementById('recordButton').textContent = 'Stop';
-            document.getElementById('recordButton').classList.add('recording');
-            document.getElementById('recordStatus').textContent = 'Recording...';
-            document.getElementById('transcribeContainer').style.display = 'none'; // Hide Transcribe button initially
-            isRecording = true;
-        })
-        .catch(function (err) {
-            console.error('Error accessing media devices: ', err);
-        });
-}
+const startRecording = async () => {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    mediaRecorder = new MediaRecorder(stream);
+    mediaRecorder.ondataavailable = event => audioChunks.push(event.data);
+    mediaRecorder.onstop = () => {
+        audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+        audioUrl = URL.createObjectURL(audioBlob);
+        audioPlayback.src = audioUrl;
+        audioPlayback.style.display = 'block';
+        transcribeButton.style.display = 'block';
+    };
+    mediaRecorder.start();
+    circle.classList.add('active');
+};
 
-function stopRecording() {
+const stopRecording = () => {
     mediaRecorder.stop();
-    console.log("Recording stopped");
+    circle.classList.remove('active');
+};
 
-    mediaRecorder.onstop = function () {
-        const blob = new Blob(recordedChunks, { type: 'audio/webm' });
-        recordedChunks = [];
-        const audioURL = window.URL.createObjectURL(blob);
+transcribeButton.addEventListener('click', async () => {
+    if (!audioBlob) return;
 
-        console.log(`Blob size: ${blob.size} bytes`); // Debugging statement
-        console.log(`Audio URL: ${audioURL}`); // Debugging statement
-
-        // Optionally, add a debug audio player to check if recording is valid
-        const debugAudio = document.createElement('audio');
-        debugAudio.controls = true;
-        debugAudio.src = audioURL;
-        document.body.appendChild(debugAudio);
+    const formData = new FormData();
+    formData.append('audio', audioBlob, 'recording.wav');
 
-        // Update button text and style
-        document.getElementById('recordButton').textContent = 'Start';
-        document.getElementById('recordButton').classList.remove('recording');
-        document.getElementById('recordStatus').textContent = 'Tap to Record';
-        document.getElementById('transcribeContainer').style.display = 'block'; // Show Transcribe button
+    loadingSpinner.style.display = 'block';
+    transcriptionResult.textContent = '';
 
-        // Set up the Transcribe button click event
-        document.getElementById('transcribeButton').addEventListener('click', function () {
-            transcribeAudio(blob);
+    try {
+        const response = await fetch('https://jikoni-semabox.hf.space/transcribe', {
+            method: 'POST',
+            body: formData
         });
 
-        isRecording = false;
-    };
-}
-
-function transcribeAudio(blob) {
-    const formData = new FormData();
-    formData.append('audio', blob, 'audio.webm');
-
-    // Log FormData entries for debugging
-    for (const [key, value] of formData.entries()) {
-        console.log(`${key}: ${value}`);
+        if (response.ok) {
+            const result = await response.json();
+            transcriptionResult.textContent = result.transcription || 'No transcription available.';
+        } else {
+            transcriptionResult.textContent = `Error: ${response.status}`;
+        }
+    } catch (error) {
+        transcriptionResult.textContent = `Request failed: ${error.message}`;
+    } finally {
+        loadingSpinner.style.display = 'none';
     }
-
-    fetch('https://jikoni-semabox.hf.space/transcribe', { 
-        method: 'POST',
-        body: formData
-    })
-    .then(response => response.json())
-    .then(data => {
-        console.log(data); // Debugging statement
-        document.getElementById('output').textContent = data.transcription || 'No transcription available';
-    })
-    .catch(error => {
-        console.error('Error during transcription:', error);
-    });
-}
+});