2 Nền tảng và các cơng trình liên quan
3.2 Giai đoạn I I Phân loại các thành phần giao diện
3.2.2 Mạng CNN phân loại
Để thu được kết quả cuối cùng, sau quá trình nhận diện ở giai đoạn I, bước này ta cần một bộ phân loại, nhận đầu vào là ma trận biểu diễn của các thành phần GUI được trích xuất ở trước đó, trả về kết quả là một nhãn mà bộ phân loại này cho rằng thành phần GUI đó thuộc về, cùng với điểm số biểu thị mức độ tin cậy của kết quả này. Nhóm dùng kiến trúc mạng CNN để hiện thực cho bộ phân loại này. Hiện thực chi tiết sẽ đề cập ở phần IV.
4 Hiện thực và thực nghiệm
Để kiểm chứng kết quả phát hiện các GUI element trong ảnh và xây dựng bộ phân loại các element, nhóm sẽ cần một bộ dữ liệu lớn lên tới hàng ngàn ảnh. Với mỗi ảnh đầu vào sẽ cần đi kèm các thơng tin về các element trong ảnh như vị trí và kích thước các bounding box cũng như lớp phân loại tương ứng của element. Sau khi tìm hiểu và đánh giá với các tập dữ liệu opensource trên mạng, nhóm quyết định tập dữ liệu Rico.
4.1 Mô tả dữ liệu
Trong những yếu tố quyết định sức mạnh của một mơ hình phân loại CNN không thể không đề cập đến tập dữ liệu (kích thước, tính tổng qt).Để có được một mơ hình có độ chính xác cáo địi hỏi một tập dữ liệu có kích thước lớn ảnh được gán nhãn ứng theo yêu cầu cụ thể. Trong đề cương này, nhóm sử dụng tập dữ liệu open-source Rico[25] do nhóm nghiên cứu trường
đại học Illinois ở Urbana-Champaign thu thập(hình 4.1).
Tập dữ liệu có dữ liệu là ảnh của các GUI element trên nền tảng Android. Tập bao gồm 50000 ảnh chụp màn hình GUI của 8000 ứng dụng trên Google Play Store cùng với metadata được trích xuất từ frontend của các ứng dụng(hình 4.2). Qua phân tích thì tập dữ liệu chứa khoảng 923,000 GUI element với số lượng các element dạng text là 497,000 và các element dạng
Hình 4.1: Tập dữ liệu Rico[25].
non-text là 426,000. Với mỗi ảnh GUI, trích xuất từ metadata của GUI tương ứng các thơng tin về vị trí các bounding box bao quanh một element cũng như lớp của box đó là gì để làm nhãn cho dữ liệu.
Hình 4.2: Phân bổ số lượng các đối tượng trong ảnh
Đối với bài toán nhận diện và phân loại vật thể từ ảnh, việc trong ảnh có ít hay nhiều vật thể sẽ ảnh hưởng tới độ chính xác của kết quả. Càng nhiều đối tượng xuất hiện trong ảnh càng dễ nhận diện và phân loại sai, ví dụ như các bounding box của các đối tượng có thể chồng lấp lên nhau. Đối với tập dữ liệu này, có thể thấy qua biểu đồ hộp là số lượng đối tượng có trong ảnh cao hơn rất nhiều so với tập dữ liệu MS COCO được phát hành bới Microsoft 2015 cho cuộc thi nhận diện và phân loại vật thể. Từ đó có thể thấy việc nhận diện và phân loại các GUI element trong ảnh để đạt được độ chính xác cao là một cơng việc khơng hề dễ dàng.
được chia thành 3 tập với tỉ trọng 8:1:1 là:
• Training set: Tập chứa dữ liệu đầu vào cho việc huấn luyện mơ hình. • Cross-validation set: Tập để kiểm tra các hyperparameter được thiết
lập trong q trình train có giúp mơ hình đạt được sự tối ưu hay khơng. • Test set: Tập kiểm thử, kiểm tra độ chính xác cũng như các sai số sau
quá trình training.
Vì với mỗi ứng dụng sẽ có nhiều ảnh GUI tương ứng cho nên nếu chia các ảnh GUI thuộc cùng 1 ứng dụng ra đều cho các tập sẽ khiến cho mơ hình bị overfit cho nên các GUI thuộc cùng 1 ứng dụng sẽ được chia chỉ trong 1 tập(hình 4.3).
Đối với tập cross-validation, vì dữ liệu thu thập được khơng nhiều nên để tăng tính đa dạng cho tập này, ta sẽ sử dụng kĩ thuật K fold. Kĩ thuật này chia tập train thành k phần, tại mỗi lần lặp của giải thuật huấn luyện, một phần trong k phần đã chia ở tập train sẽ được dùng để làm tập cross-validation, k - 1 phần còn lại được dùng để xây dựng mơ hình train. Mơ hình cuối được xác định dựa trên trung bình của các train error và validation error. Ở đây ta sẽ chọn k = 5 cho việc tách dữ liệu giữa tập train và cross-validation.
4.2 Hiện thực
4.2.1 Giai đoạn 1. Nhận biết GUI-components
Công việc đầu tiên của quy trình là nhận biết được các GUI-components tồn tại trong một bản vẽ thiết kế. Mục tiêu chính của giai đoạn này là đề xuất chính xác các khung bao quanh (bounding boxes) của các phần tử GUI-component (nghĩa là, 4 tọa độ pixel vẽ thành hình chữ nhật bao lại các đối tượng) từ một bản thiết kế cho trước. Những GUI-components này sẽ được trích xuất ra từng dữ liệu ảnh riêng biệt để sử dụng cho các giai đoạn
Hình 4.3: Sample GUI images.
tiếp theo của quá trình tạo mẫu. Giai đoạn này, có 2 phương pháp tiếp cận được đưa ra: (i) Phân tích trực tiếp từ meta-data của bản vẽ thiết kế, hoặc (ii) sử dụng các kỹ thuật Computer Vision để nhận biết Gui-components (xem hình 3.1). Trong luận văn này, nhóm chọn phương pháp (ii) để tiếp cận
bài toán nhận biết GUI-components.
Nhận biết GUI-component sử dụng Computer Vision
Mặc dù nhóm khơng đề cập đến phương pháp (i), nhưng có thể nhận ra một vài hạn chế của phương pháp này. Chẳng hạn như, trong nhiều trường hợp bản thiết kế khơng đến tay lập trình viên dưới dạng có chứa các meta-
data mà chỉ ở dạng hình ảnh trực quan. Trong trường hợp này, kỹ thuật Computer Vision tỏ ra vượt trội bởi nó chỉ cần một tấm ảnh trực quan của GUI-component để thực hiện cơng việc của nó.
Nhóm dựa theo Ui2code [21] cho việc hiện thực mơ hình nhận biết GUI- component (GUI-component detector). Ý tưởng của bài nghiên cứu này là sử dụng các kỹ thuật Image Processing truyền thống để đề xuất các vùng GUI-component. Chia mơ hình thành hai phần chính: Non-Text Element Detection vàText Element Detection.
1. Non-Text Element Detection
Có một lý do mà nhóm khơng sử dụng các kỹ thuật Deep learning đang phổ biến hiện nay. Đầu tiên, những kỹ thuật này yêu cầu lượng dữ liệu lớn trong quá trình huấn luyện, muốn tiếp cận được mục đích phổ thơng thì cần một lượng dữ liệu rất lớn. Ngồi ra, bản chất của các phương pháp thống kê dùng trong các mơ hình học sâu chưa đủ đáp ứng yêu cầu độ chính xác cao của GUI-component detection. Khơng như các mạng Deep Learning phổ thơng, nơi mà việc nhận biết chính xác vật thể được định nghĩa lỏng lẽo (ví dụ, IoU > 0.5), nhận biết GUI-component là sự nhận biết chính xác từng chi tiết (fine-grained recognition), u cầu mơ hình khơng những nhận diện được phân vùng nào thuộc về GUI-component mà phải nhân diện luôn được vùng không phải hoặc gần giống nhưng không phải GUI-component. Và thực tế là, các mơ hình nhận dạng vật thể hiện nay, kể cả anchor-based hay anchor-free đều không đáp ứng được yêu cầu này bởi vì chúng hoặc là quá cứng nhắc hoặc là quá mềm mỏng khi đối mặt với sự nội khác biệt trong lớp đối tượng (in-class variance) hay sự tương đồng giữa các lớp đối tượng (cross-class similarity).
Khơng như các mơ hình deep learning, các phương pháp truyền thống không địi hỏi bất cứ sự huấn luyện nào. Ngồi ra, khi ứng dụng các kỹ thuật này trên việc nhận dạng GUI-component, kết quả cho ra lại tương đối đáp ứng mong đợi. Vì vậy, nhóm quyết định áp dụng các kỹ thuật truyền thống cho việc nhận dạng non-text GUI-component.
Tuy nhiên, một thực tế là, các phương pháp đương thời tuân theo chiến lược bottom-up là đa số, tức là chúng tổng hợp các chi tiết nhỏ của từng đối tượng (edge or contour). Chiến lược bottom-up này không mấy khả quan, đặc biệt trên các tấm ảnh có nền phức tạp hoặc các đối tượng chứa trong các GUI-component. Như trong hình 4.4, chiến lược của nhóm sử dụng chiến lược hồn tồn khác biệt: hướng tiếp cận từ trên xuống, từ thô đến chi tiết (top-down coarse-to-fine).
Hình 4.4: Phương pháp tiếp cập mới đối với nhận diện Non-text Element
Đầu tiên, phương pháp nhận diện các khối layout của một GUI. Ý tưởng là các GUI tổ chức các GUI-component thành các khối tách biệt và thơng thường chúng có dạng hình chữ nhật. Xianyu [20] cũng nhận
diện các khối này nhưng dùng giả thiết rằng chúng xuất hiện trên cùng một trục đứng hoặc trục ngang. Thay vì vậy, nhóm đầu tiên sử dụng giải thuật flood-filling [28] trên ảnh xám của GUI đầu vào để thu được tối đa các vùng có màu tương đồng nhau.
Sau đó, sử dụng giải thuật nhận diện hình dạng (shape recognition) [29] để xác định vùng này có phải là hình chữ nhật hay khơng. Mỗi vùng chữ nhật tìm được sẽ xem như là một khối GUI-components.Cuối cùng, nhóm dùng giải thuật Suzuki’s Contour tracing để tính tốn biên của các khối vừa tìm được. Trong hình 4.4 các khối đó được thể hiện bằng màu sắc khác nhau.
Tiếp đó, nhóm dùng một ảnh xám (binary map) của GUI đầu vào, với mỗi block ở trên, ta phân đoạn được một block tương ứng ở trên bản nhị phân (hình 4.5). Cần biết rằng, nhị phân hóa (binarization) đơn giản GUI đầu vào thành ảnh trắng-đen, giúp phân tách các chi tiết (foreground) ra khỏi nền (background).
Hình 4.5: Chuyển ảnh đầu vào thành ảnh xám
Các phương pháp đương thời thực hiện nhị phân hóa thơng qua giải thuật phát hiện cạnh Canny và Sobel, được thiết kế để giữ lại cái kết cấu chi tiết (fine texture) của hình ảnh. Tuy nhiên, khả năng giữ lại các đặc trưng này lại tỏ ra khơng hiệu quả, thậm chí đối nghịch với mục tiêu của bộ nhận diện GUI-component, cái mà chú trọng đến hình dạng của các GUI-element hơn là nội dung mà chi tiết thể hiện. Ví dụ, nếu ta muốn nhận diện một ImageView thì khơng cần quan tâm đến nơi dung bên trong ImageView mà chỉ cần đường biên xung quanh để tách biệt nó với những phần cịn lại.
Nhóm sử dụng một phương pháp nhị phân hóa đơn giản nhưng hiệu quả [30] dựa trên gradient map của ảnh GUI(hình 4.7). Gradient map này thể hiện sự thay đổi của độ lớn đạo hàm giữa các pixel lân cận. Nếu mà đạo hàm tại một điểm có giá trị chênh lệch nhỏ với giá trị lân cận, nó sẽ thành màu đen ở binary map tương ứng, và ngược lại nó sẽ
có màu trắng.
Hình 4.6: Tính gradient map từ ảnh xám
Hình 4.7: Ảnh binary ứng với gradient map
Nhóm sử dụng giải thuật Connected component labeling để xác định các vùng GUI-component trong mỗi block phân đoạn nhị phân ở trên. Giải thuật này nhận vào là ảnh nhị phân của GUI và thực hiện gán nhán các
pixel có liên kết với nhau trong một GUI-component. Do GUI-element có thể tồn tại ở bất kỳ hình dạng gì, giải thuật trên chỉ xác định khung chữ nhật nhỏ nhất bao quanh vùng được cho là GUI-component(hình 4.8). Mặc dù giải thuật này khơng giữ lại nhiều chi tiết texture, các vật thể không phải GUI-element vẫn xuất hiện trong binary map. Loại nhiễu này chính là nguyên nhân cản trở các giải thuật đương thời áp dụng cho bộ nhận diện GUI, gây ra các tình trạng phân đoạn nhầm lẫn các GUI-element. Ngược lại, phương pháp mà nhóm sử dụng giảm thiểu ảnh hưởng của các nhiễu khơng phải GUI thế này.
Hình 4.8: Boundary trước khi smooth
2. Text Element Detection
Trong bài cáo cáo của mình, nhóm Ui2code [21] chỉ ra các nguyên nhân chúng ta nên: (i) tách riêng bộ nhận diện Text/Non-Text Elements và
(ii) dùng Scene OCR Text cho Text Element detection thay vì dùng document OCR Text. Cụ thể:
(i) Tách riêng mơ hình nhận diện Text GUI-element và Non-Text GUI-element vì quả kết quả khảo sát 4.1, UI2code họ thực huấn luyện các mơ hình Fast RCNN, YOLOv3 và CenterNet cho kết quả như bảng dưới.
Bảng 4.1: So sánh hiệu năng nhận diện Text/Non-Text GUI-element.
Từ bảng kết quả có thể thấy rằng, việc huấn luyện gộp chung Text/Non-Text làm giảm khả năng của mơ hình. CenterNet [27] có kết quả huấn luyện gộp chung cao nhất trong ba mơ hình nhưng vẫn thấp hơn rất nhiều so với tách riêng ra huấn luyện.
(ii) Các nghiên cứu hiện tại (ví dụ, REMAUI [19], Xianyu [20]) họ đơn giản chỉ sử dụng các mơ hình deep learning OCR như Tesseract [15] để nhận diện Text GUI-element. Tuy nhiên, nghiên cứu của UI2CODE [21] họ nhận ra Text GUI-element gần giống hơn với scene text so với document text. Vì vậy, họ cho chạy một thí nghiệm nhỏ khác đánh giá hiệu năng giữa các mơ hình Scene Text Recognition (STR) và ORC cho Text GUI-element, kết quả cho như Bảng 4.2.
Bằng hai luận điểm trên, nhóm sử dụng mơ hình state-of-the-art trong lĩnh vực STR là EAST cho mơ hình nhận diện Text-Element.
Bảng 4.2: So sánh hiệu năng giữa STR và OCR.
EAST có thể sẽ nhận diện text trên các đối tượng Non-text GUI- element, khi đó nhóm sẽ bỏ đi text đó.
4.2.2 Giai đoạn 2. Phân loại các GUI-components
Sau khi đã thu được các bouding box đề xuất cho các phần tử GUI- components trong ảnh, bước tiếp theo của quy trình là phân loại các GUI- components vào tập các lớp đã định sẵn. Mục tiêu của giai đoạn này là đưa ra nhãn cho component được phát hiện, với nhãn(hình 4.9) là một trong các giá trị sau:
• Button: Nút bấm đơn giản có chữ biểu thị chức năng. • Spinner: Nút thả chọn
• Chronometer: Vùng biểu thị thời gian • ImageView: Vùng hiển thị ảnh
• Rating bar: thanh đánh giá • Progress bar: thanh tiến trình • VideoView: Vùng hiển thị video • ToggleButton: Nút trạng thái bật tắt
• RadioButton: Nút chọn một hoặc nhiều lựa chọn • Switch: Nút gạt trạng thái
• CheckBox: Nút tích chọn
• ImageButton: Nút bấm dạng icon • EditText: Vùng nhập text
• SeekBar: Thanh tinh chỉnh cường độ • TextView: Vùng chứa text
Hình 4.9: Các lớp phân loại
Tương tự như giai đoạn 1, việc phân loại các component cũng chia ra làm 2 bước là phân loại các element dạng non-text và phân loại element dạng text mà cụ thể là lớp TextView.
Phân loại các vùng đề xuất thuộc dạng non-text
Với mỗi vùng đề xuất cho các component trong ảnh, nhóm sẽ dùng một bộ phân loại ảnh ResNet50 để dự đoán nhãn của vùng component đề xuất. Bộ phân loại Resnet50 đã được pretrain với tập dữ liệu ImageNet( một tập dữ liệu phổ biến cho các cuộc thi phát hiện và phân loại đối tượng) và được train tiếp với dữ liệu là ảnh các GUI elements.
Cách mà một ảnh được phân loại bên trong một mạng học sâu được diễn tả(hình 4.10) như sau:
• Với mỗi ảnh đầu vào, ảnh sẽ đi qua các lớp convolution và down sampling để thu được các đặc trưng ở mức chi tiết nhất. Các đặc trưng này có thể là các đường viền, góc cạnh, etc cấu tạo nên các đối tượng trong ảnh. Kết quả của bước này là cho ra một feature map biểu diễn các chi tiết trong ảnh ở một chiều khơng gian đơn giản hơn. Đối với bài tốn phát hiện các GUI-components trong ảnh, ở bước trước là phát hiện các component ta nhận được kết quả trả về là tập các bouding box đề xuất cho các component có thể xuất hiện trong ảnh. Sau khi cắt các component này dựa vào các bouding box đề xuất trên ảnh gốc, các ảnh cắt sẽ được đưa vào mạng học sâu để trích xuất đặc trưng, phục vụ cho việc dự đốn nhãn của component.
• Khi đã có tập các feature map, các feature map này sẽ được kết nối lại với nhau ở tầng fully connected để mạng tổng hợp lại các thông tin của các đối tượng trong ảnh và dự đốn xem với mỗi lớp định sẵn thì xác suất đối tượng đang phân loại thuộc lớp này là bao nhiêu. Ở đây nhóm đã định sẵn 14 lớp đối tượng non-text cần phân loại và kết quả mà lớp fully connected trả về sẽ là một vector (14, 1) biểu thị xác suất mà đối tượng thuộc từng lớp.
• Sau khi đã gán nhãn cho đối tượng, mạng đối chiếu nhãn được dự đốn với nhãn thật(ground-truth) của đối tượng. Nếu có sự sai sót trong việc dự đốn, mạng sẽ tiến hành cập nhật trọng số bằng cơ chế lan truyền ngược.
Phân loại các vùng đề xuất thuộc dạng text
Ở đây không cần phân loại vì component dạng text chỉ có 1 lớp. Nhóm