Преводът на екранни дизайни в HTML/CSS маркиране е трудоемка задача за уеб разработчиците, която следва ясни правила, но се нуждае от много прецизност. Изглежда, че е добро приложение за машинно обучение в бъдеще.
Статията
обсъдиха документ от 2017 г. с някои идеи за генериране на маркиране от пикселни изображения. В тази публикация ще се опитам да използвам машинно обучение в първата стъпка към тази цел, като се опитам да класифицирам дизайна на екрана. В два примера обучавам невронна мрежа да прави разлика между тъмни и ярки дизайни и да отделя екрани с една колона от екрани с две.
Увеличаване на данните
За обучението имам нужда от много изображения на екранни дизайни със съдържание, отговарящо на нуждите на задачите за класификация. Затова реших да генерирам данните с някои скриптове на Python, като използвам библиотеката „Beautiful Soup“ за анализ на HTML и конструиране на части от маркирането и библиотеката „cssutils“ за анализ на CSS файловете. Всички дизайни са създадени с „Bootstrap“ („https://getbootstrap.com/“) и комбинират произволно избрани изображения и сляп текст с някои цветове и основно маркиране. Мрежовата система на Bootstrap беше използвана за генериране на оформления с различен брой колони.
Инструментът на командния ред „wkhtmltoimage“ („https://wkhtmltopdf.org/“) беше използван за конвертиране на HTML-файловете в PNG-файлове. Разделителната способност на екрана беше зададена на 1200px на 1200px. Файловете могат да бъдат изтеглени от https://www.floydhub.com/mosch/datasets/pix2html.
Един набор от изображения се състои от 540 изображения - половината от тях с ярък фон, а другата половина с тъмен.
Вторият набор има 450 изображения - половината от тях с една колона, а останалите с две.
Обучение на класификаторите
Обучението беше проведено с „Jupyter Notebooks“ на „Floydhub“ („https://www.floydhub.com“). Невронните мрежи са изградени и оптимизирани с „Keras“ („https://keras.io/“).
Found 450 images belonging to 2 classes. Found 90 images belonging to 2 classes.
За обучение и тестване данните бяха разделени на набор от данни за обучение и тест и всяко изображение се преоразмерява до 300x300 пиксела, за да се спести време за изчисление. Използван е размер на партида от 10.
Моделът се състои от няколко слоя „2D-Convolutional“ и „MaxPooling“, последвани от слой „Dense“ и единица „Sigmoid“ в края, за да се предвидят вероятностите за двоичната класификация.
Открийте цвета на фона
Използвах първия набор от данни, за да тествам дали обучен модел може да се научи да открива тъмни и ярки дизайни.
Обучението и тестването за някои епохи показаха, че след около 15 стъпки моделът беше перфектен в откриването на цвета на фона. Нека да разгледаме тренировъчните криви за точността на класификатора и функцията на загубата.
Открийте броя на колоните в оформленията
Използвайки втория набор от генерирани изображения, се опитах да класифицирам по броя на колоните от необработените пиксели.
Само след 3 епохи моделът свърши добра работа. Така че двете задачи изглеждаха лесни за модел на машинно обучение. Трябва да е възможно да се опитват по-трудни задачи в бъдеще.
