Detection of Web-Based User Interface Elements Using YOLOv8 and EfficientDet

ALBERTUS HANDY PRAMANA RENDRA, Dr. Suprapto, M.I.Kom.

2024 | Skripsi | ILMU KOMPUTER

Pengembangan antarmuka web melibatkan proses yang kompleks dan berulang. Integrasi model deep learning menjanjikan peningkatan efisiensi pengembangan dan optimalisasi pengalaman pengguna. Deteksi elemen antarmuka pengguna merupakan aspek penting dalam alat otomatisasi pengembangan antarmuka berbasis deep learning. Namun, deteksi elemen antarmuka menghadirkan beberapa tantangan. Masalah-masalah ini termasuk penggunaan model dan kumpulan data yang sudah usang. Memilih model yang optimal menjadi sulit dilakukan karena kurangnya informasi mengenai penggunaan model baru pada data antarmuka terkini.

Penelitian ini mengusulkan pengumpulan data dan penggunaan model baru untuk mengatasi permasalahan yang ada. Data dikumpulkan dari 38 situs web pada platform Tailwind Showcase untuk memastikan relevansinya dengan tren antarmuka terkini. Penelitian ini membandingkan model YOLOv8 dan EfficientDet, keduanya merupakan model deteksi objek berbasis single-stage yang dikenal dengan kecepatannya. Perbandingan ini berfokus pada akurasi dan efisiensi model untuk menentukan model yang lebih cocok untuk kasus penelitian ini.

Sebuah kumpulan data baru yang terdiri dari 640 gambar yang memuat enam kelas elemen antarmukaa diperoleh dan diberi anotasi dengan lebih dari 12.000 label. Beberapa hasil uji coba menggunakan kumpulan data ini menunjukkan bahwa YOLOv8 mencapai skor mAP yang lebih tinggi sebesar 84,9% dibandingkan dengan EfficientDet sebesar 59,6%. Selain itu, YOLOv8 menawarkan kecepatan inferensi yang lebih cepat, yaitu 11,9 ms dibandingkan dengan EfficientDet senilai 27,3 ms. YOLOv8 juga membutuhkan memori komputasi yang lebih kecil, yaitu 5,2 GB dibandingkan dengan EfficientDet sebesar 14,5 GB. Berdasarkan temuan ini, YOLOv8 lebih cocok untuk tugas deteksi elemen antarmuka web.

Website development involves complex and iterative processes. Integrating deep learning models holds promise for enhancing development efficiency and optimizing the user experience. A pivotal aspect of deep learning user interface (UI) development automation tools is the detection process for UI elements. However, UI element detection presents several challenges. These issues include the use of outdated models and datasets. Choosing the optimal model is difficult due to the lack of information regarding using new models on recent UI data.

This research proposes collecting datasets and using new models to solve existing issues. The dataset was collected from 38 websites on the Tailwind Showcase platform to ensure its relevance to current UI trends. This study compares the YOLOv8 model and EfficientDet, both single-stage object detection models known for their speed. The comparison focuses on the model's accuracy and efficiency to determine which was more suitable for this research case.

A new dataset of 640 images containing six UI element classes was acquired and annotated with more than 12,000 labels. Several test case results using this dataset show that YOLOv8 achieved a superior mAP score of 84.9% compared to EfficientDet's 59.6%. In addition, YOLOv8 offers a faster inference speed of 11.9 ms than EfficientDet's 27.3 ms. YOLOv8 also requires a smaller computation memory of 5.2 GB than EfficientDet's 14.5 GB. Based on these findings, YOLOv8 is more suitable for Web UI element detection tasks.

Kata Kunci : Web Development, User Interface, Object Detection, Deep Learning, YOLOv8, EfficientDet