pix2code: верстальщики не нужны? Часть 1

Датский стартап Uizard бросили вызов привычным устоям web’a. Не, не так. Специалисты машинного обучения вытеснят верстальщиков, заменив их бездушными роботами. Хм… все равно не точно. В общем, как не крути, случилось – жалкие попытки (что-то вроде 77%) заменить веб обезьяну на машину начались. Сегодня мы рассмотрим что такое pix2code, действительно ли она работает и сможет ли рядовой гражданин воспользоваться благами github репозитория?

Что такое pix2code

Разработчики pix2code вполне себе здраво посчитали верстку веб или мобильного приложения – рутинной задачей, с которой вполне может справиться любой дебил junior developer. А раз с этим может справиться вчерашний студент гуманитарного ВУЗа, то почему не может натренированная модель машинного обучения? Собственно, из этого и получилось то, что имеем.

pix2code – бесплатное приложение, которое работает на python2(3), попутно подтягивая в свои объятия TensorFlow и пару популярных библиотек вроде opencv2 или numpy.

В комплекте идет также база для тренировки нейронной сети, после которой можно с уверенностью использовать ее для конвертации изображений в source code. Т.к. мне не особо интересны сейчас проекты в сфере нативной разработки мобильных приложений (окромя React Native, где я с головой обхожусь Expo.io, NativeBase и Ignite), то я протестировал веб компоненты. О них и поговорим.

Установка

Первым блин комом вышел уже в момент компиляции нашего приложения. Т.к. я все-таки full stack, у которого Python вряд ли можно считать главным скилом, задвоение версий Python 2 и 3 ввело в ступор не только меня, но и pix2code. И это при том, что в предустановках четко написано, что приложение дружит с обоими версиями Python:

Установленные на мой макбук сначала через встроенный менеджер пакетов pkg, а потом через всем любимый brew в bash Python благополучно установил ОБЕ версии. И по странному стечению обстоятельств выяснилось, что pip, вернее pip2 и pip3  подтягивали пакеты в 3-ю версию Python, а выполнение команды python было возложено на 2-ю версию. В итоге имеем, если немного подебажить:

Что естественно, запуск каких-либо скриптов, где использовалась cv2 приводили к ошибке. Решение пришло в виде изменения в коде исходников окружения с python на python3

Было:

#!/usr/bin/env python

Стало:

#!/usr/bin/env python3

И так во всех исходниках (спасибо, Sublime Text за поиск и замену во всех файлах).

Дальнейшая установка не сильно отличается от описанного разработчиком метода:

Устанавливаем зависимости:

pip install -r  requirements.txt

Распаковываем данные для обучения модели:

cd datasets
zip -F pix2code_datasets.zip --out datasets.zip
unzip datasets.zip

Формируем учебный пакет данных:

# split training set and evaluation set while ensuring no training example in the evaluation set
# usage: build_datasets.py <input path> <distribution (default: 6)>
./build_datasets.py ../datasets/ios/all_data
./build_datasets.py ../datasets/android/all_data
./build_datasets.py ../datasets/web/all_data

# transform images (normalized pixel values and resized pictures) in training dataset to numpy arrays (smaller files if you need to upload the set to train your model in the cloud)
# usage: convert_imgs_to_arrays.py <input path> <output path>
./convert_imgs_to_arrays.py ../datasets/ios/training_set ../datasets/ios/training_features
./convert_imgs_to_arrays.py ../datasets/android/training_set ../datasets/android/training_features
./convert_imgs_to_arrays.py ../datasets/web/training_set ../datasets/web/training_features

Я кстати схитрил и не включал пакеты для ios или android, т.к. меня интересовало исключительно веб возможности модели. Это сэкономило в будущем немало времени.

Тренируем модель (запаситесь терпением, а лучше сделайте это в сильной виртуалке как я это сделал):

mkdir bin
cd model

# provide input path to training data and output path to save trained model and metadata
# usage: train.py <input path> <output path> <is memory intensive (default: 0)> <pretrained weights (optional)>
./train.py ../datasets/web/training_set ../bin

# train on images pre-processed as arrays
./train.py ../datasets/web/training_features ../bin

# train with generator to avoid having to fit all the data in memory (RECOMMENDED)
./train.py ../datasets/web/training_features ../bin 1

# train on top of pretrained weights
./train.py ../datasets/web/training_features ../bin 1 ../bin/pix2code.h5

Этот процесс у меня занял приблизительно сутки, стоило порядка 10 баксов на виртуальную машину (22 часа).

Ну а что получилось в результате и действительно ли модель способна распознавать макеты, вы узнаете во второй части статьи. Stay tuned.