Learning to generate HTML code from images with no supervisory data

[e4exp]

• https://www.researchgate.net/publication/349763748_Learning_to_generate_HTML_code_from_images_with_no_supervisory_data
• 2018 NAMPI @ ICML 2018

[e4exp]

1. はじめに

グラフィカルなデザインをHTMLコードに変換する作業は、Webフロントエンド開発の典型的なタスクであり、熟練したプログラマーがかなりの時間を費やす必要があります。 一方で、この時間は、機械の知能がまだ人間の知能に及ばない、より創造的な問題解決のタスクに充てることができます。 デザインモックアップからのHTMLコード生成を自動化することは、この問題を解決する手段となります。 最近では、プログラムの自動合成に機械学習技術、特にディープニューラルネットワークを利用する試みがいくつか行われています。 その中でも、構造化マークアップ言語に特化した作品もあります（Deng et al.、2016）。 しかし、満足のいくコード生成器に到達するまでには、まだ長い道のりがあります。 ここでは、強化学習技術を用いて、与えられたウェブページの画像からHTMLコードを生成する新しいアプローチを紹介する。 最近の学習ベースのプログラム合成法の多くは、プログラマーが生成したプログラムを基底情報として提供する必要がある。 この教師ありきのパラダイムに従うと、モデルはせいぜい学習セットに含まれるプログラムに似たプログラムを生成するように学習することになるが、プログラミングの本質的な柔軟性を考慮すると、必ずしも最も効率的なものであるとは限らない。 2人のプログラマーが同じ問題を解決するためにプログラムを書いた場合、2つのプログラムのソースコードが同じである可能性は非常に低いです。 プログラムは、基本的なアルゴリズム、構造、適用される操作、変数名などの点で異なるかもしれません。 我々の提案するモデルでは、人間が提供するグランドトゥルースの代わりに、報酬信号によって監督が行われます。 エージェントは、報酬の設計に基づいて、可能性のあるすべてのプログラムを検索することで、望ましい特性のプログラムを生成することを学習する。

監督をバイパスすることに加えて、提案されたRLベースのアプローチは、トレーニングモードとテストモードの間の不整合が見過ごされる典型的な監督付きコード生成手法の主な欠点を解決する(Bahdanau et al., 2016)。 コード生成タスクをシーケンス生成のインスタンスとして考えると、これまでに生成されたすべてのトークンを条件として、トークンを1つずつ生成するようにRNNを学習する方法が一般的である。 これらのモデルは、学習に最尤フレームワークを適用することで、グランドトゥルースに現れた過去のすべてのトークンが与えられたときに、正しいトークンの条件付き確率を学習します。 しかし、テストランでは、エージェントは自分の過去の予測にしかアクセスできず、グランドトゥルースにはアクセスできません。 トレーニングモデルとテストモデルの間のこのような不整合は、ソースコードのような長いシーケンスの処理では、エラーの複合化が起こりやすくなるため、より問題となります。 RLのフレームワークでは、不正確な条件付き確率によってトークンが生成される可能性を最大化する代わりに、エージェントは、報酬信号として与えられた望ましい評価指標を直接最大化するように訓練されます。

我々の課題では、エージェントは、ゴールのウェブページに最もマッチするようにレンダリングされるコードを生成するように学習されます。 我々のモデルでは、生成者は、ウェブページの画像を入力として受け取り、ブラウザでレンダリングされたときに最も似た画像、理想的には目標画像と完全に一致する画像を生成するHTMLコードを生成するエージェントです。 強化学習のアプローチを採用しており，エージェントは各時間ステップで1つのトークンを生成するように学習します． 問題を単純化するために，簡単なHTMLページを生成するDSLを設計し，エージェントはDSLのトークンを生成するように学習します． 報酬信号は、生成されたコードをブラウザで実行し、レンダリングされた画像をゴール画像と比較することで計算されます。 この方法では、報酬を計算するために必要なのはブラウザだけであり、ソースコードの学習サンプルのような他の監視データに依存しないプロセス全体を実現しています。 トレーニングの間、エージェントは現在のポリシーに基づいてゴールのウェブページのコードを書き、書かれたコードが望ましい結果をもたらすかどうかを報酬で確認し、それに応じてポリシーを修正する。 テスト段階では，訓練されたエージェントは，訓練されたポリシーネットワークを用いて，見たことのない画像に対するHTMLコードを生成することができる．

