1
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

[論文]pix2code: Generating Code from a Graphical User Interface Screenshot

論文
https://arxiv.org/abs/1705.07962
ソース
https://github.com/tonybeltramelli/pix2code
記事
http://gigazine.net/news/20170530-pix2code/

学習時

DSLコードをLSTMで学習
GUI画像をCNNで学習
マージレイヤーを通してLSTMで学習

推定時

GUIの画像を学習済みモデルに入力
デザイナが出力される
スクリーンショット 2017-05-29 17.51.26.png

IOSの場合

スクリーンショット 2017-05-29 17.51.33.png

IOS Android web

スクリーンショット 2017-05-29 17.51.50.png

スクリーンショット 2017-05-29 17.51.59.png

IOS Android webエラー率

スクリーンショット 2017-05-29 17.52.08.png
スクリーンショット 2017-05-29 17.52.13.png

関連ワーク

全てのコーディングをAIで自動化にを目指すオックスフォード大学発チーム「Diffblue」、シリーズAで2200万ドルの資金調達を発表。人工知能によるソフトウェア開発を目指す
http://shiropen.com/2017/06/28/26158
Daniel Kröning
http://www.kroening.com/
Peter Schrammel
https://www.cs.ox.ac.uk/people/peter.schrammel/

画像キャプションモデルアーキテクチャを使用する

画像を入れてhtmlを出力。
1_vZX3R1neqV6Rf9y_baJCYw.png
htmlをトークンに分割。トークンのシーケンスを入力として使用してモデルをトレーニングする

クロスエントロピーを使用してモデルの次のトークン予測と実際の次のトークンを比較。
htmlファイルの始めと最後にはを入れて学習する。
一定のシーケンスにするために文字が足りない場合はで埋める。

1:CNN画像の特徴量とを学習。
2:CNN画像の特徴量と, headerを学習。
という感じで文字をずらしてシーケンスを作成して順次学習する。
推定時も同じように推定したものを推定器に入れるを繰り返す。

  • hello worldサンプルの場合 スクリーンショット 2018-04-05 15.37.24.png

Screenshot-to-code-in-Keras
https://github.com/emilwallner/Screenshot-to-code-in-Keras/blob/master/README.md

文字ベクトル作成例

画像ベクトルと文字ベクトルをモデルに入れるために前処理する。
2段階に分かれる。

1.文章全体でインデックスを1つずつずらす。
2.あるインデックスより前方100文字を1つのベクトルとする。文字が足りなければ空文字を入れる。

下記の例のように1文字ずつずれていく文字列になる。
この文字を埋込層で単語とidをマッピングする。

==========
  justify-content-between align-items-center">
                  <div class="btn-group">

==========
 justify-content-between align-items-center">
                  <div class="btn-group">

==========
 ustify-content-between align-items-center">
                  <div class="btn-group">

==========
 stify-content-between align-items-center">
                  <div class="btn-group">

==========
 tify-content-between align-items-center">
                  <div class="btn-group">

==========
 ify-content-between align-items-center">
                  <div class="btn-group">

==========
 fy-content-between align-items-center">
                  <div class="btn-group">

==========
 y-content-between align-items-center">
                  <div class="btn-group">

==========
 -content-between align-items-center">
                  <div class="btn-group">

==========
 content-between align-items-center">
                  <div class="btn-group">
                    <
==========
 ontent-between align-items-center">
                  <div class="btn-group">
                    <b
==========
 ntent-between align-items-center">
                  <div class="btn-group">
                    <bu
==========
 tent-between align-items-center">
                  <div class="btn-group">
                    <but
==========
 ent-between align-items-center">
                  <div class="btn-group">
                    <butt
==========
 nt-between align-items-center">
                  <div class="btn-group">
                    <butto
==========
 t-between align-items-center">
                  <div class="btn-group">
                    <button
==========
 -between align-items-center">
                  <div class="btn-group">
                    <button 
==========
 between align-items-center">
                  <div class="btn-group">
                    <button t
==========
 etween align-items-center">
                  <div class="btn-group">
                    <button ty
==========
 tween align-items-center">
                  <div class="btn-group">
                    <button typ
==========
 ween align-items-center">
                  <div class="btn-group">
                    <button type
==========
 een align-items-center">
                  <div class="btn-group">
                    <button type=
==========
 en align-items-center">
                  <div class="btn-group">
                    <button type="
==========
 n align-items-center">
                  <div class="btn-group">
                    <button type="b
==========
  align-items-center">
                  <div class="btn-group">
                    <button type="bu
==========
 align-items-center">
                  <div class="btn-group">
                    <button type="but
==========
 lign-items-center">
                  <div class="btn-group">
                    <button type="butt
==========
 ign-items-center">
                  <div class="btn-group">
                    <button type="butto
==========
 gn-items-center">
                  <div class="btn-group">
                    <button type="button
==========
 n-items-center">
                  <div class="btn-group">
                    <button type="button"
==========
 -items-center">
                  <div class="btn-group">
                    <button type="button" 
==========
 items-center">
                  <div class="btn-group">
                    <button type="button" c
==========
 tems-center">
                  <div class="btn-group">
                    <button type="button" cl
==========
 ems-center">
                  <div class="btn-group">
                    <button type="button" cla
==========
 ms-center">
                  <div class="btn-group">
                    <button type="button" clas
==========
 s-center">
                  <div class="btn-group">
                    <button type="button" class
==========
 -center">
                  <div class="btn-group">
                    <button type="button" class=
==========
 center">
                  <div class="btn-group">
                    <button type="button" class="
==========
 enter">
                  <div class="btn-group">
                    <button type="button" class="b
==========
 nter">
                  <div class="btn-group">
                    <button type="button" class="bt
==========
 ter">
                  <div class="btn-group">
                    <button type="button" class="btn
==========
 er">
                  <div class="btn-group">
                    <button type="button" class="btn 
==========
 r">
                  <div class="btn-group">
                    <button type="button" class="btn b
==========
 ">
                  <div class="btn-group">
                    <button type="button" class="btn bt
==========
 >
                  <div class="btn-group">
                    <button type="button" class="btn btn
==========

                  <div class="btn-group">
                    <button type="button" class="btn btn-
==========
                   <div class="btn-group">
                    <button type="button" class="btn btn-s
==========
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm
==========
                 <div class="btn-group">
                    <button type="button" class="btn btn-sm 
==========
                <div class="btn-group">
                    <button type="button" class="btn btn-sm b
==========
               <div class="btn-group">
                    <button type="button" class="btn btn-sm bt
==========
              <div class="btn-group">
                    <button type="button" class="btn btn-sm btn
==========
             <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-
==========
            <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-o
==========
           <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-ou
==========
          <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-out
==========
         <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outl
==========
        <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outli
==========
       <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outlin
==========
      <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline
==========
     <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-
==========
    <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-s
==========
   <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-se
==========
  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-sec
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
1
Help us understand the problem. What are the problem?