static/js/ws.js

const startRecordingButton = document.getElementById('startRecording');
const imageUploadingButton = document.getElementById('imageUpload')
const isAgreed = localStorage.getItem('privacyPolicy') !== null;
const privacyPolicyPopup = document.getElementById('privacyPolicyPopup')

if (!isAgreed){
    setTimeout(showPrivacyPolicy, 1500);
}

function agreePrivacyPolicy() {
    localStorage.setItem('privacyPolicy', 'True')
    privacyPolicyPopup.style.visibility = 'hidden'
}

function showPrivacyPolicy() {
    privacyPolicyPopup.style.visibility = 'visible'
}


// let stream;
// let ws
// let silenceDetectorNode;
// let silenceCount = 0
// let recording = false;
// let mediaRecorder;
// let continuousRecorder
// let audioContext;
// let source;
// let currentAudioChunks = [];
// let allAudioChunks = [];
// const uuid = generateUUID()
//
// startRecordingButton.addEventListener('click', async () => {
//     if (!recording) {
//         if (mediaRecorder && mediaRecorder.state !== 'inactive') {
//             mediaRecorder.stop();
//         }
//         transcriptionReportBlock.innerText = ''
//         ws = new WebSocket(`ws://localhost:8000/ws/${uuid}`);
//         ws.onclose = (event) => {
//             if (mediaRecorder && mediaRecorder.state !== 'inactive') {
//                 mediaRecorder.stop();
//             }
//         }
//         ws.onerror = (error) => {
//             alert('Something was wrong. Try again later.')
//             console.log(error)
//             window.location.reload()
//         };
//         ws.onmessage = (event) => {
//             const response = event.data
//             console.log(response)
//             if (response === 'ZmluaXNoZWQ=') {
//                 ws.close()
//                 ws = undefined
//             } else if (response.startsWith('aW1wcm92ZQ')) {
//                 transcriptionReportBlock.innerText = response.replace('aW1wcm92ZQ', '')
//             } else if (response === 'aW1ycG92aW5nIHRoZSBxdWFsaXR5') {
//                 transcriptionReportBlock.innerText = 'I am improving the quality of transcription. Please wait a bit.'
//             } else {
//                 transcriptionReportBlock.innerText += ` ${response}`
//             }
//         }
//
//         startRecordingButton.innerHTML = 'Stop recording';
//         try {
//             stream = await navigator.mediaDevices.getUserMedia({audio: true, video: false});
//             audioContext = new AudioContext();
//             await audioContext.audioWorklet.addModule('../../../static/js/audio-processor.js'); // путь к файлу процессора
//             silenceDetectorNode = new AudioWorkletNode(audioContext, 'silence-detector-processor');
//             silenceDetectorNode.port.onmessage = (event) => {
//                 if (event.data.type === 'silence') {
//                     if (currentAudioChunks.length > 0) {
//                         if (silenceCount === 0) {
//                             silenceCount += 1;
//                             restartMediaRecorder();
//                         }
//                     }
//                 } else if (event.data.type === 'sound') {
//                     silenceCount = 0;
//                 }
//             };
//             source = audioContext.createMediaStreamSource(stream);
//             mediaRecorder = new MediaRecorder(stream);
//             mediaRecorder.start(1000);
//             mediaRecorder.ondataavailable = event => {
//                 currentAudioChunks.push(event.data);
//             };
//             source.connect(silenceDetectorNode).connect(audioContext.destination);
//             continuousRecorder = new MediaRecorder(stream);
//             continuousRecorder.start();
//             continuousRecorder.ondataavailable = event => {
//                 allAudioChunks.push(event.data);
//             };
//             recording = true;
//         } catch (error) {
//             console.error('Access to microphone denied:', error);
//         }
//     } else {
//         stopRecording();
//     }
// });
//
// function stopRecording() {
//     startRecordingButton.innerHTML = 'Start recording';
//     recording = false;
//     mediaRecorder.stop();
//     continuousRecorder.stop();
//     silenceDetectorNode.disconnect();
//     source.disconnect();
//     audioContext.close();
//     // if (currentAudioChunks.length > 0) {
//     sendAudioToServer(new Blob(currentAudioChunks, {type: 'audio/wav'}), true);
//     // }
//     currentAudioChunks = [];
// }
//
// function sendAudioToServer(audioBlob, finished = false) {
//     return new Promise((resolve, reject) => {
//         let fullAudio = ''
//         console.log("Sending audio to server...", audioBlob);
//         const reader = new FileReader();
//         reader.readAsDataURL(audioBlob);
//         reader.onloadend = () => {
//             let base64String = reader.result;
//             base64String = base64String.split(',')[1];
//             if (!finished && base64String) {
//                 const dataWS = {'audio': base64String, 'finished': finished, 'full_audio': fullAudio};
//                 ws.send(JSON.stringify(dataWS));
//                 resolve();
//             } else {
//                 const fullAudioBlob = new Blob(allAudioChunks, {type: 'audio/wav'})
//                 const fullReader = new FileReader()
//                 fullReader.readAsDataURL(fullAudioBlob)
//                 fullReader.onloadend = () => {
//                     let fullBase64String = fullReader.result
//                     fullBase64String = fullBase64String.split(',')[1]
//                     const dataWS = {'audio': base64String, 'finished': finished, 'full_audio': fullBase64String};
//                     console.log(dataWS)
//                     ws.send(JSON.stringify(dataWS));
//                     allAudioChunks = []
//                     resolve()
//                 }
//                 fullReader.onerror = reject
//             }
//         };
//         reader.onerror = reject;
//     });
// }
//
//
// async function restartMediaRecorder() {
//     if (mediaRecorder && mediaRecorder.state !== 'inactive') {
//         mediaRecorder.stop();
//     }
//     await sendAudioToServer(new Blob(currentAudioChunks, {type: 'audio/wav'}));
//     currentAudioChunks = [];
//     mediaRecorder = new MediaRecorder(stream);
//     mediaRecorder.start(1000);
//     mediaRecorder.ondataavailable = event => {
//         currentAudioChunks.push(event.data);
//     };
// }

