[論文レビュー] Auto Completion of User Interface Layout Design Using Transformer-Based Tree Decoders

Yang Li, Julien Amelot+3 more|arXiv (Cornell University)|Jan 14, 2020

Video Analysis and Summarization参考文献 25被引用数 11

ひとこと要約

本稿では、部分的な木構造入力をもとにグラフィカルユーザーインターフェース（UI）レイアウト設計を自動補完する、トランスフォーマーに基づくツリー・デコーダー・フレームワークを提案する。2つの新規アーキテクチャ—ポインタ・トランスフォーマーと再帰的トランスフォーマー・デコーダー—を導入し、正しい空間配置と構造を有する階層的UI要素を生成する。幅優先探索の設定下で、F1スコアは最高91.8%、編集距離は最低11.79に達し、公開済みのAndroid UIデータセットにおいて最先端の性能を達成した。

ABSTRACT

It has been of increasing interest in the field to develop automatic machineries to facilitate the design process. In this paper, we focus on assisting graphical user interface (UI) layout design, a crucial task in app development. Given a partial layout, which a designer has entered, our model learns to complete the layout by predicting the remaining UI elements with a correct position and dimension as well as the hierarchical structures. Such automation will significantly ease the effort of UI designers and developers. While we focus on interface layout prediction, our model can be generally applicable for other layout prediction problems that involve tree structures and 2-dimensional placements. Particularly, we design two versions of Transformer-based tree decoders: Pointer and Recursive Transformer, and experiment with these models on a public dataset. We also propose several metrics for measuring the accuracy of tree prediction and ground these metrics in the domain of user experience. These contribute a new task and methods to deep learning research.

研究の動機と目的

• 部分的なレイアウトから欠落しているUI要素およびその階層的構造を予測することで、UIレイアウト設計の自動化を図ること。
• 深層学習を用いて、2次元空間配置と木構造的生成というレイアウト補完の課題に取り組むこと。
• ユーザー体験に基づいた新たな評価指標を設計し、レイアウト予測の品質を測定すること。
• トランスフォーマーに基づくデコーダーが、構造的・2次元レイアウト生成タスクにおいて効果的であるかを検証すること。
• UI設計にとどまらず、他の木構造的レイアウト問題へも一般化可能であるかを検討すること。

提案手法

• 自己回帰的レイアウト生成を目的とした、2つのトランスフォーマーに基づくツリー・デコーダー・アーキテクチャ—ポインタ・トランスフォーマーと再帰的トランスフォーマー—を提案する。
• 自己注意機構を用いて、UIレイアウト内の階層的関係および空間的依存関係をモデル化する。
• UI要素の座標を連続値ではなく、ワンホット表現のカテゴリカル変数として扱うことで、学習の安定性と性能を向上させる。
• トップダウンまたは幅優先順序に従ってノードを生成するツリー構造のデコーディングプロセスを採用し、走査戦略に応じて変更する。
• 構造的・空間的整合性を評価するための3つの評価指標を導入：親子ペア予測のF1スコア、次項目予測の正確度、編集距離。
• 部分入力（10%、50%、80%）を有する50,000件以上のAndroid UIレイアウトを含む公開データセットを用いて、モデルの学習と評価を実施。

実験結果

リサーチクエスチョン

• RQ1 トランスフォーマーに基づくツリー・デコーダーは、正確な空間配置と階層的構造を有する部分的なUIレイアウトを効果的に補完できるか？
• RQ2 幅優先探索と深さ優先探索の両方の走査順序において、ポインタ・デコーダーと再帰的デコーダーの性能はどのように異なるか？
• RQ3 提案された評価指標は、ユーザー体験およびレイアウト品質とどの程度相関しているか？
• RQ4 座標をカテゴリカル変数として扱うことで、連続的回帰よりも優れた性能が得られる理由は何か？
• RQ5 本モデルは、UI設計にとどまらず、他の2次元配置を伴う木構造的レイアウト問題に対しても一般化可能か？

主な発見

• 再帰的トランスフォーマー・デコーダーは、F1スコア91.8%、編集距離11.79という結果を幅優先探索設定下で80%部分レイアウトで達成し、ポインタ・トランスフォーマーおよびベースラインモデルを上回る性能を示した。
• 再帰的トランスフォーマーは、以前にデコードされたすべてのノードに直接アクセスできない状況でも、強力な階層的推論を維持していることが示された。
• ポインタ・トランスフォーマーは、深さ優先探索の設定下で、部分木のすべてのノードにアクセスできるため、より高い性能を示すが、依然として次項目予測において再帰的トランスフォーマーに劣る。
• 正確な座標を無視して構造的・意味的要因のみに注目した緩い評価基準では、80%部分レイアウトにおいてすべてのモデルが90%以上の次項目正確度を達成し、再帰的トランスフォーマーが95.3%で最高を記録した。
• 座標をワンホットカテゴリカル値として扱うことで、連続的回帰よりも顕著に優れた結果が得られた。これは、離散的トークン化がレイアウトの意味的特徴をより適切に捉えていることを示唆している。
• モデルは正確なバウンディングボックスの予測に苦労しており、構造的性能に比して空間的正確性は依然として課題であることが明らかになった。