Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

GUing: A Mobile GUI Search Engine using a Vision-Language Model

Jialiang Wei, Anne-Lise Courbis, Thomas Lambolais, Binbin Xu, Pierre Louis Bernard, Gérard Dray, Walid Maalej

TL;DR

The results demonstrate that the model outperforms previous approaches in text-to-GUI retrieval achieving a Recall@10 of up to 0.69 and a HIT@10 of 0.91, and the performance of GUIClip for other GUI tasks, including GUI classification and sketch-to-GUI retrieval with encouraging results.

Abstract

Graphical User Interfaces (GUIs) are central to app development projects. App developers may use the GUIs of other apps as a means of requirements refinement and rapid prototyping or as a source of inspiration for designing and improving their own apps. Recent research has thus suggested retrieving relevant GUI designs that match a certain text query from screenshot datasets acquired through crowdsourced or automated exploration of GUIs. However, such text-to-GUI retrieval approaches only leverage the textual information of the GUI elements, neglecting visual information such as icons or background images. In addition, retrieved screenshots are not steered by app developers and lack app features that require particular input data. To overcome these limitations, this paper proposes GUing, a GUI search engine based on a vision-language model called GUIClip, which we trained specifically for the problem of designing app GUIs. For this, we first collected from Google Play app introduction images which display the most representative screenshots and are often captioned (i.e.~labelled) by app vendors. Then, we developed an automated pipeline to classify, crop, and extract the captions from these images. This resulted in a large dataset which we share with this paper: including 303k app screenshots, out of which 135k have captions. We used this dataset to train a novel vision-language model, which is, to the best of our knowledge, the first of its kind for GUI retrieval. We evaluated our approach on various datasets from related work and in a manual experiment. The results demonstrate that our model outperforms previous approaches in text-to-GUI retrieval achieving a Recall@10 of up to 0.69 and a HIT@10 of 0.91. We also explored the performance of GUIClip for other GUI tasks including GUI classification and sketch-to-GUI retrieval with encouraging results.

GUing: A Mobile GUI Search Engine using a Vision-Language Model

TL;DR

The results demonstrate that the model outperforms previous approaches in text-to-GUI retrieval achieving a Recall@10 of up to 0.69 and a HIT@10 of 0.91, and the performance of GUIClip for other GUI tasks, including GUI classification and sketch-to-GUI retrieval with encouraging results.

Abstract

Graphical User Interfaces (GUIs) are central to app development projects. App developers may use the GUIs of other apps as a means of requirements refinement and rapid prototyping or as a source of inspiration for designing and improving their own apps. Recent research has thus suggested retrieving relevant GUI designs that match a certain text query from screenshot datasets acquired through crowdsourced or automated exploration of GUIs. However, such text-to-GUI retrieval approaches only leverage the textual information of the GUI elements, neglecting visual information such as icons or background images. In addition, retrieved screenshots are not steered by app developers and lack app features that require particular input data. To overcome these limitations, this paper proposes GUing, a GUI search engine based on a vision-language model called GUIClip, which we trained specifically for the problem of designing app GUIs. For this, we first collected from Google Play app introduction images which display the most representative screenshots and are often captioned (i.e.~labelled) by app vendors. Then, we developed an automated pipeline to classify, crop, and extract the captions from these images. This resulted in a large dataset which we share with this paper: including 303k app screenshots, out of which 135k have captions. We used this dataset to train a novel vision-language model, which is, to the best of our knowledge, the first of its kind for GUI retrieval. We evaluated our approach on various datasets from related work and in a manual experiment. The results demonstrate that our model outperforms previous approaches in text-to-GUI retrieval achieving a Recall@10 of up to 0.69 and a HIT@10 of 0.91. We also explored the performance of GUIClip for other GUI tasks including GUI classification and sketch-to-GUI retrieval with encouraging results.
Paper Structure (64 sections, 1 equation, 9 figures, 7 tables)

This paper contains 64 sections, 1 equation, 9 figures, 7 tables.

Table of Contents

  1. Introduction
  2. Dataset Creation
  3. Image Collection
  4. Image Classification
  5. Classification Model
  6. Creation of Training Data
  7. Classification Performance
  8. Applying the Classifier
  9. Screen Cropping
  10. Object Detection Model
  11. Creation of Training Data
  12. Detection Performance
  13. Applying the Detector
  14. Caption Recognition
  15. Applying OCR
  16. ...and 49 more sections

Figures (9)

  • Figure 1: Overview of our approach: including the creation of the datasets, the training of the vision-language model GUIClip, the development of the GUI search engine, and the process of querying on the engine.
  • Figure 2: Examples of app introduction images from Google Play app store.
  • Figure 3: Overview of dataset creation pipeline.
  • Figure 4: Overview of GUing, our GUI search engine for text-to-GUI retrieval.
  • Figure 5: Overview of contrastive learning to train our vision-language model GUIClip (adapted from Radford et al. Radford:LearningTransferableVisual:2021).
  • ...and 4 more figures