Este tutorial ha sido premiado en el Facebook Developer Circles Community Challenge 2020 🏆🎉. Aquí dejo la introducción, pero el tutorial completo y actualizado lo he publicado en github: https://github.com/javichur/tutorial-web-voice-control-using-wit

Objetivo del tutorial

El objetivo de este tutorial es aprender desde cero a utilizar wit.ai e integrarlo en una aplicación web. Gracias a esto, podremos controlar nuestra aplicación web con la voz. Durante este tutorial se creará paso a paso la aplicación web «Fitness Voice» (https://github.com/javichur/fitness-voice). En esta aplicación web, los usuarios pueden utilizar la voz para seleccionar 1 de los 3 entrenamientos disponibles (surfing, gym or yoga). Los usuarios también pueden cambiar la voz del entrenador y pedir ver las estadísticas, por ejemplo.

De forma adicional, este tutorial explica cómo añadir una palabra clave (hotword o wake-word, en inglés), para que la aplicación no esté continuamente escuchando, sino que se despierte al escuchar la palabra especial «coach». Dicha palabra será reconocida offline, sin necesidad de conexión a internet.

Aquí tienes un vídeo de la aplicación web «Fitness Voice», te recomiendo verlo para empezar:

Introducción al diseño para voz

En el diseño de aplicaciones de voz, tienes que tener en cuenta algunas cosas que son diferentes en comparación con las aplicaciones web o aplicaciones móviles:

1. Piensa en todas las acciones diferentes que podrá hacer el usuario. A cada una de estas acciones las llamaremos intents (o intenciones, en castellano). Algunos ejemplos de intenciones para nuestra web pueden ser: ‘ir a la home’, ‘mostrar las estadísticas’, ‘quiero entrenar surfing’, etc…

En una aplicación web las acciones suelen estar agrupadas en un menú o en algún otro componente gráfico, de forma que no todas las acciones están visibles a primera vista. Por ejemplo en una tienda online, para poder añadir un producto al carrito primero hay que tener el producto en la pantalla. O para borrar un producto del carrito suele ser común tener que estar en la pantalla del carrito.

Pero en las aplicaciones que se controlan por la voz no es necesario seguir un orden tran estricto como los clics que haríamos en el ejemplo anterior de la web. En el control por voz, usamos el lenguaje natural, mucho más ágil. Por ejemplo, en una tienda online controlada por voz, diríamos directamente «añade manzanas al carrito» (sin buscar antes las manzanas) o «borra las manzanas del carrito» (sin tener que decir antes «muéstrame el carrito actual»).

Por tanto, intenta que en tu aplicación controlada por voz todas las acciones de voz estén siempre disponibles.

2. A veces las intenciones contienen 1 ó más entidades (entities en inglés). Por ejemplo si el usuario dice «quiero practicar surfing» o «quiero practicar yoga», en realidad es la misma intención (hacer entrenamiento), pero dicha intención contiene una identidad «deporte», que puede tomar diferentes valores.

3. Una misma intención se puede expresar con diferentes palabras. Por ejemplo, la intención «stats» puede expresarse con frases como «stats», «muéstrame las estadísticas», «quiero ver las estadísticas», «ver estadísticas por favor». Llamamos utterances (o «pronunciación» en castellano) a cada una de estas formas de expresar el mismo intent. Cuando estés diseñando tu modelo de voz, añade todos los ejemplos posibles de utterances, para ser más flexible y que la aplicación entienda a muchos usuarios aunque se expresen con palabras diferentes.

4. Ayuda al usuario a descubrir qué acciones puede decir. Muestra en pantalla ejemplos de utterances que pueda decir el usuario. Y si tu web responde con mensajes de voz, puedes usar el truco de terminar las contestaciones al usuario con «… dime por ejemplo ‘quiero practicar yoga'» (o el utterance que quieras que diga el usuario).

5. Nunca dejes de aprender y mejorar. Por muchos utterances que hayas creado y muchas intenciones (intents) que hayas añadido, los usuarios usarán nuevas expresiones que no tuviste en cuenta y pedirán nuevas acciones en tu aplicación web. No dejes de aprender, como veremos a continuación el panel de https://wit.ai muestra estadísticas sobre cómo utilizan los usuarios tu aplicación. Consulta estas estadísticas para conocer nuevos «utterances» que podrás añadir de forma sencilla en tu modelo de voz, para que tu aplicación entienda cada vez mejor a tus usuarios.

Consulta el tutorial completo gratis aquí: https://github.com/javichur/tutorial-web-voice-control-using-wit
Código fuente de ejemplo: https://github.com/javichur/fitness-voice