Deteksi Objek Elemen User Interface Menggunakan Kombinasi Model Deep Learning Transformer dan Pemrosesan Citra

Nasywa Syifa Azizah, Afiahayati, S.Kom., M.Cs., Ph.D

2025 | Skripsi | ILMU KOMPUTER

Kompleksitas pemahaman UI otomatis, yang juga disebabkan oleh faktor-faktor seperti elemen dan komponen yang bervariasi dan padat, varians yang tinggi dan kemiripan silang (cross-similarity) yang tinggi antara berbagai jenis elemen UI, berkontribusi terhadap performa untuk task deteksi elemen UI individu berdasarkan citra, di mana metode-metode yang ada relatif belum optimal, yaitu sekitar 76,39% untuk mean average precision (mAP) dan 62,6% untuk F1-Score. Penelitian ini mengusulkan penggunaan metode yang dimodifikasikan dari Xiao dkk. (2024), yaitu kombinasi model Deformable-DETR dengan metode color map dari pendekatan UIED (Xie dkk., 2020) pada feature fusion network, dan iterative bounding box refinement menggunakan prior group distribution, yang sebelumnya digunakan untuk deteksi kelompok elemen UI. Sistem dilatih dan diuji menggunakan dataset publik VINS (Bunian dkk., 2021), yang berisi citra UI mobile. Evaluasi dilakukan menggunakan metrik akurasi, presisi, recall, dan F1-score pada tiga threshold Intersection over Union (IoU): ? 0.5, ? 0.75, dan ? 0.9, serta mean average precision (mAP) pada rentang IoU dari 0.5 hingga 0.95 dengan inkremen 0,05. Hasil juga dibandingkan dengan model SSD VGG dan Faster-RCNN untuk melihat efektivitas sistem terhadap pendekatan yang sudah ada. Pada IoU>=0,5, sistem yang diusulkan mengungguli Faster-RCNN dengan  akurasi 62,84% (lebih tinggi 0,78%), presisi 78,76% (lebih tinggi 4,22%), dan F1-Score 77,18% (lebih tinggi 0,53%). Namun, pada evaluasi mAP dengan rentang IoU 0.5–0.95, sistem hanya mencapai 20,7%, yang jauh lebih rendah dibandingkan SSD VGG dan Faster-RCNN.  Hal ini menunjukkan bahwa sistem unggul dalam mendeteksi objek pada threshold IoU yang lebih rendah, namun mengalami penurunan performa pada threshold yang lebih ketat. 

The complexity of automatic UI understanding, caused by various factors such as varying and dense elements and components, high variance and cross-similarity between UI element types, contributes towards the performance for the task of  individual UI element detection, in which the existing methods are still relatively not optimal, ranging around 76.39% for mean average precision (mAP) and 62.6% for F1-Score. This research proposes the usage of a method modified from Xiao et al. (2024), which is a combination of a Deformable-DETR model with a color map method taken from the UIED (Xie et al., 2020) approach in a feature fusion network, and iterative bounding-box refinement using prior-based group distribution, that was previously used to detect UI element groups. The system was trained and evaluated using the public VINS dataset (Bunian et al., 2021), containing images of mobile UI. Evaluation was done using the metrics of accuracy, precision, recall, and F1-Score on three Intersection over Union (IoU) thresholds: ? 0.5, ? 0.75, dan ? 0.9, as well as mean average precision (mAP) for IoU range from 0.5 to 0.95 with 0.05 increment. The results were also compared with the SSD VGG and Faster-RCNN models to determine the system's effectiveness against existing approaches. At IoU>=0.5, the proposed system outperforms Faster-RCNN with an accuracy of 62.84% (0.78% higher), precision of 78.76% (4.22% higher), and F1-Score of 77.18% (0.53% higher). However, in the mAP evaluation with the range of 0.5-0.95, the system could only achieve 20.7%, which is much lower compared to SSD VGG and Faster-RCNN. This shows that the system excels at detecting objects at lower IoU thresholds, but suffers from degraded performance at stricter IoU thresholds.

Kata Kunci : deep learning,transformer,Deformable-DETR,user interface,deteksi objek