2 Nền tảng và các cơng trình liên quan
4.4.3 Kiến trúc tổng quan
Hình 4.13 dưới đây là kiến trúc tổng quan của hệ thống (theo mơ hình layer patterm) bao gồm 3 layer:
• Tầng Presentation: Nơi sẽ hiển thị giao diện trực quan của ứng dụng để người dùng tương tác đồng thời hiện thị kế quả cho người dùng xem.
• Tầng Business Logic: Nơi chịu trách nhiệm chính trong việc tiếp nhận và xử lý các yêu cầu từ người dùng như nhận diện và phân loại các GUI Component theo yêu cầu của người dùng.
• Tầng Data: Tại đây dữ liệu của người dùng sẽ được lưu trữ như là kết quả nhận diện GUI Component theo các file tĩnh.
Hình 4.13: Kiến trúc tổng quan của hệ thống
Về mặt cơng nghệ sử dụng, nhóm áp dụng những cơng nghệ sau:
• Về phía Front-end: Reactjs
• Về phía Back-end: Nodejs + Python.
• Tầng Data: Cơ sở dữ liệu sử dụng MongoDB để lưu tài khoản người dùng.
5 Kết luận
5.1 Đánh giá kết quả 5.1.1 Thành quả đạt được
• Xác định 4 đặc điểm của giao diện người dùng gây khó khăn trong việc áp dụng các kỹ thuật Phát hiện và Nhận dạng vật thể hiện đại, bao gồm: tính đa dạng trong một lớp (large in-class variance), tính tương tự giữa các lớp (high cross-class similarity), tính hỗn hợp các đối tượng không đồng nhất (Mix of heterogeneous objects) và cuối cùng, tính chồng chất (packed or close-by element).
• Giải thích tại sao các mơ hình, mạng neural hiện khơng có hoạt động hiệu quả cho bài toán Nhân diện và Phân loại Giao diện người dùng. • Giải thích tại sao cách tiếp cận lai giữa các kỹ thuật hiện đại và truyền
thống lại mang lại kết quả tốt hơn.
• Hiện thực và xây dựng ứng dụng cho phép người dùng tương tác và trực quan hố giải thuật.
5.1.2 Các hạn chế
• Một số nghiên cứu khoa học chỉ công bố kết quả và các lập luận nghiên cứu chứ không công khai dữ liệu cũng như mã nguồn nên nhóm gặp khó khăn trong việc đánh giá lại các nghiên cứu này.
• Việc ứng dụng các giải thuật AI trong lĩnh vực này con khá mới mẻ nên hạn chế về nguồn tài liệu tham khảo cũng như hạn chế về mặt dữ liệu dẫn đến kết quả đánh giá chưa cao.
5.2 Hướng phát triển
Vì đề tài cịn khá mới và chưa có nhiều paper nghiên cứu cũng như chưa có các sản phẩm nào ngồi thị trường nên nhóm chưa có đủ tài liệu để tham khảo. Tuy nhiên nhóm sẽ dựa vào các lí thuyết đã tìm hiểu được và dự định tìm hiểu thêm các 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 các kĩ thuật xử lý ngơn ngữ tự nhiên cũng như các mạng học sâu khác để giải quyết vấn đề này.
Ngồi ra, nhóm cịn dự định sẽ phát triển thêm một số tính năng cho sản phẩm của mình 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ữ, nền tảng khác nhau: Ngày nay, nhiều lập trình viên thường sử dụng các framework khác nhau như React Js, React Native, Flutter. Việc hỗ trợ sinh mã trên những nền tảng phổ biến sẽ giúp tiếp cận được với nhiều khách hành hơn, đồng thời cũng giúp các lập trình viên dễ dàng hơn trong 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 khi detect được các thành phần GUI Component, người dùng có thể chỉnh sửa kích thước, vị trí, màu sắc,... của các component ở trang Dashboard. Điều này giúp cho người dùng có thể thay đổi theo ý muốn của mình mà khơng cần phải chỉnh sửa trong mã nguồn.
6 Kế hoạch thực hiện
Dựa trên giải pháp đề xuất, nhóm tác giả đưa ra những cơng việc thực hiện trong giai đoạn Luận văn Tốt nghiệp và thời gian thực hiện như sau:
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
[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 Pro- posal 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)
[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 Applica- tions
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
[30] Digital Image Processing
http://web.ipac.caltech.edu/staff/fmasci/home/astro_refs/ Digital_Image_Processing_2ndEd.pdf
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
Giao diện WebApp được xây dựng trực quan và dễ dàng thao tác. Bao gồm các phần:
• Phần giới thiệu
• Các tính năng nổi bật của 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 hoặc là mục Tooltrên thanh Header để đi đến nhanh phần cơng cụ.
Hình A.1: Đi đến nhanh phần công cụ
Sau khi chọn xong, trang web sẽ chuyển tới mụcTool, tại đây, người dùng
chọn Quick Start để bắt đầu trải nghiệm nhanh các tính năng.
Giao điện sẽ chuyển đến phần công cụ. Tại bước đầu tiên, người dùng chọn một trong số các hình ảnh giao diện có sẵn. Sau khi chọn được ảnh, người dùng nhấn Next để chuyển qua bước tiếp theo.
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 các tham số cần thiết (có thể giữ nguyên giá trị mặc định). Sau khi hoàn thành xong, bấm vào Process để ứng dụng xử lý và phân tích các thành phần component có thể có trong hình ảnh.
Hình A.4: Lựa chọn cơng cụ và điều chỉnh tham số
Sau khi có kết quả, người dùng bấm vào nútView result để chuyển qua bước tiếp theo.
Trong màn hình kết quả, người dùng có thể thấy được hình ảnh gốc (được chọn ở bước đầu tiên) và hình ảnh kết quả. Trong hình ảnh kết quả, các thành phần Component mà ứng dụng detect được được bao xung quanh bằng các viền có màu sắc khác nhau.
Hình A.5: Kết quả sau khi nhận diện
Người dùng có thể nhấn vàoDashboard để chuyển đến giao diện Dash- board để có thể xem chi tiết hơn.
Tại trang Dashboard, người dụng có thể xem chi tiết được các component
mà ứng dụng detect được cũng như các thuộc tính html của nó như vị trí, chiều dài, chiều rộng.
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 có thể tự tải ảnh thiết kế giao diện của mình để cơng cụ nhận diện của chúng tơi bằng cách upload ảnh của mình lên. Tại trang Homapage, người dùng nhấn vào mục Toolở trên thanh Header để chuyển đến mục Tool.
Hình A.7: Cơng cụ dành cho bản thiết kế của 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 bản thiết kế của mình lên.
Hình A.8: Tải bản thiết kế của người dùng lên