Comparative Analysis of Large Language Models for Annotating Mobile User Interfaces. Masters thesis, King Fahd University of Petroleum and Minerals.

PDF MS_Thesis_Report_Athar.pdf - Accepted Version Restricted to Repository staff only until 18 May 2027. Available under License Creative Commons Attribution No Derivatives. Download (3MB)

Arabic Abstract

تُعد واجهات المستخدم الخاصة بالهواتف المحمولة جزءًا أساسيًا من التفاعل الرقمي الحديث، حيث تدعم مجموعة واسعة من المهام في مجالات الاتصال، والتعليم، والتجارة، والتمويل، والترفيه، والإنتاجية. ومع ازدياد غنى تطبيقات الهواتف المحمولة بالعناصر البصرية وتعقيد بنيتها، أصبح الفهم الآلي لشاشات واجهات المستخدم مشكلة بحثية مهمة للأنظمة البرمجية الذكية، بما في ذلك أدوات إمكانية الوصول، وأطر الاختبار الآلي، وأنظمة تحليل التصميم، والوكلاء متعددي الوسائط. ومع ذلك، لا يزال التقدم في فهم واجهات المستخدم المحمولة محدودًا بسبب نقص مجموعات البيانات عالية الجودة المشروحة، وصعوبة التعرف الدقيق على عناصر الواجهة الدقيقة داخل لقطات الشاشة. تقدم هذه الرسالة مجموعة بيانات مشروحة من قبل خبراء لواجهات مستخدم نظام iOS، بالإضافة إلى إطار عمل قائم على النماذج اللغوية الكبيرة الوكيلة لفهم واجهات المستخدم المحمولة. تتكون مجموعة البيانات من 1000 لقطة شاشة جُمعت من 38 تطبيقًا حقيقيًا لنظام iOS تغطي فئات تطبيقات متنوعة. وقد تم شرح كل شاشة على مستوى عناصر الواجهة باستخدام تصنيف يتضمن 36 فئة من عناصر الواجهة، مثل الأزرار، والأيقونات، والتسميات النصية، والصور، وعلامات التبويب، والبطاقات، وحقول الإدخال، ومكونات التنقل، وغيرها من العناصر الشائعة في الواجهات. ولدعم عملية شرح منظمة ومتسقة، تم تطوير أداة شرح مخصصة تعتمد على الويب، تتيح للمشرفين رسم مربعات الإحاطة، وتعيين التسميات الدلالية، وتصدير الشروحات بصيغة JSON. كما تضمنت عملية الشرح مشاركة خبراء في تصميم وتجربة المستخدم، إلى جانب مرحلة تحقق لتحسين موثوقية واتساق مجموعة البيانات الناتجة. بالإضافة إلى بناء مجموعة البيانات، تقوم هذه الرسالة بتقييم قدرة النماذج اللغوية الكبيرة متعددة الوسائط على استخراج عناصر واجهات المستخدم من لقطات شاشات الهواتف المحمولة. وقد تمت صياغة المهمة باعتبارها مشكلة تنبؤ منظم تعتمد على التوجيه النصي، حيث يستقبل النموذج لقطة شاشة ويولد شروحات بصيغة JSON تحتوي على تسميات عناصر الواجهة وإحداثيات مربعات الإحاطة الخاصة بها. ويعتمد التقييم على قياس كل من الدقة المكانية والصحة الدلالية باستخدام معايير Intersection over Union وPrecision وRecall وF1-score. كما تقارن الدراسة بين النماذج متعددة الوسائط المغلقة المصدر والمفتوحة المصدر ضمن بيئة تقييم موحدة. علاوة على ذلك، تقترح هذه الرسالة سير عمل وكيل لشرح واجهات المستخدم تم تنفيذه باستخدام منصة أتمتة سير العمل n8n. ويهدف سير العمل إلى دراسة ما إذا كان تقسيم مهمة الشرح إلى خطوات أصغر مدفوعة بالنماذج اللغوية الكبيرة يمكن أن يحسن أداء عملية الشرح. واستنادًا إلى تحليل التكرار التراكمي، تم اختيار أكثر ثمانية أنواع شيوعًا من عناصر الواجهة لإجراء تجارب تحسين سير العمل. وتم تقييم أربع استراتيجيات للشرح: سير عمل بخطوة واحدة، وخطوتين، وأربع خطوات، وثماني خطوات. وأظهرت النتائج أن سير العمل المكوَّن من خطوتين يحقق أفضل أداء إجمالي، مما يشير إلى أن التقسيم المعتدل للمهام يمكن أن يقلل من تعقيد التوجيهات مع الحفاظ على سياق الشاشة بشكل كافٍ. كما أوضحت تجارب إضافية باستخدام مجموعات مكونة من عنصر واحد، وعنصرين، وأربعة عناصر، وثمانية عناصر، أن أداء الشرح يتأثر بكل من صعوبة العنصر ذاته وتصميم سير العمل. بشكل عام، تساهم هذه الرسالة في تقديم مجموعة بيانات عالية الجودة ومشروحة من قبل خبراء لواجهات مستخدم iOS، وأداة شرح مخصصة، ومعيار تقييم لاستخراج عناصر الواجهة باستخدام النماذج اللغوية الكبيرة متعددة الوسائط، بالإضافة إلى إطار عمل قائم على سير العمل الوكيل لتحسين الشرح الآلي لواجهات المستخدم. وتُظهر النتائج أن النماذج متعددة الوسائط قادرة على دعم فهم واجهات المستخدم المحمولة، لكنها تكشف أيضًا عن تحديات مهمة تتعلق بالعناصر الصغيرة، والتخطيطات الكثيفة، والمكونات الغامضة، والدقة المكانية في تحديد العناصر. وتمثل هذه المساهمات أساسًا للأبحاث المستقبلية في مجال الفهم المتقدم لواجهات المستخدم المحمولة، والشرح الآلي، والأنظمة الوكيلة متعددة الوسائط.

