Hugging Face's logo

Spaces:
JPLTedCas
/
ASR-configurable
Runtime error

App Files Community
JPLTedCas commited on
Commit
fb6a8df
•
1 Parent(s): 07974c2

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +60 -3
templates/index.html CHANGED
@@ -1,15 +1,51 @@
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
- <title>Reconocimiento de Voz con WebRTC</title>
 
 
 
 
 
 
 
 
 
 
 
 
5
  </head>
6
  <body>
7
- <button id="startRecording">Iniciar Grabación</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  <div id="output"></div>
9
 
10
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
11
  <script>
12
- const socket = io.connect('https://' + document.domain + ':' + location.port, {secure: true});
13
  const startRecordingButton = document.getElementById('startRecording');
14
  const outputDiv = document.getElementById('output');
15
  let mediaRecorder;
@@ -23,6 +59,27 @@
23
  recognition.onresult = function (event) {
24
  const result = event.results[0][0].transcript;
25
  socket.emit('audio_data', result);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  };
27
  }
28
 
 
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <title>Reconocimiento de Voz TedCas-Demo cliente/servidor</title>
5
+ <style>
6
+ /* Estilos CSS para cambiar el color y el tamaño de los elementos */
7
+ .listening {
8
+ color: gray;
9
+ font-size: 24px;
10
+ }
11
+
12
+ .recognized {
13
+ color: green;
14
+ font-size: 32px; /* Ajusta el tamaño de fuente a tu preferencia */
15
+ }
16
+ </style>
17
  </head>
18
  <body>
19
+ <!-- Logotipo y título -->
20
+ <div>
21
+ <img src="https://tse4.mm.bing.net/th?id=OIP.KUs6tP0b1rKLZ5lBq7JAEQHaDS&pid=Api&P=0&h=180" alt="Logo" width="200">
22
+ <h1>Reconocimiento de Voz TedCas-Demo cliente/servidor</h1>
23
+ </div>
24
+
25
+ <!-- Cuadros de texto y elementos que cambian de color -->
26
+ <div>
27
+ <div>
28
+ <input type="text" id="input1" class="listening">
29
+ <div id="colorIndicator1" class="listening">●</div>
30
+ </div>
31
+ <div>
32
+ <input type="text" id="input2" class="listening">
33
+ <div id="colorIndicator2" class="listening">●</div>
34
+ </div>
35
+ <div>
36
+ <input type="text" id="input3" class="listening">
37
+ <div id="colorIndicator3" class="listening">●</div>
38
+ </div>
39
+ </div>
40
+
41
+ <!-- Botón para iniciar la grabación de voz -->
42
+ <button id="startRecording">Activar reconocimiento</button>
43
+
44
  <div id="output"></div>
45
 
46
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
47
  <script>
48
+ const socket = io.connect('http://' + document.domain + ':' + location.port);
49
  const startRecordingButton = document.getElementById('startRecording');
50
  const outputDiv = document.getElementById('output');
51
  let mediaRecorder;
 
59
  recognition.onresult = function (event) {
60
  const result = event.results[0][0].transcript;
61
  socket.emit('audio_data', result);
62
+
63
+ // Inicialmente, establecer todos los elementos en gris
64
+ const elements = document.querySelectorAll('.listening');
65
+ elements.forEach((element) => {
66
+ element.classList.remove('recognized');
67
+ });
68
+
69
+ // Verificar si el resultado coincide con el texto en los cuadros
70
+ const input1 = document.getElementById('input1');
71
+ const input2 = document.getElementById('input2');
72
+ const input3 = document.getElementById('input3');
73
+
74
+ if (result.includes(input1.value)) {
75
+ document.getElementById('colorIndicator1').classList.add('recognized');
76
+ }
77
+ if (result.includes(input2.value)) {
78
+ document.getElementById('colorIndicator2').classList.add('recognized');
79
+ }
80
+ if (result.includes(input3.value)) {
81
+ document.getElementById('colorIndicator3').classList.add('recognized');
82
+ }
83
  };
84
  }
85