Automated generation of mobile UI layout files via a custom GUI element detection model trained with YOLOv5

Abstract

Mobil uygulama geliştirmede, tutarlı bir kullanıcı arabirimi (UI) oluşturmak maliyetli ve zaman alan bir süreç olabilir. Bu, özellikle bir kuruluşun iOS ve Android gibi her bir mobil platform için ayrı bir ekibi olması durumunda geçerlidir. Bu bağlamda, UI tasarım görevlerinin meşakkatli kısımlarından biri, bir grafik kullanıcı arayüzü (GUI) oluşturmaktır. Buna göre, bu çalışma YOLOv5'i belirli bir UI görüntüsündeki GUI öğelerini tanıyan özel bir nesne algılama modeli oluşturmak için kullanmayı amaçlamaktadır. Yeni eğitilen YOLOv5 GUI öğe algılama modelini karşılaştırmak için, literatürdeki mevcut çalışmalar ve bunların veri kümeleri dikkate alınır ve karşılaştırma amacıyla kullanılır. Bu nedenle, bu çalışma test için VINS veri setinin 450 UI örneğini, doğrulama için benzer bir miktarı ve model eğitimi için geri kalanını kullanır. Daha sonra bu çalışmanın bulguları, modelini eğitmek, doğrulamak ve test etmek için tek atış dedektörü (SSD) algoritmasını ve VINS veri setini kullanan başka bir çalışma ile karşılaştırıldı ve önerilen algoritmanın SSD'nin ortalama ortalama kesinliğini (mAP) %15,69 oranında geride bıraktığını gösterdi. Ayrıca, bu çalışma belirli bir mobil kullanıcı arayüzü tasarımının iOS ve Android kullanıcı arayüzü düzen dosyalarını oluşturmak için bu özel GUI öğe algılama modelini kullanan bir çerçeve önermektedir. Bu şekilde, bu çerçeve, algılanan GUI öğelerinin özniteliklerini keşfetmek ve çıkarmak için makine öğrenimi algoritmalarını kullanır. Ardından, çerçeve, iOS ve Android platformları için kullanıcı arabirimi düzen dosyaları oluşturmak üzere bu öznitelikleri kullanır. Bu çerçeveyi değerlendirmek için, VINS veri setinden 5 test görseli rastgele seçildi ve çerçeveye girdi olarak verildi. Çerçeve, her test görüntüsü için iOS ve Android UI düzen dosyaları oluşturdu. Daha sonra, kullanıcı arabirimi düzen dosyalarının önizlemesi ekran görüntüleri olarak yakalanmış ve görüntü benzerliği metrikleri kullanılarak giriş testi görüntüsüyle karşılaştırılmıştır. Test sonuçları, önerilen çerçevenin oluşturulan iOS ve Android UI tasarımlarında sırasıyla 0.731 ve 0.703 ortalama yapısal benzerlik (SSIM) puanı elde ettiğini ortaya koydu. Ayrıca çerçeve, verilen test görüntülerinde ortalama olarak iOS için %83.41 ve Android platformları için %81.29 piksel tabanlı benzerliğe sahip UI tasarımları sağlamıştır.

In mobile application development, building a consistent user interface (UI) might be a costly and time-consuming process. This is especially the case if an organization has a separate team for each mobile platform such as iOS and Android. In this regard, one of the most parts of the UI design task is creating a graphical user interface (GUI). Accordingly, this study aims to employ the YOLOv5 to create a custom object detection model that recognizes GUI elements in a given UI image. In order to benchmark the newly trained YOLOv5 GUI element detection model, existing work from the literature and their datasets are considered and used for comparison purposes. Accordingly, this study makes use of 450 UI samples of the VINS dataset for testing, a similar amount for validation, and the rest for model training. Then the findings of this work are compared with another study that has used the single shot detector (SSD) algorithm and VINS dataset to train, validate and test its model, which showed that the proposed algorithm outperformed SSD's mean average precision (mAP) by 15.69%. Moreover, this study proposes a framework that utilizes this custom GUI element detection model to generate iOS and Android UI layout files of a given mobile UI design. Thus, this framework uses machine learning algorithms to explore and extract the attributes of the detected GUI elements. Then, the framework engages in these attributes to generate UI layout files for iOS and Android platforms. To evaluate this framework, 5 test images from the VINS dataset were randomly selected and given as input for the framework. The framework generated iOS and Android UI layout files for each test image. Lastly, the preview of the UI layout files has been captured as screenshots and compared with its input test image using image similarity metrics. The test results revealed that the proposed framework has obtained an average structural similarity (SSIM) score of 0.731 and 0.703 on generated iOS and Android UI designs respectively. Moreover, on average, the framework has yielded UI designs with pixel-based similarity of 83.41% for iOS and 81.29% for Android platforms on given test images.