Así de la manga me acabo de sacar lo de «Bot Avatar», pero es que estoy de los chatbot clásicos hasta las narices.
Hemos pasado de un chatbot tradicional de máquina de estados con respuestas predecibles, a un chatbot mucho más potente con IA, pero estéticamente nos hemos quedado con lo mismo (bueno, le hemos puesto la barita mágica para indicar que hay IA por detrás 🪄 )
Y en esto estaba yo pensando, cuando me he dicho que un asistente de tienda, o un profesor en un LMS, o incluso un personaje de videojuegos en una tienda de gaming molaría mucho más, ganando el usuario en engagement con la marca y una experiencia más divertida.
Cómo monté el avatar 3D
Cuando hice el master de Negocios en el Metaverso, ya tuve que montar un modelo 3D en una web, por lo que sabía más o menos por donde tirar.
Usaremos algún modelo 3D por ejemplo de la web Sketchfab.com, en este caso he usado este gratuito que me gustóhttps://sketchfab.com/3d-models/bow-trigger-game-character-3df5553dfa5848fb9b1005d15b757d5d del creador zeintendy
Puedes exportarlos en varias extensiones, pero la «más nativa» web es la .glb, y en eso me acordé de Ready PLayer Me, pero no recordaba contraseña y demás, así que nada, nos quedamos con el de Sketchfab.
Para montarlo en la web, tenemos la librería treejs.org 👏🏻 👏🏻 👏🏻 que para 3D web es sencilla de usar y muy extendida en la comunidad.
Cómo monté la parte conversacional
En este caso, como lo interesante era darle una vuelta a la parte estética que se le presenta al usuario, el chat es simplemente llamadas simples a la API de OpenAI, ningún misterio, lo ideal es montar un RAG con la info de la empresa, la tienda, el LMS o lo que querramos, pero eso en este momento ni fu ni fa.
Flujo completo
Así que ya tenemos el flujo completo:
Añadir la opción de audio-audio me pareció una buena opción para conseguir ese efecto de «hablar» con tu asistente, profesor, mascota o como se quiera vender al avatar.
Pero en este caso no me compliqué con servicios TTS como Whisper de OpenAI, en este caso al ser navegador tiré de lo nativo y listo, como POC es suficiente y ahorramos en costes.
Power Ups
Algunos superpoderes a añadir a esta prueba de concepto:
- ElevenLabs para la voz.
- Tu propio modelo 3D, por ejemplo generado con IA con MeshyAI. Imagina que el que habla eres tu o tu equipo, nada más «personal» que el chatbot de una web sea el creador, con su tono y demás – uuuh esto está pidiendo una V2 a gritos 💡
- Añadir más interacciones con el modelo, por ejemplo cuando haya acertado, que lo celebre.
V 0.1
Al modelo en 3D no me podía resistir a así trasteando MeshyAI, tan fácil como añadirle una foto mía, indicar donde están las articulaciones y tras varios intentos de movimientos fallidos al estilo demogordons, me he quedado con el mejor de los peores 😳
Ahora imagina que le enchufas por RAG la info de tu empresa, de tu academia, o tu CV y tienes el About Me más molón del mundo mundial !!
Va video del antes y del después.
¿El plugin?
El código del plugin WordPress para que puedas trastearlo y evolucionarlo lo tienes en la newsletter 👇🏻 👇🏻 👇🏻