static/js/design.js

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);
    });
}