Tài liệu 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 9 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 mọi điều được ghi trong báo cáo, cũng như mã nguồn là do nhóm tự thực hiện - trừ các kiến thức tham khảo có trích dẫn cũng như mã nguồn mẫu do chính nhà sản xuất cung cấp, hoàn toàn không sao chép từ bất cứ nguồn nào khác. Nếu lời cam đoan trái với sự thật, nhóm xin chịu mọi trách nhiệm trước khoa và nhà trường. Nhóm sinh viên thực hiện đề tài Lời cảm ơn Nhóm sinh viên thực hiện đề tài xin chân thành cảm ơn quý thầy cô đã mang đến những kiến thức bổ ích trong suốt hơn ba năm học vừa qua, đặc biệt là TS. Lê Hồng Trang đã tận tình giúp đỡ nhóm trong suốt quá trình hoàn thành Đề cương luận văn và Luận văn tốt nghiệp. Nhóm sinh viên thực hiện đề 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ừ những mẫu thiết kế ban đầu đến những màn hình hoàn thiện để người dùng tương tác là một công việc thường xuyên phải giải quyết. Quá trình này đòi hỏi sự tỉ mỉ không chỉ ở thời kỳ sơ khai của một dự án mà ngay cả khi dự án đang trong giai đoạn có những bổ sung, thay đổi về yêu cầu cũng như tính năng. Không may thay, giai đoạn này là một giai đoạn đầy thách thức và kỳ công, cần tốn nhiều chi phí lẫn về sức người và thời gian. Trong luận văn này, nhóm chúng tôi sẽ trình bày một hướng tiếp cận cho việc tự động hóa quy trình trên thông qua việc ứng dụng các giải thuật Máy học (Machine Learning) và Học sâu (Deep learning) trong lĩnh vực Thị giác máy tính (Computer Vision). Hệ thống sử dụng gồm có 3 giai đoạn chính: nhận diện (detection), phân loại (classification) và tổ hợp (combine). Đầu tiền, các thành phần luận lý (logical components) của một giao diện giao diện được nhận diện (khoanh vùng vị trí) trực tiếp từ hình ảnh của các bản thiết kế sử dụng các kỹ thuật thị giác máy tính. Sau đó, nhóm sử dụng một mô hình phân loại Convolutional Neural Network để phân loại các thành phần được nhận diện ở trước đó. Cuối cùng, kết quả cho ra là cấu trúc của một giao diện với các thành phần đã được gán nhãn. Trong giai đoạn luận văn, nhóm sẽ hiện thực bộ nhận diện và phân loại các phần tử giao diện có trong một ảnh chụp màn hình cho trước dựa trên các kiến thức nền tảng và 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 1 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 của đề tài . . . . . . . . . . . . . . . . . . . . . . . . 1 1 2 4 2 Nền tảng và các 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 7 8 17 29 29 32 40 iii Mục lục 3 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 3.1 Giai đoạn I - Phát hiện và khoanh vùng các thành phần giao diện . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.2 Giai đoạn II - Phân loại các thành phần giao diện . . . . . . . 3.2.1 Khai thác và tiền xử lý dữ liệu . . . . . . . . . . . . . 3.2.2 Mạng CNN phân loại . . . . . . . . . . . . . . . . . . . 4 Hiện thực và thực nghiệm 4.1 Mô tả dữ liệu . . . . . . . . . . 4.2 Hiện thực . . . . . . . . . . . . 4.2.1 Giai đoạn 1 . . . . . . . 4.2.2 Giai đoạn 2 . . . . . . . 4.3 Kết quả và đánh giá . . . . . . 4.3.1 Kết quả . . . . . . . . . 4.3.2 Đánh giá . . . . . . . . . 4.4 Thiết kế và xây dựng hệ thống . 4.4.1 Phân tích và thiết kế . . 4.4.2 Mô tả Use case . . . . . 4.4.3 Kiến trúc tổng quan . . 5 Kết luận 5.1 Đánh giá kết quả . . . . . . 5.1.1 Thành quả đạt được 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 6 Kế hoạch thực hiện 76 Tài liệu tham khảo 80 A Phụ lục A.1 Giới thiệu về giao diện chính . . . . . . . . . . . . . . . . . . . A.1.1 Phần giới thiệu tổng quan . . . . . . . . . . . . . . . . 1 1 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 . . . . . . . . . . . . . . . . 1 6 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 và (Phải) Ảnh bị nhiễu Gauss Biểu diễn ảnh màu dưới dạng ma trận . . . . . . . . . . . . Biểu diễn ảnh xám dưới dạng ma trận . . . . . . . . . . . . Lọc ảnh bằng ma trận . . . . . . . . . . . . . . . . . . . . . Lọc ảnh bằng Gaussian filter . . . . . . . . . . . . . . . . . Lọc ảnh bằng Median filter . . . . . . . . . . . . . . . . . . Phát hiện cạnh . . . . . . . . . . . . . . . . . . . . . . . . . Phương pháp lọc Sobel . . . . . . . . . . . . . . . . . . . . Phương pháp phát hiện cạnh canny edge . . . . . . . . . . Phân đoạn ảnh . . . . . . . . . . . . . . . . . . . . . . . . . Contour Tracing . . . . . . . . . . . . . . . . . . . . . . . . Các nhánh trong 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 của Resnet . . . . . . . . . . . . . . . . . . . . Stroke width transform . . . . . . . . . . . . . . . . . . . . Tesseract pipeline . . . . . . . . . . . . . . . . . . . . . . . Nhận diện các element text bằng OCR . . . . . . . . . . . . Nhận diện các element non text bằng các kĩ thuật Computer Vision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 9 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 hiện cạnh . . . . . . . . . . . . . Giải thuật tô màu loang . . . . . . . . Tìm các đường bao . . . . . . . . . . . Các bước thực hiện của Xianyu . . . . Dự đoán xem object nằm ở anchor box Chỉ số IOU . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . nào . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.1 3.2 Tổng quan giải pháp thực hiện đề tài của nhóm . . . . . . . . 44 Trực quan giai đoạn I trong phương pháp được đề 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 dữ liệu Rico[25]. . . . . . . . . . . . . . . . . . . . . . . . Phân bổ số lượng các đối tượng trong ảnh . . . . . . . . . . . Sample GUI images. . . . . . . . . . . . . . . . . . . . . . . . Phương pháp tiếp cập mới đối với 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 khi smooth . . . . . . . . . . . . . . . . . . . Các lớp phân loại . . . . . . . . . . . . . . . . . . . . . . . . Cách thức phân loại bằng mạng học sâu . . . . . . . . . . . . Phát hiện và phân loại các component trong ảnh . . . . . . . Lược đồ Use-case . . . . . . . . . . . . . . . . . . . . . . . . . Kiến trúc tổng quan của 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 năng Lựa chọn ảnh mẫu . . . . . . . . . . . . . . . . . . Lựa chọn công cụ và điều chỉnh tham số . . . . . . Kết quả sau khi 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 2 3 4 5 6 vii Danh sách hình vẽ A.7 A.8 Công cụ dành cho bản thiết kế của người dùng . . . . . . . . Tải bản thiết kế của người dùng lên . . . . . . . . . . . . . . 7 7 viii Danh sách bảng 4.1 4.2 4.3 4.4 4.5 4.6 4.7 So sánh hiệu năng nhận diện Text/Non-Text GUI-element. So sánh hiệu năng giữa STR và OCR. . . . . . . . . . . . . Bảng đặc tả use case Trial . . . . . . . . . . . . . . . . . . Bảng đặc tả use case Detect GUI Component . . . . . . . Bảng đặc tả use case Sign up . . . . . . . . . . . . . . . . Bảng đặc tả use case Login . . . . . . . . . . . . . . . . . . Bảng đặc tả use case Contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 60 68 69 70 71 72 ix Thuật ngữ & từ viết tắt GUI . . . . . . . . . . . . . . . . . . Graphical User Interface, giao diện người dùng. Element . . . . . . . . . . . . . . Phần tử giao diện, hay những phần trong một giao diện mà hiển thị nội dung hoặc cho người dùng tương tác với giao diện như Text Box, Button, ImageView, ... Component . . . . . . . . . . Tổ hợp các phần tử giao diện tạo nên một thành phần rộng hơn, đảm nhiệm một chức năng chính trên giao diện người dùng. Hoặc cũng có thể hiểu là Element. Metadata . . . . . . . . . . . . Siêu dữ liệu, là một hình thức biểu diễn dữ liệu đặc tả cho một đối tượng nào đó. Cụ thể đối với ảnh chụp màn hình của GUI thì metadata tương ứng là các thông tin về front end của ứng dung. GUI-Component . . . . Các phần tử đồ họa với chức năng được xác định trước trong GUI của một ứng dụng phần mềm. GUI-Container . . . . . . Một cấu trúc logic giúp nhóm các thành phần GUI và thường xác định các thuộc tính hiển thị không gian của các thành viên của nó. Mock-up Artifact . . . . Một tạo tác của quá trình thiết kế và phát triển phần mềm quy định các hướng dẫn thiết kế cho GUI và nội dung của nó. Problem Statement . Đưa ra một Mock-up Artifact, hãy tạo một ứng dụng nguyên mẫu gần giống với GUI mô phỏng cả về mặt hình ảnh và cấu trúc dự kiến của hệ thống phân cấp GUI. Text . . . . . . . . . . . . . . . . . . Khi nói đến một element dạng text tức là element này có chứa từ ngữ như label. Non-text . . . . . . . . . . . . . Khi nói đến một element dạng non-text tức là element này không có chứa từ ngữ nhữ Button, ImageView,... AI . . . . . . . . . . . . . . . . . . . . . viết tắt của cụm từ Artificial Intelligence. ML . . . . . . . . . . . . . . . . . . . viết tắt của cụm từ Machine Learning. DL . . . . . . . . . . . . . . . . . . . . viết tắt của cụm từ Deep Learning. FC . . . . . . . . . . . . . . . . . . . . viết tắt của cụm từ Full-connected Layer, lớp tính toán này thường xuất hiện cuối của các bộ phân loại. CNN . . . . . . . . . . . . . . . . . . viết tắt của cụm từ Convolutional Neural Network, mang ý nghĩa nói về Mạng tích chập. CV . . . . . . . . . . . . . . . . . . . . viết tắt của cụm từ Computer Vision. IOU . . . . . . . . . . . . . . . . . . . viết tắt của cụm từ Intersection over Union, mang ý nghĩa là tỉ lệ diện tích phần chồng lắp giữa 2 vật thể trên diện tích phần gộp chung. 1 Giới thiệu Trong chương này, nhóm sẽ giới thiệu một cách sơ lược về đề tài bao gồm việc phân tích hiện trạng các vấn đề đang gặp phải trong quá trình thiết kế và xây dựng các ứng dụng, nhu cầu xã hội từ đó đề ra các mục tiêu và phạm vi của đề tài. Đồng thời cung cấp cho người đọc cái nhìn tổng quan về những nội dung sẽ được trình bày ở các chương tiếp theo. 1.1 Thực trạng vấn đề Các ứng dụng phần mềm hướng tới người dùng hiện đại thường lấy giao diện người dùng (GUI) làm trung tâm, dựa vào giao diện người dùng (UI) hấp dẫn và trải nghiệm người dùng (UX) trực quan để khách hàng có thể thực hiện công việc và thao tác một cách dễ dàng, qua đó thu hút khách hàng một cách hiệu quả. Phần mềm có giao diện người dùng cồng kềnh hoặc mất thẩm mỹ ít có khả năng thành công hơn, đặc biệt là khi các công ty tìm cách để cạnh tranh ứng dụng của họ với các đối thủ có chức năng tương tự. Hiện tượng này có thể dễ dàng quan sát thấy trong các thị trường ứng dụng dành cho thiết bị di động như App Store[1] hoặc Google Play[2], nơi mà nhiều ứng dụng có cùng các chức năng, (ví dụ: trình quản lý tác vụ, ứng dụng thời tiết) cạnh tranh khốc liệt dựa vào sự khác biệt phần lớn ở UI/UX[3]. Do đó, một bước quan 1 1.2. Nhu cầu tự động hóa việc chuyển đổi thiết kế giao diện trọng trong việc phát triển bất kỳ ứng dụng dựa trên GUI nào đó là soạn thảo và tạo mẫu thiết kế mẫu, tạo điều kiện thuận lợi cho việc xây dựng và thử nghiệm giao diện người dùng, qua đó đánh giá hoặc chứng minh các mẫu thiết kế. Trong các môi trường công nghiệp với các dự án lớn hơn, quá trình này thường được thực hiện bởi các nhà thiết kế chuyên dụng, những người có kiến thức chuyên môn cụ thể về từng lĩnh vực trong việc tạo ra các GUI hấp dẫn, trực quan bằng cách sử dụng phần mềm chỉnh sửa hình ảnh như Photoshop[4], Sketch[5] hoặc Figma[6]. Sau khi các bản nháp thiết kế ban đầu này được tạo ra, điều quan trọng là chúng phải được dịch và tổ chức thành mã nguồn rồi từ đó có thể đến được với người dùng. Quá trình này (thường lặp đi lặp lại nhiều lần) đã được nghiên cứu trước đây và các nghiên cứu thực nghiệm cho thấy rõ mức độ khó khăn, tốn thời gian và dễ xảy ra lỗi đặc biệt nếu việc thiết kế và thực hiện được thực hiện bởi mỗi nhóm khác nhau (điều này thường xảy ra ở các cơ sở công nghiệp [8]). 1.2 Nhu cầu tự động hóa việc chuyển đổi thiết kế giao diện Nhu cầu tự động hóa Hiện nay, có nhiều công ty, doanh nghiệp đang thực hiện các quy trình phát triển phần mềm một cách thủ công. Trong đó có những quy trình được thực hiện lặp đi lặp lại, không cần có sự can thiệp sâu của con người. Việc phát triển phần mềm theo những mô hình truyền thống có những điểm bất lợi như tốn nhiều thời gian cũng như tính mở rộng thấp. Trung bình một kỹ sư phần mềm phải mất 4 giờ để đợi các bài kiểm tra hoàn thành, 3.5 giờ để chờ các bản dựng và 3 giờ để thiết lập môi trường phát triển [7] Đặc biệt là đối với môi trường phát triển phần mềm hiện nay có tính cạnh 2 1.2. Nhu cầu tự động hóa việc chuyển đổi thiết kế giao diện tranh rất cao. Các công ty, doanh nghiệp cố gắng tăng tốc để bắt kịp với thị trường. Cách để thực hiện điều này đó chính là tự động hóa trong các bước, quy trình không cần thiết phải có sự can thiệp của con người. Thay vì phải mất hàng ngày, hàng giờ để có được kết quả, với tự động hóa, chúng ta chỉ cần vài giây là có ngay được kết quả. Khi các công ty, doanh nghiệp tăng tốc trong việc phát triển phần mềm, họ cũng cần đảm bảo việc đưa sản phẩm, ứng dụng tới tay khách hành phải đảm bảo được chất lượng ở mức cao nhất, không xảy ra lỗi hay đảm bảo tuyệt đối trước các rủi ro về bảo mật. Việc tự động hóa, đặc biệt là tự động hóa trong kiểm tra lỗi sẽ giúp các nhà phát triển tránh phải những lỗi hay nguy cơ về bảo mật hoặc phát hiện sớm. Ngoài ra, việc nhu cầu thị trường thay đổi, nhu cầu khách hàng thay đổi cũng kéo theo việc phát triển phần mềm phải linh động theo nhu cầu. Việc tự động hóa sẽ giảm bớt thời gian ở những khâu không cần thiết để tập trung nguồn lực cho việc phát triển những tính năng mới, kịp thời thay đổi theo yêu cầu của khách hàng. Như vậy, ta có thể thấy được lợi ích từ việc tự động hóa trong quy trình phát triển phần mềm đó là: • Giảm bớt thời gian trong phát triển phần mềm, đặc biệt là thời gian chờ đợi giữa các công đoạn. • Nâng cao chất lượng sản phẩm, phát hiện kịp thời những sai sót và khắc phục nó từ ban đầu. • Mang lại sự linh động trong quy trình phát triển phần mềm, kịp thời thích ứng với những thay đổi. Dù cho doanh nghiệp muốn phát triển một ứng dụng nội bộ hay là thuê một đơn vị thứ 3 gia công, điều mà doanh nghiệp luôn mong muốn đảm bảo là ứng dụng của mình được phát triển bằng cách sử dụng những nguyên tắc coding tốt nhất, sản phẩm đến tay khách hàng phải mang chất lượng tốt nhất. Chính vì những nhu cầu trên và những lợi ích mang lại từ tự động hóa 3 1.3. Mục tiêu của đề tài kể trên đã tạo ra một nhu cầu đó là nhu cầu về tự động hóa trong phát triển phần mềm. Tự động hóa trong chuyển đổi thiết kế giao diện thành mã nguồn Giai đoạn thiết kế giao diện là một phần trong phát triển phần mềm. Ở giai đoạn này, từ các bản thiết kế giao diện (Mockup), các lập trình viên sẽ sử dụng các ngôn ngữ đánh dấu, thiết kế giao diện. Sau đó là thực hiện kiểm tra trên các trình duyệt hoặc các thiết bị di động khác. Các quy trình này lặp đi lặp lại dẫn đến nhiều công việc bị lặp đi lặp lại nhiều lần. Dựa theo bài khảo sát Survey on User Interface Programming[8] cho thấy trong các mã nguồn lập trình giao diện người dùng, trung bình có tới 48% là những đoạn code là dành cho phần thiết kế giao diện người dùng. Tương ứng với đó là 45% thời gian người lập trình viên phải dành ra để hiện thực các đoạn code đó. Đặc biệt, các dự án ngày nay thường rất lớn và có thể có tới hàng triệu dòng code, sử dụng nhiều thư viện. Tương ứng với đó là khoảng thời gian rất lớn mà các lập trình viên phải dành ra để viết lên những dòng code đó. Không những thế, chỉ một thay đổi nhỏ có thể ảnh hưởng đến toàn bộ dự án, thậm chí còn có thể gây ra lỗi khiến hệ thống chạy sai, qua đó ảnh hưởng đến trải nghiệm của khách hàng. Trong khi ta có thể tự động hóa cho việc sinh code cho 48% những đoạn code kia và tập trung cho việc nâng cao trãi nghiệm khách hàng. Đặc biệt với môi trường hiện đại ngày nay, vòng đời của việc phát triển ứng dụng ngày càng ngắn, sản phẩm đưa đến khách hàng phải nhanh chóng nhưng vẫn phải đảm bảo chất lượng tốt nhất. Chính từ thực trạng đã nêu ở mục 1.1 cũng như từ những nhu cầu nảy ra trong quá trình thiết kế giao diện đã nảy sinh ra nhu cầu tự động hóa cho việc thiết kế giao diện. 1.3 Mục tiêu của đề tài Việc tự động hóa quy trình thiết kế giao diện sẽ giúp đỡ rất nhiều cho các nhà phát triển trong quá trình xây dựng ứng dụng để họ có thể tập trung 4 1.3. Mục tiêu của đề tài thời gian và tài nguyên cải thiện hiệu năng của hệ thống thay vì tập trung xây dựng giao diện thân thiện với người dùng. Từ nhu cầu trên, nhóm nhận thấy Machine Learning có tiềm năng rất lớn trong công cuộc giải quyết bài toán bởi ngày này Machine Learning có thể xử lý rất tốt các bài toán liên quan đến ảnh số. Trong đề tài luận văn này, nhóm sẽ sử dụng các kiến thức đã tìm hiểu được ở giai đoạn đề cương để xây dựng mô hình Machine Learning giúp nhận diện và phân loại các GUI Component trong ảnh là các ảnh Mockup trên mobile. Đồng thời xây dựng một Web App giúp cho người dùng sử dụng một cách dễ dàng. Một ví dụ về kết quả mà nhóm kì vọng đạt được đối với đề tài này như hình 1.1. 5 1.3. Mục tiêu của đề tài (a) Ảnh gốc (b) Các Component được nhân diện Hình 1.1: Phân loại GUI Component từ ảnh. 6 2 Nền tảng và các công trình liên quan Trong chương này, nhóm sẽ giới thiệu các nội dung liên quan đến các hướng tiếp cận đề tài mà cụ thể ở đây là các kĩ thuật xử lý ảnh cũng như mạng neuron đồng thời trình bày tìm hiểu của nhóm về các hoạt động nghiên cứu hiện có trên thế giới đối với bài toán này. 2.1 Nền tảng Bài toán mà nhóm đặt ra là với một input là ảnh của một GUI, ứng dụng sẽ cho ra một layout cho GUI đó. Như đã đề cập ở phần trước, một GUI sẽ bao gồm nhiều element khác nhau như button, textbox, etc còn layout của GUI sẽ thể hiện vị trí và kích thước của các element trong GUI. Như vậy việc ta cần phải làm là tìm ra vị trí của các element hay cụ thể hơn là xác định được vùng bao xung quanh mỗi element trong ảnh. Để làm được việc đó, ta chia bài toán thành các phần như sau: • Phát hiện các GUI element trong ảnh, thể hiện bằng vùng bao xung quanh element đó. • Phân loại các GUI element thành các lớp element đã định nghĩa trước đó. • Chuyển thông tin về mỗi element như kích thước, vị trí, etc trong GUI 7