UIデザインの自動補完,Auto Completion of User Interface Layout Design Using Transformer-Based Tree Decoders

Auto Completion of User Interface Layout Design Using Transformer-Based Tree Decoders

f:id:e4exp:20200907111837p:plain

まとめ

  • どんなもの?
    • UIデザインの自動補完を行うtransformer decoder.途中まで作成したUI要素のtreeを入力し,完成したtreeを出力する.transformerベースのdecoderを2種類提案しており,このタスクのための評価も3種類提案
  • 先行研究と比べてどこがすごい?
    • デザインの自動補完は新しいタスク.テキストの自動補完のデザイン版を意図している
  • 技術や手法のキモはどこ?
    • レイアウト木は空白のデザインをrootとし,要素(ノードタイプ,ノードの深さ,終端か否か,親のindex,bbox(x1,y1,x2,y2))を子ノードとする構造.
      • ノードタイプ,終端判定,位置は埋め込みを行い,埋め込みに対してマルチヘッドアテンションで隠れ状態を得る.得られた隠れ状態に次の層でさらにマルチヘッドアテンション.
      • 最終的に,隠れ状態に重みを掛けてsoftmaxで出力ノードを決定(ノード内すべての情報はone-hotで表現しているはず)
      • 親子関係が推定されない
    • Pointer Transformer
      • ↑の結果に,i番目のノードの隠れ状態と,前のnodeの隠れ状態との内積をsoftmaxしたものをかけ合わせて親子関係まで推定
    • Recursive Transformer
      • 兄弟ノード生成時の隠れ状態でattentionしたあとの隠れ状態と,祖先ノード計算時の隠れ状態でattentionをかける
  • どうやって有効だと検証した?
    • 3つの評価指標を導入:layout tree edit distance(推定されたレイアウトを正解に変形するために人間が必要な労力を推定した指標),parent-child pair retrieval accuracy(正解treeに含まれる親子ペアの集合に対して推定treeにどれだけ正しいペアが含まれるかを計算),next-element prediction accuracy(次の要素をどれだけよく捉えたかを測る.木を幅優先でflatにした系列を使って,次の要素の予測があたっているか)
    • 上記指標で,vanilla transformer, pointer transformer, recursive transformerの性能を比較.全体的にrecursiveが優れている
  • 議論はある?
    • レイアウト構造とsemantic propertiesは推定できるが,bounding boxは正確ではない.structureとsemanticだけで評価するとよくなる
    • 連続値を出力するより,座標をone-hot離散値で扱かったほうが良い
  • 次に読むべき論文は?

      1. Vinyals, M. Fortunato, and N. Jaitly. Pointer networks. In C. Cortes, N. D. Lawrence, D. D. Lee, M. Sugiyama, and R. Garnett, editors, Advances in Neural Information Processing Systems 28, pages2692–2700.CurranAssociates,Inc.,2015a.URLhttp://papers.nips.cc/paper/ 5866-pointer-networks.pdf.
      2. 木構造の生成モデル
      1. Vinyals, L. Kaiser, T. Koo, S. Petrov, I. Sutskever, and G. Hinton. Grammar as a foreign language. In Proceedings of the 28th International Conference on Neural Information Processing Systems - Volume 2, NIPS’15, pages 2773–2781, Cambridge, MA, USA, 2015b. MIT Press. URL http://dl.acm.org/citation.cfm?id=2969442.2969550.
      2. 木構造の生成モデル
      1. Chen, C. Liu, and D. Song. Tree-to-tree neural networks for program transla-tion. In S. Bengio, H. Wallach, H. Larochelle, K. Grauman, N. Cesa-Bianchi, and R. Garnett, editors, Advances in Neural Information Processing Systems 31, pages 2547–2557. Curran Associates, Inc., 2018. URLhttp://papers.nips.cc/paper/ 7521-tree-to-tree-neural-networks-for-program-translation.pdf.
      2. 木構造の生成モデル
    • H.Dai,Y.Tian,B.Dai,S.Skiena,andL.Song.Syntax-directedvariationalautoencoderforstructureddata. CoRR, abs/1802.08786, 2018. URLhttp://arxiv.org/abs/1802.08786.

      1. Zhu, Z. Xue, and Z. Yuan. Automatic graphics program generation using attention-based hierar-chical decoder. CoRR, abs/1810.11536, 2018
      2. 関連研究.2つのLSTMを使い,一つがblockを決めて,もう一つがその内部にtokenを生成
        1. Tai, R. Socher, and C. D. Manning. Improved semantic representations from tree-structured long short-term memory networks. CoRR, abs/1503.00075, 2015. URL http://arxiv.org/ abs/1503.00075.
      1. LSTMで階層構造生成
      1. Dong and M. Lapata. Language to logical form with neural attention. CoRR, abs/1601.01280, 2016. URLhttp://arxiv.org/abs/1601.01280.
      2. LSTMで言語からlogical form生成(階層構造)
    • A.Vaswani,N.Shazeer,N.Parmar,J.Uszkoreit,L.Jones,A.N.Gomez,L.Kaiser,andI.Polosukhin.Attention is all you need. CoRR, abs/1706.03762, 2017. URL http://arxiv.org/abs/ 1706.03762.

      • transformer
        1. Shiv and C. Quirk. Novel positional encodings to enable tree-structured transformers, 2019. URL https://openreview.net/forum?id=SJerEhR5Km.
      1. positional encodings
        1. Liu, M. Craft, J. Situ, E. Yumer, R. Mech, and R. Kumar. Learning design semantics for mobile apps. In Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology, UIST ’18, pages 569–579, New York, NY, USA, 2018. ACM. ISBN 978-1-4503-5948-1. doi: 10.1145/3242587.3242650. URL http://doi.acm.org/10.1145/ 3242587.3242650.
      1. 使用されたデータセットの元データ
  • その他 *