Od Zyro do kreatora stron www Hostinger — nasza ewolucja oznacza nowe funkcje i świetne promocje! Zgarnij ofertę TERAZ .
Wszystkie tematy
Design e-Commerce Inspiracje Marketing Nowości Zyro Podstawy tworzenia stron Pomysły na biznes Porady Zyro Wskazówki dla małych firm

Jak przewidujemy zachowania użytkowników za pomocą AI: Heatmapy Zyro

Jak przewidzieć zachowania klientów. Heatmapa AI Zyro

Wprowadzając na rynek nowy produkt w wysoce nasyconej niszy, jaką jest tworzenie stron internetowych, wiedzieliśmy, że Zyro musi się wyróżniać od samego początku.

Z pewnością nasz produkt był świetny, ale potrzebowaliśmy czegoś wyjątkowego, czegoś, co będzie rozwiązywało jeszcze więcej problemów naszych klientów.

Wiemy na przykład, że wiele osób, które chcą stworzyć stronę internetową lub witrynę e-commerce, boryka się z problemem pisania tekstów.

W końcu nie każdy jest pisarzem. Stworzyliśmy więc narzędzie AI Writer, wykorzystując wcześniej wyuczone modele GPT-2. Jest to narzędzie, które nasi klienci przyjęli od razu, ale byliśmy pewni, że możemy rozwiązywać jeszcze więcej ich problemów, z którymi zetknęliśmy się podczas analizy rynku.

Jedna z kwestii, która najbardziej zapadła w pamięć całemu zespołowi Zyro, dotyczyła projektowania:

Jak nasi klienci mogliby przewidzieć zachowania osób odwiedzających ich strony internetowe – bez konieczności ponoszenia dużych nakładów czasowych i finansowych? Jak mogliby przewidzieć, na czym skupi się uwaga użytkownika podczas odwiedzania strony?

W końcu wiedza o tym, w którym miejscu umieścić poszczególne informacje, a zwłaszcza przyciski CTA, może być niezwykle cenna i zwiększyć współczynnik konwersji.

A jaki jest lepszy sposób na rozwiązanie tego problemu niż sztuczna inteligencja?

Technologia

Ponieważ wiedzieliśmy, na jakim problemie się skupiamy, zespół AI Zyro rozpoczął pracę od analizy podobnych narzędzi i zapoznania się z tym, jak inni rozwiązują podobne problemy.

Po zapoznaniu się z dziesiątkami prac naukowych udało nam się znaleźć rozwiązanie.

Zamierzaliśmy użyć głębokich sieci neuronowych z architekturą U-NET oraz grup par obrazów: surowego obrazu i maski uwagi, gdzie białe obszary wskazywałyby na duże potencjalne zainteresowanie, a czarne na brak zainteresowania.

Oto jak wygląda architektura U-NET:

A oto parę przykładowych zdjęć:

przykładowy obraz
Mapa uwagi - obraz

Jeśli chodzi o maski uwagi, wyróżnić można dwie główne metody, które służą do ich generowania.

Pierwszą możliwością jest wykorzystanie sprzętu do śledzenia prawdziwych ruchów gałek ocznych.

Możemy też zdecydować się na BubbleView, który wykorzystuje kliknięcia myszką, aby zmierzyć, które informacje ludzie świadomie decydują się sprawdzić.

Zasada działania BubbleView jest następująca: użytkownik widzi zamazany obraz i może poruszać myszką, aby odsłonić niewielką część obrazu.

BubbleView

Jak to bywa w nauce, obie metody – sprzętowa i BubbleView – oparte są na solidnych argumentach.

Jednakże chcąc zapewnić niezawodność naszej funkcji, postanowiliśmy połączyć dane z tych dwóch metod.

Zbierając dane samodzielnie, nie odkryliśmy ponownie koła. Zamiast tego, wykorzystaliśmy ogólnie dostępne zbiory danych i połączyliśmy je w jeden, który mógł posłużyć do wytrenowania naszych sieci neuronowych.

W tym momencie mieliśmy już zestaw danych niezbędnych do uczenia sieci neuronowych, a także ich architekturę. Nadszedł czas, aby zdecydować się na framework, którego moglibyśmy użyć, aby wprowadzić tę funkcjonalność w życie.

W Zyro nie stosujemy sztywnych reguł dotyczących stosowanych frameworków, ponieważ wszystko zależy od specyfiki sytuacji.

Jeśli istnieje wstępnie wyuczony model, który rozwiązuje nasz problem i jest zbudowany przy użyciu Tensorflow, to użyjemy Tensorflow. A jeśli został zbudowany przy użyciu Caffe2, to wykorzystamy Caffe2.

Kierujemy się zasadą “zacznij od małych kroków i ulepszaj”, a w przypadku tej funkcjonalności uznaliśmy, że PyTorch będzie najlepszym narzędziem do wykorzystania.

AI Heatmap – wersja 1

Aby stworzyć pierwszą wersję naszego narzędzia, które nazwaliśmy AI Heatmap, podzieliliśmy dane na podzbiory do nauki, walidacji i testów.

Następnie zaczęliśmy eksperymentować z architekturą sieci neuronowej.

Chociaż na początek wybraliśmy architekturę U-NET, eksperymentowaliśmy również z różnymi głębokościami sieci.

Eksperymentowaliśmy również z architekturą downsamplingu, zastępując czystą architekturę U-NET różnymi wstępnie wyuczonymi sieciami, takimi jak VGG16, VGG19 i ResNet.

Jako funkcję straty zastosowaliśmy własną implementację straty Dice’a połączoną z binarną stratą entropii krzyżowej.

Dość szybko stworzyliśmy model, który naprawdę dobrze funkcjonował.

Biorąc pod uwagę obraz, nasz model generuje czarno-biały obraz, który przekształcamy w heatmapę atencji.

Oto jak prezentowały się pierwsze rezultaty AI Heatmap:

Heatmapa AI

Jak tylko funkcja została uruchomiona, zaczęliśmy śledzić dane od naszych użytkowników, sprawdzając, jak funkcja jest używana, jak działa i jak precyzyjna jest.

Zebrane dane pozwoliły nam zlokalizować słabe punkty i je poprawić.

Być może zastanawiasz się, w jaki sposób ta mapa cieplna może pomóc w projektowaniu strony internetowej?

Na powyższym obrazku widać, które części strony internetowej przyciągają najwięcej uwagi – nagłówek, twarz kobiety oraz logo firmy.

Gdybyśmy byli właścicielami takiej strony, ta heatmapa uwagi wyraźnie podpowiedziałaby nam, żeby zmienić układ strony i przesunąć przycisk call-to-action wyżej.

Zaledwie kilka kliknięć dzieli ludzi od zmiany strony internetowej i uzyskania znacznie lepszych wyników, jeśli chodzi o uwagę użytkowników i, miejmy nadzieję, współczynnik konwersji.

Oto poprawiona wersja tej samej strony:

Heatmapa - mapa cieplna

AI Heatmap – wersja 2

Kiedy pierwsza wersja AI Heatmap została udostępniona, od razu zaczęliśmy pracować nad jej drugą wersją.

Dane, które zbieraliśmy pokazywały nam, że użytkownicy coraz bardziej zapoznawali się z tą funkcją i zaczynali ją testować.

Liczba użytkowników rosła, jednak bardzo zależało nam na poprawieniu precyzji naszego modelu, aby użytkownicy mogli jeszcze bardziej ufać tej funkcji.

Wprowadziliśmy kilka małych zmian, które poprawiły dokładność mapy AI Heatmap o około 5%, ale wiedzieliśmy, że możemy zrobić to jeszcze lepiej. 😎

Zmianę sytuacji umożliwiło nam rozwiązanie CoordConv autorstwa Ubera.

Zasadniczo, metoda ta wspomaga konwolucję poprzez informowanie filtrów o tym, gdzie się znajdują.

Dokonują tego poprzez dodanie do danych wejściowych dwóch kanałów – jednego o współrzędnych i oraz drugiego o współrzędnych j.

Dzięki implementacji warstw CoordConv zwiększyliśmy dokładność naszego własnego modelu o blisko 15% 🚀.

Obsługa modelu

Myśląc o implementacji, potrzebowaliśmy rozwiązania, które pozwoliłoby nam szybko wdrożyć AI Heatmap.

Ponownie, trzymając się zasady “zacznij od małych kroków i ulepszaj”, wymyśliliśmy następujące rozwiązanie:

Ponieważ korzystamy z Google Cloud, sensowne było użycie Google Buckets do przechowywania wszystkich naszych modeli i zbiorów danych. Do wdrożenia AI Heatmap wystarczyła jedna maszyna wirtualna z obsługą GPU.

Używamy również Pythona jako głównego języka programowania, Starlette jako frameworka ASGI oraz Uvicorn jako serwera ASGI.

Pełen schemat tego, jak obsługiwaliśmy AI Heatmap, znajduje się tutaj:

Architektura

To rozwiązanie aktualnie działa bez zarzutu.

A na wypadek, gdybyśmy kiedykolwiek potrzebowali go rozbudować, możemy wykorzystać Compute Engine Instance Groups z Google Load Balancing.

Przyszłość AI Heatmap

Jak w przypadku każdej funkcji Zyro, prace nad AI Heatmap są nieustannie kontynuowane, aby dalej ją ulepszać.

Przede wszystkim, chcielibyśmy zwiększyć zbiór danych, który wykorzystaliśmy do nauki AI Heatmap, dodając nie tylko zwykłe obrazy (jak robiliśmy to do tej pory), ale szczególnie skupiając się na obrazach stron internetowych.

To spowodowałoby natychmiastowe zwiększenie dokładności tej funkcji.

Ponadto, chcielibyśmy dalej eksperymentować z architekturą modelu i znaleźć jeszcze lepszą.

Ale nie pracujemy wyłącznie nad AI Heatmap. Mamy wiele różnych projektów z zakresu sztucznej inteligencji, które są realizowane przez zespół AI.

Ostatnio w Zyro wprowadziliśmy kreator logo AI (wykorzystujący GAN) oraz funkcje pozwalającą na automatyczne usuwanie tła. 🚀

Potrzebujesz pomocy w tworzeniu Twojej witryny?

Pobierz nasz przewodnik dotyczący tworzenia nowoczesnej i profesjonalnej strony www z Zyro.

Wyrażam zgodę na otrzymywanie informacji marketingowych od Zyro. Możesz zrezygnować z subskrypcji w dowolnym momencie.

Napisane przez

Awatar autora

Katarzyna

Katarzyna jest specjalistką w dziedzinie content marketingu oraz miłośniczką nowoczesnych technologii. W szczególności interesuje się zagadnieniami z zakresu UX oraz budowania marek. W pracy, jak i po pracy, zawsze towarzyszy jej troje czworonożnych przyjaciół, a w wolnym czasie zanurza się w sekrety psychologii.

Dołącz do rozmowy

Twój adres e-mail nie zostanie opublikowany. Wszystkie pola są wymagane.

Zapisz swoje imię i nazwisko oraz adres e-mail w tej przeglądarce.

Potrzebujesz pomocy w tworzeniu Twojej witryny?

Pobierz nasz przewodnik dotyczący tworzenia nowoczesnej i profesjonalnej strony www z Zyro.

Wyrażam zgodę na otrzymywanie informacji marketingowych od Zyro. Możesz zrezygnować z subskrypcji w dowolnym momencie.