CSSSketch2Code: An Automatic Method to Generate Web Pages with CSS Style

paper
- https://dl.acm.org/doi/abs/10.1145/3292448.3292455
github
データセット
project

f:id:e4exp:20200909110955p:plain

まとめ

どんなもの？
- webページのスケッチ(スクショではない)からDSLを生成するencoder-decoder with attentionモデル．全体の画像特徴に加えてMask-RCNNで検出した各構成要素を利用している．また，DSLはencoder, decoderともにBi-LSTMを使用し，encodeされた全体/各部画像特徴とDSL特長は結合したあとにattentionを適用
先行研究と比べてどこがすごい？
- sketch2code(Ashwin Kumar, 2018．ほかにも２つくらいsketch2codeが存在するので念の為)と比較してBLEU, METEOR, ROUGE-L等で上回る結果．先行研究よりボタンの色を正確に再現できるとしている
技術や手法のキモはどこ？
- Mask-RCNNにより画面の構成要素を検出して画像特徴にconcatしている．
  - 入力のスケッチには，blue, redなどの文字がボタン内に書かれており，おそらくそれらを別のクラスとして検出するように事前学習させている
- LSTMをBi-LSTMに変更
- attnetionはDSLと画像個別ではなく，それらの結合に対して適用
- データセットを作成している(1500件，全体画像，要素画像(MaskRCNN訓練用)，DSLを含む．公開しているか不明．)
どうやって有効だと検証した？
- sketch2codeとの比較およびablation study．attention, Bi-LSTM, Mask-RCNNどれも性能に貢献している
議論はある？
- CNNのレイヤの深さと性能の関係を調べている．7層が良いとしている
- MaskRCNNのaccuracyが良いほど性能が上がる．mAPなど他の指標については言及なし
次に読むべき論文は？
- Jia X, Gavves E, Fernando B, et al. Guiding Long-Short Term Memory for Image Caption Generation[J]. 2015.
  - gLSTM．image captioning の既存手法．タイムステップで異なる３つのsemantic guiding informationをLSTMに入力する
- Zhou L, Xu C, Koch P, et al. Image Caption Generation with Text-Conditional Semantic Attention[J]. 2016.
  - gLSTMの拡張で，入力情報がすべてのタイムステップで異なるようにする
その他
- CSSスタイルを考慮した生成が可能としているが，確かに考慮はしているが物体検出で文字種類を判定してボタン色を決定する，という方法ではCSSの考慮というには弱いのではないだろうか．生成しているものはDSLなので．