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

UIzard-pix2code-logo-icon-dbf18a2655e5e2ccbde07b6c049133ebb90ae806

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

 以前、デザイナーが作成した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. 600x601x20170822nana.jpg.pagespeed.ic.u5ed1iTQeL-e5b3de5c391c8e3805df72a8cdb3da051ece71fa

    ANA、機内食総選挙2017の結果発表 和食は牛すきやき丼、洋食はビーフシチューとオムライス

    Sponsored link  機上ӗ…
  2. MIT-Instant-Retouch-TA-12db540ca97a6020f2db78ca5b27647ac89d2f28

    機械学習を用いれば、写真が「撮影する前」からプロ仕様の美しさに──グーグルとMITがアルゴリズムを開発

    NEWS 2017.08.22 TUE 08:00マサチ&…
  3. GettyImages-496380034-e1503241697905-b18cea347ee2933a806af5a4adfa2f3d9569add1

    「世界共通のインターネット」を巡る、グーグルとカナダ最高裁との闘い

    NEWS 2017.08.21 MON 07:00カナダ&…
ページ上部へ戻る