Spaces:
Runtime error
Runtime error
File size: 4,033 Bytes
abc40d6 fb6a8df abc40d6 fb6a8df 190ab3a fb6a8df abc40d6 8494a3e abc40d6 7ade98b 8494a3e 8c30780 8494a3e fb6a8df 8494a3e abc40d6 8494a3e abc40d6 8494a3e 8c30780 abc40d6 190ab3a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
<!DOCTYPE html>
<html>
<head>
<title>Reconocimiento de Voz TedCas-Demo cliente/servidor</title>
<style>
/* Estilos CSS para cambiar el color y el tamaño de los elementos */
.listening {
color: gray;
font-size: 24px;
}
.recognized {
color: green;
font-size: 32px; /* Ajusta el tamaño de fuente a tu preferencia */
}
</style>
</head>
<body>
<!-- Logotipo y título -->
<div>
<img src="https://tse4.mm.bing.net/th?id=OIP.KUs6tP0b1rKLZ5lBq7JAEQHaDS&pid=Api&P=0&h=180" alt="Logo" width="200">
<h1>Reconocimiento de Voz TedCas-Demo cliente/servidor</h1>
<p>Instrucciones de uso: </p>
<p>1)Escriba en cada casilla un comando a reconocer (NOTA: todo en minúsculas)</p>
<p>2)Pulse el botón "Activar reconocimiento" y diga un comando</p>
<p>3)Si el comando ha sido reconocido con éxito, el círculo gris correspondiente se pondrá verde.</p>
</div>
<!-- Cuadros de texto y elementos que cambian de color -->
<div>
<div>
<input type="text" id="input1" class="listening">
<div id="colorIndicator1" class="listening">●</div>
</div>
<div>
<input type="text" id="input2" class="listening">
<div id="colorIndicator2" class="listening">●</div>
</div>
<div>
<input type="text" id="input3" class="listening">
<div id="colorIndicator3" class="listening">●</div>
</div>
</div>
<!-- Botón para iniciar la grabación de voz -->
<button id="startRecording">Activar reconocimiento</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('http://' + document.domain + ':' + location.port, {secure: true});
const startRecordingButton = document.getElementById('startRecording');
const outputDiv = document.getElementById('output');
let mediaRecorder;
let audioChunks = [];
let recognition;
startRecordingButton.addEventListener('click', () => {
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);
// Inicialmente, establecer todos los elementos en gris
const elements = document.querySelectorAll('.listening');
elements.forEach((element) => {
element.classList.remove('recognized');
});
// Verificar si el resultado coincide con el texto en los cuadros
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const input3 = document.getElementById('input3');
if (result.includes(input1.value)) {
document.getElementById('colorIndicator1').classList.add('recognized');
}
if (result.includes(input2.value)) {
document.getElementById('colorIndicator2').classList.add('recognized');
}
if (result.includes(input3.value)) {
document.getElementById('colorIndicator3').classList.add('recognized');
}
};
}
try {
recognition.start();
} catch (error) {
console.error('Error al iniciar el reconocimiento de voz:', error);
}
});
socket.on('transcription', function (data) {
outputDiv.innerHTML = `Texto reconocido: ${data}`;
});
</script>
</body>
</html>
|