Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
論文読み会 / GUIGAN: Learning to Generate GUI Design...
Search
chck
January 18, 2022
Research
0
11
論文読み会 / GUIGAN: Learning to Generate GUI Designs Using Generative Adversarial Networks
社内論文読み会、PaperFridayでの発表資料です
chck
January 18, 2022
Tweet
Share
More Decks by chck
See All by chck
CyberAgent AI Lab研修 / Container for Research
chck
0
1.6k
CyberAgent AI Lab研修 / Code Review in a Team
chck
2
1.4k
論文読み会 / Socio-Technical Anti-Patterns in Building ML-Enabled Software: Insights from Leaders on the Forefront
chck
0
37
CyberAgent AI事業本部MLOps研修Container編 / Container for MLOps
chck
2
5.4k
論文読み会 / GLAZE: Protecting Artists from Style Mimicry by Text-to-Image Models
chck
0
19
論文読み会 / On the Factory Floor: ML Engineering for Industrial-Scale Ads Recommendation Models
chck
0
8
機械学習開発のためのコンテナ入門 / Container for ML
chck
0
900
Web系企業研究所における研究開発を加速させるエコシステム / Ecosystem accelerates our R&D in CyberAgent AI Lab
chck
0
140
論文読み会 / Counterfactual VQA: A Cause-Effect Look at Language Bias
chck
0
9
Other Decks in Research
See All in Research
Agentic AIとMCPを利用したサービス作成入門
mickey_kubo
0
130
コーパスを丸呑みしたモデルから言語の何がわかるか
eumesy
PRO
11
3.7k
データxデジタルマップで拓く ミラノ発・地域共創最前線
mapconcierge4agu
0
160
線形判別分析のPU学習による朝日歌壇短歌の分析
masakat0
0
120
Cross-Media Information Spaces and Architectures
signer
PRO
0
220
Computational OT #4 - Gradient flow and diffusion models
gpeyre
0
190
Collaborative Development of Foundation Models at Japanese Academia
odashi
2
550
Individual tree crown delineation in high resolution aerial RGB imagery using StarDist-based model
satai
3
270
Mathematics in the Age of AI and the 4 Generation University
hachama
0
150
言語モデルの内部機序:解析と解釈
eumesy
PRO
41
17k
rtrec@dbem6
myui
6
790
SSII2025 [SS2] 横浜DeNAベイスターズの躍進を支えたAIプロダクト
ssii
PRO
6
3.1k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
How to Ace a Technical Interview
jacobian
276
23k
The Language of Interfaces
destraynor
158
25k
Documentation Writing (for coders)
carmenintech
71
4.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How STYLIGHT went responsive
nonsquared
100
5.6k
GraphQLとの向き合い方2022年版
quramy
46
14k
Transcript
GUIGAN: Learning to Generate GUI Designs Using Generative Adversarial Networks
22/01/18 PaperFriday, Yuki Iwazaki@AI Lab
2 Point: スマホアプリのGUIを生成するタスクで、 Pixelではなくボタンなどの要素から逐次的に生成 定量・定性評価で従来手法を圧倒 arXiv, 2021 Authors: Tianming Zhao,
Chunyang Chen, Yuanning Liu, Xiaodong Zhu 選定理由: - Landing Pageの生成に使えそうなので
Introduction 3
優れたGUIはProductの成功に直結する 4 Rico dataset [Deka, 17]
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/
GUIデザインを自動生成する GUIGANを提案 6
Preliminary 8
RICO Dataset [Deka, 17] 9 https://interactionmining.org/rico
GUI Subtree 10
GAN [Goodfellow, 14] • 識別モデル(D)を用いて学習データと見分けがつかないような データを生成するモデル(G)を獲得する仕組み ◦ Gは一様分布等からサンプルされた乱数zを入力とし出力x’を生成 ◦ Dは入力データが学習データか生成データ(x’)かを分類
◦ 自然画像の生成などで大きく成功 ◦ 生成した値を用いて学習が進むので文章等の離散値の生成は苦手 11 [Karras, 18]
SeqGAN [Yu, 17] 12 GANを文章などの系列データに拡張 GeneratorにRNNと強化学習を適用 D…文章全体が本物か偽物か識別(GANと同じ) G…state(生成途中の文章 )から action(次の単語)を出力する
policyと仮定 生成途中の評価はMC探索で生成完了させた文を Dに入力し本物と判断する確率 (自然な文章度合い)をGの報酬とし, 報酬が最大化するような (≒Dに実データと誤認してもらえるような )GのActionを学習 -> Gにシミュレーションで文章をいくつか作らせた結果の Dの期待報酬を Gに与えて学習 Discriminatorの学習 Generatorの学習
Approach 15
GUIGAN 16 state action SeqGAN 生成途中の文章 次の単語 GUIGAN 生成途中のGUI 次のGUIパーツ
A. Style Embedding of Subtree ペアで入力されたGUIのパーツ画像が同じ App(Class)出身なら 出力される特徴空間上で近づけ、違う Appなら遠ざけるように学習 ->
GUIパーツ(Subtree)のStyle Embeddingを得る 17
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
C. Modeling Subtree Structure GUIパーツの構造情報(structure)のモデル化 Generatorで生成されたGUIは, 各パーツ (Subtree)の種類もIDから割り出せる ここでいうパーツの種類とは ,
ListViewやFrame, Menu barなどのComponentカテゴリ 生成された GUIと実GUIのパーツの種類の順番が近い (≒編集距離が小さい )ほど 良い構造 となるように学習 19
Model Summary 20 Dを欺く程の生成 スタイルの互換性 GUIの構造整合性
Experiments 23
Dataset Rico Datasetのうちデータ数 の多い5カテゴリを抽出 -> カテゴリの特徴を捉えた GUIを生成できるか 更にアプリ数の多い3社も Datasetとして抽出 ->
特定企業らしいGUIを 生成できるか 24
Metrics Frechet Inception Distance (FID): 生成画像の品質と多様性の評価に使われる 生成されたGUIと本物のGUIを画像Encoder(InceptionV3)に食わせて出 力Vectorの分布間の距離を測る -> 本物と分布が近い程,
生成したGUIの品質が高いといえるので FIDは低い程良い 1-Nearest Neighbor Accuracy: 生成されたGUIか, 本物のGUIかの分類精度 -> 生成モデルの性能が良い程間違えるはずなのでAccは低いほど良い 25
Baselines • WGAN-GP [Gulrajani, 17] ◦ 勾配消失問題と収束速度を改善した生成モデル • FaceOff [Zheng,
19] ◦ DOM TreeベースのWebサイト探索モデル • GUIGAN-style ◦ style lossだけで学習させた提案手法 • GUIGAN-structure ◦ structure lossだけで学習させた提案手法 26
Evaluation Results 27
28 https://github.com/GUIDesignResearch/GUIGAN#examples-of-pre-built-components
Evaluation Results 29
30
31
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
Evaluation Results 33 • 5段階評価の3指標において どのカテゴリでも提案手法が 既存の3割増で良い評価に • 検定でも提案手法が有意に (*と**)
• Functionalityもavg. 0.812で既存 (0.452)の8割増 • “Travel > Books, Shopping”の結果 は、Travelの方が機能的なGUIを持つた め
34
Conclusion 35
Conclusion • GANによるGUIデザイン生成手法を提案 ◦ Style, Structure両方を加味した生成が可能に • 今後の課題 ◦ GUIにおけるルールの条件付与
▪ menu barは上にあるべきなど ◦ 人間によるEditableなInterfaceと組み合わせる ▪ GUI開発の半自動化, Human-in-the-loop 36
Comment • パーツの切り出しが一番大変そう • 生成されたGUIがUserにそのまま採用されるわけじゃ ないのでオンライン評価が難しそう • Editableではないので出力制御が難しそう ◦ StyleとStructureのバランス調整もできなそう
37