[論文レビュー] Sketch2Code: Transformation of Sketches to UI in Real-time Using Deep Neural Network

Vanita Jain, Piyush Agrawal+3 more|arXiv (Cornell University)|Oct 20, 2019

Interactive and Immersive Displays被引用数 13

ひとこと要約

Sketch2Code は、手書きのUIスケッチをリアルタイムでプラットフォーム非依存のUI表現オブジェクトに変換する深層学習モデルを提案する（平均推論時間：129 ms）。149枚のスケッチにまたがる2001個のUI要素から構成される独自のデータセットを用いて、YOLOベースのネットワークを微調整し、UIコンポーネントを検出。重複する要素は解消され、DOMに類似したJSONオブジェクトが生成され、プラットフォーム固有のコードに変換可能。再トレーニングを必要とせず、効率的かつマルチプラットフォーム向けのUIプロトタイピングを実現する。

ABSTRACT

User Interface (UI) prototyping is a necessary step in the early stages of application development. Transforming sketches of a Graphical User Interface (UI) into a coded UI application is an uninspired but time-consuming task performed by a UI designer. An automated system that can replace human efforts for straightforward implementation of UI designs will greatly speed up this procedure. The works that propose such a system primarily focus on using UI wireframes as input rather than hand-drawn sketches. In this paper, we put forward a novel approach wherein we employ a Deep Neural Network that is trained on our custom database of such sketches to detect UI elements in the input sketch. Detection of objects in sketches is a peculiar visual recognition task that requires a specific solution that our deep neural network model attempts to provide. The output from the network is a platform-independent UI representation object. The UI representation object is a dictionary of key-value pairs to represent the UI elements recognized along with their properties. This is further consumed by our UI parser which creates code for different platforms. The intrinsic platform-independence allows the model to create a UI prototype for multiple platforms with single training. This two-step approach without the need for two trained models improves over other methods giving time-efficient results (average time: 129 ms) with good accuracy.

研究の動機と目的

• 手書きのUIスケッチを機能的なコードプロトタイプに変換する作業を自動化すること。
• 制約のない自由なスケッチにおいてUI要素を認識できる深層ニューラルネットワークを開発すること。これは、挑戦的な視覚認識タスクである。
• 複数のプラットフォームに対して再トレーニングを必要とせず、迅速なコード生成を可能にするプラットフォーム非依存のUI表現オブジェクトを生成すること。
• ワイヤーフレームや2段階検出パイプラインに依存する従来の手法よりも、効率性と正確性を向上させること。
• 照明条件の変動やスケッチの品質（影や過剰な彩度）に対するモデルの頑健性を評価すること。

提案手法

• トレーニング用に、149枚のスケッチに2001個のラベル付きUI要素（例：ボタン、テキストフィールド）を含む独自のデータセットを構築した。
• 手書きスケッチ内のUIコンポーネントを検出できるように、YOLOベースの1ショットオブジェクト検出モデルを微調整し、入力画像を416×416にリサイズした。
• 空間的に重複するUI要素を解消するために、より大きなまたはより顕著なコンポーネントを優先するヒューリスティクスを適用した。
• モデルは、要素の種別、位置、プロパティをエンコードするキー値ペアの辞書として構造化されたJSON形式のプラットフォーム非依存のUI表現オブジェクトを出力する。
• ReactベースのUIパーサーがJSON表現を受けて、プラットフォーム固有のUIコードを生成し、マルチプラットフォーム配備を可能にする。
• 推論速度を向上させるために、NVIDIA GeForce GTX 1060 GPU と cuDNN を使用した。画像読み込み時間を除いた純粋なモデル推論速度を測定した。

実験結果

リサーチクエスチョン

• RQ1 照明条件、スケッチスタイル、背景の違いがある中でも、深層ニューラルネットワークが自由なスケッチにおけるUI要素を正確に検出できるか？
• RQ2 低照度、影、過剰な彩度といった厳しい視覚的条件下で、モデルの性能はどの程度か？
• RQ3 1つのトレーニング済みモデルが、複数のプラットフォーム向けに機能するプラットフォーム非依存のUI表現を生成できるか？
• RQ4 モデルの推論速度はどの程度で、インタラクティブプロトタイピングに適したリアルタイム性能を達成できるか？
• RQ5 トレーニングデータ量の増加に伴い、モデルの性能（特に正確性と頑健性）はどのように向上するか？

主な発見

• モデルは1枚あたり平均129 msの推論時間を達成し、インタラクティブUIプロトタイピングに適したリアルタイム性能を示した。
• 低照度や影のある条件下では、背景と前面の要素の区別が難しくなり、推論時間が延長されるため性能が低下した。
• 過剰な彩度や反射性の高い背景は、背景が一貫性のない場合やノイズが多い場合に、正確な予測を妨げる。
• クリアな白い背景と最適な照明条件下では、モデルは高い正確性と短い推論時間を達成した。
• 149枚の画像と2001個のラベル付きコンポonentsで構成される小さなデータセットでも、モデルは優れた一般化性能を示した。これは、より大規模かつ多様なトレーニングデータを用いることでさらなる改善が期待できる可能性を示唆している。
• 検出 → UI表現生成 → パースングの2段階パイプラインにより、プラットフォーム固有のモデルを別々に用意せず、プラットフォーム非依存性を実現した。