大規模言語モデルによる「UI Grammer」を用いた革新的なモバイルUIデザイン！？
3つの要点
✔️ UIレイアウトの生成における大規模言語モデルの有用性が注目されている。
✔️ 大規模言語モデルのプロンプトにUIの階層構造を表現する「UI文法」を組み込む新しい手法を提案。
✔️ 大規模言語モデルのUIレイアウトの生成性能だけでなく、大規模言語モデルの説明可能性とユーザーの制御可能性を向上。
UI Layout Generation with LLMs Guided by UI Grammar
written by Yuwen Lu, Ziang Tong, Qinyi Zhao, Chengzhi Zhang, Toby Jia-Jun Li
(Submitted on 24 Oct 2023)
Comment: ICML 2023 Workshop on AI and HCI
Subjects: Human-Computer Interaction (cs.HC); Artificial Intelligence (cs.AI)
code：
本記事で使用している画像は論文中のもの、紹介スライドのもの、またはそれを参考に作成したものを使用しております。
概要
近年、人工知能（AI）とヒューマンコンピュータインタラクション（HCI）の研究者たちが、ユーザーインターフェース（UI）やグラフィカルユーザーインターフェース（GUI）のレイアウト生成に注目しています。HCIの観点からは、UIは優れたユーザーエクスペリエンス（UX）を提供するための重要な要素であり、UIの使いやすさや機能性を高めるために、様々な研究やユーザビリティテストの方法が開発されています。
特に、モバイルUIに関する大規模データセットである「RICO」が登場して以降、モバイルUIのレイアウト生成のためのAIモデルがいくつも提案されています。これらには、Generative Adversarial Network（GAN）、Variational Autoencoder（VAE）、Diffusion Model、Graph Neural Network（GNN）、Transformerなど多くのモデルが活用されています。
最近では、大規模言語モデルがUI関連タスクでどのように活用できるかについても研究されています。例えば、大規模言語モデルを使ってUIモデリングのタスクを実行する研究や、GUIの自動テストなどが行われています。これらの研究は、大規模言語モデルがUIタスクにおいて有効に機能することを示しており、大規模なデータセットや複雑な学習プロセスを必要とせずに、UIを改善できる可能性があります。
この論文もモバイルUIのレイアウト生成における大規模言語モデルの有用性を調査しています。特に、大規模言語モデルがワンショット学習で高品質なUIレイアウトをどのように生成できるかに焦点を当てています。この論文では、これに対応するために、「UI文法（UI Grammer）」という新しい手法を提案しています。
この「UI文法（UI Grammer）」は、UI要素間の階層関係を正確に表現し、LLMの生成プロセスをより構造化し、文脈に合わせたものにします。このUI文法を取り入れることで、ユーザーはLLMがどのようにUIレイアウトを生成しているかを理解しやすくなり、最終的な生成結果も制御しやすくなるとしています。
この論文では、大規模言語モデルがUIレイアウトを生成する性能と、UI文法が大規模言語モデルの生成プロセスに及ぼす影響を評価する実験を行っています。
UI文法（UI Grammer）とは
画面内のUI要素には階層構造があります。これは、FigmaのようなUIデザインツールのグルーピング機能やAndroidのビュー階層などに反映されています。この論文では、このUI要素間の階層構造を保持し、生成プロセスを暗黙的にガイドために利用することで、モバイルUIの生成品質を向上するという仮説を立てています。
この論文で提案している「UI文法（UI Grammer）」は、画面内のUI要素間の親子関係を記述するための一連の生成規則を定義しています。この生成規則はA → Bの形式を取り、Aは親UI要素を表し、Bは一つ以上の子UI要素のシーケンスを表します。例えば、下図のように視覚化されたシンプルなUI構造では、「Root → Container Button, Container → Pictogram Text」のようにUI文法を適用することができます。
この論文では、このUI文法（UI Grammer）を大規模言語モデルのプロンプトとして入力した場合のモバイルUIの生成能力とその影響を評価しています。UI文法（UI Grammer）の影響を評価するために、UI文法（UI Grammer）を導入した生成プロセスと、UI文法（UI Grammer）を導入していない生成プロセスの2つパイプラインを作成し、性能を比較しています。
なお、この論文では、約66kのユニークなUI画面を含むRICOデータセットをそのまま使用するのではなく、RICOに基づいて改善されたCLAYデータセットを使用しています。CLAYでは、UI要素と視覚情報が一致していないなどRICOに含まれるノイズを除去しており、約59kの人によるアノテーション付きのUI画面レイアウトを含み、RICOよりもノイズの少ないUIレイアウトのデータが含まれています。また、RICOのUI画面の自然言語要約を含むSCREEN2WORDSデータセットもプロンプトの構築に使用しています。
UI文法（UI Grammer）の影響の評価方法
UI文法（UI Grammer）を使用せずにレイアウトを生成する場合、下図のように、CLAYからランダムに画面を選び、コンテキスト内学習のサンプルとして使用し、データ漏洩を防ぐために生成から除外します。CLAYの各UI画面について、SCREEN2WORDSから対応する自然言語の説明を取得し、生成ターゲットの説明として使用します。CLAYで定義された25のUI要素ラベルの意味のあるリストをプロンプトに制約として含めています。また、生成結果を解析しやすくするために、大規模言語モデルのAPIの応答形式を制御しています。
UI文法（UI Grammer）を使用してレイアウトを生成する場合、下図のように、大規模言語モデルに最終的な画面レイアウトを直接生成させるのではなく、まず、画面のUI文法のリストを導入し、次に、提供されたUI文法を使用してサンプルのUIレイアウトを生成する方法を説明しています。
UI文法（UI Grammer）を含むプロンプトを構築する際の重要なステップは、CLAYデータセットからどの画面の文法を解析するかを選択することです。元のCLAYデータセットの画面Sの説明を使用してレイアウトを生成する場合、Sから解析された文法もプロンプトに入力すると、データ漏洩が発生し、画面Sをその文法から直接再構築できてしまうためです。これを避けるために、CLAYデータセットを20/80でランダムに分割し、20%のセットから解析された文法を使用して、80%のセットの生成をガイドしています。
また、CLAYでは、同じアプリ内では、多くの画面で類似したレイアウト構造を持っているため、同じアプリ内の画面が両方のセットに含まれるデータ漏洩の可能性があります。これを避けるために、データセットをアプリごとに分割しています。
実験結果
2023年5月時点のOpenAIのGPT-4 APIを使用して、上記の2つのパイプラインを比較しています。使用したGPT-4は、max token=2,000、temperature=0.7のgpt-4-0314 ver.です。2つのパイプラインによる生成結果は下図のようになっています。
4つの画面において、左側の2枚の画像は、元の画像と対応するバウンディングボックス、右側の2枚はGPT-4によって生成されたUIレイアウトの結果です。
さらに、MaxIoU、Overlap、Alignmentによって定量評価も行っています。MaxIoUは、プロンプトの一部として提供された画面要約を含むCLAYの元の画面Sと、生成された画面S′との間で計算しています。OverlapとAlignmentは、生成された結果Sに対して計算されています。結果は下表のようになっています。
表のOverlapを見ると「GPT-4 no grammer」で最も良い性能を示していることがわかります。また、Alignmentは、「GPT-4 with grammer」「GPT-4 no grammer」ともに良い性能を示していることがわかります。また、「GPT-4 no grammer」に対して「GPT-4 with grammer」では、わずかにMaxIoUが向上していることがわかります。
まとめ
この論文では、UI文法というUIの階層構造を大規模言語モデルのプロンプトに組み込むことで、大規模言語モデルがUIレイアウト生成において、高い有用性があることを示唆しています。GPT-4のような大規模言語モデルは、レイアウトに加えてコンテンツを生成し、中〜高忠実度のプロトタイプを作成する潜在能力も持っていると考えられるとしています。例えば、Google Material Designなどの既存のUIテンプレートやデザインシステムと大規模言語モデルを組み合わせることで、より自動化され、カスタマイズ可能で効率的なUIプロトタイピング手法を実現できる可能性があるとしています。
また、この論文で提案している「UI文法」の導入は、MaxIoUなどの大規模言語モデルの生成品質を向上させるだけでなく、UI文法を中間表現として導入することで、事前学習済みのブラックボックスな大規模言語モデルの説明可能性とユーザーの制御可能性を高めることができるとしています。
この記事に関するカテゴリー
