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 Avatar3D 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.AIhttps://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:

Autor: Patricio Julian Gerpe

Founder peer IAAR | TEDx Speaker

Un comentario en «TUTORIAL: desarrolla tu chatbot en tu web conectado a un AVATAR-3D animado usando herramientas gratuitas»

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *