Zmiana projektów graficznych w szablony za pomocą głębokiego uczenia

* na podstawie artykułu „Przekształcanie makiet projektowych w kod za pomocą głębokiego uczenia” autorstwa Emila Walnera opublikowanego na blogu FloydHub -> https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/

W ciągu najbliższych kilku lat głębokie uczenie silnie wpłynie na rozwój front-endu, czyli tworzenie makiet HTML/CSS/JS. Powinno to przyspieszyć tworzenie prototypów i ułatwić budowanie oprogramowania. Obecnie największą barierą dla automatyzacji rozwoju front-endu jest moc obliczeniowa. Mimo to, możemy już teraz rozpocząć eksplorację automatyzacji front-endu, wykorzystując algorytmy głębokiego uczenia wraz z syntetyzowanymi danymi treningowymi. Ten artykuł przedstawia opis uczenia sieci neuronowej oraz sposób kodowania podstawowej strony HTML i CSS na podstawie obrazu makiety projektu.

Opis bazuje na tutorialu Emila Walnera opublikowanym na blogu FloydHub. FloydHub to platforma do trenowania głębokiego uczenia. Instalacja i uruchomienie pierwszego modelu zajmuje około 10 minut. Jest to najlepsza opcja do uruchamiania modeli na GPU w chmurze.

Projekt Emila Walnera składa się z trzech kroków:

• Przeniesienie obrazu projektu do wytrenowanej sieci neuronowej
• Konwersja obrazu na tagi HTML za pomocą sieci neuronowej
• Renderowanie

Sieć neuronowa jest budowana w trzech iteracjach.

Na samym początku należy przygotować wersję minimalną, aby zapoznać się z ruchomymi częściami. Następnie tworzymy wersję HTML, która koncentruje się na automatyzacji wszystkich kroków i wyjaśnieniu warstw sieci neuronowej. Wersja końcowa to Bootstrap. Następnie tworzymy model, który potrafi uogólniać i badać warstwę LSTM. Kod można napisać w Pythonie i Kerasie, a framework stworzyć za pomocą TensorFlow. Jeśli nie znasz głębokiego uczenia, wskazane jest, aby najpierw zapoznać się z Pythonem oraz zdobyć praktykę i wiedzę na temat propagacji wstecznej i konwolucyjnych sieci neuronowych.

Początek – trenowanie sieci neuronowej

Celem projektu jest zbudowanie sieci neuronowej, która będzie generować tagi HTML / CSS odpowiadające zrzutom ekranu. Trenując sieć neuronową, dostarczasz jej kilka zrzutów ekranu z pasującym kodem HTML. Sieć uczy się, przewidując wszystkie pasujące tagi HTML jeden po drugim. Kiedy przewiduje następny tag, otrzymuje zrzut ekranu, a także wszystkie prawidłowe tagi do tego momentu. Tworzenie modelu, który przewiduje słowo po słowie, jest najczęstszym podejściem, ale nie jedynym.

Najpierw należy skupić się na uchwyceniu wejścia i wyjścia sieci neuronowej.

Załóżmy, że trenujemy sieć do przewidywania frazy „I can code.” Kiedy otrzyma „I”, przewiduje „I can”. Następnym razem otrzyma „I can” i napisze „code”. Otrzymuje wszystkie poprzednie słowa i musi jedynie przewidzieć następne słowo.
Sieć neuronowa tworzy funkcje z danych. Buduje funkcje, które łączą dane wejściowe z danymi wyjściowymi. Musi tworzyć reprezentacje, aby zrozumieć, co znajduje się na każdym ze zrzutów ekranu oraz składnię HTML, którą przewidziała. To buduje wiedzę do przewidywania następnego znacznika.
Kiedy chcesz użyć wytrenowanego modelu w prawdziwym świecie, jest to podobne do ćwiczenia modelu. Tekst jest generowany jeden po drugim z tym samym zrzutem ekranu za każdym razem. Zamiast dostarczać prawidłowe znaczniki HTML, otrzymuje znaczniki, które sam wygenerował do tej pory. Następnie przewiduje następny znacznik. Prognozowanie zaczyna się od „znacznika startu” i zatrzymuje się, gdy przewidzi „znacznik końca” lub osiągnie maksymalny limit.

