Nhận diện và phân loại các thành phần giao diện của ứng dụng từ ảnh chụp màn hình

ĐẠI HỌC QUỐC GIA TP.HCM TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA KHOA HỌC VÀ KĨ THUẬT MÁY TÍNH LUẬN VĂN TỐT NGHIỆP ĐẠI HỌC NHẬN DIỆN VÀ PHÂN LOẠI CÁC THÀNH PHẦN GIAO DIỆN CỦA ỨNG DỤNG TỪ ẢNH CHỤP MÀN HÌNH Ngành: Khoa Học Máy Tính HỘI ĐỒNG: Khoa học Máy Tính GVHD: TS Lê Hồng Trang GVPB: ThS Trần Thị Quế Nguyệt —o0o— SVTH 1: Đinh Quốc Cường (1710712) SVTH 2: Hoàng Vũ Trọng Thụy (1710321) SVTH 3: Lê Trung Vinh (1710388) TP HỒ CHÍ MINH, 07/2021 Lời cam đoan Nhóm cam đoan điều ghi báo cáo, mã nguồn nhóm tự thực - trừ kiến thức tham khảo có trích dẫn mã nguồn mẫu nhà sản xuất cung cấp, hồn tồn khơng chép từ nguồn khác Nếu lời cam đoan trái với thật, nhóm xin chịu trách nhiệm trước khoa nhà trường Nhóm sinh viên thực đề tài Lời cảm ơn Nhóm sinh viên thực đề tài xin chân thành cảm ơn quý thầy cô mang đến kiến thức bổ ích suốt ba năm học vừa qua, đặc biệt TS Lê Hồng Trang tận tình giúp đỡ nhóm suốt q trình hồn thành Đề cương luận văn Luận văn tốt nghiệp Nhóm sinh viên thực đề tài i Tóm tắt Đối với nhà phát triển phần mềm mà nói, chuyển đổi giao diện người dùng (Graphical User Interface) từ mẫu thiết kế ban đầu đến hình hồn thiện để người dùng tương tác công việc thường xuyên phải giải Quá trình địi hỏi tỉ mỉ khơng thời kỳ sơ khai dự án mà dự án giai đoạn có bổ sung, thay đổi yêu cầu tính Không may thay, giai đoạn giai đoạn đầy thách thức kỳ công, cần tốn nhiều chi phí lẫn sức người thời gian Trong luận văn này, nhóm chúng tơi trình bày hướng tiếp cận cho việc tự động hóa quy trình thông qua việc ứng dụng giải thuật Máy học (Machine Learning) Học sâu (Deep learning) lĩnh vực Thị giác máy tính (Computer Vision) Hệ thống sử dụng gồm có giai đoạn chính: nhận diện (detection), phân loại (classification) tổ hợp (combine) Đầu tiền, thành phần luận lý (logical components) giao diện giao diện nhận diện (khoanh vùng vị trí) trực tiếp từ hình ảnh thiết kế sử dụng kỹ thuật thị giác máy tính Sau đó, nhóm sử dụng mơ hình phân loại Convolutional Neural Network để phân loại thành phần nhận diện trước Cuối cùng, kết cho cấu trúc giao diện với thành phần gán nhãn Trong giai đoạn luận văn, nhóm thực nhận diện phân loại phần tử giao diện có ảnh chụp hình cho trước dựa kiến thức tảng thực nghiệm nghiên cứu giai đoạn đề cương ii Mục lục Lời cam đoan Lời cảm ơn i Tóm tắt ii Danh Sách Hình Vẽ viii Danh Sách Bảng ix Thuật ngữ & từ viết tắt x Giới thiệu 1.1 Thực trạng vấn đề 1.2 Nhu cầu tự động hóa việc chuyển đổi thiết kế giao diện 1.3 Mục tiêu đề tài 1 Nền tảng cơng trình liên quan 2.1 Nền tảng 2.1.1 Các kĩ thuật xử lý ảnh 2.1.2 Machine Learning 2.2 Các nghiên cứu liên quan 2.2.1 REMAUI 2.2.2 Xianyu 2.3 Các thách thức tiêu biểu 7 17 29 29 32 40 iii Mục lục Nhận diện phân loại thành phần giao diện ứng dụng từ ảnh chụp hình 3.1 Giai đoạn I - Phát khoanh vùng thành phần giao diện 3.2 Giai đoạn II - Phân loại thành phần giao diện 3.2.1 Khai thác tiền xử lý liệu 3.2.2 Mạng CNN phân loại Hiện thực thực nghiệm 4.1 Mô tả liệu 4.2 Hiện thực 4.2.1 Giai đoạn 4.2.2 Giai đoạn 4.3 Kết đánh giá 4.3.1 Kết 4.3.2 Đánh giá 4.4 Thiết kế xây dựng hệ thống 4.4.1 Phân tích thiết kế 4.4.2 Mơ tả Use case 4.4.3 Kiến trúc tổng quan Kết luận 5.1 Đánh giá kết 5.1.1 Thành đạt 5.1.2 Các hạn chế 5.2 Hướng phát triển 43 44 47 47 48 49 49 51 51 60 63 63 63 66 66 68 72 74 74 74 75 75 Kế hoạch thực 76 Tài liệu tham khảo 80 A Phụ lục A.1 Giới thiệu giao diện A.1.1 Phần giới thiệu tổng quan 1 iv Mục lục A.2 Get Started - Trải nghiệm nhanh ứng dụng A.3 Nhận diện ảnh người dùng upload v Danh sách hình vẽ 1.1 Phân loại GUI Component từ ảnh 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10 2.11 2.12 2.13 2.14 2.15 2.16 2.17 2.18 2.19 2.20 2.21 2.22 (Trái) Ảnh gốc chưa bị nhiễu (Phải) Ảnh bị nhiễu Gauss Biểu diễn ảnh màu dạng ma trận Biểu diễn ảnh xám dạng ma trận Lọc ảnh ma trận Lọc ảnh Gaussian filter Lọc ảnh Median filter Phát cạnh Phương pháp lọc Sobel Phương pháp phát cạnh canny edge Phân đoạn ảnh Contour Tracing Các nhánh ML Mạng neuron nhân tạo Cấu trúc mạng perceptron nhiều tầng Lan truyền ngược CNN Kiến trúc mạng resnet50 Kết nối tắt Resnet Stroke width transform Tesseract pipeline Nhận diện element text OCR Nhận diện element non text kĩ thuật Computer Vision 10 10 11 12 12 13 14 15 16 17 18 21 22 23 25 26 27 28 29 30 30 vi Danh sách hình vẽ 2.23 2.24 2.25 2.26 2.27 2.28 2.29 2.30 2.31 REMAUI Ứng dụng Xianyu Bộ lọc Laplace Phát cạnh Giải thuật tô màu loang Tìm đường bao Các bước thực Xianyu Dự đoán xem object nằm anchor box Chỉ số IOU 3.1 3.2 Tổng quan giải pháp thực đề tài nhóm 44 Trực quan giai đoạn I phương pháp đề xuất 45 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 4.10 4.11 4.12 4.13 Tập liệu Rico[25] Phân bổ số lượng đối tượng ảnh Sample GUI images Phương pháp tiếp cập nhận diện Non-text Element Chuyển ảnh đầu vào thành ảnh xám Tính gradient map từ ảnh xám Ảnh binary ứng với gradient map Boundary trước smooth Các lớp phân loại Cách thức phân loại mạng học sâu Phát phân loại component ảnh Lược đồ Use-case Kiến trúc tổng quan hệ thống 6.1 Timeline 76 A.1 A.2 A.3 A.4 A.5 A.6 Đi đến nhanh phần công cụ Chọn Quick Start để trải nghiệm nhanh tính Lựa chọn ảnh mẫu Lựa chọn công cụ điều chỉnh tham số Kết sau nhận diện Giao diện trang dashboard 31 33 34 35 36 37 38 39 42 50 50 52 54 56 57 57 58 61 63 64 67 73 2 vii Danh sách hình vẽ A.7 A.8 Công cụ dành cho thiết kế người dùng Tải thiết kế người dùng lên 7 viii Kết luận 5.1 Đánh giá kết 5.1.1 Thành đạt • Xác định đặc điểm giao diện người dùng gây khó khăn việc áp dụng kỹ thuật Phát Nhận dạng vật thể đại, bao gồm: tính đa dạng lớp (large in-class variance), tính tương tự lớp (high cross-class similarity), tính hỗn hợp đối tượng không đồng (Mix of heterogeneous objects) cuối cùng, tính chồng chất (packed or close-by element) • Giải thích mơ hình, mạng neural khơng có hoạt động hiệu cho toán Nhân diện Phân loại Giao diện người dùng • Giải thích cách tiếp cận lai kỹ thuật đại truyền thống lại mang lại kết tốt • Hiện thực xây dựng ứng dụng cho phép người dùng tương tác trực quan hoá giải thuật 74 5.2 Hướng phát triển 5.1.2 Các hạn chế • Một số nghiên cứu khoa học công bố kết lập luận nghiên cứu không công khai liệu mã nguồn nên nhóm gặp khó khăn việc đánh giá lại nghiên cứu • Việc ứng dụng giải thuật AI lĩnh vực mẻ nên hạn chế nguồn tài liệu tham khảo hạn chế mặt liệu dẫn đến kết đánh giá chưa cao 5.2 Hướng phát triển Vì đề tài cịn chưa có nhiều paper nghiên cứu chưa có sản phẩm ngồi thị trường nên nhóm chưa có đủ tài liệu để tham khảo Tuy nhiên nhóm dựa vào lí thuyết tìm hiểu dự định tìm hiểu thêm kiến thức hỗ trợ cho việc chuyển từ template sang GUI thật Nhóm dự định tìm hiểu kĩ thuật xử lý ngơn ngữ tự nhiên mạng học sâu khác để giải vấn đề Ngồi ra, nhóm cịn dự định phát triển thêm số tính cho sản phẩm cho phù hợp với mơi trường phát triển cơng nghiệp như: • Hỗ trợ sinh mã cho nhiều ngôn ngữ, tảng khác nhau: Ngày nay, nhiều lập trình viên thường sử dụng framework khác React Js, React Native, Flutter Việc hỗ trợ sinh mã tảng phổ biến giúp tiếp cận với nhiều khách hành hơn, đồng thời giúp lập trình viên dễ dàng việc phát triển tiếp sản phẩm • Hỗ trợ việc chỉnh sửa cách GUI Component: Sau detect thành phần GUI Component, người dùng chỉnh sửa kích thước, vị trí, màu sắc, component trang Dashboard Điều giúp cho người dùng thay đổi theo ý muốn mà khơng cần phải chỉnh sửa mã nguồn 75 Kế hoạch thực Dựa giải pháp đề xuất, nhóm tác giả đưa công việc thực giai đoạn Luận văn Tốt nghiệp thời gian thực sau: Hình 6.1: Timeline 76 Tài liệu tham khảo [1] App Store - Apple https://www.apple.com/app-store/ [2] Google Play Store https://play.google.com/store [3] Why Your App’s UX is More Important than You Think https://www.codemag.com/Article/1401041 [4] Adobe photoshop http://www.photoshop.com [5] The sketch design tool https://www.sketchapp.com [6] Figma https://www.figma.com/ [7] Automating software development https://bit.ly/3iEvnzP [8] Survey on User Interface Programming https://www.researchgate.net/publication/221514197_Survey_ on_User_Interface_Programming [9] Design of an image edge detection filter using the Sobel operator https://ieeexplore.ieee.org/document/996?denied= 77 Tài liệu tham khảo [10] A Computational Approach to Edge Detection https://ieeexplore.ieee.org/document/4767851 [11] A Study of the Effects of Gaussian Noise on Image Features https://www.researchgate.net/publication/324476545_A_Study_ of_the_Effects_of_Gaussian_Noise_on_Image_Features [12] An adaptive Gaussian filter for noise reduction and edge detection https://www.researchgate.net/publication/3572571_An_ adaptive_Gaussian_filter_for_noise_reduction_and_edge_ detection [13] Linear-time Connected-component Labeling Based on Sequential Local Operations https://www.researchgate.net/publication/222418121_ Linear-time_Connected-component_Labeling_Based_on_ Sequential_Local_Operations [14] Stroke Width Transform https://www.researchgate.net/publication/255564283_Stroke_ Width_Transform [15] An Overview of the Tesseract OCR Engine https://ieeexplore.ieee.org/document/4376991 [16] Deep Residual Learning for Image Recognition https://arxiv.org/abs/1512.03385 [17] Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks https://arxiv.org/abs/1506.01497 [18] EAST: An Efficient and Accurate Scene Text Detector https://arxiv.org/abs/1704.03155 [19] Reverse Engineering Mobile Application User Interfaces with REMAUI (T) https://ieeexplore.ieee.org/document/7372013 78 Tài liệu tham khảo [20] Introducing UI2CODE: An Automatic Flutter UI Code Generator https://bit.ly/3AxTkig [21] Object Detection for Graphical User Interface: Old Fashioned or Deep Learning or a Combination? https://arxiv.org/abs/2008.05132 [22] Sketch2code: Generating a website from a paper mockup https://arxiv.org/abs/1905.13750 [23] Machine Learning-Based Prototyping of Graphical User Interfaces for Mobile Apps https://ieeexplore.ieee.org/document/8374985 [24] KNN Model-Based Approach in Classification https://www.researchgate.net/publication/2948052_KNN_ Model-Based_Approach_in_Classification [25] Rico: A Mobile App Dataset for Building Data-Driven Design Applications http://interactionmining.org/rico [26] YOLOv3: An Incremental Improvement https://arxiv.org/abs/1804.02767 [27] CenterNet: Keypoint Triplets for Object Detection https://arxiv.org/abs/1904.08189 [28] Graphic System based on Flood Fill Algorithm with Images https://www.researchgate.net/publication/294086242_Graphic_ System_based_on_Flood_Fill_Algorithm_with_Images [29] An iterative procedure for the polygonal approximation of plane curves https://www.sciencedirect.com/science/article/abs/pii/ S0146664X72800170 79 Tài liệu tham khảo [30] Digital Image Processing http://web.ipac.caltech.edu/staff/fmasci/home/astro_refs/ Digital_Image_Processing_2ndEd.pdf 80 A Phụ lục A.1 A.1.1 Giới thiệu giao diện Phần giới thiệu tổng quan Giao diện WebApp xây dựng trực quan dễ dàng thao tác Bao gồm phần: • Phần giới thiệu • Các tính bật sản phẩm • Hướng dẫn thao tác • Phần cơng cụ • Các phần khác A.2 Get Started - Trải nghiệm nhanh ứng dụng Tại trang Homepage, người dùng chọn Get Started Banner mục Tool Header để đến nhanh phần công cụ A.2 Get Started - Trải nghiệm nhanh ứng dụng Hình A.1: Đi đến nhanh phần công cụ Sau chọn xong, trang web chuyển tới mục Tool, đây, người dùng chọn Quick Start để bắt đầu trải nghiệm nhanh tính Hình A.2: Chọn Quick Start để trải nghiệm nhanh tính A.2 Get Started - Trải nghiệm nhanh ứng dụng Giao điện chuyển đến phần công cụ Tại bước đầu tiên, người dùng chọn số hình ảnh giao diện có sẵn Sau chọn ảnh, người dùng nhấn Next để chuyển qua bước Hình A.3: Lựa chọn ảnh mẫu Tại bước tiếp theo, người dụng lựa chọn loại công cụ, sau thay đổi tham số cần thiết (có thể giữ nguyên giá trị mặc định) Sau hoàn thành xong, bấm vào Process để ứng dụng xử lý phân tích thành phần component có hình ảnh A.2 Get Started - Trải nghiệm nhanh ứng dụng Hình A.4: Lựa chọn cơng cụ điều chỉnh tham số Sau có kết quả, người dùng bấm vào nút View result để chuyển qua bước Trong hình kết quả, người dùng thấy hình ảnh gốc (được chọn bước đầu tiên) hình ảnh kết Trong hình ảnh kết quả, thành phần Component mà ứng dụng detect được bao xung quanh viền có màu sắc khác A.2 Get Started - Trải nghiệm nhanh ứng dụng Hình A.5: Kết sau nhận diện Người dùng nhấn vào Dashboard để chuyển đến giao diện Dashboard để xem chi tiết Tại trang Dashboard, người dụng xem chi tiết component mà ứng dụng detect thuộc tính html vị trí, chiều dài, chiều rộng A.3 Nhận diện ảnh người dùng upload Hình A.6: Giao diện trang dashboard A.3 Nhận diện ảnh người dùng upload Người dùng tự tải ảnh thiết kế giao diện để công cụ nhận diện cách upload ảnh lên Tại trang Homapage, người dùng nhấn vào mục Tool Header để chuyển đến mục Tool A.3 Nhận diện ảnh người dùng upload Hình A.7: Cơng cụ dành cho thiết kế người dùng Sau đó, chọn Upload Custom UI để chuyển đến trang công cụ Tại đây, người dùng, nhấn vào nút Choose images để tải thiết kế lên Hình A.8: Tải thiết kế người dùng lên Sau tải xong, bấm Next để qua bước Các bước A.3 Nhận diện ảnh người dùng upload tương tự hướng dẫn phần Get Started ... Nhận diện phân loại thành phần giao diện ứng dụng từ ảnh chụp hình 3.1 Giai đoạn I - Phát khoanh vùng thành phần giao diện 3.2 Giai đoạn II - Phân loại thành phần. .. phân loại Convolutional Neural Network để phân loại thành phần nhận diện trước Cuối cùng, kết cho cấu trúc giao diện với thành phần gán nhãn Trong giai đoạn luận văn, nhóm thực nhận diện phân loại. .. tiền, thành phần luận lý (logical components) giao diện giao diện nhận diện (khoanh vùng vị trí) trực tiếp từ hình ảnh thiết kế sử dụng kỹ thuật thị giác máy tính Sau đó, nhóm sử dụng mơ hình phân