Sample Dataset Instances for Layout Prediction and Fixation Tasks

This document provides representative examples from the two datasets developed for layout prediction tasks. Each example includes a task label, the input row structure, and the corresponding ground truth label. Predictions are guided by structural and, in some cases, contextual information from adjacent rows. The datasets vary in complexity and are designed to support two primary use cases outlined in Section 3.2 of our paper: Scenario 1 and Scenario 2. Explanation of Each Component Task: Set to "Predict", which means the model should infer layout properties (such as padding values, column slots, font size, and image dimension) for the target row. Input: Contains the structural layout of input rows. Label: The ground truth layout styling for the target row. Dataset 1 Sample This sample is from Scenario 1, where the objective is to predict padding values, column slots, and font size for a target row using the structure of neighboring rows as input. The input includes three rows (row0, row1, and row2), each containing a single column (slot = 12) with basic content modules such as headings or images. The model predicts padding values (top, bottom, left, and right) for the target row based on the input structure. The true padding for row1 is provided in the label section, serving as ground truth during training. This setup evaluates the model's ability to generalize layout predictions in isolation. If certain style attributes, such as column slot or font size, are already present in the input, they are excluded from prediction for the target row. Color Annotations: Red: Indicates style properties (e.g., padding, slot, size) from neighboring rows. Green: Marks the target row where predictions are required. Blue: Denotes the ground truth styling for the target row. Sample JSON: { "Task ": Predict, "input": { {"row0": {"column": {"col0": {"data": {"data0": {"word": 2, "letter": 15, "type": "heading"}}, "slot": 12}}}, "row1": {"column": {"col0": {"data": {"data0": {"type": "image", "origin_width": 2, "origin_height": 2}}, "slot": 12}}}, "row2": {"column": {"col0": {"data": {"data0": {"word": 11, "letter": 46, "type": "heading"}}, "slot": 12}}} }, "label": { {"row1": {"column": {"col0": {"data": {"data0": {"block": {"left": 0, "top": 0, "right": 0, "bottom": 0}}}, "block": {"left": 0, "top": 15, "right": 0, "bottom": 40}}}}} } } Dataset 2 Sample Dataset 2 trains the model in a context-aware setting, where additional style attributes like padding values are included in the input. This dataset supports the predict_from_padding task (Scenario 2) and remains compatible with Scenario 1. The key difference is the introduction of image dimensions as an additional style attribute to be predicted. Furthermore, padding values from neighboring rows are now part of the input, offering contextual information. Meanwhile, the padding values for the target row are masked, requiring the model to infer them based on the surrounding layout. In addition to padding, the model may predict other style properties such as column slot, font size, and image dimensions, if they are not already specified in the input. This makes the task more comprehensive and realistic. Altogether, the enriched input in Dataset 2 improves the model’s ability to generalize and enhances accuracy in dynamic, real-world email design tasks. Sample JSON: { "Task ": Predict, "input": { {"row0": {"column": {"col0": {"data": {"data0": {"word": 2, "letter": 15, "type": "heading", "size": 27, "font": "arial", "block": {"left": 10, "top": 10, "right": 10, "bottom": 10}}}, "slot": 12}}}, "row1": {"column": {"col0": {"data": {"data0": {"type": "image", "origin_width": 2, "origin_height": 2}}, "slot": 12}}}, "row2": {"column": {"col0": {"data": {"data0": {"word": 11, "letter": 46, "type": "heading"}}, "slot": 12}}} }, "label": { {"row1": {"column": {"col0": {"data": {"data0": {"block": {"left": 0, "top": 0, "right": 0, "bottom": 0}}}, "block": {"left": 0, "top": 15, "right": 0, "bottom": 40}}}}} } }