論文読み会 / GUIGAN: Learning to Generate GUI Designs Using Generative Adversarial Networks

社内論文読み会、PaperFridayでの発表資料です

1. GUIGAN: Learning to Generate GUI Designs Using Generative Adversarial Networks 22/01/18 PaperFriday, Yuki Iwazaki@AI Lab
2. 2 Point: スマホアプリのGUIを生成するタスクで、 Pixelではなくボタンなどの要素から逐次的に生成 定量・定性評価で従来手法を圧倒 arXiv, 2021 Authors: Tianming Zhao, Chunyang Chen, Yuanning Liu, Xiaodong Zhu 選定理由: - Landing Pageの生成に使えそうなので
3. Introduction 3
4. 優れたGUIはProductの成功に直結する 4 Rico dataset [Deka, 17]
5. GUIのデザインは大変 • Fluent interactivity • Universal usability • Clear readability • Aesthetic appearance • Consistent styles 😥 UI/UX designers shortage in the market 😥 51% of 5700 developers reported, GUI design > dev task 😥 They almost aren’t familiar with UI/UX design 5 https://material.io/
6. GUIデザインを自動生成する GUIGANを提案 6
7. Preliminary 8
8. RICO Dataset [Deka, 17] 9 https://interactionmining.org/rico
9. GUI Subtree 10
10. GAN [Goodfellow, 14] • 識別モデル(D)を用いて学習データと見分けがつかないような データを生成するモデル(G)を獲得する仕組み ◦ Gは一様分布等からサンプルされた乱数zを入力とし出力x’を生成 ◦ Dは入力データが学習データか生成データ(x’)かを分類 ◦ 自然画像の生成などで大きく成功 ◦ 生成した値を用いて学習が進むので文章等の離散値の生成は苦手 11 [Karras, 18]
11. SeqGAN [Yu, 17] 12 GANを文章などの系列データに拡張 GeneratorにRNNと強化学習を適用 D…文章全体が本物か偽物か識別(GANと同じ) G…state(生成途中の文章 )から action(次の単語)を出力する policyと仮定 生成途中の評価はMC探索で生成完了させた文を Dに入力し本物と判断する確率 (自然な文章度合い)をGの報酬とし, 報酬が最大化するような (≒Dに実データと誤認してもらえるような )GのActionを学習 -> Gにシミュレーションで文章をいくつか作らせた結果の Dの期待報酬を Gに与えて学習 Discriminatorの学習 Generatorの学習
12. Approach 15
13. GUIGAN 16 state action SeqGAN 生成途中の文章 次の単語 GUIGAN 生成途中のGUI 次のGUIパーツ
14. A. Style Embedding of Subtree ペアで入力されたGUIのパーツ画像が同じ App(Class)出身なら 出力される特徴空間上で近づけ、違う Appなら遠ざけるように学習 -> GUIパーツ(Subtree)のStyle Embeddingを得る 17
15. B. Modeling Subtree Compatibility GUIパーツのスタイル互換性 (compatibility)のモデル化 Generatorで生成されたGUIは, 各パーツ (Subtree)の参照元 AppがIDから割り出せる 参照元が同じ Appのパーツで構成される GUIほど評価されるように 学習 18 App GのEntropy App Cを条件としたときの GのEntropy 生成された GUIを 構成するパーツが 単一のAppだけである割合 cはAppの総数 同じAppのパーツが含まれるように lossを最小化 生成物のパーツが全て同じ App産の時loss_c=0
16. C. Modeling Subtree Structure GUIパーツの構造情報(structure)のモデル化 Generatorで生成されたGUIは, 各パーツ (Subtree)の種類もIDから割り出せる ここでいうパーツの種類とは , ListViewやFrame, Menu barなどのComponentカテゴリ 生成された GUIと実GUIのパーツの種類の順番が近い (≒編集距離が小さい )ほど 良い構造 となるように学習 19
17. Model Summary 20 Dを欺く程の生成 スタイルの互換性 GUIの構造整合性
18. Experiments 23
19. Dataset Rico Datasetのうちデータ数 の多い5カテゴリを抽出 -> カテゴリの特徴を捉えた GUIを生成できるか 更にアプリ数の多い3社も Datasetとして抽出 -> 特定企業らしいGUIを 生成できるか 24
20. Metrics Frechet Inception Distance (FID): 生成画像の品質と多様性の評価に使われる 生成されたGUIと本物のGUIを画像Encoder(InceptionV3)に食わせて出 力Vectorの分布間の距離を測る -> 本物と分布が近い程, 生成したGUIの品質が高いといえるので FIDは低い程良い 1-Nearest Neighbor Accuracy: 生成されたGUIか, 本物のGUIかの分類精度 -> 生成モデルの性能が良い程間違えるはずなのでAccは低いほど良い 25
21. Baselines • WGAN-GP [Gulrajani, 17] ◦ 勾配消失問題と収束速度を改善した生成モデル • FaceOff [Zheng, 19] ◦ DOM TreeベースのWebサイト探索モデル • GUIGAN-style ◦ style lossだけで学習させた提案手法 • GUIGAN-structure ◦ structure lossだけで学習させた提案手法 26
22. Evaluation Results 27
23. 28 https://github.com/GUIDesignResearch/GUIGAN#examples-of-pre-built-components
24. Evaluation Results 29
27. Human Evaluation Android App開発経験のある CS専攻のMaster 5名 Rico 5大カテゴリのGUIを FaceOff, GUIGAN各10サンプルず つ生成した結果に右の評価 以下3項目について 5段階評価 - Aesthetics - Color harmony - Structure 以下1項目は(0 or 1) - Functionality 32
28. Evaluation Results 33 • 5段階評価の3指標において どのカテゴリでも提案手法が 既存の3割増で良い評価に • 検定でも提案手法が有意に (*と**) • Functionalityもavg. 0.812で既存 (0.452)の8割増 • “Travel > Books, Shopping”の結果 は、Travelの方が機能的なGUIを持つた め
30. Conclusion 35
31. Conclusion • GANによるGUIデザイン生成手法を提案 ◦ Style, Structure両方を加味した生成が可能に • 今後の課題 ◦ GUIにおけるルールの条件付与 ▪ menu barは上にあるべきなど ◦ 人間によるEditableなInterfaceと組み合わせる ▪ GUI開発の半自動化, Human-in-the-loop 36
32. Comment • パーツの切り出しが一番大変そう • 生成されたGUIがUserにそのまま採用されるわけじゃ ないのでオンライン評価が難しそう • Editableではないので出力制御が難しそう ◦ StyleとStructureのバランス調整もできなそう 37