File size: 8,236 Bytes
d32d550 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 |
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';
});
|