QuirohelpASRServer

Runtime error

App Files Files Community

JPLTedCas commited on Nov 6, 2023

Commit

0d206f0

•

1 Parent(s): 3de77ce

Update templates/escuchar_trauma1.html

Browse files

Files changed (1) hide show

templates/escuchar_trauma1.html +193 -54

templates/escuchar_trauma1.html CHANGED Viewed

@@ -8,66 +8,205 @@
 </head>
 <body>
 	<div class="login22">
-		<h2 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;font-size: 3rem;background-color: darkcyan;"><img src="{{ user_image7 }}" alt="" style="max-width:5%;" onclick="location.href='/especialidad'">  Traumatología</h2>
-		<h3 style="padding-left: 80%;font-size: 1.2rem;" onclick="location.href='/ajustes'">AJUSTES <img src="{{ user_image6 }}" alt="" style="max-width:18%;"  ></h3>
-		<hr/>
 		<h2 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';font-size: 1.7rem;">Asistente de voz:</h2>
-			<form action="{{url_for('escuchar_trauma1')}}" method="post">
-				<button type="button" id="startRecording" style="padding-right: 85%; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman'; font-size: 1.2rem; padding-left: 1%; background-color: white; border: solid white;">
-    Escuchar: <img src="{{ user_image5 }}" width="30%" style="border-radius: 100%; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);">
-</button>
-<div id="output"></div>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
-<script>
-    const socket = io.connect('https://' + document.domain + ':' + location.port, { secure: true });
-    const startRecordingButton = document.getElementById('startRecording');
-    const outputDiv = document.getElementById('output');
-    let recognition;
-    function startRecognitionAndRedirect() {
-        if (!recognition) {
-            recognition = new webkitSpeechRecognition();
-            recognition.lang = 'es-ES';
-            recognition.onresult = function (event) {
-                const result = event.results[0][0].transcript;
-                socket.emit('audio_data', result);
-                recognition.stop(); // Detiene el reconocimiento después de recibir un resultado
-                window.location.href = '/escuchar_trauma'; // Redirige a otra página después del reconocimiento
-            };
-        }
-        try {
-            recognition.start();
-        } catch (error) {
-            console.error('Error al iniciar el reconocimiento de voz:', error);
-        }
-    }
-    startRecordingButton.addEventListener('click', startRecognitionAndRedirect);
-</script>
-			</form>
-			<br>
-			<br>
-	    <b style="font-size: 1.4rem;font-family: Arial, Helvetica, sans-serif;">{{prediction_text}}</b>
 		<br>
 		<br>
 		<b style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';font-size: 1.8rem;">Selectores: </b>
-			<br>
-			<br>
-			<img src="{{ user_image8 }}" style="max-width:20%;" onclick="location.href='/pdf_casa_trauma?link2={{nid2}}'">
-			<img src="{{ user_image9 }}" style="max-width:20%;" onclick="location.href='/protocolos_trauma?link2={{nid2}}'" >
-			<img src="{{ user_image10 }}" style="max-width:20%;" onclick="location.href='/guia_visual_trauma?link2={{nid2}}'" >
-			<br>
-			<img src="{{ user_image11 }}" style="max-width:20%;"  onclick="location.href='/videos_trauma?link2={{nid2}}'">
-			<img src="{{ user_image12 }}" style="max-width:20%;"  onclick="location.href='/materiales_trauma?link2={{nid2}}'">
 	</div>
 </body>
 </html>

 </head>
 <body>
 	<div class="login22">
+		<h2 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;font-size: 3rem;background-color: darkcyan;"><img src="{{ user_image7 }}" alt="" style="max-width:5%;" onclick="location.href='http://127.0.0.1:5000/especialidad'">  Traumatología</h2>
+		<h3 style="padding-left: 80%;font-size: 1.2rem;" onclick="location.href='http://127.0.0.1:5000/ajustes'">AJUSTES <img src="{{ user_image6 }}" alt="" style="max-width:18%;"></h3>
+		<hr />
 		<h2 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';font-size: 1.7rem;">Asistente de voz:</h2>
+		<form action="{{url_for('escuchar_trauma1')}}" method="post">
+			<button type="button" style="padding-right: 85%;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';font-size: 1.2rem;padding-left: 1%;background-color: white; border: solid white" onclick="location.href='http://127.0.0.1:5000/escuchar_trauma'">Escuchar:   <img src="{{ user_image5 }}" width="30% " style=" border-radius: 100%;box-shadow:2px 2px 2px 1px rgba(0, 0, 0, 0.2);" onclick="location.href='http://127.0.0.1:5000/escuchar_trauma'"></button>
+		</form>
+		<!---------------------------------------------------------------------------------------->
+		<div id="controls">
+			<button id="recordButton">Record</button>
+			<button id="pauseButton" disabled>Pause</button>
+			<button id="stopButton" disabled>Stop</button>
+		</div>
+		<div id="formats">Format: start recording to see sample rate</div>
+		<p><strong>Recordings:</strong></p>
+		<ol id="recordingsList"></ol>
+		<!-- inserting these scripts at the end to be able to use all the elements in the DOM -->
+		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+		<script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
+		<script src="/static/js/app.js"></script>
+		<!-- Agrega un cuadro de texto para mostrar la respuesta -->
+		<!--<input type="text" id="responseTextBox" readonly>-->
+		<!--<div id="textElement">-->
+		<!-- 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-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';font-size: 1.8rem;">Selectores: </b>
+		<br>
+		<br>
+		<img src="{{ user_image8 }}" style="max-width:20%;" onclick="location.href='http://127.0.0.1:5000/pdf_casa_trauma?link2={{nid2}}'">
+		<img src="{{ user_image9 }}" style="max-width:20%;" onclick="location.href='http://127.0.0.1:5000/protocolos_trauma?link2={{nid2}}'">
+		<img src="{{ user_image10 }}" style="max-width:20%;" onclick="location.href='http://127.0.0.1:5000/guia_visual_trauma?link2={{nid2}}'">
+		<br>
+		<img src="{{ user_image11 }}" style="max-width:20%;" onclick="location.href='http://127.0.0.1:5000/videos_trauma?link2={{nid2}}'">
+		<img src="{{ user_image12 }}" style="max-width:20%;" onclick="location.href='http://127.0.0.1:5000/materiales_trauma?link2={{nid2}}'">
 	</div>
 </body>
 </html>