2 Nền tảng và các công trình liên quan
2.2 Các nghiên cứu liên quan
2.2.1 REMAUI
REMAUI hay một công cụ dịch ngược ảnh GUI thành ứng dụng, là kết quả nghiên cứu của nhóm nghiên cứu trường đại học Texas, Arlington ở Mỹ. REMAUI chia các vật thể cần nhận dạng trong ảnh thành 2 loại là text và non-text.
Đối với các element dạng text, REMAUI sử dụng công cụ OCR Tesseract để nhận diện vị trí các hàng chữ hoặc từ xuất hiện trong ảnh. Việc nhận diện này đôi lúc cho ra một số kết quả false positive. Cho nên REMAUI đã thêm 1 bước hậu xử lý là lọc các thành phần text không hợp lệ dựa trên các heuristic đã tìm hiểu về các thành phần text của ứng dụng như kích thước font chữ, vị trí, etc(hình 2.21).
Hình 2.21: Nhận diện các element text bằng OCR
Đối với các element dạng non-text, REMAUI thực hiện một loạt các bước xử lý ảnh để phân vùng vị trí các element. Đầu tiên REMAUI áp dụng giải thuật phát hiện cạnh Canny Edge. Tuy nhiên các cạnh này hơi mỏng dễ gây nhiễu và chưa liên kết hoàn toàn với nhau, cho nên phải tăng cường độ nét của các viền bằng phép dilation. Sau đó dùng giải thuật Contour Tracing để liên kết các viền lại với nhau, thu được các viền bao quanh vật thể. Cuối cùng thực hiện tính bounding box của các đối tượng dựa trên vị trí và kích thước các viền(hình 2.22).
Hình 2.22: Nhận diện các element non text bằng các kĩ thuật Computer Vision
Ở cả 2 bước xử lý cho element dạng text và non-text, sau khi thu được các bounding box lại tiến hành thêm 1 bước nữa là gộp các box lại để kết quả cho ra chính xác hơn. Có 3 trường hợp cần phải gộp:
• Diện tích phần chồng lặp lên nhau đạt ngưỡng. Việc gộp này để lọc bớt các trường hợp nhận diện sai lệch.
• Thành phần nhận diện là text bị trùng với thành phần non-text. Lúc này thành phần text sẽ bị gộp vào non-text bởi các thành phần text trong ảnh thường rất phức tạp dẫn đến kết quả của OCR trả về không được tốt. Vì vậy ưu tiên xác định thành các thành phần non-text hơn. • Gộp các từ phát hiện được thành một hàng. Vì trên phương diện thiết kế UI là chỉ có 1 component chứa text nên ưu tiên gộp các từ phát hiện lại thành hàng để đúng bản chất của một GUI hơn.
Sau khi đã phân loại được các component trong ảnh, REMAUI tiến hành lọc bớt 1 lần nữa các thành phần trùng lặp và xây dựng một cây cấu trúc biểu thị cấu trúc các thành phần của ứng dụng. Với cây cấu trúc này, REMAUI sinh mã tương ứng với nền của các component được cắt tương ứng từ ảnh gốc. Kết quả cho ra là một ứng dụng mobile với layout đơn giản tương ứng với ảnh đầu vào(hình 2.23).
Hình 2.23: REMAUI
REMAUI làm rất tốt trên việc phát hiện các element dạng non-text. Tuy nhiên vì các element dạng text thường nằm trong background rất phức tạp
nên nếu dùng Tesseract sẽ rất khó phát hiện vì Tesseract được huấn luyện trên các document text.
2.2.2 Xianyu
Xianyu là một công cụ sinh mã từ ảnh GUI do nhóm nghiên cứu của Alibaba phát triển cho ứng dụng mua hàng Xianyu(hình 2.24). Bởi tính chất thường xuyên phải chạy khuyến mãi cũng như cải thiện giao diện để mang lại trải nghiệm người dùng tốt hơn, nhóm phát triển frontend phải mất rất nhiều thời gian để hiện thực các giao diện dựa trên bản vẽ của designer. Để gia tăng năng suất làm việc, nhóm nghiên cứu của Alibaba đã quyết định xây dựng một công cụ giúp phân tích bản thiết kế hay ảnh GUI và chuyển đổi sang skeleton code cho developer.
Tập dữ liệu mà Xianyu sử dụng chính là ảnh của ứng dụng Xianyu với giao diện khá đơn giản.
Hình 2.24: Ứng dụng Xianyu
Trong quá trình nghiên cứu, nhóm đã đưa ra 2 giải pháp cho bài toán sinh mã từ ảnh với 2 hướng tiếp cận sau:
• Sử dụng các thuật toán deep learning.
Các kĩ thuật xử lý ảnh
Có thể thấy ứng dụng chỉ gồm nền trắng và các component có hình dạng, màu sắc đơn giản. Chính vì vậy hướng tiếp cận của nhóm nghiên cứu Alibaba là tìm các vùng có cùng màu sắc với nhau và sự thay đổi về gradient để tách component ra khỏi background.
Đầu tiên, công cụ sử dụng giải thuật phát hiện cạnh(hình 2.26) với bộ lọc Laplace để lọc các component ra khỏi background(hình 2.25).
Hình 2.26: Phát hiện cạnh
Mặc dù đã tìm được các đường bao xung quanh các component, gradient của ảnh kết quả vẫn còn bị nhiễu. Để giải quyết việc này, công cụ sử dụng giải thuật tô màu loang, thay đổi giá trị pixel hiện tại dựa theo giá trị của các pixel lân cận, để xóa bớt các đường gradient nhiễu(hình 2.27).
Hình 2.27: Giải thuật tô màu loang
Cuối cùng tìm các đường bao(hình 2.28) đối xứng với các kĩ thuật Hough Line, Hough Circle và contour tracing, lặp lại các bước từ tô màu loang tới tìm contour cho tới khi đạt được kết quả mong muốn.
Hình 2.28: Tìm các đường bao
Hình 2.29: Các bước thực hiện của Xianyu
Một nhược điểm của công cụ là với các ứng dụng có các element và background có màu tương tự nhau sẽ gây nhiễu cho quá trình phát hiện vật thể dẫn đến làm giảm sự chính xác cho công cụ.
Giải thuật deep learning
Đối với hướng giải quyết bằng giải thuật Deep learning, nhóm phát triển Xianyu đã đưa ra đề xuất sử dụng các mô hình mạng CNN sử dụng anchor box.
muốn sau khi giải quyết bài toán phát hiện vật thể là cho ra các bounding box thể hiện vùng bao xung quanh vật thể. Ở đây ý tưởng của việc áp dụng các mô hình CNN sử dụng anchor box đó chính là thay vì đi tìm thì ta sẽ khởi tạo các bounding box mẫu gọi là anchor box và cho mô hình mạng CNN học xem là có vật thể tồn tại ở trong bounding box cho trước đó không(hình 2.30).
Hình 2.30: Dự đoán xem object nằm ở anchor box nào
Các bước phát hiện vật thể với anchor boxes như sau:
• Với mỗi vật thể cần phát hiện sẽ đi kèm với một ground truth bounding box.
• Khởi tạo các anchor box với nhiều kích thước cũng như hình dạng khác nhau phủ đều trên từng pixel ảnh.
• Với mỗi anchor box, tính xem tỉ lệ diện tích phần chồng lắp trên diện tích gộp (hay tỉ lệ IOU) giữa anchor box với ground truth bouding box. • Nếu tỉ lệ IOU cao, thường trên 50%, mạng sẽ dự đoán có vật thể trong
• Nếu tỉ lệ IOU thấp, mạng sẽ dự đoán là không có vật thể trong anchor box này.
Hiện nay các mô hình state-of-the-art cho việc nhận diện vật thể phần nhiều áp dụng kĩ thuật anchor box và được chia làm 2 bước như sau:
• Mô hình nhận diện 2 bước: xây dựng đường ống phát hiện và phân loại, các giải thuật tiêu biểu là họ các mạng RCNN, ví dụ Faster RCNN. Như đã giải thích ở mạng CNN, ta sẽ có một vùng gọi là receptive field chứa các đặc trưng biểu diễn vật thể . Sử dụng bản đồ đặc trưng này hay gọi là feature map, ta sẽ áp dụng anchor box để từ đó đề xuất các bounding box tương ứng cho vật thể.
• Mô hình nhận diện 1 bước: thực hiện song song nhận diện và phân loại. Các mạng tiêu biểu là YOLO, SSD. Thay vì sử dụng feature map thì mô hình sử dụng đầu vào lả ảnh gốc và chia thành lưới, tại mỗi ô trên lưới dùng anchor box để tìm các bouding box tiềm năng và tính xác suất có vật thể tại ô đó không. Sau đó gộp hôi quy các box lại để được một box tổng thể.
2.3 Các thách thức tiêu biểu
Qua khảo sát các phương pháp và hướng tiếp cận hiện có, nhóm xin đưa ra một vài khó khăn cản trở việc nghiên cứu được ứng dụng rộng rãi như sau.
Sai khác giữa các GUI element trong cùng một lớp
Một GUI element được phân lớp phụ thuộc vào chức năng của nó. Khi GUI element được biểu diễn thành giao diện, element đó sẽ được tùy chỉnh các thông số như kích thước, màu sắc, vị trí, etc tùy thuộc vào mong muốn của người thiết kế. Giữa các GUI element thuộc 1 lớp có thể có nhiều biến thể khác nhau cho nên sẽ rất khó để có thể phát hiện và phân loại chính xác các GUI element.
Sự tương đồng giữa các GUI element khác lớp
Như đã nói ở trên thì các thuộc tính của một GUI element có thể được tùy chỉnh, vì vậy các GUI element thuộc các lớp khác nhau có thể có kích thước hay màu sắc giống nhau làm ảnh hưởng tới tính chính xác cho quá trình phát hiện và phân loại.
Xác định một element hay một tập các element
Một số GUI element có thể khá phức tạp, điển hình như ImageView là một vùng hiển thị ảnh. Nếu như background ảnh quá phức tạp ta có thể nhận diện được rất nhiều component bên trong ImageView nhưng thực chất tất cả vẫn chỉ là 1 bức ảnh. Vì vậy phải cân nhắc vấn đề này khi thực hiện bước phát hiện.
Khoảng cách giữa các GUI element với nhau
Một giao diện thường có rất nhiều GUI element và trong nhiều trường hợp các GUI element này nằm rất sát nhau. Lấy ví dụ như thanh menu gồm nhiều button nằm sát nhau, khi thực hiện phát hiện các element trong ảnh có khả năng vì các button nằm quá sát nên bộ phát hiện chỉ thấy có một element là cả thanh menu nhưng thực chất thanh menu lại có nhiều button. Cho nên đây là một thách thức trong quá trình xây dựng bộ phát hiện element trong giao diện.
Tính chính xác cao cho việc nhận diện
Đối với bài toán phát hiện vật thể, một chỉ số thường được sử dụng để đánh giá là IOU(Intersection Over Union, hình 2.31). Chỉ số này được tính dựa trên diện tích phần chồng lắp giữa 2 bounding box trên cho tổng diện tích phần hợp nhau. Trong bài toán phát hiện vật thể, như đã nói ở trên, ta sẽ có sẵn những ground truth bounding box và sẽ học cách để đưa ra dự đoán bouding box. Bằng cách tính IOU giữa bouding box dự đoán và ground
truth bounding box, ta sẽ kiểm chứng được box mà ta dự đoán đúng là vật thể hay không.
Đối với việc dự đoán các vật thể đơn giản như chó, mèo, xe cộ, etc, thì ngưỡng IOU đặt ra để xác định xem việc dự đoán đúng hay không thường khá thấp, chỉ tầm 0,5. Tuy nhiên đối với bài toán phát hiện các thành phần GUI này, ngưỡng IOU có yêu cầu khá cao bởi vì việc xác định thiếu chính xác sẽ ảnh hưởng tới bước phân loại các thành phần GUI và đưa ra các GUI component có kích thước, vị trí sai lệch so với ảnh gố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
Ở phần 2, nhóm đã phân tích các giải pháp được đề xuất cho bài toán
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. Mỗi cách tiếp cận đều có ưu nhược điểm riêng phần của mình.
Trong phần 3, nhóm sẽ trình bày hướng tiếp cận và giải pháp mà nhóm cho rằng là hiệu quả và phù hợp nhất. Hướng tiếp cận này dựa trên ý tưởng chính của hai bài nghiên cứu khoa học gần đây là ReDraw [23] và UI2CODE [21]
Những năm gần đây, với sự phát triển vượt bậc của các kỹ thuật liên quan đến Machine Learning nói chung hay Deep Learning nói riêng, hàng loạt các nghiên cứu khoa học đã công bố các mô hình mạng Neural đảm nhiệm vai trò trên, trong số các mô hình tiêu biểu không thể không kể đến các mô hình two-staged anchor-based. Mặc dù vậy, khi áp dụng dạng mô hình trên (cụ thể FasterRCNN) trong lĩnh vực này lại không đem lại kết quả khả quan. Giải pháp nhóm đưa ra cho bài toán này là sử dụng tổ hợp các kỹ thuật của thị giác máy tính truyền thống như: Flood Fill [28], Suzuki Contour Tracing [13], Shape Recognition [29], kết hợp vào các kỹ thuật hiện đại như: Scene Text Recognition [18], Classification Neural Network, etc để nhận diện và phân loại các thành phần giao diện.
giai đoạn xử lý chính: Phát hiện (detection), Nhận diện (classification) và tổ hợp (combine). Hình 3.1 thể hiện lược đồ đơn giản thứ tự hoạt động giữa các giai đoạn
Hình 3.1: Tổng quan giải pháp thực hiện đề tài của nhóm
3.1 Giai đoạn I - Phát hiện và khoanh vùng các thành phần giao diện
Phát hiện và khoanh vùng các thành phần giao diện là một bước quan trọng trong phương pháp mà nhóm đề xuất. Giai đoạn này (Hình 3.2) nhận
đầu vào là hình ảnh của giao diện người dùng, sử dụng các kỹ thuật trong Thị giác máy tính (Phát hiện cạnh - Edge detection hoặc Theo dõi đường bao - Contour tracing). Kết quả cuối cùng của quá trình phát hiện thành phần GUI là một tập hợp các tọa độ hộp giới hạn (bounding box) nằm trong ảnh chụp màn hình đầu vào ban đầu và một tập hợp các hình ảnh được cắt và trích xuất từ bản gốc ảnh chụp màn hình theo các hộp giới hạn mô tả các thành phần GUI. Thông tin này sau đó được cung cấp vào mạng CNN để được phân loại thành các lớp GUI trong Giai đoạn 2.2. Cần lưu ý rằng chỉ các thành phần GUI được phát hiện trong quá trình này, các tổ hợp GUI sẽ không được đề cập trong báo cáo này.
Algorithm 1: GUI Component Detector
Input :Screenshot of GUI
Output :Non-Text Component
// Step 1: Binarization
binary =Binarization(screen) // Step 2: First detection
width, height =Shape(screen)
out = []
fori←0 to width do for j ←0 to height do
map ← screen.Copy()
map =FloodFill(map, (i, j))
map =Segment(map)
out.Push(Component(map))
end end
// Step 3: Detection refinement
out =UnionOverlapsed(out) // Step 4: Nested fusion
3.2 Giai đoạn II - Phân loại các thành phầngiao diện giao diện
Sau khi các hộp giới hạn của các phần tử thành phần GUI đã được phát hiện từ bước trích xuất trước, bước tiếp theo trong phương pháp là phân loại hình ảnh đã được trích xuất của các thành phần GUI cụ thể vào từng lớp cụ thể. Trong báo cáo này, nhóm sử dụng hướng tiếp cận dựa trên dữ liệu cho mô hình học sâu CNN. Như minh họa trong 3.1 - 2.1 Data Processing và 3.1 - 2.2 Convolutional Neural Network, giai đoạn này có hai phần chính: (i) khai thác và tiền xử lý dữ liệu, và (ii) huấn luyện mạng học sâu CNN cho bài toán nhận diện hình ảnh GUI.
3.2.1 Khai thác và tiền xử lý dữ liệu
Với đặc trưng của phương pháp học giám sát và kiến trúc học sâu của chúng, các mạng CNN dùng cho phân loại hình ảnh yêu cầu một lượng lớn dữ liệu đào tạo để đạt được phân loại chính xác. Dữ liệu đào tạo cho mạng phân loại hình ảnh CNN truyền thống thường bao gồm một tập hợp lớn các hình ảnh được gắn nhãn với các lớp tương ứng của chúng, trong đó các nhãn tương ứng với các đối tượng trong hình ảnh. Nhóm tận dụng tập dữ liệu mở cung cấp bởi ReDraw [23] với ảnh chụp màn hình cho các ứng dụng trên nền tảng Android.
Nhóm đã thực hiện một số loại kỹ thuật tiền xử lý để lọc và khử nhiễu các ảnh chụp màn hình ứng dụng.
• Lược bỏ màn hình ngang: Để giữ cho chiều cao và chiều rộng của tất cả các màn hình đồng nhất, nhóm chỉ thu thập dữ liệu từ các màn hình hiển thị theo hướng dọc. Do đó, nhóm đã kiểm tra kích thước của ảnh chụp màn hình được trích xuất và xác minh rằng chiều rộng và chiều cao tương ứng với 1200x1920. Tuy nhiên, có một số trường hợp góc trong đó hình ảnh có kích thước chân dung chính xác nhưng nó lại
ở chế độ ngang. Vì vậy, để khắc phục điều này, nhóm đã kiểm tra tệp