Update: As the challenges are over, starting July 2021, the datasets are not available anymore.

Note: ImageCLEF DrawnUI 2021 is divided into 2 subtasks (challenges). This is the Screenshot challenge. For information on the Wireframe challenge click here. Both challenges dataset are shared together, so registering for one of these challenges will automatically give you access to the other one.

Note: Before trying to submit results, read the Submission instructions section on this page.

Challenge description

The increasing importance of User Interfaces (UIs) for companies highlights the need for novel ways of creating them. Currently, the process can be slow and error prone due to the constant communication between the specialists involved in this field, e.g., designers and developers. The efficiency of this pipeline can be improved by using machine learning and automation to create a bridge between the specialists.

By detecting a set of atomic user interface elements, a whole range of posibilities are created, from generating websites similar to the analysed page to generating code for a specific framework.

Due to the nature of the web, the data set is noisy, e.g., some of the annotations correspond to invisible elements, while other elements have missing annotations.

Given a set of screenshots of sections and full pages from high quality websites, participants are required to develop machine learning techniques that are able to predict the exact position and type of UI elements.

Data

As soon as the data is released it will be available under the "Resources" tab.

The provided data set consists of 9,276 screenshots of sections and full pages from high quality websites gathered using an in-house parser. Each image comes with the manual labeling of the positions of the bounding boxes corresponding to each UI element and its type. To avoid any ambiguity, a predefined shape dictionary with 6 classes is used, e.g., TEXT, IMAGE, BUTTON.

The development set contains 7,458 images with 6,555 noisy screenshots in the train set and 903 manually curated screenshots in the evaluation set. The test set contains 1,818 screenshots, also manually cleaned.

Classes

The classes and their corresponding indexes are the following:

[
    1: 'TEXT',
    2: 'IMAGE',
    3: 'BUTTON',
    4: 'HEADING',
    5: 'LINK',
    6: 'INPUT',
}

Annotation Format

The development set is formatted into 2 JSON files, one for train and one for evaluation, each containing a list of records, one for each image. Each record stores a list of annotations, each having the relative coordinates expressed as [top, left, height, width] using numbers between 0 and 1. The score is a number between 0 and 1, while the detectionString and detectionClass attributes correspond to the classes mentioned above.

[
  {
    "file": string,
    "width": number,
    "height": number,
    "annotations": [
      {
        "score": number,
        "detectionClass": number,
        "detectionString": string,
        "box": [
          top,
          left,
          height,
          width
        ]
      },
      {
        "score": number,
        "detectionClass": number,
        "detectionString": string,
        "box": [
          top,
          left,
          height,
          width
        ]
      },
      ...
    ]
  },
  {
    "file": string,
    "width": number,
    "height": number,
    "annotations": [
      {
          "score": number,
          "detectionClass": number,
          "detectionString": string,
          "box": [
            top,
            left,
            height,
            width
          ]
        },
        ...
    ]
  },
  ...
]

Example

Image 43b610b0-f1a3-11ea-935a-7b284523f48e_4.jpg from the development set

Here is the record for the file above while in development:

{
    "file": "43b610b0-f1a3-11ea-935a-7b284523f48e_4.jpg",
    "annotations": [
      {
        "score": 1,
        "detectionClass": 1,
        "detectionString": "TEXT",
        "box": [
          0.17121588089330025,
          0.013157894736842105,
          0.05955334987593052,
          0.39035087719298245
        ]
      },
      {
        "score": 1,
        "detectionClass": 4,
        "detectionString": "HEADING",
        "box": [
          0.23076923076923078,
          0.013157894736842105,
          0.09429280397022333,
          0.39035087719298245
        ]
      },
      {
        "score": 1,
        "detectionClass": 1,
        "detectionString": "TEXT",
        "box": [
          0.34987593052109184,
          0.013157894736842105,
          0.22332506203473945,
          0.39035087719298245
        ]
      },
      {
        "score": 1,
        "detectionClass": 3,
        "detectionString": "BUTTON",
        "box": [
          0.652605459057072,
          0.013157894736842105,
          0.13399503722084366,
          0.15087719298245614
        ]
      },
      {
        "score": 1,
        "detectionClass": 2,
        "detectionString": "IMAGE",
        "box": [0.0, 0.5131578947368421, 1.0, 0.47368421052631576]
      }
    ],
    "width": 1140,
    "height": 403
  }

Submission instructions

