今年の５月末に話題になった
画面のスクリーンショットからコードを生成するディープラーニングpix2code
Gigazine
GUIのスクリーンショットを読み込むと必要なコードを生成する仕組みでスタートアップが人工知能を活用
http://gigazine.net/news/20170530-pix2code/
AAPL Ch.
ディープラーニングを利用し、デザイナーが作成したiOS/AndroidアプリのGUI画像から自動的にコードを作成する「Pix2Code」が話題。
https://applech2.com/archives/20170530-deep-learning-generate-source-code-from-gui-design.html
著者のTony Beltramelli氏が先日、GitHubにプログラムを公開しました。
https://github.com/tonybeltramelli/pix2code
コードの中身を見るのが一番だと思いますが、
せっかくなので、
元となった論文を見返してまとめてみました。
概要
GUI画面をCNN、プログラムコードをLSTM、
でそれぞれ処理＆結合させ、２番目のLSTM層に流し込む。
そのモデルを使って、GUI画面を流し込むとプログラムコードが予測される仕組み。
プログラムコードを自動生成する技術は、他でも研究されており、
ケンブリッジ大学とMicrosoftの共同研究でも、DeepCoderが発表されています。
コード自動生成を知る上で重要な単語
DSL(Domain Specific Language):
ドメイン固有言語、JavaやPythonのような汎用言語ではなく、SQLや正規表現のような特定のタスク向けの言語
プログラム生成のような技術ではよく使われ、汎用言語のような複雑さを排除できる。
コードをトークン化するのに利用する。
pix2codeが越えるべきハードル３つ
- 画像認識が上手くいくか（オブジェクトの存在とその同定、位置、見かけがわかるか）
- プログラムコードを理解してくれるか（構文的にも、意味的にも）
- 画像認識から取得した潜在変数を活用して、プログラムを出力できるか
データ処理
WEB/iOS/androidの３プラットフォームのデータを用意しています。
Vision Model(画像認識:CNN側)
前処理としてInput画像の256x256 pixelにサイズをリサイズして正規化している。
Language Model（プログラム:LSTM側）
あくまでもレイアウトやコンポーネントとその関係性に注目しているので、テキストの値やラベルは無視している。
DSLの探索空間を減らして、ボキャブラリーのサイズダウンをした。
このように処理することによって、トークンレベルの言語モデルに変換することが出来る。
ちなみに、HTMLのようなマークアップ言語には親子の要素があり、ブロックで囲われているが、ブロックの閉じられる位置も予測できる。
元データはこんな感じ
学習モデルはこんな感じ
Language Modelのwindowサイズ48…でかいですね。
検証した結果
lossとROC曲線
・テスト精度は、WEB/iOS/androidの３つの平均で77%
かなり高いですね。
・学習データ数（スクリーンショットとDSLに書き起こしたソースコードのセット）が足りない
対策)手持ちのデータを合成して、データセットを準備してみた。
オリジナルのUI生成器を作成したらしいです。
最終的なデータセットはこちら、
Synthesizable: オリジナルのUI生成器で合成可能な最大のデータ数
Instances: 合成された画面とプログラムのファイルのペア数
Samples: 48トークンのwindow sizeで区切ったプログラムコードの実データ数
最後に
「フロントエンドエンジニアは失業するのでしょうか？」という質問に著者のTony Beltramelli氏はこう答えてます。
Even assuming a mature version of pix2code able to generate GUI code with 100% accuracy for every platforms/languages in the universe, front-enders will still be needed to implement the logic, the interactive parts, the advanced graphics and animations, and all the features users love. The product we are building at Uizard Technologies is intended to bridge the gap between UI/UX designers and front-end developers, not replace any of them. We want to rethink the traditional workflow that too often results in more frustration than innovation. We want designers to be as creative as possible to better serve end users, and developers to dedicate their time programming the core functionality and forget about repetitive tasks such as UI implementation. We believe in a future where AI collaborate with humans, not replace humans.
内容をつまむと、
「pix2codeがGUI画面を100%正確に作れたとしても、ロジックの部分やユーザーが好むグラフィックは人が作る必要があるし。
あくまで、UI/UXデザイナーとフロントエンド開発者を橋渡しするものだから。」
だそうです。