¿Cómo incluyo AI en mi aplicación Chit Chat que estoy desarrollando? La tecnología cambia la vida futura

Gracias por A2A.

No soy un desarrollador de aplicaciones, pero como me lo han pedido, puedo ayudar hasta mis límites.

En este tutorial, utilizaremos la API para crear una interfaz de chat de voz de inteligencia artificial (AI) en el navegador. La aplicación escuchará la voz del usuario y responderá con una voz sintética. Debido a que la API Web Speech todavía es experimental, la aplicación solo funciona en navegadores compatibles. Las características utilizadas para este artículo, tanto el reconocimiento de voz como la síntesis de voz, actualmente solo se encuentran en los navegadores basados en Chromium, incluidos Chrome 25+ y Opera 27+, mientras que Firefox, Edge y Safari solo admiten síntesis de voz en este momento.

Para construir la aplicación web, vamos a tomar tres pasos principales:

Use la interfaz SpeechRecognition Web Speech API para escuchar la voz del usuario.
Envíe el mensaje del usuario a una API comercial de procesamiento de lenguaje natural como una cadena de texto.
Una vez que API.AI devuelve el texto de respuesta, use la interfaz SpeechSynthesis para darle una voz sintética.

El código fuente completo utilizado para este tutorial está en GitHub.

ENLACE DE REQUISITOS PREVIOS

Este tutorial se basa en Node.js. Tendrá que sentirse cómodo con JavaScript y tener una comprensión básica de Node.js.

Asegúrese de que Node.js esté instalado en su máquina, ¡y luego comenzaremos!

Configuración del enlace de la aplicación Node.js

Primero, configuremos un marco de aplicación web con Node.js. Cree el directorio de su aplicación y configure la estructura de su aplicación de esta manera:

  .
 ├── index.js
 ├── público
 │ ├── css
 │ │ └── style.css
 │ └── js
 │ └── script.js
 └── vistas
     └── index.html

Luego, ejecute este comando para inicializar su aplicación Node.js:

  $ npm init -f

El -f acepta la configuración predeterminada, o puede configurar la aplicación manualmente sin la bandera. Además, esto generará un archivo package.json que contiene la información básica de su aplicación.

Ahora, instale todas las dependencias necesarias para compilar esta aplicación:

  $ npm install express socket.io apiai --save

Con la bandera --save agregada, su archivo package.json se actualizará automáticamente con las dependencias.

Vamos a utilizar Express, un marco de servidor de aplicaciones web Node.js, para ejecutar el servidor localmente. Para habilitar la comunicación bidireccional en tiempo real entre el servidor y el navegador, usaremos Socket.IO. Además, instalaremos la herramienta de servicio de procesamiento de lenguaje natural, API.AI, para construir un chatbot de IA que pueda tener una conversación artificial.

Socket.IO es una biblioteca que nos permite usar WebSocket fácilmente con Node.js. Al establecer una conexión de socket entre el cliente y el servidor, nuestros mensajes de chat pasarán de un lado a otro entre el navegador y nuestro servidor, tan pronto como la API de voz web (el mensaje de voz) o la API API devuelvan los datos de texto. (el mensaje “AI”).

Ahora, index.js un archivo index.js e instanciamos Express y escuchemos al servidor:

  const express = require ('express');
 aplicación const = express ();

 app.use (express.static (__ dirname + '/ views'));  // html
 app.use (express.static (__ dirname + '/ public'));  // js, css, imágenes

 servidor const = app.listen (5000);
 app.get ('/', (req, res) => {
   res.sendFile ('index.html');
 });

Ahora, ¡trabajemos en nuestra aplicación! En el siguiente paso, integraremos el código de front-end con la API de Web Speech.

Recepción de voz con el enlace de interfaz de reconocimiento de voz

La API Web Speech tiene una interfaz de controlador principal, llamada SpeechRecognition, para recibir la voz del usuario desde un micrófono y entender lo que está diciendo.

CREANDO EL ENLACE DE INTERFAZ DE USUARIO

La interfaz de usuario de esta aplicación es simple: solo un botón para activar el reconocimiento de voz. Configuremos nuestro archivo index.html e script.js nuestro archivo JavaScript front-end ( script.js ) y Socket.IO, que usaremos más adelante para habilitar la comunicación en tiempo real:

  
    ... 
   
     ...