しかし，提案手法の特徴は，エージェントがテスト画像に特化して適応することで，結果を改善できる可能性があることである． これは、提案された報酬信号がテスト中でもブラウザにアクセスできれば利用できるため、より多くの検索を行うことで可能になります。 報酬を手にしたエージェントは、完全に一致するようになるまで、テスト時の学習プロセスを続けることができます。

[e4exp]

2. モデル・アーキテクチャ

ウェブページのイメージImが与えられたとき，それに対応するHTMLコード（トー クンのシーケンス：t1, t2, ..., tn）を生成することが目的である． このようにして，エージェントがとりうるすべてのアクションのセットは，プログラミング言語でとりうるすべてのトークンのセットである． 時間ステップtにおける状態は，ゴール画像Imと，これまでに予測されたコード（t1, t2, ..., tn）から構成される．) しかし、コードを直接使用するのではなく、まず、部分的に生成されたコードをブラウザでレンダリングし、レンダリングされたウェブページのスクリーンショットを撮影し、ゴール画像Imと並んでレンダリングされた画像Irを現在の状態として使用する。 これは、エージェントがレンダリングされた画像とゴール画像を比較しやすくするためです。

モデルの全体的な構造を図1に示します。 このモデルには，「ポリシー・ネットワーク」と「バリュー・ネットワーク」が，単位となるベース・ネットワークの上に構築されており，現在の状態をエンコードして，次のネットワークに送り込む． ベース・ネットワークには2つのコンボリューション・ニューラル・ネットワーク（CNN）が含まれ、ゴールとレンダリング画像の視覚情報をエンコードします。 ゴール画像とレンダリング画像について計算された特徴ベクトルは連結され，次の多層フィードフォワード・ニューラルネットワークに入力されます． モデルのパラメータを学習するために，エージェントは各時間ステップで報酬値を受け取り，そのステップまでのレンダリング画像とゴール画像を比較します． 報酬信号は、ゴール画像とレンダリング画像の2つの特徴ベクトル間の負の二乗L2距離として計算され、CNNネットワークを使ったベースネットワークで計算されます。 これらの2つのネットワークは、モンテカルロツリーサーチ（MCTS）アルゴリズム（Silver et al.2016）を通じて一緒に学習され、現在の状態を与えられた各時間ステップで次のトークンを生成する最適なポリシーを見つける。 MCTSは、決定木を構築し、その木の中で最適な行動を検索する確率的なアプローチです。 CNNレイヤーには事前に学習されたネットワークを使用しているため、その重みは学習パラメータに含まれていません。 ネットワークのパラメータを更新する際には、様々な画像に対してMCTSを実行した際のデータが十分にあることに留意する必要があります。 データをより効率的に利用するために、学習サンプルをより感覚的に選択することを提案します。 ネットワークの重みを更新する際、最も適切なデータは成功したエピソードで収集されたものですが、一方で、エピソードが間違ったHTMLコードの生成で終わってしまうことがよくあります。 そこで、最新のデータを使用するのではなく、リプレイバッファを少し変更して使用し、これまでに観測された成功したエピソードのデータのみを保存します。 これにより、ポリシーネットワークが失敗した実験に惑わされないようにしています。 このバッファは継続的に更新され、更新データの半分を形成します。 残りの半分は、最近得られたデータで埋められます。 これにより、学習速度が大幅に向上しました。

[e4exp]

3. 実験

簡単なHTMLページを生成するために設計されたDSLに基づいて構築された合成データベースについて、すでにいくつかの実験を行っている。 DSLには18のトークンがあり、HTMLコードの長さは最大で40トークンにもなります。 Webページの画像とそれに対応するコードの例を図2に示します。 この作業は現在進行中で、最終的な結果は今後の出版物で報告される予定です。