Tworzenie projektów o niskim poziomie szczegółowości za pomocą rozmowy z komputerem

Marzyliśmy...#

TeleportHQ powstało w 2016 roku z misją uczynienia technologii bardziej ludzką. Stworzyliśmy międzynarodowy zespół projektantów, programistów i naukowców zajmujących się danymi, których celem było tworzenie narzędzi zdolnych wykorzystywać zgromadzoną przez ludzi wiedzę, a tym samym coraz bardziej automatyzować proces budowania interfejsów użytkownika.

Jednym z pomysłów na naszej początkowej liście życzeń badawczych było generowanie stron internetowych po prostu przez rozmowę z komputerem. Niedawne przełomy w dziedzinie sztucznej inteligencji po raz pierwszy sprawiły, że generowanie interfejsów użytkownika stało się realne.

Aby stworzyć skuteczne rozwiązanie oparte na uczeniu maszynowym, potrzebowaliśmy dwóch podstawowych elementów: dużej ilości danych oraz narzędzia „tłumaczącego” komunikację człowieka z komputerem, które rozpoznawałoby język naturalny i przekształcało go w języki kodu komputerowego. Znalezienie odpowiedniego narzędzia do tłumaczenia okazało się szczególnie trudne. Próbowaliśmy korzystać z narzędzi takich jak IBM Watson czy Google Dialogflow, ale nie sprawdziły się w naszym przypadku.

W tym samym czasie nasz zespół inżynierów tworzył Playground— nową wizualną platformę do tworzenia interfejsów użytkownika. Technologia Playground ostatecznie umożliwiła programistom, projektantom i twórcom produktów współpracę nad projektem oraz natychmiastowy podgląd w czasie rzeczywistym kodu powstającego w wyniku ich wspólnej pracy.

Playground szybko zyskało popularność, rozwijając się i gromadząc coraz większą społeczność użytkowników. Platforma bazuje na języku UIDL(User Interface Development Language), pośrednim języku reprezentacji TeleportHQ, oraz zestawie generatorów kodu o otwartym kodzie źródłowym.

Zobacz, jak współpracują, w naszym REPL, gdzie możesz edytować UIDL i obserwować kod generowany na bieżąco w różnych wariantach JavaScriptu.

Tworzenie Playground przyniosło dodatkową korzyść: generator UIDL i generatory kodu open source zapewniły kluczowy element infrastruktury, który uwolnił potencjał naszego początkowego nurtu badań. Dla specjalisty ds. danych UIDL jako język dziedzinowy był znacznie łatwiejszy w użyciu niż czysty kod, który może przestać działać przy najmniejszym błędzie składni i wymaga interwencji człowieka, aby go naprawić.

Dzięki tej korzyści TeleportHQ poczyniło znaczące postępy w dążeniu do generowania stron internetowych za pomocą rozmowy z komputerem. Oto film przedstawiający nasze najnowsze osiągnięcia:

https://www.youtube.com/embed/fq1RPJUI_GM

Jesteśmy o krok od urzeczywistnienia naszego marzenia i chcielibyśmy podzielić się niektórymi kluczowymi etapami naszych badań w poniższym wpisie na blogu.

Wyznaczanie celu: określenie wyniku modelu#

Pierwszym krokiem było określenie wyniku, na podstawie którego będziemy trenować model. Aby uprościć problem, wybraliśmy podejście, które nazywamy „semantycznym”: zbiór ramek ograniczających wraz z ich typami i bezwzględnym położeniem. Ten format nazwaliśmy „projektem o niskim poziomie szczegółowości”, ponieważ stanowi on podzbiór tego, co zwykle określa się mianem projektu o wysokim poziomie szczegółowości (który obejmuje również kolory, kształty, kroje pisma i inne atrybuty wizualne). Można powiedzieć, że nasz projekt o niskim poziomie szczegółowości ma się do projektu o wysokim poziomie szczegółowości tak, jak struktura zwykłych tagów HTML do strony internetowej zawierającej wszystkie teksty i właściwości CSS.

Przygotowanie danych: tworzenie zbioru treningowego#

Warto wspomnieć, że równolegle z pracami nad Playground zaczęliśmy gromadzić i porządkować miliony stron internetowych, aby zapewnić sobie stały dostęp do starannie przygotowanych danych, które wykorzystywaliśmy w naszym projekcie przekształcania makiet szkieletowych w kod .