Luego, agregue una interfaz de botón en el cuerpo del HTML:

Para style.css estilo al botón como se ve en la demostración, consulte el archivo style.css en el código fuente.

Capturando Voz con Enlace JavaScript

En script.js , invoque una instancia de SpeechRecognition, la interfaz del controlador de Web Speech API para el reconocimiento de voz:

  const SpeechRecognition = window.SpeechRecognition ||  window.webkitSpeechRecognition;
 reconocimiento de const = nuevo SpeechRecognition ();

Incluimos objetos con prefijo y sin prefijo, porque Chrome actualmente admite la API con propiedades con prefijo.

Además, estamos utilizando parte de la sintaxis ECMAScript6 en este tutorial, porque la sintaxis, incluidas las funciones const y arrow, están disponibles en navegadores que admiten interfaces API Speech, SpeechRecognition y SpeechSynthesis .

Opcionalmente, puede establecer variedades de propiedades para personalizar el reconocimiento de voz:

  Recognition.lang = 'en-US';
 Recognition.interimResults = false;

Luego, capture la referencia DOM para la interfaz de usuario del botón y escuche el evento de clic para iniciar el reconocimiento de voz:

  document.querySelector ('botón'). addEventListener ('clic', () => {
   Recognition.start ();
 });

Una vez que ha comenzado el reconocimiento de voz, use el evento de result para recuperar lo que se dijo como texto:

  Recognition.addEventListener ('resultado', (e) => {
   let last = e.results.length - 1;
   let text = e.results [last] [0] .transcript;

   console.log ('Confianza:' + e.results [0] [0] .confidence);

   // Usaremos el Socket.IO aquí más tarde ...
 });

Esto devolverá un objeto SpeechRecognitionResultList que contiene el resultado, y puede recuperar el texto en la matriz. Además, como puede ver en el ejemplo de código, esto también devolverá la confidence para la transcripción.

Ahora, usemos Socket.IO para pasar el resultado a nuestro código de servidor.

Comunicación en tiempo real con Socket.IO Enlazar

Socket.IO es una biblioteca para aplicaciones web en tiempo real. Permite la comunicación bidireccional en tiempo real entre clientes web y servidores. Lo vamos a usar para pasar el resultado del navegador al código Node.js, y luego pasar la respuesta al navegador.

Quizás se pregunte por qué no estamos usando HTTP o AJAX simples. Puede enviar datos al servidor a través de POST . Sin embargo, estamos utilizando WebSocket a través de Socket.IO porque los sockets son la mejor solución para la comunicación bidireccional, especialmente al enviar un evento desde el servidor al navegador. Con una conexión de socket continua, no necesitaremos volver a cargar el navegador o seguir enviando una solicitud AJAX a intervalos frecuentes.

Instanciar Socket.IO en script.js en script.js parte:

  const socket = io ();

Luego, inserte este código donde está escuchando el evento result de SpeechRecognition :

  socket.emit ('mensaje de chat', texto);

Ahora, regresemos al código Node.js para recibir este texto y usemos AI para responder al usuario.

Obteniendo una respuesta de AI Link

Numerosas plataformas y servicios le permiten integrar una aplicación con un sistema de inteligencia artificial mediante el procesamiento de voz a texto y lenguaje natural, incluidos Watson de IBM, LUIS de Microsoft y Wit.ai. Para construir una interfaz de conversación rápida, usaremos API.AI, ya que proporciona una cuenta de desarrollador gratuita y nos permite configurar un sistema de conversación pequeña rápidamente usando su interfaz web y la biblioteca Node.js.

CONFIGURAR API.AI ENLAZAR

Una vez que haya creado una cuenta, cree un “agente”. Consulte la guía “Primeros pasos”, primer paso.

Luego, en lugar de seguir la ruta de personalización completa mediante la creación de entidades e intentos, primero, simplemente haga clic en el preajuste “Small Talk” del menú de la izquierda, luego, en segundo lugar, active el interruptor para habilitar el servicio.

Personalice su agente de charla pequeña como desee utilizando la interfaz API.AI.

