web制作の自動化が進む！　画像から自動コーディングする深層学習プログラムが公開

web制作業界において、自動化ができそうでなかなか自動化できなかったのが、コーディング作業。HTMLは確固に構造化されているので、コーディングの多くは単純作業でしたが、これまで自動化の手段がなく、煩わしかったのが正直なところ。

そんななか1月に、画像のみからHTMLコードを自動生成するというプログラムとその解説が、Floydhubのブログ上で、公開されました。

こちらのプログラムは、pix2codeという論文とそのコードを参考につくられているとのことです。

まずは、気になるニューラルネットワークの出力結果をご覧ください。

250エポックだと、支離滅裂な文字列でしかありませんが……

学習を重ね、550エポック目ではほぼ完璧といっていいほどの結果が出力されています。

 
実際にHTMLが生成されていく様子は下記のとおり。

驚きの結果です。もはやいうまでもありませんが、「デザインデータをニューラルネットワークに与えるだけで、コーディング完了」ということが近いうち可能になるかもしれません。

応用が進む深層学習。複数のネットワークを組み合わせ、HTMLを生成可能に

コーディング作業は「目で見て、頭で考えて、HTMLタグに落としこむ」という、機械には一見難しそうな作業ですが、こちらのプログラムでは複数のニューラルネットワークを組み合わせ、HTMLの生成をおこなっています。

おおまかなロジックとしては、画像認識が得意な畳み込みニューラルネットワーク（CNN）で画像の特徴を抽出し、時系列情報の処理を得意とするリカレントニューラルネットワーク（RNN）にタグの並びを予測させる、というフローのようですね。

公開されたソースコードのなかには、Bootstrapで自動コーディングをおこなうプログラムもありました。結果は下記のとおり。

▲ 左図がスクリーンショットで、それをもとに生成した結果が右図

こちらでは、いったん独自の形式で出力をし、その後HTMLタグに変換するという作業をおこなっています。Bootstrapではクラスの付け方などが複雑なため、直接なHTML生成はまだ難しいようですが、最終出力結果はかなりのものです。

Bootstrapは使用者も多いので、期待が広がりますね。

いよいよ業務レベルでのAI活用がすすむ。我々はどう向き合うべきか？

もちろん教師データに依存するため、あらゆるデザインに汎用的に対応できるわけではないのですが、かなりの可能性を秘めています。最終チェックや、リッチなインタラクションを実装するには、まだ人間の手が必要ですが、かなりの作業が機械にとって変わりそうです。

今回ご紹介したプログラムは、ソースコードも公開されており、FloydHubで試すことが可能。ディープラーニングを学習する敷居もどんどん下がってきています。
（※ こちらのプログラムは、編集部でも実際に試す予定ですので、続編記事にご期待ください）

いよいよ単純な作業は人間がやらなくても良い時代がすぐそこに。私たち人間は「何に集中し、何を捨てるべきか」を、早急に考えないといけないでしょう。

参考・画像引用元：
https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/

by Ledge.ai 編集部

Ledge.ai編集部です。最新Tech界隈の「なんかすごいね」を、『現場の提案』にするための情報をけっこうがんばってお送りします。

「AI:人工知能特化型メディア「Ledge.ai」」掲載のオリジナル版はこちらweb制作の自動化が進む！　画像から自動コーディングする深層学習プログラムが公開 | Ledge.ai（レッジ）2018/01/18