Hugging Face's logo

Spaces:
JPLTedCas
/
QuirohelpASRServer
Runtime error

App Files Community
JPLTedCas commited on
Commit
0d206f0
路
1 Parent(s): 3de77ce

Update templates/escuchar_trauma1.html

Browse files
Files changed (1) hide show
  1. templates/escuchar_trauma1.html +193 -54
templates/escuchar_trauma1.html CHANGED
@@ -8,66 +8,205 @@
8
  </head>
9
  <body>
10
  <div class="login22">
11
- <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>
12
- <h3 style="padding-left: 80%;font-size: 1.2rem;" onclick="location.href='/ajustes'">AJUSTES <img src="{{ user_image6 }}" alt="" style="max-width:18%;" ></h3>
13
- <hr/>
14
  <h2 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';font-size: 1.7rem;">Asistente de voz:</h2>
15
- <form action="{{url_for('escuchar_trauma1')}}" method="post">
16
- <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;">
17
- Escuchar: <img src="{{ user_image5 }}" width="30%" style="border-radius: 100%; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);">
18
- </button>
19
- <div id="output"></div>
20
-
21
- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
22
- <script>
23
- const socket = io.connect('https://' + document.domain + ':' + location.port, { secure: true });
24
- const startRecordingButton = document.getElementById('startRecording');
25
- const outputDiv = document.getElementById('output');
26
- let recognition;
27
-
28
- function startRecognitionAndRedirect() {
29
- if (!recognition) {
30
- recognition = new webkitSpeechRecognition();
31
- recognition.lang = 'es-ES';
32
- recognition.onresult = function (event) {
33
- const result = event.results[0][0].transcript;
34
- socket.emit('audio_data', result);
35
- recognition.stop(); // Detiene el reconocimiento despu茅s de recibir un resultado
36
- window.location.href = '/escuchar_trauma'; // Redirige a otra p谩gina despu茅s del reconocimiento
37
- };
38
- }
39
- try {
40
- recognition.start();
41
- } catch (error) {
42
- console.error('Error al iniciar el reconocimiento de voz:', error);
43
- }
44
- }
45
-
46
- startRecordingButton.addEventListener('click', startRecognitionAndRedirect);
47
- </script>
48
-
49
-
50
- </form>
51
-
52
-
53
- <br>
54
- <br>
55
-
56
- <b style="font-size: 1.4rem;font-family: Arial, Helvetica, sans-serif;">{{prediction_text}}</b>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
57
 
58
  <br>
59
  <br>
60
 
 
 
 
 
 
61
  <b style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';font-size: 1.8rem;">Selectores: </b>
62
- <br>
63
- <br>
64
- <img src="{{ user_image8 }}" style="max-width:20%;" onclick="location.href='/pdf_casa_trauma?link2={{nid2}}'">
65
- <img src="{{ user_image9 }}" style="max-width:20%;" onclick="location.href='/protocolos_trauma?link2={{nid2}}'" >
66
- <img src="{{ user_image10 }}" style="max-width:20%;" onclick="location.href='/guia_visual_trauma?link2={{nid2}}'" >
67
- <br>
68
- <img src="{{ user_image11 }}" style="max-width:20%;" onclick="location.href='/videos_trauma?link2={{nid2}}'">
69
- <img src="{{ user_image12 }}" style="max-width:20%;" onclick="location.href='/materiales_trauma?link2={{nid2}}'">
70
-
71
  </div>
72
  </body>
73
  </html>
 
8
  </head>
9
  <body>
10
  <div class="login22">
11
+ <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>
12
+ <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>
13
+ <hr />
14
  <h2 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';font-size: 1.7rem;">Asistente de voz:</h2>