Vaya a la página “Configuración general” haciendo clic en el icono del engranaje junto al nombre de su agente en el menú y obtenga su clave API. Necesitará el “token de acceso de cliente” para usar el SDK de Node.js.

UTILIZANDO EL ENLACE SDK API.AI NODE.JS

¡Conectemos nuestra aplicación Node.js a API.AI usando el SDK Node.js de este último! Regrese a su archivo index.js e inicialice API.AI con su token de acceso:

  const apiai = require ('apiai') (APIAI_TOKEN);

Si solo desea ejecutar el código localmente, puede codificar su clave API aquí. Hay varias formas de configurar las variables de entorno, pero generalmente configuro un archivo .env para incluir las variables. En el código fuente de GitHub, he ocultado mis propias credenciales al incluir el archivo con .gitignore , pero puede mirar el archivo .env-test para ver cómo está configurado.

Ahora estamos usando el servidor Socket.IO para recibir el resultado del navegador.

Una vez que se establece la conexión y se recibe el mensaje, use las API API.AI para recuperar una respuesta al mensaje del usuario:

  io.on ('conexión', función (socket) {
   socket.on ('mensaje de chat', (texto) => {

     // Obtenga una respuesta de API.AI

     let apiaiReq = apiai.textRequest (texto, {
       sessionId: APIAI_SESSION_ID
     });

     apiaiReq.on ('respuesta', (respuesta) => {
       deje aiText = response.result.fulfillment.speech;
       socket.emit ('respuesta bot', aiText);  // ¡Devuelve el resultado al navegador!
     });

     apiaiReq.on ('error', (error) => {
       console.log (error);
     });

     apiaiReq.end ();

   });
 });

Cuando API.AI devuelve el resultado, use Socket.IO’s socket.emit() para enviarlo de vuelta al navegador.

Dando voz a la IA con el enlace de interfaz SpeechSynthesis

¡Volvamos a script.js una vez más para finalizar la aplicación!

Crea una función para generar una voz sintética. Esta vez, estamos utilizando la interfaz del controlador SpeechSynthesis de la API Web Speech.

La función toma una cadena como argumento y permite al navegador pronunciar el texto:

  función synthVoice (texto) {
   const synth = window.speechSynthesis;
   const utterance = new SpeechSynthesisUtterance ();
   utterance.text = text;
   sintetizador de voz (enunciado);
 }

En la función, primero, cree una referencia al punto de entrada API, window.speechSynthesis . Es posible que esta vez no haya una propiedad con prefijo: esta API es más ampliamente compatible que SpeechRecognition , y todos los navegadores que lo admiten ya han eliminado el prefijo para SpeechSysthesis .

Luego, cree una nueva instancia de SpeechSynthesisUtterance () utilizando su constructor y configure el texto que se sintetizará cuando se pronuncie el enunciado. Puede establecer otras propiedades, como la voice para elegir el tipo de voces que el navegador y el sistema operativo deberían admitir.

Finalmente, use SpeechSynthesis.speak() para dejarlo hablar.

Ahora, obtenga la respuesta del servidor utilizando Socket.IO nuevamente. Una vez que se recibe el mensaje, llame a la función.

  socket.on ('respuesta bot', función (texto de respuesta) {
   synthVoice (texto de respuesta);
 });

Tenga en cuenta que el navegador le pedirá permiso para usar el micrófono la primera vez. Al igual que otras API web, como la API de geolocalización y la API de notificación, el navegador nunca accederá a su información confidencial a menos que la otorgue, por lo que su voz no se grabará en secreto sin su conocimiento.

Pronto se aburrirá con la conversación porque la IA es demasiado simple. Sin embargo, API.AI es configurable y entrenable. Lea la documentación API.AI para hacerlo más inteligente.

¡Espero que hayas disfrutado el tutorial y creado un chatbot divertido!

¡Empuje la web hacia el futuro! Enlazar

La interacción de voz ha transformado la forma en que los usuarios controlan la informática y los dispositivos conectados. Ahora con la API Web Speech, la experiencia del usuario también se está transformando en la web. ¡Combinado con IA y aprendizaje profundo, sus aplicaciones web serán más inteligentes y proporcionarán mejores experiencias para los usuarios!

Fuente: – Revista Smashing

Inteligencia Artificial