by Gwydion M Williams

デンマークのIT系スタートアップであるUIzard Technologiesが人工知能(AI)を利用して、グラフィカルユーザーインターフェイス(GUI)のスクリーンショットを読み込ませると、そのGUIに必要なコード(storyboardファイルやHTMLファイル)を出力するというアプリケーションを開発しました。YouTubeではそのデモンストレーション映像が公開されています。

pix2code - YouTube

「pix2code」はGUIのスクリーンショットからコードを生成します。



まず用意したのはモバイル端末向けのGUI。単なるスクリーンショットのPNG画像です。



これをpix2codeに読み込ませます。pix2codeではターゲットとなるプラットフォームを「iOS」「Android」「Web」の3つから選べるようで、ここではiOSを選んでいます。



ムービーはリアルタイムで録画されているので、読み込ませたあと、処理を待つ時間が発生するのですが……



15秒も経たないうちに、「mobile-gui-demo.gui」と「mobile-gui-demo.storyboard」というファイルが生成されました。storyboardファイルはiOS向けのアプリ開発で用いられます。



ファイルを開くと、先ほどスクリーンショットで見たものと同じGUIができあがっていました。



スライダーの位置や、メニューに割り振った文字列の内容もここで編集可能です。



ウェブ向けのサービスでもやり方はほぼ同じ。これが読み込ませるスクリーンショット。



pix2code実行時のオプションでプラットフォームを「Web」向けにしておきます。



こちらは約30秒かかりました。今度は「web-gui-demo.gui」「web-gui-demo.html」というファイルができあがりました。



HTMLファイルをブラウザで開くと、さきほどのスクリーンショットと寸分違わぬ中身が完成していました。



UIzard Technologiesによると、スクリーンショットからGUIを作る精度は今のところ77%ほど。さらなる学習を重ねることで精度は改善していくとのこと。使用されたデータセットはGitHubで公開されており、2017年内にはpix2codeのすべてのコードを公開する計画だとのことです。

GitHub - tonybeltramelli/pix2code: pix2code: Generating Code from a Graphical User Interface Screenshot

https://github.com/tonybeltramelli/pix2code