• Compete
  • Learn
  • Community
ico-magnifying_glass

    Ideation - Image Analysis - Hierarchical Object Parsing

    PRIZES

    1st

    $1,200

    2nd

    $600

    3rd

    $300

    4th

    $150

    5th

    $75

    RegisterSubmit
    The challenge is finished.
    Show Deadlines icon-arrow-up

    Challenge Overview

    Our client got a tough and interesting problem to solve. They use and maintain a user-friendly editor of HTML / CSS pages, which allows to pick up different standard components (the building blocks for the page), drag-and-drop them into the page, and then edit in the desirable way. The editor takes care about generation of the corresponding HTML markup and stylesheets.

    The workflow to add new building blocks into the editor’s collection is the following: the design team produces the images of the interfaces they want to implement (see examples in the challenge forum); these images are shared with the dev team that has to break those design into re-usable components and convert them into JSON description in the format the editor can undestand (see an example in challenge forum). The client wants to explore the possibility to automate this process, and if we prove it is feasible to produce a proof-of-concept (PoC) app showcasing the approach in action.

    We start with the ideation challenge. We want you to explore and suggest the best algorithms / libraries / software tools, that will help to get the design images as input, to analyse them, recognizing the hierarchy of HTML components present in them (from complex as menus, data cards, etc. to the primitive ones like buttons, switches, input fields), and output the JSON description of those objects and their hierarchy. The exact format of the JSON output is not important, as long as it clearly describes the structure of the page depicted in the image. Ideally, the approach should also capture and document the styling details, but if it does not look feasible, it might be enough to automate the process as much as possible, delegating some operations to the developers using the tool; e.g. our PoC app will break the design into components and builds their hierarchy, then it will just highlight detected elements for the user, helping him to rapidly fill in any style details that are hard to capture automatically, and to correct any mistakes done by the algorithm. As long as your solution is able to speed-up the current design/development process described above, it might be interesting for our client.

    Final Submission Guidelines

    Your can submit your contributions in any form: from textual description / slide presentations to video / sample code pieces, or even initial PoC code. The important thing is that your submission should answer the following question: how exactly can we develop the PoC app our client is looking for? We expect from the winning submission that it will be a solid foundation for the specs of the next development challenge. While in the next challenge we are ready to implement / polish any UI features, to refine the algorithms and do any other development, the core algorithm(s) / logic should come directly from your submission.

    This challenge will be judged subjectively via community review.

    Reliability Rating and Bonus

    For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
    Read more.

    ELIGIBLE EVENTS:

    2018 TopCoder(R) Open

    REVIEW STYLE:

    Final Review:

    Community Review Board

    ?

    Approval:

    User Sign-Off

    ?

    CHALLENGE LINKS:

    Review Scorecard

    Topcoder is also on

    © 2017 Topcoder. All Rights Reserved