Сегментация изображения макета веб-страницы

Практически все области жизнедеятельности идут по пути автоматизации процессов. Разработка веб-приложений – не исключение. Для автоматизации разработки веб-приложений создаются всевозможные библиотеки, фреймворки, конструкторы, методологии и т.п.

В последние годы начали появляться исследования [7; 8] по автоматизации процесса разметки веб-страницы. Под автоматизацией разметки понимается процесс преобразования готового дизайна (изображения) в код (HTML). Процедуру автоматизации разметки можно разбить на следующие основные этапы [2; 5]:

• •    сегментация – этап выделения и разбиения на требуемые области;

• •    распознавание – этап классификации областей.

В основе работ выше лежат нейронные сети (НС). Стоит обратить внимание на то, что в данных исследованиях нейронные сети применяются не только для распознавания, но и для сегментации. Например, принцип работы метода из исследования [7] следующий. Решение задачи выполняется в два этапа:

• 1.    Разрабатываются две нейронные сети. Одна нейронная сеть по исходному изображению выводит некоторый массив признаков. Вторая нейронная сеть по некоторой последовательности (код разметки) выводит следующую.

• 2.    Разрабатывается одна нейронная сеть. Данная нейронная сеть на входе принимает массив признаков из одной НС и значения последовательности из другой. На выходе НС формирует следующее значение последовательности.

Весь процесс (не включая разработку НС) повторяется до тех пор, пока не выведется конечное значение последовательности. В итоге все выведенные значения образуют конечный код разметки.

На наш взгляд, применение нейронных сетей для сегментации изображения макета веб-страницы является не самым оптимальным вариантом. Такое мнение обусловлено тем, что для НС задача является нестандартной (НС не приспособлены, имеется некоторая сложность при формулировании архитектуры). Таким образом, сегментацию можно осуществить при помощи других, более специализированных методов.

В данной работе будет рассматриваться один из этапов автоматизации разметки веб-страницы, а именно – этап сегментации. При сегментации изображение разделяется на составляющие области. Составляющие области определяются задачей.

Методы сегментации, по свойству разбиения [2; 5], делятся на следующие виды:

• •    сегментация по однородности – области делятся по принципу однородности (однородность определяется по заранее выбранным критериям);

• •    сегментация по неоднородности – области делятся по принципу резкого изменения яркости.

Методы сегментации по степени автоматизации [3] разделяют на следующие виды:

• •    автоматические [1; 3] – выделение происходит по какому-либо признаку (цвету, яркости, текстуре);

Шайдуллин Р.Ф., Исавнин А.Г. Сегментация изображения макета веб-страницы    165

• •    интерактивные [3; 4] – выделение происходит при помощи помеченных вручную меток.

Стоит отметить, что для решения конкретной задачи последовательное применение одного метода не всегда является оптимальным вариантом, либо вовсе не применимым, т.е. для решения поставленной задачи методы модифицируют, комбинируют или разрабатывают новые.

Постановка задачи

Требуется алгоритм, на входе которого подается изображение, и на выходе в автоматическом режиме (без ручного выставления меток) получаются требуемые области. Выделенные области должны содержать ячейки макета и объекты ячеек. Изображение макета будет рисоваться на однотонном белом листе с помощью фломастера черного цвета. В случае если изображение макета нарисовано в графическом редакторе (белый фон и черные линии), алгоритм также должен работать.

Бинаризация

Поскольку фактически входное изображение является двухцветным, т.е. черно-белым, в дальнейшем будем работать с методами, предназначенными для обработки двоичных изображений. Сначала переведем изображение в оттенки серого (рис. 1) по следующей формуле [6]:

У ‘ = 0,2126 R + 0,7152 G + 0,0722 B ,                  (1)

где У ' - конечный пиксель; RGB - значения цвета пикселя.

Рис. 1. Слева – исходное изображение; справа – изображение в оттенках серого

Стоит отметить, что изображение, полученное с помощью фотокамеры, не всегда равномерно освещено, что является свидетельством потенциальных шумов. Ввиду данного обстоятельства простое применение к исходному изображению пороговой функции не даст надлежащих результатов. Таким образом, первоначально воспользуемся некоторым фильтром [2]. В нашем случае медианный фильтр или фильтр Гаусса (рис. 2).

Рис. 2. Слева – после медианного фильтра; справа – после фильтра Гаусса (изображения с адап. пор.)

166 в ыпуск 2/2020

Фильтр Гаусса дает наилучший результат.

V V    w ( s , t ) f ( x + s, y + t )

g ( x,y ) = ^E ~ a E Г b'b’^J\  /                  (2)

