pix2codeを評価した

前回の投稿からだいぶ時間が空いてしまったが、その間にpix2codeの評価が進んだので概要を書いてみようと思う。

pix2codeの概要だが、コペンハーゲンに本拠を置くスタートアップUIzard Technologiesが開発したUIのスクリーンショットからWebアプリやiOSの画面表示コードをDeepLearningで出力するというソフトウェアである。これは、2017年5月にソースコードや論文を公開すると同時にデモをYoutubeにアップしている。

ソースコード → https://github.com/tonybeltramelli/pix2code

論文 → https://arxiv.org/abs/1705.07962

Youtube →

このコードを元に米国でDeepLearning向けのPaaS環境を提供しているスタートアップのFloydhubが2018年1月に自社のクラウドで動作な設定等や学習のためのデータを追加しソースコードを追加している(※こちらはWeb向けの学習コード、データのみである)

pix2codeのベースになっているネットワークアーキテクチャは、GAN(generative Adversarial Network)の実装オープンソフトのpix2pixである。pix2pixは2016年11月に発表されたソフトウェアであり、A種(例えば航空写真)の画像からB種(例えば地形図)の画像を2つの画像群の特徴とそれらの相関をDeepLearningで学習し、自動で出力を可能とするソフトウェアである。

pix2codeは、一方を画像ではなく、HTMLなどのMarkup言語にしているところが特徴になる。詳細な違いは、pix2pixの場合は、双方とも画像であるので、特徴量抽出と生成には2つのCNNを利用しているが、pix2codeの場合は画像と言語であるため、CNNとLSTM(Long Short Term Memory)を利用してる。

LSTMは時系列(順番)データを学習するRNN(Recurrent Neural Network)の実装として自然語処理に最もよく利用されるパターンであるが、自然言語処理で利用される場合、言葉のゆらぎがあるため学習の収束が遅いという実感がある。しかし、Markup言語はブラウザのようなコンピュータが人間の意図を表現するために利用される言語であるためゆらぎが少なく、利用されるwordの種類も少なく、表記種別と構造を表現する文法だけであるため、pix2codeでは収束が比較的速いのではないかと想定した。

評価は、当初、本家のソースコードを学習データで学習させ、評価画像を入力した場合の出力HTMLをブラウザに入力し、評価画像と比較することを計画した。

ところが本家のソースコードに付属しているReadmeを読むと、公開されているソースコードはUIzard Technologies社のクライアントを考慮し、一部を意図的に削除、書き換えしてあるという旨の記述がされていた。試しに学習させ、評価したところ、出力結果のDSLをHTMLやiOSなどの目的の言語に変換するCompilerソフトかけると、エラー出力されるという状況であった。

そこでFloydhubのソースコードを参考に本家のコードをいろいろ修正した。その結果、エラー出力はされなくなった。しかし、学習が不十分であり、公開されている学習プログラムのままでは学習データに対しては高精度出力が可能となるが、それ以外の画像データに対しては汎化ができておらず低精度出力になってしまう状態、いわゆる過学習になってしまうことが判明した。そこで独自に学習アルゴリズムについてハイパーパラメータチューニングを実施した。その結果Accuracyが95%近くまで向上するだけでなく、bleu値が、学習に利用しない評価用データに対しても、0.85〜0.91まで向上することを確認した。

学習が済んでしまえば、1画面あたり数秒でBootstrapに対応したHTMLファイルが出力されてしまうという手軽さである。

今後、マーズスピリット社は更に精度向上を図り、この技術を利用したサービス提供を企画している。Webデザイン企業でこのサービスを評価したい、活用したという企業が是非ご一報下さい。

※ bleu値(bilingual evaluation understudy):自然言語の機械翻訳で利用される指標であり、人間が翻訳した場合の文章と機械が翻訳した場合の文章の一致度を評価するために指標であり、人間の翻訳に近ければ近いほど1に近づく