Webサイトのモックアップ画像からディープラーニングを利用し自動的にコードを作成する「Screenshot-to-code」が公開。

シェアする

スポンサーリンク

 デザイナーが作成したWebサイトのモックアップ画像からディープラーニングを利用し自動的にコードを作成する「Screenshot-to-code」が公開されています。詳細は以下から。

UIzard Technologies社のロゴ

 以前、デザイナーが作成したWebサイトのモックアップやiOS、AndroidアプリのGUI画像から自動的にコードを作成するPix2Code(以下動画)が公開され話題になりましたが、

このPix2Codeの技術をベースに、ニューラルネットワークにWebサイトのモックアップ画像をHTML/CSSへ変換する方法を学ばせることで、ディープラーニングを利用しモックアップ画像からHTMLコードを生成する手法(CSSはBootStrap)をディープラーニングプラットフォーム(PaaS)を提供しているFloydHubが公開しています。

Give a design image to the trained neural network

The field took off last year when Tony Beltramelli introduced the pix2code paper and Airbnb launched sketch2code.[…]In this post, we’ll teach a neural network how to code a basic a HTML and CSS website based on a picture of a design mockup. Here’s a quick overview of the process:

Turning Design Mockups Into Code With Deep Learning – FloydHub Blog

スポンサーリンク

デモ

 記事とコードを公開したFloydHubのEmil Wallnerさんによると、この手法はPix2CodeをベースにPythonおよびニューラルネットワークライブラリKerasと、Googleが開発している機械学習ライブラリTensorFlowを利用し開発したそうで、デモ動画では以下の様にスクリーンショットからWebサイトを作成していく課程と完成されたWebサイトが映っています。

 また、同時に公開されたサンプルプロジェクト「Picture-to-Code」にはFloydHubおよびローカルで開発環境を構築&サンプルを実行する方法が説明されているので、興味のある方はチェックしてみて下さい。

コメント

  1. 匿名 より:

    うわあ面白いなぁこれ。