English Abstract

Mobile user interfaces are central to modern digital interaction, supporting a wide range of tasks across communication, education, commerce, finance, entertainment, and productivity. As mobile applications become more visually rich and structurally complex, automatic understanding of user interface screens has become an important research problem for intelligent software systems, including accessibility tools, automated testing frameworks, design analysis systems, and multimodal agents. However, progress in mobile UI understanding is still limited by the availability of high-quality annotated datasets and by the difficulty of accurately identifying fine-grained UI elements from screenshots. This thesis presents an expert-annotated iOS user interface dataset and an agentic large language model based framework for mobile UI understanding. The dataset consists of 1,000 screenshots collected from 38 real-world iOS applications across diverse application categories. Each screen is annotated at the UI element level using a taxonomy of 36 element classes, including buttons, icons, labels, images, tabs, cards, input fields, navigation components, and other common interface elements. To support consistent and structured annotation, a custom web-based annotation tool was developed, allowing annotators to draw bounding boxes, assign semantic labels, and export annotations in JSON format. The annotation process involved UI/UX experts and a validation stage to improve the reliability and consistency of the resulting dataset. In addition to dataset construction, this thesis benchmarks the ability of multimodal large language models to perform UI element extraction from mobile screenshots. The task is formulated as a prompt-based structured prediction problem, where a model receives a screenshot and generates JSON annotations containing UI element labels and bounding box coordinates. The evaluation considers both spatial localization and semantic correctness using Intersection over Union, precision, recall, and F1-score. The benchmark compares closed-source and open-source multimodal models under a unified evaluation setting. Furthermore, this thesis proposes an agentic UI annotation workflow implemented using the n8n workflow automation platform. The workflow investigates whether decomposing the annotation task into smaller LLM-driven steps can improve annotation performance. Based on cumulative frequency analysis, the eight most frequent UI element types were selected for workflow optimization experiments. Four annotation strategies were evaluated: one-step, two-step, four-step, and eight-step workflows. The results show that the two-step workflow achieves the best overall performance, indicating that moderate task decomposition can reduce prompt complexity while preserving sufficient screen context. Additional experiments with single-element, two-element, four-element, and eight-element groupings further show that annotation performance is affected by both element-level difficulty and workflow design. Overall, this thesis contributes a high-quality expert-annotated iOS UI dataset, a custom annotation tool, a benchmark for multimodal LLM-based UI element extraction, and an agentic workflow-based framework for improving automated UI annotation. The findings demonstrate that multimodal LLMs can support mobile UI understanding, but also reveal important challenges related to small elements, dense layouts, ambiguous components, and precise spatial grounding. These contributions provide a foundation for future research on robust mobile UI understanding, automated annotation, and agentic multimodal systems.

Item Type:	Thesis (Masters)
Subjects:	Computer
Department:	College of Computing and Mathematics > Information and Computer Science
Thesis Advisor:	Omar Hammad,
Thesis Committee Members:	Sajjad Mahmood, Jameleddine Hassine,
Depositing User:	ATHAR PARVEZ (g202393830)
Date Deposited:	20 May 2026 11:34
Last Modified:	20 May 2026 11:34
URI:	https://eprints.kfupm.edu.sa/id/eprint/144353