let mediaRecorder;
let audioChunks = [];

if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    alert('Your browser does not support the required media devices.');
}

startRecordingButton.addEventListener('click', () => {
    if (mediaRecorder) {
        if (mediaRecorder.state === 'recording') {
            mediaRecorder.stop();
            startRecordingButton.innerHTML = `<i class="fa-solid fa-microphone" style="font-size: 30px;"></i>`;
        } else {
            transcriptionReportBlock.innerText = ''
            startRecording();
        }
    } else {
        transcriptionReportBlock.innerText = ''
        startRecording();
    }
});

function startRecording() {
    navigator.mediaDevices.getUserMedia({audio: true})
        .then(stream => {
            mediaRecorder = new MediaRecorder(stream);
            mediaRecorder.ondataavailable = event => {
                audioChunks.push(event.data);
            };
            mediaRecorder.onstop = sendAudioToServer;

            mediaRecorder.start();
            startRecordingButton.textContent = 'Stop Recording';
        })
        .catch(error => {
            console.error('Error accessing the microphone', error);
        });
}

function sendAudioToServer() {
    makeLoading()
    const audioBlob = new Blob(audioChunks, {type: 'audio/wav'});
    const reader = new FileReader();
    reader.readAsDataURL(audioBlob);
    reader.onloadend = () => {
        let base64String = reader.result;
        base64String = base64String.split(',')[1];
        fetch('/transcript-record', {
            method: 'POST',
            credentials: 'include',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({'audio': base64String}),
        }).then(response => {
            if (response.ok) {
                return response.json();
            }
            throw new Error('Network response was not ok.');
        }).then(data => {
            transcriptionReportBlock.textContent = data;
            reloadVoices()
        }).catch(error => {
            alert('There are problems. Contact customer support');
            stopLoading()
        });
        audioChunks = [];
    };
}

imageUploadingButton.addEventListener('click', function () {
    const imageRecordIDs = [];
    const records = document.getElementsByClassName('record');

    for (let i = 0; i < records.length; i++) {
        const recordID = records[i].getAttribute('record-id');
        const objectType = records[i].getAttribute('object-type');
        if (objectType === 'image') {
            imageRecordIDs.push(recordID);
        }
    }
    if (imageRecordIDs.length >= 12) {
        alert('You cannot upload more than 12 images');
        return
    }
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = 'image/*';
    fileInput.onchange = e => {
        const file = e.target.files[0];
        const formData = new FormData();

        formData.append('image', file);
        makeLoading()
        fetch('/upload-image', {
            method: 'POST',
            body: formData,
        })
            .then(response => response.json())
            .then(data => {
                stopLoading()
                transcriptionReportBlock.innerHTML = marked.parse(data)
                reloadVoices()
            })
            .catch((error) => {
                alert('Something was wrong')
                console.log(error)
                stopLoading()
            });
    };

    fileInput.click();
});