EGFE: End-to-end Grouping of Fragmented Elements in UI Designs with Multimodal Learning

要約

業界で UI デザイン プロトタイプをコードに変換する場合、デザイン プロトタイプからコードを自動的に生成すると、アプリケーションの開発と GUI の反復を迅速化できます。
ただし、厳密な設計仕様のない設計プロトタイプでは、UI コンポーネントが断片化された要素で構成されている可能性があります。
これらの断片化された要素をグループ化すると、生成されたコードの可読性と保守性が大幅に向上します。
現在の手法では、断片化された要素をグループ化するために手作りのルールを導入する 2 段階の戦略が採用されています。
残念ながら、これらのメソッドのパフォーマンスは、視覚的に重複していたり​​、UI 要素が小さかったりするため、満足のいくものではありません。
この研究では、UI シーケンス予測を介して断片化された要素をエンドツーエンドで自動的にグループ化するための新しい方法である EGFE を提案します。
UI の理解を容易にするために、マルチモーダル表現学習を使用して UI 要素間の関係をモデル化する Transformer エンコーダーを革新的に構築しました。
プロの UI デザイナーから収集した 4606 個の UI プロトタイプのデータセットに対する評価では、私たちの手法が精度 (29.75\%)、再現率 (31.07\%)、および F1 スコアの点で最先端のベースラインを上回っていることが示されています。
編集距離のしきい値 4 で (30.39\% による)。さらに、生成されたフロントエンド コードの改善を評価するための実証研究を実施します。
結果は、実際のソフトウェア エンジニアリング アプリケーションに対する私たちの方法の有効性を示しています。
当社のエンドツーエンドの断片化された要素のグループ化手法は、UI 関連のソフトウェア エンジニアリング タスクを改善する機会を生み出します。

要約(オリジナル)

When translating UI design prototypes to code in industry, automatically generating code from design prototypes can expedite the development of applications and GUI iterations. However, in design prototypes without strict design specifications, UI components may be composed of fragmented elements. Grouping these fragmented elements can greatly improve the readability and maintainability of the generated code. Current methods employ a two-stage strategy that introduces hand-crafted rules to group fragmented elements. Unfortunately, the performance of these methods is not satisfying due to visually overlapped and tiny UI elements. In this study, we propose EGFE, a novel method for automatically End-to-end Grouping Fragmented Elements via UI sequence prediction. To facilitate the UI understanding, we innovatively construct a Transformer encoder to model the relationship between the UI elements with multi-modal representation learning. The evaluation on a dataset of 4606 UI prototypes collected from professional UI designers shows that our method outperforms the state-of-the-art baselines in the precision (by 29.75\%), recall (by 31.07\%), and F1-score (by 30.39\%) at edit distance threshold of 4. In addition, we conduct an empirical study to assess the improvement of the generated front-end code. The results demonstrate the effectiveness of our method on a real software engineering application. Our end-to-end fragmented elements grouping method creates opportunities for improving UI-related software engineering tasks.

arxiv情報

提供元, 利用サービス

arxiv.jp, Google