O Zyro agora é Criador de Sites da Hostinger: mais recursos, melhores preços. Crie seu site hoje .
Todos os tópicos
Blog de e-Commerce Design Dicas para Pequenas Empresas Essenciais Ideias de Negócio Inspiração Marketing Novidades do Zyro

Como Prevemos o Comportamento dos Usuários com IA: Mapas de Calor do Zyro

Prever comportamento do usuário com inteligência artificial, Mapa De Calor de IA do Zyro

Lançamos um novo produto no mercado saturado de construtores de sites. Por isso, sabíamos que o Zyro precisava se destacar desde o início.

Claro, nosso produto era sólido, mas ainda precisava de algo especial, que pudesse solucionar ainda mais problemas dos nossos clientes.

Por exemplo, sabemos que muitas pessoas que querem criar um site ou uma loja virtual têm problemas para produzir conteúdo em texto.

Afinal de contas, nem todo mundo leva jeito para a escrita. Por isso criamos nossa ferramenta Escritor de IA usando modelos pré-treinados GPT-2. Nossos usuários adotaram a ferramenta imediatamente, mas sabemos que ainda podemos resolver muitos outros problemas dos nossos clientes, que encontramos durante nossa análise de mercado.

E o problema que mais chamou a atenção da equipe do Zyro era relacionado ao Design:

Como nossos clientes poderiam prever o comportamento dos visitantes de seus sites – sem precisar gastar muito dinheiro para isso? Como eles poderiam saber quais áreas do site recebem mais atenção dos visitantes?

Afinal, saber onde colocar cada tipo de informação, especialmente CTAs, pode ser incrivelmente valioso e aumentar a taxa de conversões.

E que melhor maneira de resolver esse problema do que com inteligência artificial?

A tecnologia

Já que sabíamos qual problema estávamos tentando resolver, a equipe de IA do Zyro começou analisando ferramentas semelhantes e lendo sobre como outras pessoas resolveram situações como essa.

Dezenas de artigos acadêmicos depois, nós conseguimos identificar qual caminho seguir.

Nós decidimos usar redes neurais profundas com arquitetura U-NET e muitos pares de imagens: uma imagem bruta era pareada com uma imagem com máscara de atenção, onde áreas brancas mostravam alta possibilidade de chamar atenção e áreas em preto não chamam nenhuma atenção.

A arquitetura U-NET é assim:

Arquitetura U-Net

E este é um exemplo de um par de imagens :

Imagem analisada
análise de imagem com IA

Existem dois métodos principais para gerar máscaras de atenção.

O primeiro é usar hardware para rastrear o movimento dos olhos.

E o segundo é usar a interface BubbleView, que avalia quais informações as pessoas escolhem examinar através dos cliques que elas dão em uma página.

O BubbleView funciona assim: um usuário vê uma imagem borrada e pode mover o mouse para melhorar a qualidade de uma pequena parte da imagem.

BubbleView exemplo

Como sempre acontece em discussões científicas, é possível citar vantagens dos dois métodos  – tanto do BubbleView quanto do rastreamento via hardware.

Porém, como nosso objetivo era criar uma ferramenta robusta, escolhemos combinar dados colhidos com os dois métodos.

Não reinventamos a roda coletando dados internamente. Ao invés disso, fundimos bancos de dados públicos para criar um único repositório, onde pudéssemos treinar nossas redes neurais.

Nessa altura do campeonato, já tínhamos a base de dados necessária para treinar a rede – e também a arquitetura. Então era a hora de decidir qual plataforma iríamos usar para tirar a ferramenta do papel.

Aqui no Zyro não temos uma regra para decidir qual plataforma usar, já que isso depende muito das circunstâncias de cada situação.

Se existe um modelo pré-treinado, que resolve nosso problema e foi construído usando o Tensorflow, então vamos usar o Tensorflow. E, se o modelo for construído com Caffe2, vamos usar Caffe2.

Uma regra que temos, sim, é “começar pequeno e iterar”. No caso dessa ferramenta, pensamos que o PyTorch seria a melhor opção de plataforma.

Mapa de Calor de IA – a 1ª versão

Para montar a primeira versão da nossa ferramenta, que chamamos de Mapa de Calor de IA, separamos os dados em três subcategorias: treinamento, validação e testes.

Depois, começamos a fazer experimentações com a arquitetura de rede neural.

Apesar de termos escolhido arquitetura U-NET no início, também experimentamos outras profundidades da rede.

Também experimentamos fazer downsampling de arquiteturas, trocando a arquitetura U-NET pura por várias redes pré-treinadas, como VGG16, VGG19 e ResNet.

Como função de custo, usamos uma implementação customizada da função de custo entropia cruzada (binary cross-entropy) combinada com função de custo Dice.

E, rapidamente, criamos um modelo que funcionava muito bem.

Quando apresentávamos uma imagem para nosso modelo, ele criava uma imagem em preto-e-branco, que era convertida para um mapa de calor que media atenção.