Is=-. I,.-bw(s ,t > где g – конечный пиксель; w – маска фильтра (в случае фильтра Гаусса, матрица 5×5 с гауссовыми значениями); f – исходное изображение.

Далее следует перевод изображения в бинарный вид. Для перевода в бинарный вид используются пороговые функции [2]. В нашем случае глобальный и адаптивный порог (рис. 3).

Рис. 3. Слева – после глобального порога со значением 50;

в центре – после глобального порога со значением 30; справа – после адаптивного порога (изображения после гаус. ф.)

Адаптивная пороговая функция наиболее оптимальна (незначительные мелкие шумы будут удалены в дальнейшем). Данный вид пороговой функции позволяет решить проблемы с неравномерным освещением, а также обеспечивает полную автоматизацию, т.е. не требует ручного подбора порога. Формула адаптивной пороговой функции ( w – массив размером 7×7 с единичными значениями):

g ⁽ x > y ) =

О, если ^{f (} x,y ) >  T xy ;

1, иначе;

V V    w ( s , t ) f ( x + s , y + t )

T = ^ ^s=-a ^ t=-b      ^j --------- -const,

xy

n где g – конечный пиксель; f – исходное изображение; T – порог (среднее значение по окрестности w минус константа 2).

Сегментация

В нашем случае выделение областей должно осуществляться по цвету, т.е. один объект от другого разделяется по условиям: если объекты не пересекаются, и между ними существует граница минимум в один белый пиксель. Таким образом, исходя из задачи для сегментации воспользуемся методами математической морфологии. Для нашего исследования будут применяться методы: дилатация и эрозия.

Дилатация – это метод расширения области. Дилатация множества A по B – это множество всех таких смещений z , при которых множества B ^ˆ A совпадают по меньшей мере в одном элементе [2]:

Шайдуллин Р.Ф., Исавнин А.Г. Сегментация изображения макета веб-страницы    167

A © B = { z| [( B) z П A ]c A }

B = 111

Эрозия – это метод сужения области. Эрозия множества A по примитиву B – это множество всех таких точек z , при сдвиге в которые множество B целиком содержится в A [2]:

A e B = { z |( B ) z c A },

	0 1 0
B =	1   1 1 0  1 0

Начальная точка будет находиться по следующему алгоритму: будем двигаться из верхнего левого угла слева направо и сверху вниз, и первый пиксель, окрашенный черным цветом, будет являться начальной точкой (начальной координатой).

Итак, для избавления от оставшихся шумов в виде мелких точек, воспользуемся эрозией и некоторой операцией по определенному примитиву.

a e b	– сначала эрозия.
^ 0	0 0 0 0 0
0	00 000
0 B =	01 100
0	01 100
0	00 000
. 0	0 0 0 0 0 _

0, если внешняя часть совпадает полностью,

/z = 1

а внутренняя по меньшей мере в одном элементе;

z, иначе.

Далее, для восстановления линий от эрозии и дополнительного закрытия белых пикселей внутри линий, используем дважды операцию дилатации (рис. 4).

( A © B ) © B .

Рис. 4. Изображение после «очистки»

Выпуск 2/2020

Затем, для выделения границ ячеек макета, воспользуемся операцией эрозии и разности (рис. 5):

P( A ) = A \ ( A 0 B ).

Рис. 5. Слева – после выделения границ; справа – после исключения внешней границы

Внешняя граница и линии между границами удаляются.

При операциях над изображением для фактического выделения связных областей, будем использовать следующий алгоритм.

Пусть имеется некоторая начальная точка и примитив 3×3. Центр примитива помещаем в заданную точку. Каждая точка, которая входит в этот примитив и имеет определенное значение, является следующей центральной точкой примитива. Найденные точки помечаются. Алгоритм продолжается до тех пор, пока не закончатся помечаемые точки.

X k = ( X k - 1 © B ) n A , k = 1,2,3,...                       (9)

Алгоритм выделения ячеек:

• 1.    Ищем начальную точку.

• 2.    Выделяем область (алгоритм выделения задан выше).

• 3.    Сохраняем крайние точки ( x ,; ax , x m n , y max , y ^jn ) .

• 4.    Исключаем найденную область из поиска.

• 5.    Повторяем 1–4 до тех пор, пока имеются области.

После выделения ячеек необходимо определить входящие в каждую ячейку объекты (алгоритм такой же, как и при выделении ячеек). Итоговый результат показан на рисунке 6.

Рис. 6. Изображение с сегментированными областями

Итак, конечный алгоритм следующий (весь алгоритм воспроизводился на языке Python) (рис. 7).

Рис. 7 . Алгоритм сегментации

170 в ыпуск 2/2020

Заключение

В данной работе разработан алгоритм сегментации изображения макета веб-страницы. Алгоритм в автоматическом режиме позволяет выделить требуемые области и возвращать их координаты. Разработанный алгоритм полностью решил поставленные задачи. Следующим этапом автоматизации разметки следует распознавание выделенных объектов (по выделенным объектам в дальнейшем формируется код). Не стоит забывать о промежуточном этапе между сегментацией и распознаванием – этапе определения порядка и расположения выделенных областей.