15
+ <form action="{{url_for('escuchar_trauma1')}}" method="post">
16
+ <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>
17
+
18
+
19
+
20
+ </form>
21
+ <!---------------------------------------------------------------------------------------->
22
+
23
+ <div id="controls">
24
+ <button id="recordButton">Record</button>
25
+ <button id="pauseButton" disabled>Pause</button>
26
+ <button id="stopButton" disabled>Stop</button>
27
+ </div>
28
+ <div id="formats">Format: start recording to see sample rate</div>
29
+ <p><strong>Recordings:</strong></p>
30
+ <ol id="recordingsList"></ol>
31
+
32
+
33
+
34
+
35
+
36
+ <!-- inserting these scripts at the end to be able to use all the elements in the DOM -->
37
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
38
+ <script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
39
+ <script src="/static/js/app.js"></script>
40
+ <!-- Agrega un cuadro de texto para mostrar la respuesta -->
41
+ <!--<input type="text" id="responseTextBox" readonly>-->
42
+ <!--<div id="textElement">-->
43
+ <!-- El texto plano se mostrar谩 aqu铆 -->
44
+ <!--</div>-->
45
+ <!--<h1>Grabaci贸n de Audio</h1>
46
+ <button id="start-recording">Iniciar Grabaci贸n</button>
47
+ <button id="stop-recording" style="display: none;">Detener Grabaci贸n</button>
48
+ <button id="play-audio" style="display: none;">Reproducir Audio</button>
49
+
50
+ <audio id="audio-player" controls style="display: none;"></audio>
51
+
52
+ <script>
53
+ let audioChunks = [];
54
+ let mediaRecorder;
55
+ let audioContext;
56
+
57
+ const startRecordingButton = document.getElementById('start-recording');
58
+ const stopRecordingButton = document.getElementById('stop-recording');
59
+ const playAudioButton = document.getElementById('play-audio');
60
+ const audioPlayer = document.getElementById('audio-player');
61
+
62
+ startRecordingButton.addEventListener('click', startRecording);
63
+ stopRecordingButton.addEventListener('click', stopRecording);
64
+ stopRecordingButton.addEventListener('click', () => {
65
+ stopRecording();
66
+ sendAudioToServer();
67
+ });
68
+ playAudioButton.addEventListener('click', playAudio);
69
+
70
+ function startRecording() {
71
+ startRecordingButton.style.display = 'none';
72
+ stopRecordingButton.style.display = 'block';
73
+ //playAudioButton.style.display = 'none';
74
+
75
+ navigator.mediaDevices.getUserMedia({ audio: true })
76
+ .then(stream => {
77
+ audioContext = new AudioContext();
78
+ mediaRecorder = new MediaRecorder(stream);
79
+ mediaRecorder.ondataavailable = event => {
80
+ if (event.data.size > 0) {
81
+ audioChunks.push(event.data);
82
+ }
83
+ };
84
+ mediaRecorder.onstop = () => {
85
+ playAudioButton.style.display = 'block';
86
+ };
87
+ mediaRecorder.start();
88
+ })
89
+ .catch(error => {
90
+ console.error('Error al acceder al micr贸fono: ' + error);
91
+ });
92
+ }
93
+
94
+ function stopRecording() {
95
+ startRecordingButton.style.display = 'block';
96
+ stopRecordingButton.style.display = 'none';
97
+ mediaRecorder.stop();
98
+ }
99
+
100
+ function playAudio() {
101
+ const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
102
+ const audioUrl = URL.createObjectURL(audioBlob);
103
+ audioPlayer.src = audioUrl;
104
+ audioPlayer.style.display = 'block';
105
+ audioPlayer.play();
106
+ }-->
107
+ <!--// function sendAudioToServer() {
108
+ // const formData = new FormData();
109
+ // const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
110
+ // formData.append('audio', audioBlob);
111
+
112
+ // fetch("/escuchar_trauma", {
113
+ // method: "POST",
114
+ // body: formData
115
+ // })
116
+ // .then(response => response.json())
117
+ // .then(data => {
118
+ // console.log(data.result);
119
+ // })
120
+ // .catch(error => {
121
+ // console.error(error);
122
+ // });
123
+ //}
124
+
125
+ //function sendAudioToServer() {
126
+ // // Agrega el archivo de audio al formulario
127
+ // const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
128
+ // const audioFormData = new FormData();
129
+ // audioFormData.append('audio', audioBlob);
130
+
131
+ // // Env铆a el formulario con el archivo al servidor
132
+ // fetch("/escuchar_trauma", {
133
+ // method: "POST",
134
+ // body: audioFormData
135
+ // })
136
+ // .then(response => response.json())
137
+ // .then(data => {
138
+ // console.log(data.result);
139
+ // })
140
+ // .catch(error => {
141
+ // console.error(error);
142
+ // });
143
+ //}-->
144
+ <!--function sendAudioToServer() {
145
+
146
+ var xhr = new XMLHttpRequest();
147
+ xhr.onload = function (e) {
148
+ if (this.readyState === 4) {
149
+ console.log("Server returned: ", e.target.responseText);
150
+ }
151
+ };
152
+ const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
153
+ const audioUrl = URL.createObjectURL(audioBlob);
154
+ // Supongamos que "data" es una cadena de bytes en formato WAV
155
+ var formData = new FormData();
156
+ // Supongamos que "audioBlob" es un objeto Blob que contiene el audio WAV
157
+ formData.append("audio_data", audioBlob, "archivo.wav");
158
+ xhr.open("POST", "/escuchar_trauma", true);
159
+ xhr.onreadystatechange = function () {
160
+ if (xhr.readyState === 4 && xhr.status === 200) {
161
+ // Manejar la respuesta del servidor
162
+ console.log("Respuesta del servidor:", xhr.responseText);
163
+ ////////////////////////////////////////////////////////
164
+ // Muestra el resultado del reconocimiento en el cuadro de texto
165
+ //document.getElementById("responseTextBox").value = xhr.responseText;
166
+ // Buscar el contenido dentro de las etiquetas <p></p>
167
+ var parser = new DOMParser();
168
+ var responseHTML = parser.parseFromString(xhr.responseText, 'text/html');
169
+ var paragraphContent = responseHTML.querySelector('p').textContent;
170
+
171
+ // Muestra el resultado del reconocimiento en el cuadro de texto
172
+ //document.getElementById("responseTextBox").value = paragraphContent;
173
+ // Muestra el resultado del reconocimiento como texto plano
174
+ var textElement = document.getElementById("textElement"); // Reemplaza "textElement" con el ID adecuado
175
+ textElement.textContent = paragraphContent;-->
176
+ <!--//////////////////////////////////////////////////////////
177
+ }
178
+ };
179
+ xhr.send(formData);
180
+ }
181
+
182
+
183
+
184
+
185
+
186
+
187
+ </script>-->
188
+
189
+
190
+
191
 
