Tweet
Tweet

Slide 1

Slide 1 text

GUIGAN: Learning to Generate GUI Designs Using Generative Adversarial Networks 22/01/18 PaperFriday, Yuki Iwazaki@AI Lab

Slide 2

Slide 2 text

2 Point: スマホアプリのGUIを生成するタスクで、 Pixelではなくボタンなどの要素から逐次的に生成 定量・定性評価で従来手法を圧倒 arXiv, 2021 Authors: Tianming Zhao, Chunyang Chen, Yuanning Liu, Xiaodong Zhu 選定理由: - Landing Pageの生成に使えそうなので

Slide 3

Slide 3 text

Introduction 3

Slide 4

Slide 4 text

優れたGUIはProductの成功に直結する 4 Rico dataset [Deka, 17]

Slide 5

Slide 5 text

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/

Slide 6

Slide 6 text

GUIデザインを自動生成する GUIGANを提案 6

Slide 7

Slide 7 text

Preliminary 8

Slide 8

Slide 8 text

RICO Dataset [Deka, 17] 9 https://interactionmining.org/rico

Slide 9

Slide 9 text

GUI Subtree 10

Slide 10

Slide 10 text

GAN [Goodfellow, 14] ● 識別モデル(D)を用いて学習データと見分けがつかないような データを生成するモデル(G)を獲得する仕組み ○ Gは一様分布等からサンプルされた乱数zを入力とし出力x’を生成 ○ Dは入力データが学習データか生成データ(x’)かを分類 ○ 自然画像の生成などで大きく成功 ○ 生成した値を用いて学習が進むので文章等の離散値の生成は苦手 11 [Karras, 18]

Slide 11

Slide 11 text

SeqGAN [Yu, 17] 12 GANを文章などの系列データに拡張 GeneratorにRNNと強化学習を適用 D…文章全体が本物か偽物か識別(GANと同じ) G…state(生成途中の文章 )から action(次の単語)を出力する policyと仮定 生成途中の評価はMC探索で生成完了させた文を Dに入力し本物と判断する確率 (自然な文章度合い)をGの報酬とし, 報酬が最大化するような (≒Dに実データと誤認してもらえるような )GのActionを学習 -> Gにシミュレーションで文章をいくつか作らせた結果の Dの期待報酬を Gに与えて学習 Discriminatorの学習 Generatorの学習

Slide 12

Slide 12 text

Approach 15

Slide 13

Slide 13 text

GUIGAN 16 state action SeqGAN 生成途中の文章 次の単語 GUIGAN 生成途中のGUI 次のGUIパーツ

Slide 14

Slide 14 text

A. Style Embedding of Subtree ペアで入力されたGUIのパーツ画像が同じ App(Class)出身なら 出力される特徴空間上で近づけ、違う Appなら遠ざけるように学習 -> GUIパーツ(Subtree)のStyle Embeddingを得る 17

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

C. Modeling Subtree Structure GUIパーツの構造情報(structure)のモデル化 Generatorで生成されたGUIは, 各パーツ (Subtree)の種類もIDから割り出せる ここでいうパーツの種類とは , ListViewやFrame, Menu barなどのComponentカテゴリ 生成された GUIと実GUIのパーツの種類の順番が近い (≒編集距離が小さい )ほど 良い構造 となるように学習 19

Slide 17

Slide 17 text

Model Summary 20 Dを欺く程の生成 スタイルの互換性 GUIの構造整合性

Slide 18

Slide 18 text

Experiments 23

Slide 19

Slide 19 text

Dataset Rico Datasetのうちデータ数 の多い5カテゴリを抽出 -> カテゴリの特徴を捉えた GUIを生成できるか 更にアプリ数の多い3社も Datasetとして抽出 -> 特定企業らしいGUIを 生成できるか 24

Slide 20

Slide 20 text

Metrics Frechet Inception Distance (FID): 生成画像の品質と多様性の評価に使われる 生成されたGUIと本物のGUIを画像Encoder(InceptionV3)に食わせて出 力Vectorの分布間の距離を測る -> 本物と分布が近い程, 生成したGUIの品質が高いといえるので FIDは低い程良い 1-Nearest Neighbor Accuracy: 生成されたGUIか, 本物のGUIかの分類精度 -> 生成モデルの性能が良い程間違えるはずなのでAccは低いほど良い 25

Slide 21

Slide 21 text

Baselines ● WGAN-GP [Gulrajani, 17] ○ 勾配消失問題と収束速度を改善した生成モデル ● FaceOff [Zheng, 19] ○ DOM TreeベースのWebサイト探索モデル ● GUIGAN-style ○ style lossだけで学習させた提案手法 ● GUIGAN-structure ○ structure lossだけで学習させた提案手法 26

Slide 22

Slide 22 text

Evaluation Results 27

Slide 23

Slide 23 text

28 https://github.com/GUIDesignResearch/GUIGAN#examples-of-pre-built-components

Slide 24

Slide 24 text

Evaluation Results 29

Slide 25

Slide 25 text

30

Slide 26

Slide 26 text

31

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Evaluation Results 33 ● 5段階評価の3指標において どのカテゴリでも提案手法が 既存の3割増で良い評価に ● 検定でも提案手法が有意に (*と**) ● Functionalityもavg. 0.812で既存 (0.452)の8割増 ● “Travel > Books, Shopping”の結果 は、Travelの方が機能的なGUIを持つた め

Slide 29

Slide 29 text

34

Slide 30

Slide 30 text

Conclusion 35

Slide 31

Slide 31 text

Conclusion ● GANによるGUIデザイン生成手法を提案 ○ Style, Structure両方を加味した生成が可能に ● 今後の課題 ○ GUIにおけるルールの条件付与 ■ menu barは上にあるべきなど ○ 人間によるEditableなInterfaceと組み合わせる ■ GUI開発の半自動化, Human-in-the-loop 36

Slide 32

Slide 32 text

Comment ● パーツの切り出しが一番大変そう ● 生成されたGUIがUserにそのまま採用されるわけじゃ ないのでオンライン評価が難しそう ● Editableではないので出力制御が難しそう ○ StyleとStructureのバランス調整もできなそう 37