Create design.js

static/js/design.js

@@ -0,0 +1,73 @@
+let isRecording = false;
+let mediaRecorder;
+let recordedChunks = [];
+
+const micContainer = document.getElementsByClassName('mic-container')[0];
+const circle = micContainer.getElementsByClassName('circle')[0];
+
+micContainer.addEventListener('click', function () {
+    if (!isRecording) {
+        startRecording();
+    } else {
+        stopRecording();
+    }
+});
+
+function startRecording() {
+    navigator.mediaDevices.getUserMedia({ audio: true })
+        .then(function (stream) {
+            mediaRecorder = new MediaRecorder(stream);
+            mediaRecorder.start();
+
+            mediaRecorder.ondataavailable = function (e) {
+                recordedChunks.push(e.data);
+            };
+
+            // Update UI for recording
+            circle.classList.add('active');
+            document.getElementById('output').textContent = 'Recording...';
+            isRecording = true;
+        })
+        .catch(function (err) {
+            console.error('The following error occurred: ' + err);
+        });
+}
+
+function stopRecording() {
+    mediaRecorder.stop();
+
+    mediaRecorder.onstop = function () {
+        const blob = new Blob(recordedChunks, { type: 'audio/webm' });
+        recordedChunks = [];
+        const audioURL = window.URL.createObjectURL(blob);
+
+        // Update UI after recording
+        circle.classList.remove('active');
+        document.getElementById('output').textContent = 'Click to Transcribe';
+
+        // Handle the Transcribe button click
+        document.getElementById('output').addEventListener('click', function () {
+            transcribeAudio(blob);
+        });
+
+        isRecording = false;
+    };
+}
+
+function transcribeAudio(blob) {
+    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
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        document.getElementById('output').textContent = data.transcription;
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+}