Web制作
ディープラーニングでWEBサイトのモックアップ画像から自動的にコードを作成する「Screenshot-to-code」
2018年12月03日 8:11
おはようございます！社員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
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
