Hugging Face's logo

Spaces:
JPLTedCas
/
QuirohelpASRServer
Runtime error

App Files Community
QuirohelpASRServer / templates /escuchar_trauma1.html
JPLTedCas's picture
JPLTedCas
Update templates/escuchar_trauma1.html
0d206f0
raw
history blame
8.25 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Quirohelp </title>
</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>