Aby zarządzać tą rozrastającą się bazą danych i uzyskiwać do niej dostęp, stworzyliśmy własny parser internetowy, który potrafi przetworzyć do 6000 stron na minutę. Więcej na ten temat można przeczytać w tym wpisie na blogu.

Postanowiliśmy generować strony internetowe iteracyjnie, zaczynając od paska nawigacyjnego i kończąc na stopce. W tym celu wyodrębniliśmy ze zbioru danych obejmującego nasze główne strony internetowe podzbiór 850 000 sekcji reprezentujących różne semantyczne części stron. Zobacz poniższy przykład:

Dane i zrzut ekranu sekcji głównej o niskiej wierności

Pierwsze próby: autoenkoder sekwencja-do-sekwencji#

Pod koniec 2019 roku rozpoczęliśmy od prostego, nienadzorowanego podejścia opartego na autoenkoderze sekwencja-do-sekwencji. W środku tej architektury znajduje się wąskie gardło, w którym sekcje są kodowane do jednowymiarowej tablicy. Takie wąskie gardło zwykle wykorzystuje się do generowania nowych danych, dlatego uznaliśmy, że można na tej podstawie tworzyć nowe projekty, losowo próbkowując jego wartości.

Niestety, nie zadziałało to zgodnie z oczekiwaniami. System nauczył się kodować i dekodować dane, ale zupełnie nie radził sobie z nowymi próbkami ani losowym kodowaniem.

Wypróbowaliśmy kilka innych podejść i architektur, w tym autoenkodery wariacyjne, GAN-y i grafowe sieci neuronowe, ale po 9 miesiącach prób i błędów wyniki nadal nie nadawały się do wykorzystania.

Architektura autoenkodera

Punkt zwrotny: pojawienie się technologii GPT-3#

Na początku tego roku OpenAI udostępniło nową wersję modelu Generative Pretrained Transformer (GPT-3). System ten wyznacza nowy standard, osiągając najnowocześniejsze wyniki w wielu testach porównawczych, takich jak odpowiadanie na pytania i tłumaczenie maszynowe.

GPT-3 generuje sekwencje dyskretnych wartości na podstawie podanego kontekstu. Korzystając z tego kontekstu, model uzupełnia sekwencję, generując kolejne tokeny.

Ponieważ model wytrenowano na całym internecie, osiąga on znakomite wyniki w rozwiązywaniu różnych problemów — od filozofii po medycynę. Szczególnie przykuł nas jednak jeden rodzaj zastosowania: generowanie kodu.

Szczególnie wyróżniały się dwa przykłady. W pierwszym GPT-3 wykorzystano do generowania poleceń bash. W drugim użyto go do generowania kodu JSX. Te dwa przykłady wywołały entuzjastyczną reakcję naszego zespołu, ponieważ model ten najwyraźniej z powodzeniem przyswoił wszystkie dane z serwisu Stack Overflow. Był to niepodważalny dowód na to, że technologia GPT może umożliwić rozmowę z maszyną i generowanie interfejsów użytkownika.

GPT-3 generuje polecenia bash na podstawie języka naturalnego

Wiatr w żagle: wykorzystanie potencjału GPT#

Zaintrygowani potencjałem tej technologii, poprosiliśmy w TeleportHQ o wczesny dostęp do GPT-3, ale nasza prośba nie została rozpatrzona pozytywnie. Mimo to nadal byliśmy przekonani, że rozwiązaniem naszego problemu z uczeniem maszynowym jest architektura GPT. Skłoniło nas to do stworzenia własnej wersji. Po przeprowadzeniu badań zdecydowaliśmy się skorzystać z minGPT, lekkiej implementacji GPT.

Obraz wart tysiąca słów: GPT kontra minGPT

Dzięki dostępnym danym i prostocie minGPT mogliśmy bardzo szybko przekazać nasze dane sieci. Ku naszemu największemu zaskoczeniu — po prostu — zadziałało.

W tym pierwszym eksperymencie model nauczył się generować sekcje naszych stron znak po znaku, uwzględniając głębokość i współrzędne każdego elementu.

Korzystając z kontekstu „DIV 0 0.5 0.5 1.0 1.0”, model potrafił automatycznie uzupełnić dane sekcji. Następnie można było odtworzyć następujące drzewo:

Pierwsza sekcja wygenerowana za pomocą GPT-UI na podstawie kontekstu „DIV 0 0.5 0.5 1.0 1.0”

