UI画像からコード生成，pix2code

pix2code: Generating Code from a Graphical User Interface Screenshot

• paper
  • https://arxiv.org/abs/1705.07962
  • Tony Beltramelli
• github
  • https://github.com/tonybeltramelli/pix2code
• データセット
  • githubで公開
• project
  • https://uizard.io/research/#pix2code

Figure. 1 モデル構造

まとめ

• どんなもの？

  • end2endに１枚の入力画像からコード(ドメイン固有言語，DSL)を生成するdeep手法．3つのプラットフォーム(iOS, Android, web-based )で77%以上のaccuracyで生成できる
  • 2022/01/26追記: pix2codeはpix2pixとは異なりGANではない．通常，GANは生成器と識別器から構成されるが，pix2codeには識別器に相当するものがないので，GANとは呼べない*1

• 先行研究と比べてどこがすごい？

  • 視覚入力によるプログラム生成はまだ研究が少ない．Nguyen et al[14]はAndroid UIのリバースエンジニアリングで最も近いが，それはヒューリスティックベース．本手法は画像からend2endで学習できる

• 技術や手法のキモはどこ？

  • encoder-decoder構造を使用する
    • GUI画像はCNNでencode，context(one-hotエンコードされたトークン．DSLに対応する)はstacked LSTMレイヤでencode
    • 両方の特徴ベクトルを結合し，2個目のstacked LSTM decoderに入れる
    • 1時刻に1トークンをサンプルするためにsoftmaxを使う．出力サイズはDSLの語彙数と等しい．
    • sampling時は，最後に推定されたtokenがcontextに含まれるように更新する
    • 得られたDSLはルールベースでターゲット言語にコンパイルする
  • DSLはone-hotエンコーディングを用いる．embeddingは使用していないが，これは語彙数が非常に少ないから可能になる(20個程度)
    • 入力するトークン系列(context)のwindow sizeは48．従って訓練中は48ステップごとにネットワークがunrollされる
  • データセットはiOS, Android, web basedの3種類を公開．それぞれ1500/250件のtrain/testデータで，GUI画像と，それと対応するDSLの組になっている

• どうやって有効だと検証した？

  • 生成出力の評価に，各sampleされたDSLごとに分類誤差(classification error)を計算し，テストデータセット全体で平均した．生成・正解トークン系列の長さの違いもerrorとしてカウントした

• 議論はある？

  • one-hotは語彙数が大きくなるとスケールしない
  • GAN，attention, word embedding, 事前訓練，webクローリングによる大量データの使用，など改善策が沢山ある

• 次に読むべき論文は？

• その他

  • 公式実装には，webデータセットで学習した際に画像を変えても出力DSLが変化しないバグがある
    • stack overflowでも報告されている(githubでissueを受け付けていない) https://stackoverflow.com/questions/62612806/i-trained-pix2code-but-it-always-output-the-same-dsl-content-no-matter-what-ima

*1:さらにいうとpix2pixはGANの中でも特殊です．目的関数がいわゆるGAN loss だけではなく，出力画像(変換後の画像)と正解画像とのL1誤差を取っているので教師ありの要素があります．通常のGANは教師データを利用しないので教師なし学習であり，pix2codeは生成コードと正解コードとのCross-Entropyのみで学習するので完全に教師あり学習です．