static/js/voice_fr.js

const reset = document.getElementById("reset");
const currentClassProbabilitiesList = document.getElementById("class-probabilities");
const currentPredictedClass = document.getElementById('predicted-class');
const staticDiv = document.getElementById("static");
const dynamicDiv = document.getElementById("dynamic");
var chartData;

let mediaRecorder;
let audioChunks = [];

document.addEventListener('DOMContentLoaded', function() {
    loadResults();
    attachEventListeners();
});

function attachEventListeners() {
    document.getElementById('startRecord').addEventListener('click', startRecording);
    document.getElementById('stopRecord').addEventListener('click', stopRecording);
    document.getElementById('uploadAudio').addEventListener('click', handleAudioUpload);
}

function initializeChart(data, backgroundColor, borderColor) {
    const canvas = document.getElementById('bestSellers');
    
    // Destroy existing chart if it exists
    const existingChart = Chart.getChart(canvas);
    if (existingChart) {
        existingChart.destroy();
    }

    // Clear the canvas
    const context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);

    data = data.map(function (element) {
        return parseFloat(element).toFixed(2);
    });

    new Chart(canvas, {
        type: 'doughnut',
        data: {
            datasets: [{
                data: data,
                backgroundColor: backgroundColor,
                borderColor: borderColor,
                borderWidth: 1
                
            }]
        },
        options: {
            responsive: true,
            cutout: '80%',
            plugins: {
                legend: {
                    display: true,
                },
                tooltip: {
                    enabled: false
                }
            },
            layout: {
                padding: 0
            },
            elements: {
                arc: {
                    borderWidth: 0
                }
            },
            plugins: {
                datalabels: {
                    display: false,
                    align: 'center',
                    anchor: 'center'
                }
            }
        }
    });
}

function loadResults() {
    fetch('/voice_fr')
        .then(response => response.text())
        .then(html => {
            const responseDOM = new DOMParser().parseFromString(html, "text/html");
            const classProbabilitiesList = responseDOM.getElementById("class-probabilities");
            currentClassProbabilitiesList.innerHTML = classProbabilitiesList.innerHTML;
            const PredictedClass = responseDOM.getElementById("predicted-class")
            currentPredictedClass.innerHTML = PredictedClass.innerHTML;

            var canvasElement = responseDOM.querySelector('.bestSellers');
            console.log(canvasElement);
            chartData = canvasElement.getAttribute('data-chart');
            console.log(chartData);
            if (chartData) {
                var parsedChartData = JSON.parse(chartData);
                var data = parsedChartData.datasets[0].data.slice(0, 5);
                var backgroundColor = parsedChartData.datasets[0].backgroundColor.slice(0, 5);
                var borderColor = parsedChartData.datasets[0].borderColor.slice(0, 5);
                var labels = parsedChartData.labels.slice(0, 5);

                initializeChart(data, backgroundColor, borderColor, labels);
            }
        })
        .catch(error => console.error('Error:', error));
}

function startRecording() {
    navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
            mediaRecorder = new MediaRecorder(stream);
            mediaRecorder.start();

            audioChunks = [];
            mediaRecorder.addEventListener("dataavailable", event => {
                audioChunks.push(event.data);
            });

            document.getElementById('startRecord').disabled = true;
            document.getElementById('stopRecord').disabled = false;
        });
}

function stopRecording() {
    mediaRecorder.stop();
    document.getElementById('startRecord').disabled = false;
    document.getElementById('stopRecord').disabled = true;

    mediaRecorder.addEventListener("stop", () => {
        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
        sendAudioToServer(audioBlob);
    });
}

function handleAudioUpload() {
    const fileInput = document.getElementById('audioFileInput');
    if (fileInput.files.length > 0) {
        const file = fileInput.files[0];
        sendAudioToServer(file);
    } else {
        console.error('No file selected');
    }
}

function sendAudioToServer(audioData) {
    const formData = new FormData();
    
    // Créer un nouveau Blob avec le type MIME audio/wav
    const audioBlob = new Blob([audioData], { type: 'audio/wav' });
    
    formData.append('audio', audioBlob, 'recorded_audio.wav');

    document.getElementById('loadingIndicator').style.display = 'block';

    // Effacer le graphique existant
    const canvas = document.getElementById('bestSellers');
    const existingChart = Chart.getChart(canvas);
    if (existingChart) {
        existingChart.destroy();
    }
    const context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);

    fetch('/voice_fr', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(html => {
        const parser = new DOMParser();
        const newDocument = parser.parseFromString(html, 'text/html');
        
        // Update other parts of the page as before
        // Update only the necessary parts of the page
        document.getElementById('class-probabilities').innerHTML = newDocument.getElementById('class-probabilities').innerHTML;
        document.getElementById('predicted-class').innerHTML = newDocument.getElementById('predicted-class').innerHTML;
        document.getElementById('transcribedText').innerHTML = newDocument.getElementById('transcribedText').innerHTML;
        document.getElementById('classifiedText').innerHTML = newDocument.getElementById('classifiedText').innerHTML;
        dynamicDiv.classList.remove('d-none');
        staticDiv.classList.add('d-none');
        // Update chart
        const newCanvasElement = newDocument.querySelector('.bestSellers');
        if (newCanvasElement) {
            const newChartData = newCanvasElement.getAttribute('data-chart');
            if (newChartData) {
                const parsedChartData = JSON.parse(newChartData);
                initializeChart(
                    parsedChartData.datasets[0].data.slice(0, 5),
                    parsedChartData.datasets[0].backgroundColor.slice(0, 5),
                    parsedChartData.datasets[0].borderColor.slice(0, 5),
                    parsedChartData.labels.slice(0, 5)
                );
            }
        }

        document.getElementById('loadingIndicator').style.display = 'none';
    })
    .catch(error => {
        console.error('Error:', error);
        document.getElementById('loadingIndicator').style.display = 'none';
    });
}
fetch('/voice_fr', {
    method: 'POST',
    body: formData
})
.then(response => response.text())
.then(html => {
    const parser = new DOMParser();
    const newDocument = parser.parseFromString(html, 'text/html');
    
    
    
    // Update chart
    const newCanvasElement = newDocument.querySelector('.bestSellers');
    if (newCanvasElement) {
        const newChartData = newCanvasElement.getAttribute('data-chart');
        if (newChartData) {
            const parsedChartData = JSON.parse(newChartData);
            initializeChart(
                parsedChartData.datasets[0].data.slice(0, 5),
                parsedChartData.datasets[0].backgroundColor.slice(0, 5),
                parsedChartData.datasets[0].borderColor.slice(0, 5),
                parsedChartData.labels.slice(0, 5)
            );
        }
    }

    document.getElementById('loadingIndicator').style.display = 'none';
})
.catch(error => {
    console.error('Error:', error);
    document.getElementById('loadingIndicator').style.display = 'none';
});