Solo por tiempo limitado: Ahorra hasta 87 %

+ Dominio GRATIS por 1 año

La oferta termina en:

05 :

06 :

45 :

15

blog Zyro

Todos los temas
Blog eCommerce Consejos para pequeñas empresas Diseño Esenciales web Ideas de negocio Inspiración Marketing Noticias de Zyro

Predecir el comportamiento del usuario con IA: Mapas de Calor de Zyro

mapas de calor de Zyro

Al lanzar un nuevo producto en un nicho tan saturado como la creación de sitios web, sabíamos que Zyro necesitaba destacarse desde el principio.

Nuestro producto era sólido, claro, pero necesitábamos ese algo especial para resolver aun más los problemas de nuestros clientes. 

Por ejemplo, sabemos que muchas personas que desean crear un sitio web o establecer una tienda en línea tienen dificultades para redactar un texto. 

No todo el mundo es escritor, así que creamos el Escritor con IA usando modelos pre-entrenados GPT-2. Es una herramienta que nuestros clientes adoptaron de inmediato, pero estábamos seguros de que podríamos resolver aun más problemas de los que encontramos en el análisis de mercado. 

El tema con el mayor foco de atención para todo el equipo de Zyro fue el relacionado con el diseño: 

¿Cómo podrían nuestros clientes predecir el comportamiento de los visitantes de sus sitios web sin gastar mucho tiempo o dinero? ¿Cómo pueden saber en qué se concentrará la atención al visitar un sitio?

Después de todo, saber dónde colocar la información, especialmente las llamadas a la acción, podría ser increíblemente valioso y aumentar las tasas de conversión. 

¿Y qué mejor manera de resolver este problema que con la IA? Las herramientas de IA de Zyro buscan hacer todo más fácil, sobre todo cuando se trata de la creación de tu sitio web.

La tecnología

Como sabíamos en qué problema nos estábamos enfocando, el equipo de inteligencia artificial de Zyro comenzó analizando herramientas similares y leyendo sobre cómo otros estaban resolviendo problemas parecidos.

Decenas de artículos académicos más tarde, identificamos un camino a seguir. 

Íbamos a usar redes neuronales profundas con arquitectura U-NET y un montón de pares de imágenes: una imagen sin procesar y una imagen de máscara de atención, donde las áreas blancas mostrarían un alto interés potencial y las áreas negras no mostrarían interés.

Así es como luce la arquitectura U-NET:

Y aquí hay un par de imágenes de muestra:

Cuando se trata de máscaras de atención, existen dos métodos principales para generarlas.

Primero, podríamos usar hardware para rastrear los movimientos oculares reales.

O bien, podríamos optar por BubbleView, que usa clics del mouse para medir qué información la gente elige conscientemente examinar.

El funcionamiento de BubbleView es el siguiente: un usuario ve una imagen borrosa y puede mover el mouse para enfocar una pequeña parte de la imagen.

Como ocurre con todo lo relacionado con la ciencia, existen argumentos sólidos para ambos métodos: basado en hardware y BubbleView. 

Sin embargo, queríamos mantener nuestra función sólida, por lo que combinamos los datos de estos dos métodos.

Usamos conjuntos de datos disponibles abiertamente y los fusionamos en uno solo en el que pudimos entrenar nuestras redes neuronales.

En este punto, teníamos el conjunto de datos necesario para el entrenamiento de redes neuronales y también la arquitectura para ello. Era el momento de decidir un marco que pudiéramos utilizar para hacer realidad esta función. 

Aquí en Zyro no tenemos una regla estricta sobre qué marco debemos usar, ya que depende totalmente de las circunstancias.

Si hay un modelo previamente entrenado que resuelve nuestro problema y está construido con Tensorflow, entonces usaremos Tensorflow. Y si fue construido con Caffe2, entonces usaremos Caffe2. 

Para lo que sí tenemos una regla es para “empezar poco a poco e iterar” y, en el caso de esta característica, pensamos que PyTorch sería el mejor marco para usar.

Mapa de calor con IA – Versión 1

Para armar la primera versión de nuestra herramienta, que habíamos calificado como Mapa de Calor con IA, dividimos los datos en subconjuntos de entrenamiento, validación y prueba. 

Luego, comenzamos a experimentar con la arquitectura de la red neuronal. 

Aunque elegimos la arquitectura U-NET para empezar, también experimentamos con diferentes profundidades de la red.

También experimentamos con arquitecturas de submuestreo, reemplazando la arquitectura U-NET pura con varias redes previamente entrenadas como VGG16, VGG19 y ResNet.

