画像からHTMLを生成する深層学習とは?AIがwebサイト自動コーディング。画像からHTMLを生成する深層学習とは?AIがwebサイト自動コーディング。画像からHTMLを生成する深層学習とは?AIがwebサイト自動コーディング。Tweetweb制作業界において、自動化ができそうでなかなか自動化できなかったのが、コーディング作業。HTMLは確固に構造化されているので、コーディングの多くは単純作業でしたが、これまで自動化の手段がなく、煩わしかったのが正直なところ。そんななか1月に、画像のみからHTMLコードを自動生成するというプログラムとその解説が、Floydhubのブログ上で、公開されました。こちらのプログラムは、pix2codeという論文とそのコードを参考につくられているとのことです。気になるニューラルネットワークの出力結果をご覧ください。250エポックだと、支離滅裂な文字列でしかありませんが......学習を重ね、550エポック目ではほぼ完璧といっていいほどの結果が出力されています。実際にHTMLが生成されていく様子は下記のとおり。いうまでもありませんが、「デザインデータをニューラルネットワークに与えるだけで、コーディング完了」ということが近いうち可能になるかもしれません。FloydHub深層学習をクラウド上で動かせるプラットフォーム。あるが、無料プランもある。https://www.floydhub.com/応用が進む深層学習。複数のネットワークを組み合わせ、HTMLを生成可能にコーディング作業は「目で見て、頭で考えて、HTMLタグに落としこむ」という、機械には一見難しそうな作業ですが、こちらのプログラムでは複数のニューラルネットワークを組み合わせ、HTMLの生成をおこなっています。おおまかなロジックとしては、画像認識が得意な畳み込みニューラルネットワーク(CNN)で画像の特徴を抽出し、時系列情報の処理を得意とするリカレントニューラルネットワーク(RNN)にタグの並びを予測させる、というフローのようですね。公開されたソースコードのなかには、Bootstrapで自動コーディングをおこなうプログラムもありました。左図がスクリーンショットで、それをもとに生成した結果が右図こちらでは、いったん独自の形式で出力をし、その後HTMLタグに変換するという作業をおこなっています。Bootstrapではクラスの付け方などが複雑なため、直接なHTML生成はまだ難しいようですが、最終出力結果はかなりのものです。Bootstrapは使用者も多いので、期待が広がりますね。BootstrapTwitter社が公開しているCSS/JSフレームワーク。web制作においてよく使われるスタイルや機能が用意されており、web制作業界では非常によく使われている。業務レベルでのAI活用がすすむ。我々はどう向き合うべきか?もちろん教師データに依存するため、あらゆるデザインに汎用的に対応できるわけではないのですが、かなりの可能性を秘めています。最終チェックや、リッチなインタラクションを実装するには、まだ人間の手が必要ですが、かなりの作業が機械にとって変わりそうです。今回ご紹介したプログラムは、ソースコードも公開されており、FloydHubで試すことが可能。ディープラーニングを学習する敷居もどんどん下がってきています。こちらのプログラムは、編集部でも実際に試す予定ですので、続編記事にご期待ください)いよいよ単純な作業は人間がやらなくても良い時代がすぐそこに。編集部Ledge.ai編集部です。最新のAI関連技術、テクノロジー、AIのビジネス活用事例などの情報を毎日発信しています。