[論文レビュー] Sketch2code: Generating a website from a paper mockup

Alex Robinson|arXiv (Cornell University)|May 9, 2019

Video Analysis and Summarization参考文献 90被引用数 5

ひとこと要約

本論文では、2つのアプローチ（古典的コンピュータビジョンとディープセマンティックセグメンテーション）を用いて、手書きのワイヤーフレームから自動的にHTMLウェブサイトを生成するシステム「Sketch2code」を提示する。ディープラーニング手法が古典的手法を上回り、ワイヤーフレームからコードへの変換におけるディープラーニングの可能性を示した。研究者らは、今後の研究を促進するため、データセットと評価フレームワークを公開した。

ABSTRACT

An early stage of developing user-facing applications is creating a wireframe to layout the interface. Once a wireframe has been created it is given to a developer to implement in code. Developing boiler plate user interface code is time consuming work but still requires an experienced developer. In this dissertation we present two approaches which automates this process, one using classical computer vision techniques, and another using a novel application of deep semantic segmentation networks. We release a dataset of websites which can be used to train and evaluate these approaches. Further, we have designed a novel evaluation framework which allows empirical evaluation by creating synthetic sketches. Our evaluation illustrates that our deep learning approach outperforms our classical computer vision approach and we conclude that deep learning is the most promising direction for future research.

研究の動機と目的

• 紙に描かれたスケッチから動作するウェブサイトに変換する自動化されたワイヤーフレームからコードへの変換のギャップを埋めるためのシステムを開発すること。
• 古典的コンピュータビジョン技術とディープラーニングベースのセマンティックセグメンテーションを用いたワイヤーフレーム要素検出およびコード生成を比較すること。
• 今後のデザインからコードへの自動化分野の研究を支援するため、ワイヤーフレームと対応するHTMLコードの公開可能なデータセットを作成すること。
• 合成スケッチを用いて、複数のメトリクスにわたる性能を客観的に評価できる再現可能な実証的評価フレームワークを設計すること。
• 非開発者も、ボイラープレートGUIコードの自動生成により、独自にウェブサイトのプロトタイプ作成が可能になるようにすること。

提案手法

• 古典的コンピュータビジョン（エッジ検出、色領域分離、テキスト検出）を用いたアプローチと、合成スケッチで微調整されたディープセマンティックセグメンテーションネットワークを用いた2つのアプローチを組み合わせたフレームワークを開発した。
• 10,000件のウェブサイトワイヤーフレームとそれに対応するHTMLコードから成るデータセットを構築し、一貫性を保つために制御されたスケッチ手順を用いてスケッチを生成した。
• カメラで撮影した画像を、両モデルの入力に適したクリアで正規化されたスケッチに変換するための前処理を実施した。
• 一般化性能を向上させるために、合成ワイヤーフレームスケッチで訓練されたU-Netスタイルのディープラーニングアーキテクチャをセマンティックセグメンテーションに採用した。
• レイアウトの正規化、アラインメントエラーの是正、検出された要素をセマンティックHTMLタグにマッピングするためのポストプロセッシングを実装した。
• 生成されたウェブサイトをリアルタイムでデプロイし、ホスティングされたウェブデプロイによりライブコラボレーションを可能にした。

実験結果

リサーチクエスチョン

• RQ1 RQ1: 古典的コンピュータビジョンパイプラインは、手書きスケッチからテキスト、ボタン、入力フィールドなどのワイヤーフレーム要素を効果的に検出・分類できるか？
• RQ2 RQ2: ディープラーニングベースのセマンティックセグメンテーションアプローチは、古典的コンピュータビジョン手法に比べ、ワイヤーフレーム要素の検出・分類および正しいHTML構造の生成において優れているか？
• RQ3 RQ3: ユーザーは、各手法で生成されたウェブサイトの視覚的忠実度と構造的正確性の観点から、品質と使いやすさをどのように評価するか？
• RQ4 RQ4: 合成スケッチ作成手順により、ワイヤーフレームからコードへの変換システムの信頼性ある繰り返し可能な評価が可能になるか？

主な発見

• ディープラーニングベースのセマンティックセグメンテーションアプローチは、古典的コンピュータビジョン手法に比べ、要素検出および分類の正確性で顕著に優れていた。
• マイクロパフォーマンス評価では、ディープラーニングモデルがすべての要素タイプでF1スコアが高く、特に入力フィールドやボタンのような複雑なコンポーネントで顕著だった。
• 視覚的比較タスクでは、ユーザーがディープラーニングモデルの出力を好んでおり、レイアウトの整合性が高く、意図したデザインをより正確に再現していると評価した。
• 構造的比較では、ディープラーニングモデルがレイアウトエラーやネスティングエラーが少ないより意味的に正しいHTMLを生成した。
• ユーザースタディーでは、ディープラーニングで生成されたウェブサイトが、古典的手法よりも使いやすく、元のスケッチの意図に近いと評価された。
• 評価では優れたパフォーマンスを示したが、両システムとも生産環境で十分な信頼性に達しておらず、耐障害性と一般化性能の向上の余地があることが示された。