Como función de pérdida, utilizamos una implementación personalizada de Dice combinada con la pérdida de entropía cruzada binaria.

Y, bastante rápido, tuvimos un modelo que funcionó muy bien. 

Dada una imagen, nuestro modelo muestra una imagen en blanco y negro, que convertimos en un  mapa de calor de atención.

Así es como se veían los primeros resultados del mapa de calor:

Tan pronto como la función estuvo activa, comenzamos a rastrear nuestros datos de usuario, viendo cómo se usaba la función, cómo funcionaba y qué tan precisa era.

Los datos que recopilamos nos permitieron encontrar puntos débiles y mejorarlos.

Quizás estés pensando en cómo puede ayudar este mapa de calor a diseñar un sitio web.

Bueno, en la imagen de arriba se puede ver qué partes de un sitio web están recibiendo más atención: el texto del encabezado, el rostro de la mujer y el logotipo de la empresa. 

Si fuéramos los propietarios de un sitio web de este tipo, este mapa de calor nos diría claramente que debemos cambiar el diseño de la página web y mover el botón de llamada a la acción hacia arriba. 

Con solo unos pocos clics las personas podrían cambiar su página web y obtener un resultado mucho mejor en lo que respecta a la atención del usuario y, con suerte, la tasa de conversión.

Aquí está la versión mejorada de la misma página web:

Mapa de calor con IA – Versión 2

Cuando se envió la primera versión del Mapa de Calor, comenzamos a trabajar en una segunda iteración de inmediato. 

Los datos que estábamos recopilando nos mostraron que los usuarios se estaban familiarizando con la función y comenzaban a probarla.

Los números de uso estaban aumentando, pero realmente queríamos mejorar la precisión de nuestro modelo para que los usuarios confiaran aun más en la función.

Hicimos algunos pequeños cambios, que mejoraron la precisión del Mapa de Calor con IA en aproximadamente un 5%, pero sabíamos que podíamos hacerlo mejor. 😎 

Y lo que cambió las reglas del juego para nosotros fue la solución CoordConv de Uber.

Básicamente, este método ayuda a la convolución al permitir que los filtros sepan dónde están. 

Lo hacen agregando dos canales a la entrada, uno con coordenadas i y otro con coordenadas j.

Al implementar las capas de CoordConv, aumentamos la precisión de nuestro propio modelo en casi un  15% 🚀

El modelo al servidor

Cuando comenzamos a pensar en la implementación, necesitábamos una solución que nos permitiera implementar el Mapa de Calor con IA rápidamente.

Una vez más, al ceñirnos al principio de “empezar de a poco e iterar”, se nos ocurrió la siguiente solución: 

Debido a que usamos Google Cloud, tenía sentido usar Google Buckets para almacenar todos nuestros modelos y conjuntos de datos. Se necesitó una sola máquina virtual con GPU habilitada para implementar el mapa de calor.

Además, usamos Python como nuestro principal lenguaje de programación, Starlette como marco ASGI y Uvicorn como servidor ASGI. 

Aquí hay un diagrama completo de cómo pusimos el Mapa de Calor con IA en el servidor:

Este enfoque actualmente funciona bien. 

Y en caso de que alguna vez necesitemos ampliarlo, podemos usar Grupos de instancias de Compute Engine con Google Load Balancing.

El futuro del Mapa de Calor con IA

Al igual que con todas las funciones de Zyro, el trabajo continúa se mejora cada día

En primer lugar, nos encantaría aumentar el conjunto de datos que hemos utilizado para el entrenamiento, agregando no solo imágenes regulares (como lo hicimos hasta ahora), sino centrándonos específicamente en las imágenes del sitio web. 

Esto daría un impulso inmediato a la precisión de la función. 

En segundo lugar, nos encantaría experimentar más con la arquitectura del modelo y encontrar una aun mejor.

Pero no estamos trabajando únicamente en el Mapa de Calor. Tenemos muchos proyectos de IA diferentes en el portafolio del equipo.

Los más recientemente lanzados son nuestro generador de logotipos con IA (usando GAN) y las funciones de eliminación automática de fondo. 🚀

Escrito por

Avatar del autor

Luis Jordán

Luis es un profesional del eCommerce y de los constructores de sitios web que ama el marketing digital. Se dedica a ayudar a las empresas a incrementar su presencia en línea a través de las prácticas del marketing. Cuando no está sentado frente al computador, seguramente está cocinando algún platillo o entrenando.

Unirse a la conversación

Tu dirección de correo electrónico no será publicada. Todos los campos son obligatorios.

Artículos relacionados

Ver todo