ディープラーニングでWEBサイトのモックアップ画像から自動的にコードを作成する「Screenshot-to-code」

おはようございます！社員Aです👩

今回は、ディープラーニングでWEBサイトのモックアップ画像から自動的にコードを作成する「Screenshot-to-code」が想像以上にすごかったのでご紹介したいと思います。

自動的にコードを作成する「Pix2Code」をベースに作られた「Screenshot-to-code」

「Screenshot-to-code」は、昨年、Tony Beltramelliがpix2codeの論文を発表し、Airbnbがsketch2codeを発表し、「Pix2Code」を作られました。

フロントエンドの開発を自動化する最大の障壁は、コンピューティングパワーです。

しかし、現在のディープ・ラーニング・アルゴリズムと合成されたトレーニング・データを使用して、人工フロントエンド・オートメーションの探索を開始することができます。

訓練されたニューラルネットワークに設計イメージを与える

ニューラルネットワークは画像をHTMLマークアップに変換する

レンダリングされた出力

3回の反復でニューラルネットワークを構築

「Screenshot-to-code」では、3回の反復でニューラルネットワークを構築します。

最初のバージョンでは、動く部分のハングを取得するために最低限のバージョンを作成します。

2番目のバージョンであるHTMLでは、すべてのステップを自動化し、ニューラルネットワークのレイヤーを説明することに重点を置いています。

最終版のBootstrapでは、LSTMレイヤを一般化して探索できるモデルを作成します。

モデルはBeltramelliのpix2codeとJason Brownleeの画像キャプションのチュートリアルに基づいています。

コードはTensorFlowの上にあるフレームワークであるPythonとKerasで書かれています。

まとめ

WEB業界もこのようなシステムが普及してくれば、制作フローの時短だけでなく、人員の削減などにもつながると思います。

そういった意味で、AIがどこまで進化するのか怖い気持ちもありますが、ここまで進んでいる驚きもあり、今回記事にしました。