Wersja Hello World

Następnie budujemy wersję hello world. Musimy dostarczyć sieci neuronowej zrzut ekranu witryny wyświetlającej „Hello World!”. Następnie uczymy ją generowania znaczników. Może to być znak, słowo lub zdanie. Wersja z pojedynczym znakiem wymaga mniejszego słownika, ale ogranicza sieć neuronową.

Uważaj na:

• Budowanie pierwszej działającej wersji przed zebraniem danych.
• Obsługa danych o rozmiarze terabajtów wymaga dobrego sprzętu lub dużo cierpliwości
• Nic nie ma sensu, zanim nie zrozumiesz danych wejściowych i wyjściowych.

Wersja HTML

Ta wersja automatyzuje wiele kroków z modelu Hello World. Koncentruje się na tworzeniu skalowanej implementacji i przenoszeniu elementów w sieci neuronowej. Ta wersja nie będzie w stanie przewidzieć kodu HTML z losowych stron internetowych, ale nadal jest to świetna konfiguracja do badania dynamiki problemu. Istnieją dwie główne sekcje. Pierwsza to koder. W tym momencie tworzymy funkcje obrazu i poprzednie funkcje tagów. Funkcje to bloki konstrukcyjne tworzone przez sieć w celu połączenia makiet projektowych z tagami. Na końcu kodera przyklejamy funkcje obrazu do każdego słowa w poprzednim tagu. Dekoder następnie łączy funkcję projektu i oznaczenia oraz tworzy następną funkcję znacznika. Funkcja ta jest uruchamiana przez w pełni połączoną sieć neuronową w celu przewidzenia następnego tagu.

Uważaj na:

• Budowanie słownictwa od podstaw jest znacznie łatwiejsze niż zawężanie ogromnego słownictwa.
• Większość bibliotek jest tworzona do analizy dokumentów tekstowych zamiast kodu.
• Możesz wyodrębnić funkcje za pomocą modelu wytrenowanego na Imagenet

”
}
}

Wersja Bootstrap


Ostateczna wersja wykorzystuje zestaw wygenerowanych danych strony bootstrap z artykułu pix2code. Korzystając z tego bootstrapa, możemy połączyć HTML i CSS i zmniejszyć rozmiar słownictwa. Włączamy go, aby wygenerować tag dla zrzutu ekranu, który nie był jeszcze widziany. Analizujemy również, jak budować wiedzę na temat zrzutu ekranu i znacznika. Zamiast trenować go na znaczniku bootstrap, użyto 17 uproszczonych tokenów, które następnie przetłumaczono na HTML i CSS. Zestaw danych zawiera 1500 zrzutów ekranu testowych i 250 obrazów walidacyjnych. Dla każdego zrzutu ekranu przypada średnio 65 tokenów, co daje 96925 przykładów treningowych.

Uważaj na:

• Zrozumienie słabości modeli zamiast testowania losowych modeli.
• Używaj tylko wstępnie wytrenowanych modeli, jeśli są odpowiednie.
• Zaplanuj niewielkie odchylenie, gdy uruchamiasz model na zdalnym serwerze.
• Upewnij się, że rozumiesz funkcje biblioteki.
• Używaj lżejszych modeli podczas eksperymentów.

Przyszłość deep learning

Rozwój front-endu to idealny obszar dla deep learningu. Generowanie danych jest łatwe, a obecne algorytmy deep learning mogą odwzorować większość logiki. W najbliższej przyszłości najważniejszym czynnikiem będzie budowanie skalowalnego sposobu syntezy danych. Następnie krok po kroku można dodawać czcionki, kolory, słowa i animacje.

Jak dotąd większość postępów ma miejsce w szkicach i przekształcaniu ich w aplikacje szablonowe. Za mniej niż dwa lata będziemy mogli narysować aplikację na papierze i mieć gotowy front-end w mniej niż sekundę.