Hugging Face's logo

Spaces:
JPLTedCas
/
ASRinServer
Sleeping

App Files Community
JPLTedCas commited on
Commit
8f9cdf5
•
1 Parent(s): 240f9c4

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +39 -60
templates/index.html CHANGED
@@ -1,67 +1,46 @@
1
  <!DOCTYPE html>
2
  <html>
 
3
  <head>
4
- <title>Reconocimiento de Voz</title>
 
 
 
 
 
5
  </head>
6
  <body>
7
- <h1>Reconocimiento de Voz</h1>
8
- <button id="startRecording">Comenzar Grabación</button>
9
- <button id="stopRecording" disabled>Detener Grabación</button>
10
- <button id="sendAudio" disabled>Enviar al Servidor</button>
11
- <div id="output"></div>
12
-
13
- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
14
- <script>
15
- const socket = io.connect('https://' + document.domain + ':' + location.port, {secure: true});
16
- const startRecordingButton = document.getElementById('startRecording');
17
- const stopRecordingButton = document.getElementById('stopRecording');
18
- const sendAudioButton = document.getElementById('sendAudio');
19
- const outputDiv = document.getElementById('output');
20
- let mediaRecorder;
21
- const audioChunks = [];
22
-
23
- startRecordingButton.addEventListener('click', () => {
24
- navigator.mediaDevices.getUserMedia({ audio: true })
25
- .then(function (stream) {
26
- mediaRecorder = new MediaRecorder(stream);
27
-
28
- mediaRecorder.ondataavailable = function (e) {
29
- if (e.data.size > 0) {
30
- audioChunks.push(e.data);
31
- }
32
- };
33
-
34
- mediaRecorder.onstop = function () {
35
- sendAudioButton.disabled = false;
36
- startRecordingButton.disabled = true;
37
- stopRecordingButton.disabled = true;
38
- };
39
-
40
- startRecordingButton.disabled = true;
41
- stopRecordingButton.disabled = false;
42
-
43
- mediaRecorder.start();
44
- })
45
- .catch(function (err) {
46
- console.error('Error al acceder al micrófono:', err);
47
- });
48
- });
49
-
50
- stopRecordingButton.addEventListener('click', () => {
51
- mediaRecorder.stop();
52
- sendAudioButton.disabled = false;
53
- stopRecordingButton.disabled = true;
54
- });
55
-
56
- sendAudioButton.addEventListener('click', () => {
57
- const audioBlob = new Blob(audioChunks, { 'type': 'audio/wav' });
58
- socket.emit('audio_data', audioBlob);
59
- audioChunks.length = 0; // Limpiar el array de fragmentos de audio
60
- });
61
-
62
- socket.on('transcription', function (data) {
63
- outputDiv.innerHTML = `Texto reconocido: ${data}`;
64
- });
65
- </script>
66
  </body>
67
  </html>
 
 
 
1
  <!DOCTYPE html>
2
  <html>
3
+
4
  <head>
5
+ <meta charset="UTF-8">
6
+
7
+ <title>TedCas Speech Recognition Modelo Cliente-Servidor</title>
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
+
10
+
11
  </head>
12
  <body>
13
+ <!-- Agregar un logotipo desde una URL -->
14
+ <img src="https://tse4.mm.bing.net/th?id=OIP.KUs6tP0b1rKLZ5lBq7JAEQHaDS&pid=Api&P=0&h=180" alt="Logotipo de la empresa" width="300" >
15
+
16
+ <h1>TedCas Speech Recognition Modelo Cliente-Servidor</h1>
17
+ <p>{{ recognized_text }}</p>
18
+
19
+ <div id="controls">
20
+ <button id="recordButton">Record</button>
21
+ <button id="pauseButton" disabled>Pause</button>
22
+ <button id="stopButton" disabled>Stop</button>
23
+ </div>
24
+ <div id="formats">Format: start recording to see sample rate</div>
25
+ <p><strong>Recordings:</strong></p>
26
+ <ol id="recordingsList"></ol>
27
+
28
+
29
+
30
+
31
+
32
+ <!-- inserting these scripts at the end to be able to use all the elements in the DOM -->
33
+ <script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
34
+ <script src="/static/js/app.js"></script>
35
+ <!-- Agrega un cuadro de texto para mostrar la respuesta -->
36
+ <!--<input type="text" id="responseTextBox" readonly>-->
37
+ <div id="textElement">
38
+ <!-- El texto plano se mostrará aquí -->
39
+ </div>
40
+
41
+
42
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  </body>
44
  </html>
45
+
46
+