[論文]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の画像を学習済みモデルに入力
デザイナが出力される
<img width="805" alt="スクリーンショット 2017-05-29 17.51.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/64334/1df40941-ab18-ed76-e14b-98b3689e113c.png">
#IOSの場合
<img width="721" alt="スクリーンショット 2017-05-29 17.51.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/64334/60c6d2d0-f438-7019-5b35-93ec11f67812.png">
#IOS Android web
<img width="812" alt="スクリーンショット 2017-05-29 17.51.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/64334/1b6c68bd-c4b5-e6cd-3fe1-5c2f52e528da.png">

<img width="833" alt="スクリーンショット 2017-05-29 17.51.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/64334/d0981699-53de-4ec5-ab8e-219e83d257a2.png">
#IOS Android webエラー率
<img width="736" alt="スクリーンショット 2017-05-29 17.52.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/64334/fc7e4b5d-c7ff-b626-7fb6-858e437b87bc.png">
<img width="824" alt="スクリーンショット 2017-05-29 17.52.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/64334/afa2f311-b7ca-ae82-4a53-48124a9c25a8.png">




#関連ワーク
https://deepage.net/deep_learning/2017/06/14/rnn-compiler-error.html

全てのコーディングを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](https://qiita-image-store.s3.amazonaws.com/0/64334/b7f17280-3f09-b6a5-db34-120f904971e5.png)
htmlをトークンに分割。トークンのシーケンスを入力として使用してモデルをトレーニングする

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

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

- hello worldサンプルの場合
<img width="865" alt="スクリーンショット 2018-04-05 15.37.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/64334/d6fc07be-b01b-3087-dff7-24d31af8263f.png">


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
```