192
  <br>
193
  <br>
194
 
195
+ <!--<b style="font-size: 1.4rem;font-family: Arial, Helvetica, sans-serif;">{{prediction_text}}</b>-->
196
+
197
+ <br>
198
+ <br>
199
+ <!---------------------------------------------------------------------------------------->
200
  <b style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';font-size: 1.8rem;">Selectores: </b>
201
+ <br>
202
+ <br>
203
+ <img src="{{ user_image8 }}" style="max-width:20%;" onclick="location.href='http://127.0.0.1:5000/pdf_casa_trauma?link2={{nid2}}'">
204
+ <img src="{{ user_image9 }}" style="max-width:20%;" onclick="location.href='http://127.0.0.1:5000/protocolos_trauma?link2={{nid2}}'">
205
+ <img src="{{ user_image10 }}" style="max-width:20%;" onclick="location.href='http://127.0.0.1:5000/guia_visual_trauma?link2={{nid2}}'">
206
+ <br>
207
+ <img src="{{ user_image11 }}" style="max-width:20%;" onclick="location.href='http://127.0.0.1:5000/videos_trauma?link2={{nid2}}'">
208
+ <img src="{{ user_image12 }}" style="max-width:20%;" onclick="location.href='http://127.0.0.1:5000/materiales_trauma?link2={{nid2}}'">
209
+
210
  </div>
211
  </body>
212
  </html>