論文の概要: EGFE: End-to-end Grouping of Fragmented Elements in UI Designs with
Multimodal Learning
- arxiv url: http://arxiv.org/abs/2309.09867v1
- Date: Mon, 18 Sep 2023 15:28:12 GMT
- ステータス: 処理完了
- システム内更新日: 2023-09-19 12:42:25.403887
- Title: EGFE: End-to-end Grouping of Fragmented Elements in UI Designs with
Multimodal Learning
- Title(参考訳): EGFE:マルチモーダル学習によるUI設計におけるフラグメント要素のエンドツーエンドグループ化
- Authors: Liuqing Chen, Yunnong Chen, Shuhong Xiao, Yaxuan Song, Lingyun Sun,
Yankun Zhen, Tingting Zhou, Yanfang Chang
- Abstract要約: 断片化された要素をグループ化することで、生成されたコードの可読性と保守性を大幅に向上させることができる。
現在の手法では、フラグメントされた要素をグループ化する手作りのルールを導入する2段階の戦略を採用している。
UIシークエンス予測によるエンドツーエンドのグルーピングフラグメンテッド要素の自動生成手法EGFEを提案する。
- 参考スコア(独自算出の注目度): 10.885275494978478
- License: http://creativecommons.org/licenses/by/4.0/
- Abstract: 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.
- Abstract(参考訳): ui設計プロトタイプを業界でのコードに翻訳する場合、設計プロトタイプからコードを自動的に生成することで、アプリケーションやguiイテレーションの開発が迅速になる。
しかし、厳密な設計仕様のない設計プロトタイプでは、UIコンポーネントは断片化された要素で構成されている可能性がある。
これらの断片化された要素をグループ化すると、生成されたコードの可読性と保守性が大幅に向上する。
現在の手法では、フラグメントされた要素をグループ化する手作りのルールを導入する2段階の戦略を採用している。
残念なことに、これらのメソッドのパフォーマンスは、視覚的に重複し、ui要素が小さいため満足できません。
そこで本研究では,UIシーケンス予測によるグループ化フラグメンテッド要素の自動エンドツーエンド化手法EGFEを提案する。
UI理解を容易にするために,マルチモーダル表現学習を用いてUI要素間の関係をモデル化するトランスフォーマーエンコーダを革新的に構築する。
プロのUIデザイナから収集された4606のUIプロトタイプのデータセットの評価によると、我々のメソッドは、精度29.75\%、リコール31.07\%、F1スコア30.39\%の精度で、最先端のベースラインを上回っている。
さらに、生成したフロントエンドコードの改善を評価するための実証的研究を行った。
その結果,本手法が実際のソフトウェア工学アプリケーションに与える影響が示された。
エンドツーエンドの断片化要素グループ化手法は、UI関連のソフトウェアエンジニアリングタスクを改善する機会を生み出します。
関連論文リスト
- GLDesigner: Leveraging Multi-Modal LLMs as Designer for Enhanced Aesthetic Text Glyph Layouts [53.568057283934714]
コンテンツ対応のテキストロゴレイアウトを生成するVLMベースのフレームワークを提案する。
本稿では,複数のグリフ画像の同時処理における計算量を削減するための2つのモデル手法を提案する。
アウトモデルのインストラクションチューニングを支援するために,既存の公開データセットよりも5倍大きい2つの拡張テキストロゴデータセットを構築した。
論文 参考訳(メタデータ) (2024-11-18T10:04:10Z) - Tell Me What's Next: Textual Foresight for Generic UI Representations [65.10591722192609]
We propose Textual Foresight, a novel pretraining objective for learn UI screen representations。
Textual Foresightは、現在のUIとローカルアクションを考慮すれば、将来のUI状態のグローバルなテキスト記述を生成する。
新たに構築したモバイルアプリデータセットであるOpenAppでトレーニングを行い、アプリUI表現学習のための最初の公開データセットを作成しました。
論文 参考訳(メタデータ) (2024-06-12T02:43:19Z) - PosterLLaVa: Constructing a Unified Multi-modal Layout Generator with LLM [58.67882997399021]
本研究では,グラフィックレイアウトの自動生成のための統合フレームワークを提案する。
データ駆動方式では、レイアウトを生成するために構造化テキスト(JSONフォーマット)とビジュアルインストラクションチューニングを用いる。
我々は、大規模な実験を行い、パブリックなマルチモーダルレイアウト生成ベンチマーク上で、最先端(SOTA)性能を達成した。
論文 参考訳(メタデータ) (2024-06-05T03:05:52Z) - UI Semantic Group Detection: Grouping UI Elements with Similar Semantics
in Mobile Graphical User Interface [10.80156450091773]
UI要素のグループ化に関する既存の研究は、主に単一のUI関連ソフトウェアエンジニアリングタスクに焦点を当てており、そのグループは外観と機能が異なる。
類似のセマンティクスで隣接したテキストと非テキスト要素をパックするセマンティクスコンポーネントグループを提案する。
UIページ上のセマンティックコンポーネント群を認識するために,我々は,堅牢で深層学習に基づく視覚検出システムであるUISCGDを提案する。
論文 参考訳(メタデータ) (2024-03-08T01:52:44Z) - Compositional Generative Inverse Design [69.22782875567547]
入力変数を設計して目的関数を最適化する逆設計は重要な問題である。
拡散モデルにより得られた学習エネルギー関数を最適化することにより、そのような逆例を避けることができることを示す。
N-body 相互作用タスクと2次元多面体設計タスクにおいて,実験時に学習した拡散モデルを構成することにより,初期状態と境界形状を設計できることを示す。
論文 参考訳(メタデータ) (2024-01-24T01:33:39Z) - UI Layers Group Detector: Grouping UI Layers via Text Fusion and Box
Attention [7.614630088064978]
画像(基本的な形状や視覚要素)と同じ意味を持つテキスト層を自動的に検出する視覚ベースの手法を提案する。
トレーニングとテストのための大規模なUIデータセットを構築し,検出性能を高めるためのデータ拡張アプローチを提案する。
論文 参考訳(メタデータ) (2022-12-07T03:50:20Z) - ReverseORC: Reverse Engineering of Resizable User Interface Layouts with
OR-Constraints [47.164878414034234]
ReverseORCは、多様なレイアウトタイプとその動的リサイズ動作を発見するための、新しいリバースエンジニアリング(RE)アプローチである。
複雑な動的レイアウトの振る舞いを持つ標準ではないレイアウトマネージャを再現する仕様を作成することができる。
レガシーUIの問題の検出と修正、レイアウトの振る舞いを拡張したUIの拡張、フレキシブルなUIレイアウトの作成をサポートするために使用できる。
論文 参考訳(メタデータ) (2022-02-23T13:57:25Z) - Creating User Interface Mock-ups from High-Level Text Descriptions with
Deep-Learning Models [19.63933191791183]
自然言語句から低忠実度UIモックアップを作成するための3つのディープラーニング技術を紹介する。
一貫性のある多種多様なUI設計モックアップを提案する各手法の能力を定量的に、質的に比較し、対比する。
論文 参考訳(メタデータ) (2021-10-14T23:48:46Z) - UIBert: Learning Generic Multimodal Representations for UI Understanding [12.931540149350633]
大規模な未ラベルUIデータに対する新しい事前学習タスクによって訓練されたトランスフォーマーベースの共同画像テキストモデルを提案する。
私たちの重要な直感は、UIの異種機能は自己整合である、つまり、UIコンポーネントのイメージとテキスト機能は、相互に予測可能である、ということです。
この自己アライメントを利用した5つの事前学習タスクを提案する。
UIBertは、最大9.26%の精度で強力なマルチモーダルベースラインを上回ります。
論文 参考訳(メタデータ) (2021-07-29T03:51:36Z) - Magic Layouts: Structural Prior for Component Detection in User
Interface Designs [28.394160581239174]
ユーザインタフェース(UI)レイアウトのスクリーンショットや手書きスケッチを解析する手法であるMagic Layoutsを提示する。
当社のコアコントリビューションは、既存の検出器を拡張して、UI設計の学習された構造を活用することです。
ユーザエクスペリエンス(UX)設計のディジタルプロトタイプを高速に取得するためのインタラクティブアプリケーションとして,コンテキスト内でデモを行う。
論文 参考訳(メタデータ) (2021-06-14T17:20:36Z) - VINS: Visual Search for Mobile User Interface Design [66.28088601689069]
本稿では、UIイメージを入力として、視覚的に類似したデザイン例を検索するビジュアル検索フレームワークVINSを紹介する。
このフレームワークは、平均平均精度76.39%のUI検出を実現し、類似したUI設計をクエリする際の高いパフォーマンスを実現している。
論文 参考訳(メタデータ) (2021-02-10T01:46:33Z)
関連論文リストは本サイト内にある論文のタイトル・アブストラクトから自動的に作成しています。
指定された論文の情報です。
本サイトの運営者は本サイト(すべての情報・翻訳含む)の品質を保証せず、本サイト(すべての情報・翻訳含む)を使用して発生したあらゆる結果について一切の責任を負いません。