Before being allowed to submit your results, you have to first press the red participate button, which leads you to a page where you have to accept the challenges rules.

Participants will be permitted to submit up to 10 runs. Each system run will consist of a single JSON file. The results file should be formatted exactly like the development file: as a list of records, each corresponding to one of the test images. For each annotation, the confidence can be set in the score attribute, as a number between 0 and 1.

Evaluation criteria

The evaluation uses the pycocotools library with a maximum number of detections of 327.

The performance of the algorithms will be evaluated using the standard Mean Average Precision over IoU 0.50 and recall over IoU 0.50.

Rules

Note: In order to participate in this challenge you have to sign an End User Agreement (EUA). You will find more information on the 'Resources' tab.

ImageCLEF lab is part of the Conference and Labs of the Evaluation Forum: CLEF 2021. CLEF 2021 consists of independent peer-reviewed workshops on a broad range of challenges in the fields of multilingual and multimodal information access evaluation, and a set of benchmarking activities carried in various labs designed to test different aspects of mono and cross-language Information retrieval systems. More details about the conference can be found here.

Submitting a working note with the full description of the methods used in each run is mandatory. Any run that could not be reproduced thanks to its description in the working notes might be removed from the official publication of the results. Working notes are published within CEUR-WS proceedings, resulting in an assignment of an individual DOI (URN) and an indexing by many bibliography systems including DBLP. According to the CEUR-WS policies, a light review of the working notes will be conducted by ImageCLEF organizing committee to ensure quality. As an illustration, ImageCLEF 2019 working notes (task overviews and participant working notes) can be found within CLEF 2019 CEUR-WS proceedings.

Important

Participants of this challenge will automatically be registered at CLEF 2020. In order to be compliant with the CLEF registration requirements, please edit your profile by providing the following additional information:

• First name

• Last name

• Affiliation

• Address

• City

• Country

• Regarding the username, please choose a name that represents your team.

This information will not be publicly visible and will be exclusively used to contact you and to send the registration data to CLEF, which is the main organizer of all CLEF labs

Participating as an individual (non affiliated) researcher

We welcome individual researchers, i.e. not affiliated to any institution, to participate. We kindly ask you to provide us with a motivation letter containing the following information:

• the presentation of your most relevant research activities related to the task/tasks

• your motivation for participating in the task/tasks and how you want to exploit the results

• a list of the most relevant 5 publications (if applicable)

• the link to your personal webpage

The motivation letter should be directly concatenated to the End User Agreement document or sent as a PDF file to bionescu at imag dot pub dot ro. The request will be analyzed by the ImageCLEF organizing committee. We reserve the right to refuse any applicants whose experience in the field is too narrow, and would therefore most likely prevent them from being able to finish the task/tasks.

Citations

Information will be posted after the challenge ends.

Prizes

Publication

ImageCLEF 2021 is an evaluation campaign that is being organized as part of the CLEF initiative labs. The campaign offers several research tasks that welcome participation from teams around the world. The results of the campaign appear in the working notes proceedings, published by CEUR Workshop Proceedings (CEUR-WS.org). Selected contributions among the participants, will be invited for publication in the following year in the Springer Lecture Notes in Computer Science (LNCS) together with the annual lab overviews.

Resources

Contact us

Discussion Forum

• You can ask questions related to this challenge on the Discussion Forum. Before asking a new question please make sure that question has not been asked before.

Discussion Forum: Click Discussion tab or direct link: https://www.aicrowd.com/challenges/imageclef-2021-drawnui-screenshot/discussion

Alternative channels

We strongly encourage you to use the public channels mentioned above for communications between the participants and the organizers. In extreme cases, if there are any queries or comments that you would like to make using a private communication channel, then you can send us an email at :

• paul[dot]brie[at]teleporthq[dot]io
• dimitri[dot]fichou[at]teleporthq[dot]io
• stefan[dot]liviu[dot]daniel[at]gmail[dot]com
• cmihaigabriel[at]gmail[dot]com
• dogariu[dot]mihai8[at]gmail[dot]com
• bogdanlapi[at]gmail[dot]com

More information

You can find additional information on the challenge here: https://www.imageclef.org/2021/drawnui

Acknowledgements

Mihai Dogariu, Liviu-Daniel Ștefan, Mihai Gabriel Constantin and Bogdan Ionescu's contribution to this task is supported under project AI4Media, A European Excellence Centre for Media, Society and Democracy, H2020 ICT-48-2020, grant #951911.