Os resultados gerados pela primeira versão do Mapa de Calor de IA apareciam assim:

Mapa de calor, primeira versão

No momento em que a ferramenta ficou disponível para o público, começamos a acompanhar dados sobre como ela estava sendo usada e qual era seu desempenho e nível de precisão.

Os dados que coletamos nos ajudaram a encontrar e melhorar os pontos fracos da ferramenta.

Você deve estar se perguntando: “como esse mapa de calor pode ajudar uma pessoa a criar um site?”

Bem, na imagem acima, é possível ver quais partes do site estão recebendo mais atenção dos visitantes – o texto do cabeçalho, o rosto da mulher e o logo da empresa.

Se nós fossemos os donos desse site e víssemos o mapa de calor, ficaria evidente que o layout deve ser mudado para mover o botão de CTA mais para cima.

Em poucos cliques, as pessoas podem ajustar seus sites para conquistar mais atenção dos visitantes– e, esperamos, conquistar também mais conversões.

Veja como seria uma versão aprimorada daquela mesma página:

Mapa de calor, segunda versão

Mapa de Calor de IA – a 2ª versão

No momento em que a primeira versão do Mapa de Calor de IA foi lançada, nós já começamos a trabalhar na segunda.

Os dados que coletamos estavam mostrando que os usuários já começavam a conhecer e testar a ferramenta.

O número de usuários estava crescendo, mas nós ainda queríamos muito melhorar a precisão do modelo, para que os clientes confiassem na ferramenta ainda mais.

Fizemos algumas pequenas mudanças, que aumentaram a precisão do Mapa de Calor de IA em aproximadamente 5%. Mas a gente sabia que poderia fazer melhor que isso. 😎

E o que mudou o jogo para nós foi a solução CoordConv do Uber.

Basicamente, esse método auxilia a convolução permitindo que os filtros saibam onde estão.

Isso é feito adicionando dois canais ao input: um com coordenadas i e outro com coordenadas j.

Implementando as camadas CoordConv, aumentamos a precisão do nosso próprio modelo em quase 15% 🚀

Implementando o modelo

Para a implantação, precisávamos de uma solução que nos ajudasse a implementar o Mapa de Calor de IA com rapidez.

Mais uma vez seguindo o princípio “começar pequeno e depois iterar”, chegamos à seguinte solução:

Já que estamos usando o Google Cloud, fez sentido usar o Google Buckets para armazenar todos os modelos e bases de dados. Só foi necessária uma única máquina virtual com GPU habilitado para implementar o Mapa de Calor de IA.

Além disso, usamos o Python como nossa principal linguagem de programação, o Starlette como framework de ASGI e o Uvicorn como servidor de ASGI.

Este diagrama mostra como nós implementamos o Mapa de Calor de AI:

Diagrama da impementação do mapa de calor

Essa abordagem funciona bem atualmente.

E, caso a gente precise escalar a ferramenta, podemos usar Grupos de Instâncias Compute Engine com o Google Load Balancing.

O futuro do Mapa de Calor de IA

Assim como todas as ferramentas do Zyro, o Mapa de Calor de IA continua melhorando e nosso trabalho ainda não acabou.

Primeiramente, nós amaríamos aumentar a base de dados que temos usado no treinamento do Mapa de Calor de IA, adicionando não apenas imagens regulares (como fizemos até agora), mas focando especificamente em imagens de sites.

Fazendo isso, a precisão da ferramenta seria turbinada instantaneamente.

Em segundo lugar, também gostaríamos muito de fazer experimentações com a arquitetura e encontrar um modelo ainda melhor.

Mas nós não estamos trabalhando apenas no Mapa de Calor de IA. Temos muitos projetos diferentes sendo construídos e desenvolvidos pelo nosso time de Inteligência Artificial.Os lançamentos mais recentes do Zyro são o gerador de logo com IA (que usa GAN) e o removedor automático de fundo de imagens do Zyro. 🚀

Recomendamos o construtor Zyro para os empreendedores que queiram facilidade para construir sites e lojas virtuais, mas não aceitem abrir mão da qualidade e variedade das ferramentas de otimização.

Precisa de ajuda para criar seu site?

Baixe o guia sobre como criar sites modernos e profissionais com o Zyro.

Concordo em receber comunicações de marketing do Zyro. Cancele sua inscrição a qualquer momento.

Escrito por

Avatar do autor

Jeisy Monteiro

Jeisy é dedicada a pesquisar e escrever sobre como pequenos e médios negócios podem crescer na internet de forma sustentável. Ela publica sobre criação de sites, empreendedorismo digital, tecnologia e e-commerce no blog do Zyro. No tempo livre, coleciona cassettes.

Faça parte da conversa

Seu email não será publicado. É obrigatório preencher todos os campos.

Salvar seu nome e email neste navegador.

Precisa de ajuda para criar seu site?

Baixe o guia sobre como criar sites modernos e profissionais com o Zyro.

Concordo em receber comunicações de marketing do Zyro. Cancele sua inscrição a qualquer momento.