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

学習時

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

推定時

GUIの画像を学習済みモデルに入力
デザイナが出力される

IOSの場合

# IOS Android web

# IOS Android webエラー率

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

画像を入れてhtmlを出力。

htmlをトークンに分割。トークンのシーケンスを入力として使用してモデルをトレーニングする

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

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

hello worldサンプルの場合

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

文字ベクトル作成例

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

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

下記の例のように１文字ずつずれていく文字列になる。
この文字を埋込層で単語と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

学習時

推定時

IOSの場合

関連ワーク

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

文字ベクトル作成例