Choć wyniki były obiecujące, problem nie został jeszcze rozwiązany: kontekstu nie można było jeszcze zdefiniować jako intencji użytkownika. Udoskonaliliśmy więc model, umieszczając na początku sekwencji treść, która miała zostać wygenerowana (np. liczbę obrazów, akapitów lub elementów div).

I znów: po prostu zadziałało.

Poniżej widzimy kilka wybranych sekcji wygenerowanych przez ten ulepszony model. We wszystkich przypadkach nie tylko widoki drzewa i ramki ograniczające były spójne, ale wygenerowane sekcje zawierały również żądaną treść.

Przykład nowego kontekstu wygląda tak: „IMG 2 P 2 H1 2 $”. Wystarczyło umieścić go przed samą sekcją, aby model mógł rozpocząć generowanie po pierwszym znaku „$” i automatycznie wygenerować całą sekcję.

Trzy sekcje wygenerowane na wczesnym etapie naszych eksperymentów

Poszliśmy o krok dalej, dostarczając dodatkowe informacje na początku sekwencji, aby wzbogacić prompt. Dzięki temu system mógł nauczyć się generować sekcje o określonej wysokości, układzie i funkcji.

Nasza pierwsza działająca architektura

Potrzebowaliśmy jeszcze jednego elementu: interfejsu, który umożliwiłby człowiekowi komunikację z komputerem w języku naturalnym. Stworzyliśmy następujące rozwiązanie, w którym intencję użytkownika określa się za pomocą formularza.

Pierwszy formularz służący do interakcji z modelem

Po utworzeniu formularza dodaliśmy programową nakładkę, która przekształcała polecenia w języku naturalnym (np. „Hej, TeleportHQ, utwórz mi sekcję typu navbar z 1 obrazem i 4 linkami o wysokości 65 pikseli”) w konteksty (np. „NAVBAR $ h 65 $ IMAGE 1 LINK 4 $”).

Poniżej można zobaczyć demonstrację naszego obecnego interfejsu użytkownika. Pozwala on użytkownikowi wchodzić w interakcję z modelem i utworzyć stronę internetową w zaledwie kilka minut.

Prototyp GPT-UI

Nowe horyzonty: ku 2021 rokowi…#

Cztery lata temu TeleportHQ było jednym z nielicznych zespołów, które wierzyły, że tworzenie interfejsów użytkownika za pomocą języka naturalnego jest możliwe. Od tamtej pory nieustannie budujemy fundamenty na drodze do płynnej komunikacji człowieka z maszyną. Nasze osiągnięcia przybliżają nas do pierwotnej misji: pełnej automatyzacji procesu tworzenia interfejsów użytkownika.

Dziś mamy w pełni działający prototyp modelu GPT-UI. Zawiera on 6 milionów parametrów, w przeciwieństwie do gigantycznego GPT-3, który ma ich 175 miliardów.

GPT-3 słynie z niezwykłej mocy, ponieważ potrafi wykonywać praktycznie każde zadanie w języku angielskim. Nasz model, dzięki mniejszym i bardziej zwinnym rozmiarom, oferuje jednak większą specjalizację i szybszą reakcję.

Z czasem, dzięki odpowiednim danym i pozostałym elementom architektury Teleport, nasz GPT-UI może dorównać GPT-3 w tworzeniu interfejsów użytkownika na podstawie języka naturalnego. Dodatkową zaletą będzie pełna możliwość dostosowania modelu przy wykorzystaniu zaledwie ułamka zasobów potrzebnych do jego uruchomienia.

TeleportHQ już wykorzystuje to samo podejście do tworzenia nowych modeli wyspecjalizowanych w generowaniu konkretnych komponentów i kompletnych projektów mobilnych.

Jesteśmy pełni entuzjazmu co do jego potencjału i przekonani, że w niedalekiej przyszłości będziemy w stanie generować kompletne strony internetowe o wysokiej wierności na podstawie jednego polecenia.

Jeśli chcesz zamówić prywatną prezentację, zaproponować współpracę lub przekazać nam opinię, skontaktuj się z nami pod adresem hello@teleporthq.io .

💡

Jeśli spodobał Ci się ten artykuł, mogą Cię również zainteresować nasze wcześniejsze wyniki dotyczące wykorzystania uczenia maszynowego do automatycznego przekształcania makiet szkieletowych w kod.

https://www.youtube.com/embed/ZD8Cnzc6KlY