[論文レビュー] pix2code: Generating Code from a Graphical User Interface Screenshot

Tony Beltramelli|arXiv (Cornell University)|May 22, 2017

Advanced Image and Video Retrieval Techniques参考文献 24被引用数 30

ひとこと要約

pix2codeは、CNN-RNNアーキテクチャを用いたエンドツーエンドのディープラーニングモデルを提案し、タスク固有のチューニングなしでiOS、Android、Webベースのプラットフォームにおいて77%を超える精度を達成するGUIスクリーンショットからソースコードを生成する。モデルはピクセルデータとDSLトークン列から直接、視覚的および順序的なパターンを学習し、最小限の人的介入で生の画像から自動的にコードを生成可能である。

ABSTRACT

Transforming a graphical user interface screenshot created by a designer into computer code is a typical task conducted by a developer in order to build customized software, websites, and mobile applications. In this paper, we show that deep learning methods can be leveraged to train a model end-to-end to automatically generate code from a single input image with over 77% of accuracy for three different platforms (i.e. iOS, Android and web-based technologies).

研究の動機と目的

• GUIスクリーンショットを関数的なソースコードに自動変換し、開発者の手作業による実装時間を短縮すること。
• ピクセルレベルの入力と対応するコード列から直接学習することで、手作業で設計されたヒューリスティクスや特徴工学の必要性を排除すること。
• 同じトレーニングフレームワークを用いてiOS、Android、Webの複数のプラットフォーム用のコードを生成可能な統合モデルアーキテクチャを開発すること。
• 今後のビジョンからコード生成分野の研究を支援するため、iOS、Android、Web用のGUIスクリーンショットとソースコードのペアの公開可能なデータセットをリリースすること。

提案手法

• 畳み込みニューラルネットワーク（CNN）がGUIスクリーンショットを視覚的特徴表現に変換し、UI要素の空間的および構造的情報を捉える。
• 再帰ニューラルネットワーク（RNN）、特にLSTM層のスタックが、ドメイン固有言語（DSL）におけるコードトークンの順序的構造をモデル化する。
• 視覚的特徴と順序的特徴を連結し、その出力をデコーダRNNに供給。デコーダRNNはsoftmax層を用いてDSL語彙に対する確率分布を計算し、トークンごとにコードを生成する。
• 確率的勾配降下法を用いて交差エントロピー損失が予測値と正解コード列の間に最小化されるように、エンドツーエンドでモデルをトレーニングする。
• 推論段階では、モデルの出力確率分布から最も確率の高いトークン列をデコードするために、グリーディサーチとビームサーチの両方の戦略が用いられる。
• DSLコンパイラーが、標準的なコンパイル技術を用いて生成されたDSLトークンを、ターゲットプラットフォーム固有のコード（例：iOS用にSwift、Android用にXML、Web用にHTML/CSS）に変換する。

実験結果

リサーチクエスチョン

• RQ1 ヒューリスティクスや特徴工学を手作業で設計せず、GUIスクリーンショットから直接構文的に正しいソースコードを生成できるか？
• RQ2 同じアーキテクチャおよびハイパーパrameterを用いて、iOS、Android、Webなど異なるプラットフォームにどれほど一般化できるか？
• RQ3 合成された画像-コードペアに対するエンドツーエンドのトレーニングは、視覚的レイアウトと対応するコード構造とのマッピングをどれほど効果的に学習できるか？
• RQ4 異なるデコード戦略（グリーディ対ビームサーチ）は、コード生成の正確性およびシーケンス品質にどのような影響を与えるか？

主な発見

• グリーディサーチを用いた場合、WebベースのHTML/CSSデータセットでは分類誤差率が12.14%にとどまり、Web GUIに対して優れた一般化性能を示している。
• iOSとAndroidでは、それぞれグリーディサーチ下で誤差率が22.73%および22.34%にとどまり、モバイルプラットフォーム全体で一貫した性能を発揮している。
• ビームサイズ3のビームサーチはiOSデータセットの誤差を23.94%に低下させるが、ビームサイズ5ではAndroidデータセットの誤差が40.93%に上昇し、複雑なレイアウトではデコード戦略にモデルが敏感であることが示された。
• ラベルテキストがデータ合成時にランダムに割り当てられても、生成されたGUIで階層的構造とレイアウト関係を適切に保持している。
• スタイリングや色選択の問題は時折見られるものの、未学習のGUIレイアウトに対してもモデルは良好に一般化し、生成コードの構造的整合性を維持している。
• iOS、Android、Web用のGUIスクリーンショットとソースコードの公開データセットのリリースにより、実世界のラベル付きデータに依存せずに、今後のビジュアル入力からのプログラム合成分野の研究が可能になった。