Escrito por Patricio Julian Gerpe en Planeta Chatbot.
#Chatbots #Avatar3D #Avatar #API.AI #BotLibre #Español
Tabla de contenidos
Introducción
En este tutorial voy a explicar cómo integrar exitosamente un Bot construido en el motor de API.AI con un humano digital de BotLibre, ambos servicios gratuitos en una sencilla página que usa HTML, JS y CSS.
Vamos a necesitar:
Nota: Durante el transcurso del tutorial es recomendable que mantengas abiertas en pestañas separadas de tu navegador estas páginas ya que vas a precisar pasar información de una a la otra.
1- Creando nuestro agente en API.AI
API.AI es un motor de procesamiento de lenguaje natural (NLP) de Google accesible como servicio web cuyas funciones incluyen: Reconocimiento de intenciones, reconocimiento de entidades, servicio de texto a voz, servicio de reconocimiento de voz e integraciones con plataformas de mensajería. Es gratuito.
Para comenzar, vamos a crearnos una cuenta gratuita en API.AI. Necesitamos entrar a https://api.ai/ y hacemos clic en “Sign up for free”.
Una vez cargada la pantalla nos registramos con nuestra cuenta de google:
Le damos habilitación a los permisos dando clic en “access” y luego debemos aceptar terminos de uso.
Finalizado el registro tendremos acceso a la consola de API.AI. Una vez en la consola hacemos clic en “create agent”.
Ahora asignamos nombre, idioma y zona horaria de nuestro agente y le damos a “save”.
Luego, dado que este tutorial se centra en cómo realizar la integración, para nuestro agente vamos a basarnos en un template de los disponibles por API.AI, para ello, vamos a “prebuilt agents” -> “Small talk” -> “Import”.
Al finalizar la carga, dale a “proceed to agent”.
2. Creando nuestra cuenta en BotLibre
BotLibre es un motor de chatbots desarrollado por Paphus Solutions que soporta AIML e incluso tiene su propio lenguaje (SELF), cuenta con varios servicios como avatares 3D animados, live chats, bots, texto a voz y reconocimiento de voz, entre otras funciones.
Su SDK para Javascript es completamente Open-Source y tenés la alternativa de crear chatbots gratuitos con un limite de 500 llamadas API por día.
Para comenzar, vamos a crearnos una cuenta gratuita en Botlibre. Necesitamos entrar a https://www.botlibre.com y hacemos clic en “Sign up”.
Llenamos con nuestros datos y le damos a “Create”:
3. Configurando el ejemplo de HTML/JS para API.AI+Botlibre de IAAR-HUB
Una vez creadas ambas cuentas vamos al repositorio HTML/JS para integrar BotLibre y API.AI: https://github.com/IAARhub/APIAI-BotLibre
En una línea de comandos clonamos este repositorio:
Ahora ingresamos al directorio de nuestro repositorio y vamos a -> javascripts -> ai.js
Abrimos ese archivo con un editor de texto plano y allí debemos escribir nuestros IDs.
Para ello, vamos a https://www.botlibre.com, y le damos a “browse” con la solapa de “Avatars” seleccionada.
Elegimos el que más nos guste, le hacemos clic y le damos a “embed”:
Copiamos el applicationID y el avatarID para luego pegarlos en el código del archivo “ai.js”
Ahora tan solo nos falta reemplazar el accessToken de API.AI, para ello vamos a la ventana de API.AI, le damos al icono de configuración, y copiamos el access token para pegarlo en el código de ai.js
Y listo ! , ahora tan solo haciendo clic en “index.html” podrás ver el resultado.
Nota: Muy pronto postearé una segunda versión en SDK para Node.JS, donde todo el código de IA corre por back-end.
Fuentes y documentación:
- API.AI, documentación oficial. https://api.ai/docs/getting-started/basics
- API.AI, ejemplo HTML-JS https://gist.github.com/Gugic/cfc008599fa9a82eeba4127648009132
- API.AI, referencias de API, método query. https://api.ai/docs/reference/agent/query
- BotLibre, documentación oficial, SDK Javascript. https://www.botlibre.com/jsdoc/index.html
- IAARHUB, Repositorio de ejemplo html-js con integración API.AI + BotLibre https://github.com/IAARhub/APIAI-BotLibre
Autor: Patricio Julian Gerpe
Founder peer IAAR | TEDx Speaker
Muy bueno, queria saber si se puede utilizar otro voice bot ya que API es pago actualmente