[論文レビュー] Automatic Graphics Program Generation using Attention-Based Hierarchical Decoder

Zhihao Zhu, Xue Zhan+1 more|arXiv (Cornell University)|Oct 26, 2018

Advanced Neural Network Applications被引用数 8

ひとこと要約

本論文は、コード構造を階層的にモデル化することで、長文の依存関係処理と構造的正確性を向上させる、注目メカニズムを備えた階層的デコーダーを提案する。本手法は、ベンチマークおよび新たに作成された複雑なGUIデータセットにおいて、最先端の手法を上回る性能を発揮し、特に長く複雑なコードシーケンスにおいて顕著な優位性を示す。

ABSTRACT

Recent progress on deep learning has made it possible to automatically transform the screenshot of Graphic User Interface (GUI) into code by using the encoder-decoder framework. While the commonly adopted image encoder (e.g., CNN network), might be capable of extracting image features to the desired level, interpreting these abstract image features into hundreds of tokens of code puts a particular challenge on the decoding power of the RNN-based code generator. Considering the code used for describing GUI is usually hierarchically structured, we propose a new attention-based hierarchical code generation model, which can describe GUI images in a finer level of details, while also being able to generate hierarchically structured code in consistency with the hierarchical layout of the graphic elements in the GUI. Our model follows the encoder-decoder framework, all the components of which can be trained jointly in an end-to-end manner. The experimental results show that our method outperforms other current state-of-the-art methods on both a publicly available GUI-code dataset as well as a dataset established by our own.

研究の動機と目的

• GUIスクリーンショットから意味的に正確で階層的な構造を持つコードを生成する課題に対処すること。
• 従来のRNNベースのデコーダーが有する長期依存関係処理の限界と、固定されたシーケンス長制約の問題を克服すること。
• GUI要素の階層的レイアウトとそれに対応するコード構造を明示的にモデル化することで、コード生成の忠実度を向上させること。
• 標準的でないがより複雑なGUI-コードデータセットにおいても、優れた性能を示すことを実証すること。

提案手法

• GUIスクリーンショットから視覚的特徴を抽出するためのCNNベースの画像エンコーダを備えた、エンコーダ-デコーダー枠組みを採用する。
• 2段階の階層的デコーダーを採用：第1段階のLSTMがブロックレベルの表現を生成し、第2段階のLSTMが各ブロックごとにコードトークンを生成する。
• 第1段階のLSTMの隠れ状態に基づいて、動的に関連する視覚的特徴を選択する注目メカニズムを統合する。
• 注目された視覚的特徴を第2段階のLSTMのコンテキストとして用い、GUI領域とコードブロックの間のより良い対応付けを可能にする。
• バックプロパゲーションを用いてすべてのモジュールをエンドツーエンドで訓練し、画像理解とコード生成の共同最適化を可能にする。
• 推論時にグリーディデコードよりも品質を向上させるために、ビームサーチ（ビームサイズ3および5）を適用する。

実験結果

リサーチクエスチョン

• RQ1 注目メカニズムを備えた階層的デコーディング戦略は、フラットなシーケンスモデルと比較して、複雑なGUIにおけるコード生成の正確性を向上させることができるか？
• RQ2 iOSおよびAndroidのGUIに一般的に見られる長文コードシーケンスにおいて、本手法はベースライン手法と比較してどのように性能を発揮するか？
• RQ3 注目メカニズムは、生成されたプログラムにおける視覚的領域とコードブロックの間の対応付けをどの程度向上させるか？
• RQ4 従来の手法と比較して、多様なレイアウトと豊富な視覚的要素を有するより複雑なGUIに対して、本手法はより良い一般化性能を示すか？
• RQ5 デコーダーの階層的構造は、生成されたコードにおける構造的・意味的詳細の保持能力にどのように影響を与えるか？

主な発見

• 提案手法は、PixCoベンチマークデータセットにおいて最先端の性能を達成し、すべてのサブデータセットでpix2codeおよびベースライン手法を上回った：iOS（26.10 vs. 27.20）、Android（27.20 vs. 27.25）、Web（18.31 vs. 17.25）の分類誤差において。
• より複雑なPixCo-eデータセットでは、ベースラインを著しく上回り、特に長いシーケンス（例：iOSで109トークン/GUI、Androidで112トークン/GUI）において誤差率が低く抑えられ、長期依存関係の処理能力が向上していることが示された。
• ビームサーチ（ビームサイズ5）はグリーディデコードよりも優れた性能を示し、iOSで25.78、Androidで26.95、Webで17.12の誤差率を記録した。
• 定性的な結果から、本手法はより多くの視覚的詳細を保持し、複雑なGUIレイアウトを正しく再構築している一方で、pix2codeはPixCo-eデータセットで多くの要素を回復できなかった。
• 注目メカニズムにより、モデルはコードブロックとGUI内の対応する空間的領域との間で意味のある対応付けを学習できており、注目ヒートマップで可視化された。
• 注目メカニズムを備えた階層的デコーダーは、注目なしの階層的ベースラインと比較して顕著に性能が向上しており、コンテキスト選択をガイドする注目メカニズムの有効性が確認された。