AI(ディープラーニング）の活用事例（Screenshot-to-code)

こんにちは。sinyです。

この記事では、ディープラーニングの活用事例についてご紹介します。

今回紹介するのは、FloydHubのEmil Wallner氏が2018年に公開したScreenshot-to-codeです。

これは、HTMLの画像データから実際のHTMLコードを自動生成させるというものです。

I’m thrilled to share my latest deep learning project: Turning a design mockup into code. 💻 🤖

1) Give the trained neural network a design image
2) The network converts the image into HTML markup and renders it ↴

Article: https://t.co/fAgY5xhmvM
Code: https://t.co/qhsjQefycb pic.twitter.com/dF0nU6O0iD

— Emil Wallner (@EmilWallner) 2018年1月10日

以下の記事で具体的な実装方法が紹介されています。

FloydHub Blog

 

81 Users

3969 Pockets

Turning Design Mockups Into Code With Deep Learning

https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/

Within three years deep learning will change front-end development. It will increase prototyping speed and lower the barrier for building software.

記事内では3ステップで紹介されていますので、初めての方はステップ１から順に進めていくと理解が深まると思います。

注意点として、ステップ②のHTMLバージョンは「新しい画像を一般化しません」と明記されています（下記リンク参照）。

ですので、HTMLバージョンでは自分で新しいモックアップ画像を使って予測させることはできないようです。

GitHub

Question on result · Issue #20 · emilwallner/Screenshot-to-code

https://github.com/emilwallner/Screenshot-to-code/issues/20

The program worked without errors, but the result was far from I expected ( maybe I did something wrong? ). here is the image I used: And here is the result: https://jsfiddle.net/b1zt7vsh/...

こちらの記事の最後に紹介されているBootstrap Versionを元に、実際にBootstrapのHTML画像データをインプットし、HTMLコードを自動生成してHTML画面を実際に生成するDjangoアプリを作ってみました。

※デモ動画

こんな感じで実際に動くアプリにしてみるとちょっと感動しますね。

上記デモアプリのソースコードはすべてGithubに公開していますので、興味のある方はチャレンジしてみてください。

GitHub

sinjorjob/screenshot-to-code-keras-django

https://github.com/sinjorjob/screenshot-to-code-keras-django

Convert screenshot to code into Django application - sinjorjob/screenshot-to-code-keras-django

上記リポジトリをGithubにアップしてからしばらく気づかなかったのですが、なんと、Emil Wallner氏からgithubフォローされていることに気づきました！
恐らくDjangoアプリ化したリポジトリを見てくださったようです。
些細なことですが、こういったことがあるとモチベーションあがりますね！

以上、AI(ディープラーニング）の活用事例（Screenshot-to-code)でした。