ルールとdeepの融合でデザインファイルからコード生成，Visual Compiler: Towards Translating Digital UI Design Draft to Front-End Code Automatically

UIデザイン pix2code コード生成 論文読み

Visual Compiler: Towards Translating Digital UI Design Draft to Front-End Code Automatically

f:id:e4exp:20200908232440p:plain

まとめ

  • どんなもの？
    • PhotoshopやXDなどのデジタルデザインドラフトのファイルから，frontendコードを生成する手法．ロジックが大半で，デザインファイル内のアイコン部品の検出にFasterRCNN+FPNを使用．
  • 先行研究と比べてどこがすごい？
    • 数値による性能の検証がないので不明．
    • 本文ではUI2LayoutやSketch2Codeより複雑なケースに対応しているとする
  • 技術や手法のキモはどこ？
    • 前提として，デザインファイルのメタデータが入手できており，そこからロジックでJSON treeを構築する．デザインファイルのicon等は部品からできており，それらを統合して大きい画像群にする流れと，構築したtreeをテンプレートマッチによりDSLにする流れに分けられる．2つの流れは最後に統合され，DSLに画像が組み込まれて，codeが出力される
    • 画像を統合する流れで，AI70%,ルール30%で統合するかどうかの判断を行う．AIはFasterRCNNなのか，別のものなのかよくわからない
    • UIのインタフェースを2000件集めて，icon, imageなどのラベルとともにデータセットを作成ている(公開したか不明)
  • どうやって有効だと検証した？
    • 不明
  • 議論はある？
    • 冒頭にdeepによる既存ツールが解釈性がないのでtreeベースの手法を取ったと述べているが，その後は解釈性について議論がない
  • 次に読むべき論文は？
    • Robinson, A.: Sketch2Code: generating a website from a paper mockup. arXiv preprintarXiv: 1905.13750 (2019)
      • GUI -> codeの先行研究
    • Chen, C., Su, T., Meng, G., Xing, Z., Liu, Y.: From UI design image to GUI skeleton: a neural machine translator to bootstrap mobile GUI implementation. In: Proceedings of the 40th International Conference on Software Engineering, pp. 665–676. ACM (2018)
  • その他