Update templates/escuchar_trauma1.html

templates/escuchar_trauma1.html

@@ -21,12 +21,12 @@
 		<!---------------------------------------------------------------------------------------->
 
 		<div id="controls">
-			<button id="recordButton">Record</button>
-			<button id="pauseButton" disabled>Pause</button>
-			<button id="stopButton" disabled>Stop</button>
+			<button id="recordButton">Grabar Voz</button>
+			<!--<button id="pauseButton" disabled>Pause</button>-->
+			<button id="stopButton" disabled>Parar grabacion y buscar</button>
 		</div>
-		<div id="formats">Format: start recording to see sample rate</div>
-		<p><strong>Recordings:</strong></p>
+		<div id="formats">Dele al botón "Grabar Voz". Cuando acabe, dele al botón "Parar grabación..." y obtendrá el resultado de la búsqueda</div>
+		<p><strong>Grabación:</strong></p>
 		<ol id="recordingsList"></ol>
 
 
@@ -43,156 +43,9 @@
 		<!-- El texto plano se mostrará aquí -->
 		<!--</div>-->
 		<!--<h1>Grabación de Audio</h1>
-	<button id="start-recording">Iniciar Grabación</button>
-	<button id="stop-recording" style="display: none;">Detener Grabación</button>
-	<button id="play-audio" style="display: none;">Reproducir Audio</button>
-
-	<audio id="audio-player" controls style="display: none;"></audio>
-
-	<script>
-		let audioChunks = [];
-		let mediaRecorder;
-		let audioContext;
-
-		const startRecordingButton = document.getElementById('start-recording');
-		const stopRecordingButton = document.getElementById('stop-recording');
-		const playAudioButton = document.getElementById('play-audio');
-		const audioPlayer = document.getElementById('audio-player');
-
-		startRecordingButton.addEventListener('click', startRecording);
-		stopRecordingButton.addEventListener('click', stopRecording);
-		stopRecordingButton.addEventListener('click', () => {
-			stopRecording();
-			sendAudioToServer();
-		});
-		playAudioButton.addEventListener('click', playAudio);
-
-		function startRecording() {
-			startRecordingButton.style.display = 'none';
-			stopRecordingButton.style.display = 'block';
-			//playAudioButton.style.display = 'none';
-
-			navigator.mediaDevices.getUserMedia({ audio: true })
-				.then(stream => {
-					audioContext = new AudioContext();
-					mediaRecorder = new MediaRecorder(stream);
-					mediaRecorder.ondataavailable = event => {
-						if (event.data.size > 0) {
-							audioChunks.push(event.data);
-						}
-					};
-					mediaRecorder.onstop = () => {
-						playAudioButton.style.display = 'block';
-					};
-					mediaRecorder.start();
-				})
-				.catch(error => {
-					console.error('Error al acceder al micrófono: ' + error);
-				});
-		}
-
-		function stopRecording() {
-			startRecordingButton.style.display = 'block';
-			stopRecordingButton.style.display = 'none';
-			mediaRecorder.stop();
-		}
-
-		function playAudio() {
-			const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-			const audioUrl = URL.createObjectURL(audioBlob);
-			audioPlayer.src = audioUrl;
-			audioPlayer.style.display = 'block';
-			audioPlayer.play();
-		}-->
-		<!--//         function sendAudioToServer() {
-	//             const formData = new FormData();
-	//             const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-	//             formData.append('audio', audioBlob);
-
-	//             fetch("/escuchar_trauma", {
-	//                 method: "POST",
-	//                 body: formData
-	//             })
-	//                 .then(response => response.json())
-	//                 .then(data => {
-	//                     console.log(data.result);
-	//                 })
-	//                 .catch(error => {
-	//                     console.error(error);
-	//                 });
-	//}
-
-	//function sendAudioToServer() {
-	//    // Agrega el archivo de audio al formulario
-	//    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-	//    const audioFormData = new FormData();
-	//    audioFormData.append('audio', audioBlob);
-
-	//    // Envía el formulario con el archivo al servidor
-	//    fetch("/escuchar_trauma", {
-	//        method: "POST",
-	//        body: audioFormData
-	//    })
-	//        .then(response => response.json())
-	//        .then(data => {
-	//            console.log(data.result);
-	//        })
-	//        .catch(error => {
-	//            console.error(error);
-	//        });
-	//}-->
-		<!--function sendAudioToServer() {
-
-	var xhr = new XMLHttpRequest();
-	xhr.onload = function (e) {
-	if (this.readyState === 4) {
-	console.log("Server returned: ", e.target.responseText);
-	}
-	};
-	const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-	const audioUrl = URL.createObjectURL(audioBlob);
-	// Supongamos que "data" es una cadena de bytes en formato WAV
-	var formData = new FormData();
-	// Supongamos que "audioBlob" es un objeto Blob que contiene el audio WAV
-	formData.append("audio_data", audioBlob, "archivo.wav");
-	xhr.open("POST", "/escuchar_trauma", true);
-	xhr.onreadystatechange = function () {
-	if (xhr.readyState === 4 && xhr.status === 200) {
-	// Manejar la respuesta del servidor
-	console.log("Respuesta del servidor:", xhr.responseText);
-	////////////////////////////////////////////////////////
-	// Muestra el resultado del reconocimiento en el cuadro de texto
-	//document.getElementById("responseTextBox").value = xhr.responseText;
-	// Buscar el contenido dentro de las etiquetas <p></p>
-	var parser = new DOMParser();
-	var responseHTML = parser.parseFromString(xhr.responseText, 'text/html');
-	var paragraphContent = responseHTML.querySelector('p').textContent;
-
-	// Muestra el resultado del reconocimiento en el cuadro de texto
-	//document.getElementById("responseTextBox").value = paragraphContent;
-	// Muestra el resultado del reconocimiento como texto plano
-	var textElement = document.getElementById("textElement"); // Reemplaza "textElement" con el ID adecuado
-	textElement.textContent = paragraphContent;-->
-		<!--//////////////////////////////////////////////////////////
-	}
-	};
-	xhr.send(formData);
-	}
-
-
-
-
-
-
-	</script>-->
-
-
-
-
-		<br>
-		<br>
-
-		<!--<b style="font-size: 1.4rem;font-family: Arial, Helvetica, sans-serif;">{{prediction_text}}</b>-->
+	<br>
+	<br>
+	<!--<b style="font-size: 1.4rem;font-family: Arial, Helvetica, sans-serif;">{{prediction_text}}</b>-->
 
 		<br>
 		<br>