ディープラーニングを使用してフロントエンドデザインモデルをコードに自動的に変換する方法は?
|
現在、フロントエンド開発の自動化に対する最大の障壁はコンピューティング能力です。ただし、現在のディープラーニング アルゴリズムと人工トレーニング データを使用して、人工フロントエンドの自動化を検討することはできます。 この記事では、デザインプロトタイプ画像に基づいて基本的な HTML および CSS コードを記述する方法をニューラル ネットワークに教えます。プロセスの概要は次のとおりです。 1) ニューラルネットワークの設計図 2) ニューラルネットワークが画像をHTMLコードに変換する 3) レンダリング出力 ニューラル ネットワークを 3 回の反復で構築します。 最初の反復では、パターン内の可動部分を理解する、非常に基本的なバージョンが完成しました。 2 回目の反復では、すべての手順を自動化し、ニューラル ネットワーク レイヤーを説明することに重点を置いた HTML コードが生成されます。最後の反復によりブートストラップ バージョンが生成され、LSTM レイヤーを一般化および探索するために使用できるモデルが作成されます。 すべてのコードは Github と FloydHub で入手できます。 これらのモデルは、Beltramelli の pix2code 論文と Jason Brownlee の画像の自然言語記述に関するチュートリアルに基づいて構築されており、コードは Python と Keras (Tensorflow に基づくフレームワーク) で記述されています。 ディープラーニングを初めて学ぶ場合は、まず Python、バックプロパゲーション、畳み込みニューラル ネットワークについて一般的な理解を深めることをお勧めします。 私たちの目標を簡単に振り返ってみましょう。スクリーンショットに対応する HTML/CSS コードを生成するニューラル ネットワークを構築したいと考えています。 ニューラル ネットワークをトレーニングする際に、複数のスクリーンショットと対応する HTML コードを入力できます。 学習プロセス中に、一致するすべての HTML タグを 1 つずつ予測します。次のラベルを予測するときに、その時点でのスクリーンショットと一致するすべてのラベルを受け取ります。 この Google スプレッドシートには、トレーニング データの簡単なサンプルが含まれています。 単語ごとに予測できるモデルを作成することは、現在最も一般的なアプローチであり、このチュートリアルでも使用しますが、他のアプローチもあります。 それぞれの予測に対して、ニューラル ネットワークに同じスクリーンショットが提供されることに注意してください。つまり、20 個の単語を予測したい場合は、同じパターンを 20 回受信することになります。この段階では、ニューラル ネットワークがどのように動作するかについては気にせず、ニューラル ネットワークの入力と出力に焦点を当てます。 以前のタグを見てみましょう。 「私はコーディングできます」という文を予測するようにネットワークをトレーニングするとします。 「私」を受け取ると、「できる」と予測します。次回は「I can」を受信して「code」を予測します。毎回、前の単語をすべて受信し、次の単語を予測するだけで済みます。 あ ニューラル ネットワークはデータからさまざまな特徴を作成し、それを使用して入力データと出力データを接続して、各スクリーンショットに含まれるコンテンツと HTML 構文を理解するモデルを作成します。これにより、次のタグを予測するために必要な知識が得られます。 トレーニング済みのモデルを実際の生活で使用する場合、状況はモデルをトレーニングするときと同様になります。テキストは毎回同じスクリーンショットを使用して 1 つずつ生成されます。違いは、正しい HTML タグを直接受信するのではなく、これまでに生成したタグを受信して次のタグを予測する点です。予測プロセス全体は「開始ラベル」から始まり、「終了ラベル」が予測されるか、最大限度に達すると終了します。 まずは Hello World のバージョンをビルドしてみましょう。 「Hello World!」と書かれた Web ページのスクリーンショットをニューラル ネットワークに提供し、対応するラベルを生成するようにトレーニングします。 まず、ニューラル ネットワークはパターンをピクセル値のリストにマッピングします。各ピクセルには RGB の 3 つのチャネルがあり、各チャネルの値は 0 ～ 255 の範囲です。 ニューラル ネットワークにこれらのトークンを理解させるために、ワンホット エンコーディングを使用しました。したがって、「私はコーディングできます」という文は次のようにマッピングできます。 上記の画像には開始タグと終了タグが含まれています。これらのラベルは、ニューラル ネットワークの予測の開始と終了を制御します。 入力データには、最初の単語から始めて各単語を段階的に追加していくさまざまな文を使用します。出力データは常に 1 つの単語です。 文章は単語と同じ論理に従います。入力の長さも同じですが、ここでは単語数ではなく文の最大長を制限します。文が最大長より短い場合は、すべてゼロで構成されるヌル単語で埋められます。 ご覧のとおり、単語は右から左に印刷されます。この方法では、各トレーニングで各単語の位置が強制的に変更されるため、モデルは各単語の位置ではなく単語の順序を記憶できます。 下の図には 4 つの予測があり、各行は 1 つの予測を表します。画像は左から、赤、緑、青の RGB チャネルと、前述の単語で表されます。括弧の外側には予測が次々と表示され、最後に赤い四角が表示されます。 Hello World バージョンでは、「start」、「Hello World!」、および「end」の 3 つのトークンを使用しました。トークンは文字、単語、文など何でも構いません。文字トークンを使用すると必要な語彙が少なくなりますが、ニューラル ネットワークが制限されます。単語トークンは最もパフォーマンスが良くなる傾向があります。 ここで予測してみましょう:
Floydhub はディープラーニングトレーニングプラットフォームです。私がこのプラットフォームについて知ったのは、ディープラーニングを学び始めたときでした。それ以来、私はディープラーニング実験のトレーニングと管理にこれを使用しています。 10 分以内にインストールして最初のモデルを実行できます。これは、クラウド GPU 上でモデルをトレーニングするための最適なオプションです。 Floydhub を初めて使用する場合は、2 分間のインストール チュートリアルと私の 5 分間の概要チュートリアルを確認することをお勧めします。 リポジトリをクローンします: ログインして、FloydHub コマンドライン ツールを起動します。 FloydHub のクラウド GPU マシンで Jupyter ノートブックを実行します。 すべてのノートブックは FloydHub ディレクトリで準備されています。実行したら、最初のノートブックは floydhub/Helloworld/helloworld.ipynb にあります。 より詳しい手順とラベル付けの手順については、以前の投稿を参照してください。 このバージョンでは、Hello world の多くのステップを自動化します。この章では、スケーラブルな実装を作成する方法とニューラル ネットワークの動的な部分に焦点を当てます。 このバージョンでは、ランダムな Web サイトに基づいて HTML を予測することはまだできませんが、問題の動的な部分を調査するには依然として最適です。 次の図は、フレームワーク コンポーネントが展開された後の状態を示しています。 主な部分はエンコーダーとデコーダーの 2 つです。エンコーダーは、画像機能とラベル機能を作成するために使用されます。特徴は、パターンとラベルを接続するためにネットワークによって作成される基本的な構成要素です。エンコードの最終段階では、画像の特徴を前のラベルの単語に関連付けます。 次に、デコーダーは画像とラベルの特徴を組み合わせて次のラベルの特徴を作成し、この特徴を使用して完全に接続されたニューラル ネットワークを通じて次のラベルを予測します。 単語ごとにスクリーンショットを挿入する必要があるため、ネットワークをトレーニングするときにボトルネックになります (例)。したがって、画像を直接使用するのではなく、ラベルの生成に必要な情報を抽出します。 次に、ImageNet で事前トレーニングされた畳み込みニューラル ネットワークを使用して、抽出された情報を画像の特徴にエンコードします。 最終的な分類の前にレイヤーから特徴を抽出します。 最終的に、特徴マップとして 1536 枚の 8×8 ピクセル画像が得られました。これらの特徴は人間には理解しにくいものですが、ニューラル ネットワークはそこから物体や要素の位置を抽出できます。 Hello World バージョンでは、ラベルを表すためにワンホット エンコーディングを使用しました。このバージョンでは、入力に単語埋め込みを使用し、出力を表すために引き続きワンホットエンコーディングを使用します。 各文の構成方法は同じまま、トークンのマッピング方法を変更します。ワンホットエンコーディングは、各単語を独立した単位として扱います。しかし、ここでは、入力データ内の各単語を数値のリストに変換します。これらの値は、異なるラベル間の関係を表します。 単語ベクトルの次元は 8 ですが、語彙のサイズに応じて 50 から 500 の間で変化することがよくあります。 各単語の 8 つの数字は、異なる単語間の関係をマッピングするために使用される一般的なニューラル ネットワークの重みに似ています。 ニューラル ネットワークはこれらの機能を使用して、入力データと出力データを接続できます。今のところ、それが何であるかについては心配しないでください。次のセクションでこれについてさらに詳しく説明します。 単語ベクトルを LSTM に入力すると、一連のラベル機能が返されます。これらのラベル付けされた特徴は、TimeDistributed 高密度レイヤーに送られます。 単語ベクトルを処理中に、別のプロセスが実行されます。まず、画像の特徴をフラット化し、すべての値を数値のリストに変換します。次に、このレイヤーの上に高密度レイヤーを適用して高レベルの特徴を抽出し、これらの画像の特徴をラベルの特徴に連結します。 少し理解しにくいかもしれないので、プロセスを分解してみましょう。 まず、単語ベクトルを LSTM レイヤーに送信して実行します。下の図に示すように、すべての文は最大 3 つのトークンの長さにパディングされます。 信号を混合して高レベルのパターンを見つけるために、ラベル機能に適用された TimeDistributed 高密度レイヤーを使用します。 TimeDistributed Dense レイヤーは通常の Dense レイヤーと同じですが、複数の入力と出力があります。 その間に画像を準備します。すべてのミニ画像の特徴を照合し、リストのセットに変換しました。情報は変わっていません。組織だけが変わりました。 前述したように、信号を混合してより高レベルの概念を抽出するために、高密度レイヤーを適用します。 処理する必要があるのは単一の入力値だけなので、通常の Dense レイヤーを使用できます。その後、画像の特徴をラベルの特徴に連結するために、画像の特徴をコピーしました。 この場合、ラベル機能は 3 つあります。したがって、画像特徴とラベル特徴の数は同じになります。 すべての文はパディングされ、3 つのラベル機能が作成されます。画像特徴はすでに前処理されているので、各ラベル特徴に画像特徴を追加できます。 各画像機能を対応するラベル機能に追加すると、最終的に 3 セットの画像、ラベル、機能の組み合わせが得られます。その後、それらをデコーダーへの入力として使用します。 ここでは、画像とラベルの特徴を組み合わせて次のラベルを予測します。 以下の例では、3 つの画像ラベル機能を組み合わせて次のラベル機能を出力します。 ここでは、LSTM レイヤーのシーケンスが false に設定されていることに注意してください。したがって、LSTM レイヤーは入力シーケンスの長さではなく、予測された特徴を返します。私たちの場合、これは次のラベルの特徴となり、最終的な予測に必要な情報が含まれます。 最終予測 密なレイヤーは、従来のフィードフォワード ニューラル ネットワークと同様に、次のラベル機能の 512 個の値を 4 つの最終予測と連結します。私たちの語彙に「start」、「hello」、「world」、「end」という 4 つの単語があるとします。 語彙予測は[0.1、0.1、0.1、0.7]になります。密な層のソフトマックス活性化関数は 0 から 1 までの確率を分配し、すべての予測の合計は 1 になります。この場合、4 番目の単語が次のタグになると予測されます。 次に、ワンホットエンコーディング[0, 0, 0, 1]を「end」などのマッピング値に変換します。 参考までに元のウェブサイトはこちらです。 私にとって、LSTM は CNN よりも理解するのが難しいです。 LSTM をすべて展開すると、理解しやすくなりました。 Fast.ai の RNN に関するビデオは非常に役立ちます。また、機能の原理を理解しようとする前に、入力機能と出力機能自体に注目してください。膨大な語彙を縮小するよりも、ゼロから語彙を構築する方がはるかに簡単です。これには、フォント、div タグのサイズ、16 進カラー値、変数名、通常の単語が含まれます。ほとんどのライブラリは、コードではなくテキスト ファイルを解析するために作成されます。ドキュメント内ではすべてがスペースで区切られていますが、コードではカスタム解析方法を使用する必要があります。 ImageNet でトレーニングされたモデルを使用して特徴を抽出できます。 ImageNet には Web 画像がほとんどないため、これは直感に反するように思えるかもしれません。ただし、そうすると、最初からトレーニングされた pix2code モデルと比較して損失が 30% 増加します。もちろん、Web スクリーンショットに基づいて事前トレーニングされた Inception-resnet タイプのモデルを使用することにも興味があります。 最終バージョンでは、pix2code 論文から生成された Bootstrap ウェブサイトのデータセットを使用します。 Twitter の Bootstrap を使用すると、HTML と CSS を組み合わせて語彙のサイズを縮小できます。 これまで見たことのないスクリーンショットのタグを生成できることを確認するとともに、スクリーンショットとタグの認識を高める方法についてもさらに詳しく調べていきます。 Bootstrap タグのトレーニングの代わりに、17 個の簡略化されたトークンを使用し、それらのトークンを HTML と CSS に変換します。このデータセットは、1500 枚のテスト スクリーンショットと 250 枚の検証画像で構成されています。各スクリーンショットには平均 65 個のトークンが含まれており、合計 96,925 個のトレーニング サンプルが生成されます。 pix2code 論文のモデルにいくつかの調整を加えることで、このモデルは 97% の精度で Web ページのコンポーネントを予測できます (BLEU 4-ngram 貪欲検索、これについては後で詳しく説明します)。 エンドツーエンドのアプローチ 画像キャプション モデルでは、事前トレーニング済みモデルから特徴を抽出することがうまく機能します。しかし、いくつかの実験を行った結果、pix2code のエンドツーエンドのアプローチの方が効果的であることがわかりました。事前トレーニング済みモデルは Web データでトレーニングされておらず、分類にのみ使用されます。 このモデルでは、事前にトレーニングされた画像の特徴を軽量の畳み込みニューラル ネットワークに置き換えます。しかし、情報密度を高めるために最大プーリングを使用する代わりに、要素の位置と色を維持するためにストライドを増やします。 ここで使用できるコア モデルは、畳み込みニューラル ネットワーク (CNN) と再帰型ニューラル ネットワーク (RNN) の 2 つです。最も一般的な RNN は Long Short-Term Memory (LSTM) ネットワークであり、これについてお話します。 これまでの記事ですでに多くの優れた CNN チュートリアルを紹介しているので、ここでは LSTM に焦点を当てます。 LSTM の難しさの 1 つは、時間ステップの概念です。元のニューラル ネットワークには 2 つの時間ステップがあると考えることができます。 「hello」と言えば、「world」と予測されます。ただし、より多くの時間ステップを予測することは困難です。以下の例では、入力には各単語に 1 つずつ、合計 4 つの時間ステップがあります。 LSTM は、時間ステップを含む入力に適しており、順次情報に適したニューラル ネットワークです。モデルを拡大すると、下の画像のようなものが表示されます。下方への各再帰ステップでは、重みを同じに保つ必要があります。古い出力の重みセットと新しい出力の重みセットを設定できます。 重み付けされた入力と出力は、対応する時間ステップの出力である活性化関数を使用して接続されます。これらの重みを再利用すると、入力から情報が抽出され、シーケンスに関する知識が構築されます。 以下は、LSTM の各タイムステップの簡略化されたバージョンです。 このロジックを理解するには、Andrew Trask による RNN をゼロから自分で構築する素晴らしいチュートリアルに従うことをお勧めします。 各 LSTM レイヤーのユニット数によって、メモリ容量と各出力機能のサイズが決まります。繰り返しになりますが、署名はレイヤー間で情報を転送するために使用される長い数字の文字列です。 LSTM レイヤーの各ユニットは、文法の異なる側面を追跡することを学習します。以下は、ユニット トレースの元の div 情報を視覚化したものです。これは、Bootstrap モデルのトレーニングに使用した簡略化されたラベルです。 各 LSTM ユニットはセルの状態を維持します。セルの状態をメモリと考え、重みと活性化関数をさまざまな方法で状態を変更するために使用します。これにより、LSTM レイヤーは各入力に対してどの情報を保持し、破棄するかを微調整できるようになります。 LSTM レイヤーは、各入力の出力機能を渡すだけでなく、各セルに値があるセル状態も渡します。 LSTM 内のコンポーネントがどのように相互作用するかを理解するには、Colah のチュートリアル、Jayasiri の Numpy 実装、および Karphay の講義と記事をお勧めします。 正確さを測定する公平な方法を見つけるのは困難です。単語ごとに比較することを選択した場合、予測内の 1 つの単語が同期していないと、精度がゼロになる可能性があります。予測に一致する単語を削除しても、最終的な精度は 99% のままになる可能性があります。 機械翻訳および画像キャプション モデルのベスト プラクティスである BLEU 評価方法を使用しました。 1〜4 語の順序に従って文章を 4 つのグラムに分割します。以下の予測では、「cat」は「code」であるはずです。 最終スコアを取得するには、取得した数値に 25% を掛ける必要があります。(4/5)* 0.25 + (2/4)* 0.25 + (1/3)* 0.25 + (0/2)* 0.25 = 0.2 + 0.125 + 0.083 + 0 = 0.408 です。次に、その合計に文の長さのペナルティを掛けます。この例の文は正しい長さなので、合計がそのまま最終結果になります。 グラム数を増やすことで難易度を上げることができます。 4 グラム モデルは、人間による翻訳と最も一貫性のあるモデルです。これをより深く理解するには、以下のコードを使用していくつかの例を実行し、Wiki ページを読むことをお勧めします。 サンプル出力へのリンク:
https://emilwallner.github.io/bootstrap/pred_1/
https://emilwallner.github.io/bootstrap/real_2/
https://emilwallner.github.io/bootstrap/pred_3/
https://emilwallner.github.io/bootstrap/pred_4/
https://emilwallner.github.io/bootstrap/pred_5/
フロントエンド開発はディープラーニングを適用するのに最適な分野です。データの生成が容易であり、現在のディープラーニング アルゴリズムでロジックの大部分をマッピングできるためです。 最も興味深い分野の 1 つは、LSTM へのアテンション メカニズムの適用です。これにより、精度が向上するだけでなく、ラベルを生成するときに CNN がどこに焦点を当てているかを視覚的に確認できるようになります。 アテンション メカニズムは、マークアップ、スタイルシート、スクリプト、およびバックエンド間の通信にも重要です。アテンション レイヤーは変数を追跡し、ニューラル ネットワークがプログラミング言語間で通信できるようにします。 しかし、近い将来、最大の問題は、フォント、色、テキスト、アニメーションを時間の経過とともに追加できるように、データを生成するスケーラブルな方法を見つけることです。 これまでのところ、ほとんどの進捗はスケッチをテンプレート アプリケーションに変換するプロセスで発生しています。 2 年以内に、紙にアプリケーションを描き、対応するフロントエンド コードを 1 秒以内に作成できるようになります。 Airbnb のデザインチームと Uizard は、2 つの実用的なプロトタイプを構築しました。
オリジナルリンク: https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/ |
<<: チャットボット: ビジネスを成長させる 8 つの方法
>>: AI as a Service: AIとクラウドコンピューティングが出会うとき
推薦する
AIと5Gの相乗効果：デジタル時代の潜在能力を最大限に引き出す
進化するテクノロジーの世界では、人工知能 (AI) と第 5 世代無線ネットワーク (5G) という...
自然言語処理のためのディープラーニングの概要: 基本概念から最先端の研究まで
自然言語処理入門導入自然言語処理 (NLP) は、言語を処理および理解することで特定のタスクを実行で...
2020年のトレンドの方向性: 産業用インターネットの人工知能アプリケーションが基礎となる
年末が近づくにつれ、多くの研究機関が2020年のトレンド予測を発表しています。これらの予測の多くは、...
マスク氏の元従業員が「宇宙工場」を建設し、スペースXのロケットで打ち上げられた新型コロナウイルス治療薬パクスロビドの製造を開始した。
人類が宇宙に建設した最初の工場がここにあります。しかも無人工場です!先週、この衛星はマスク氏のスペー...
マスク氏がxAI設立を正式発表！清華大学の卒業生がGoogle + OpenAIチームに参加し、宇宙の究極の答えを解読
マスク氏の野望がついに暴露される！反 AI 戦士は独自の AI を作成し、X ユニバースに新しいメン...
従来の連合学習が異種混在の課題に直面したときは、これらのパーソナライズされた連合学習アルゴリズムを試してみてください。
この記事では、パーソナライズされた連合学習に関する 3 つの記事を厳選して詳細に分析します。従来の機...
開発者が武器をアップグレードするために推奨される 5 つの機械学習フレームワーク
業界ではよく知られているデータサイエンスのウェブサイトである KDnuggests は昨日、4 月の...
仕事の未来: 2030 年までに消滅する仕事はどれでしょうか?
[[397136]]自動化と人工知能が急速に進歩する時代において、2030年までに仕事は消滅するで...
AIを活用して、ナスダックは金融業界向けのSaaSプロバイダーに変革したいと考えている
ナスダックがAIGCに対して強気であることは疑いの余地がない。 Nasdaq の CIO 兼 CTO...
新しいエッジAI手法であるTinyMLは、超低消費電力でエッジデバイス上で機械学習を実行します。
人工知能 (AI) はクラウドからエッジへと急速に移行しており、ますます小型の IoT デバイスに導...