e4exp
commented
4 years ago Visual Compiler: Towards Translating Digital UI Design Draft to Front-End Code Automatically
- paper
- github
- データセット
- project
まとめ
- どんなもの？
- 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)
- GUI -> codeの先行研究．機械翻訳とCVを組み合わせてUIデザインをGUIスケルトンにする
- Robinson, A.: Sketch2Code: generating a website from a paper mockup. arXiv preprintarXiv: 1905.13750 (2019)
- その他
フロントエンドエンジニアの仕事の一つに、UI（ユーザーインターフェース）設計案をプログラム互換性のあるアレンジに変換することがあります。 顧客の要求を満たすために、エンジニアは通常、画面サイズの幅が広いなど、さまざまな端末デバイスに対応するためのさまざまな要素を考慮する必要があります。 このような作業は、通常、面倒な作業が多く、その多くは機械でできる繰り返しの作業である。 本論文では、UIデザイン案とフロントエンドコードのギャップを埋めるツールとして、Visual Compilerを提案する。 本研究では、エキスパートヒューリスティックとコンピュータビジョンの技術を組み合わせ、生成されたコードの可読性とユーザビリティを向上させ、生成プロセスをよりインテリジェントなものにする。 実際には、ユーザはUI設計者から得たデザイン案を入力するだけで、我々の手法はクリーンで整然としたフロントエンドコードを生成することができます。 既存のアプローチと比較して、Visual Compiler は、オリジナルのドラフトと同じ外観を維持しながら、出力ファイルのサイズを約 80% 削減することができます。 このツールが、UI 設計者とフロントエンド開発者のコラボレーションの効率化に役立つことを期待しています。