AIcrowd | ImageCLEF 2021 DrawnUI - Wireframe

Official Round: Completed

ImageCLEF

2826

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 Wireframe challenge. For information on the Screenshot 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: Do not forget to read the Rules section on this page. Pressing the red Participate button leads you to a page where you have to agree with those rules. You will not be able to submit any results before agreeing with the rules.

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

Challenge description

Building websites requires a very specific set of skills. Currently, the two main ways to achieve this is either by using a visual website builder or by programming. Both approaches have a steep learning curve. Enabling people to create websites by drawing them on a whiteboard or on a piece of paper would make the webpage building process more accessible.

A first step in capturing the intent expressed by a user through a wireframe is to correctly detect a set of atomic user interface elements (UI) in their drawings. The bounding boxes and labels resulted from this detection step can then be used to accurately generate a website layout using various heuristics.

In this context, the detection and recognition of hand drawn website UIs task addresses the problem of automatically recognizing the hand drawn objects representing website UIs, which are further used to be translated automatically into website code.

Given a set of images of hand drawn UIs, 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 4,291 hand drawn images inspired from mobile application screenshots and actual web pages. 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 21 classes is used, e.g., paragraph, label, header. The development set contains 3,218 images while the test set contains 1,073 images.

Comparison with last year dataset:

All images from last year develpment set are still present in this year development set
The test contain only new images.
Additionnal images had been selected to rebalance the classes as much as possible.

Classes

The 21 classes and their corresponding indexes are the following:

[
    1: 'paragraph',
    2: 'label',
    3: 'header',
    4: 'button',
    5: 'image',
    6: 'linebreak',
    7: 'container',
    8: 'link',
    9: 'textinput',
    10: 'dropdown',
    11: 'checkbox',
    12: 'radiobutton',
    13: 'rating',
    14: 'toggle',
    15: 'textarea',
    16: 'datepicker',
    17: 'stepperinput',
    18: 'slider',
    19: 'video',
    20: 'table',
    21: 'list'
}

The following image was given as a guideline for the people who drew the wireframes:

Example picture

Annotation Format

The development set is formatted into a single JSON file 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

Example picture Image 1bd1210dfac1acdd.jpg from the development set

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

{
  "file": "1bd1210dfac1acdd.jpg",
  "width": 1512,
  "height": 2016,
  "annotations": [
    {
      "score": 1,
      "detectionClass": 1,
      "detectionString": "paragraph",
      "box": [
        0.4836309524,
        0.4001322751,
        0.0161210317,
        0.1240079365
      ]
    },
    {
      "score": 1,
      "detectionClass": 2,
      "detectionString": "label",
      "box": [
        0.1872519841,
        0.3654100529,
        0.0310019841,
        0.0892857143
      ]
    },
    {
      "score": 1,
      "detectionClass": 3,
      "detectionString": "header",
      "box": [
        0.3199404762,
        0.3373015873,
        0.0285218254,
        0.1273148148
      ]
    },
    {
      "score": 1,
      "detectionClass": 3,
      "detectionString": "header",
      "box": [
        0.4365079365,
        0.3835978836,
        0.0223214286,
        0.1438492063
      ]
    },
    {
      "score": 1,
      "detectionClass": 5,
      "detectionString": "image",
      "box": [
        0.1897321429,
        0.2463624339,
        0.037202381,
        0.0628306878
      ]
    },
    {
      "score": 1,
      "detectionClass": 5,
      "detectionString": "image",
      "box": [
        0.3187003968,
        0.2595899471,
        0.0347222222,
        0.0595238095
      ]
    },
    {
      "score": 1,
      "detectionClass": 5,
      "detectionString": "image",
      "box": [
        0.4464285714,
        0.2777777778,
        0.037202381,
        0.0578703704
      ]
    },
    {
      "score": 1,
      "detectionClass": 6,
      "detectionString": "linebreak",
      "box": [
        0.2380952381,
        0.2314814815,
        0.0446428571,
        0.505952381
      ]
    },
    {
      "score": 1,
      "detectionClass": 6,
      "detectionString": "linebreak",
      "box": [
        0.519593254,
        0.2232142857,
        0.0297619048,
        0.5307539683
      ]
    },
    {
      "score": 1,
      "detectionClass": 6,
      "detectionString": "linebreak",
      "box": [
        0.3856646825,
        0.2347883598,
        0.0260416667,
        0.4332010582
      ]
    },
    {
      "score": 1,
      "detectionClass": 7,
      "detectionString": "container",
      "box": [
        0.1202876984,
        0.193452381,
        0.6684027778,
        0.6283068783
      ]
    },
    {
      "score": 1,
      "detectionClass": 14,
      "detectionString": "toggle",
      "box": [
        0.1723710317,
        0.603505291,
        0.0297619048,
        0.0942460317
      ]
    }
  ]
}

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 used the pycocotools library with a maximum number of detections of 300.

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.

Disussion forum: Click Disussion tab or this direct link: https://www.aicrowd.com/challenges/imageclef-2021-drawnui-wireframe/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.