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

Web制作

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

2018年12月03日 8:11 

ディープラーニングで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がどこまで進化するのか怖い気持ちもありますが、ここまで進んでいる驚きもあり、今回記事にしました。

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!