Retrieval-Augmented Layout Transformer for Content-Aware Layout Generation
Daichi Horita, Naoto Inoue, Kotaro Kikuchi, Kota Yamaguchi, Kiyoharu Aizawa
IEEE/CVF Computer Vision and Pattern Recognition Conference (CVPR) 2024

初めに

今回のインターンでは、商品画像やバナーのような何かしらのコンテンツがあるキャンバス上にレイアウトを生成する問題、つまり、コンテンツ考慮型レイアウト生成（Content-aware Layout Generation）に取り組みました。レイアウト生成は見出しやキャッチコピーのような要素を自動で配置する技術であり、商品画像やバナーなどのグラフィックデザインの制作を大幅に効率化することが期待されています。例えば、「極予測AI」においてバナークリエイティブの自動生成への応用が期待されています。

図1は本問題の入力と出力の関係を示しています。具体的には、入力された画像中にバウンディングボックスとしてレイアウトを生成する問題です。レイアウトは位置情報に加え、テキストやロゴや下地を示すようなクラス情報も持ちます。要約すると、レイアウトの位置とクラスの情報を画像入力から生成する問題になります。本論文では、検索拡張型生成を用いた手法を提案し本問題に取り組みました。

図1: 提案手法の概要

提案手法

本問題には多くの既存研究がありますが、全て単一の学習型生成モデルに依存しており、一度学習した知識を用いてレイアウト生成を行います。しかし、本課題には学習に十分なデータが存在せず学習効率性が悪い問題や、安定した学習を行える生成モデルの構築が不十分な問題があります。

本研究では、クリエイターが作品を創る時に実際の例を参照するような創作方法に触発され、実際のレイアウトを見ながら生成を行う生成モデルの構築に取り組みました。具体的には、自己回帰モデル型Transformerを利用した生成モデルを構築し、検索拡張型生成（Retrieval Augmented Generation、RAG）を組み込んだ手法であるRetrieval Augmented Layout Transformer（RALF）を提案しました。この手法は既存の生成モデルに容易に組み込み学習を行える利点を持ちます。図2はRALFのネットワークアーキテクチャを示しています。

図2: RALFのアーキテクチャ

提案手法であるRALFは、主にエンコーダ・デコーダ型Transformerを用いた生成モデルと、実サンプルをヒントとして与える検索拡張の2つで構築されます。検索拡張のための実例を取得するために、入力画像とデータベースのサンプル間で画像特徴量の類似度を計算し、似た類似度を持つ画像はレイアウトも近しいだろうと仮定しています。そこで、類似度の高い画像が持つレイアウト情報をLayout encoderに入力し、TransformerデコーダであるLayout decoderのCross-attention層へと入力します。

実験

図3は検索拡張を用いない場合（Autoreg Baseline）と用いた場合（RALF）の比較を行っています。横軸は訓練データサンプル数を示し、縦軸はFréchet inception distance（FID）を示しています。低いスコアが良いパフォーマンスを示します。この結果から、RALFは学習効率性を向上させ、どの訓練サンプル数においても高い性能を達成することを示しています。

図3: 検索拡張の有無による性能の比較

次に、生成時に使う検索結果の数と性能の関係を検証しました。図4は横軸が実例数を示し、縦軸にFIDを示す検証結果を示しています。この結果から、１つでも実例を見るとFIDにおける性能が向上することがわかります。

図4: 拡張する実例数の変更による性能の比較

実際の生成例を図5に示します。Kは実例数を示しています。K=1では実例と同じようなレイアウトが生成されているのに対し、K=16ではより多様なレイアウトが生成されていることがわかります。つまり、実例数が極端に少ないとコピーをするような生成方法となりますが、実例数が多いことによって実例を見ながらの生成が可能になります。その結果、テキストとその下地のような関係性もきれいに生成できるようになります。一方で、実例をコピーをすることと、実例に忠実度の高い生成ができることは、どちらもFID上では良い結果をもたらす問題があります。この問題を解決し、検索拡張型生成を正しく評価するためには新たな評価指標を考えていくべきであり、この重要な問題は今後の研究コミュニティへと託します。

図5: 検索拡張するサンプル数を変えた時の生成結果の比較

おわりに

本研究では、検索拡張型生成を組み込んだ手法であるRetrieval Augmented Layout Transformer（RALF）を提案しました。この技術はグラフィックデザインの制作を大幅に効率化することが期待されています。詳細はぜひ論文を確認してみてください。

PR

堀田さんのメンターを担当した CyberAgent AI Lab 研究員の 井上 直人です。私たちのグループではグラフィックデザインの自動生成・制作支援・理解に関する技術に主に取り組んでいます。これらの技術は本記事で扱ったレイアウトだけでなく、画像、テキスト、各要素に対する細かな属性 (例: 文字のフォントや色) などを同時に扱う非常に挑戦的な課題であり、近年の言語や画像生成の基盤モデルをフル活用してもなお解けたとはいえない様々な課題が存在します。このような研究に興味を持たれた方はぜひ私たちに声をかけてみてください、一緒に研究しましょう。AI Labでは博士課程の学生を対象にリサーチインターンシップを募集しています。また、フルタイムのポジションも各種募集中です。

LayoutDM: Discrete Diffusion Model for Controllable Layout Generation 
Naoto Inoue, Kotaro Kikuchi, Edgar Simo-Serra, Mayu Otani, Kota Yamaguchi

はじめに

レイアウト生成は、コンテンツ生成のために「どこに」「何の要素を」配置すべきかのパターンを提示する基盤技術であり、バナーやスライド、ポスターなどといったグラフィックデザインの生成への応用が期待されています。近年の研究では実際にデザインを行なっていく上で大事な、ユーザの大まかで多様な指示に忠実に生成する「制御可能」な生成に着目した設定が多く提案されてきました（各設定の詳細に関しては昨年のサーベイブログ「レイアウト生成の研究紹介」をご覧ください）。いくつかの設定例を図1に示します。我々の研究は各設定に特化したニューラルネットワークを学習する従来手法と違い、全設定の生成を単一モデルで実現しました。

図1: LayoutDMがカバーする、制御可能な生成の設定例。Refinement はnoisyな観測が得られる時にレイアウトを微調整するタスク。

提案手法: LayoutDM

LayoutDMの要点を説明します。レイアウト情報は位置とカテゴリの情報を要素数個分持ちますが、図2のようにこれらを全て離散変数として表現し一次元の配列のようにみなします。拡散モデルは連続変数用のモデル (例: [1]) が有名ですがLayoutDMは離散変数用のモデル [2] をベースにしており、順過程では事前に定められたスケジュールで徐々にデータにノイズを加えていきます（実際には変数値がランダムなトークンに入れ替わったり、特殊なトークンに入れ替わったりします。）。逆過程では、現在わかっている情報を手掛かりに、より自然なレイアウトを推定することを繰り返して自然なレイアウトを生成していきます。逆過程は実際にはニューラルネットワークで表現され、事前にレイアウトのデータセットを用いて学習されます。テスト時のみ、我々は逆過程の各ステップにおいて、ネットワークの予測をユーザ指示によって補正することで（図2の赤字部分）、生成を制御可能にします。色々な指示の種類がありますが、それらが全てmasking と logit adjustment という2種類の方法で補正として表現出来るのが興味深い点です。

図２: LayoutDMの概要。初期レイアウトと実際のレイアウトの間の順過程（右→左）・逆過程（左→右）が表示されている。各ステップでは上部にそのステップでのレイアウト、下部にそのレイアウトを表現する離散変数の一次元配列を表示している。 M は BERT [3] などで有名な mask token という特殊トークンを表している。

そもそもどうやって位置情報を離散変数にするのか、変数にノイズを加えるスケジュール、逆過程をモデリングするニューラルネットワーク構造、既存手法との違いといった詳細情報はぜひ論文をご覧ください。

実験結果

実験では、提案手法が既存の様々な設定の生成問題において、タスク特化型のモデルに近い、もしくは同等の生成クオリティを実現することを定性・定量的に確認しました。その例を図3に示します。実際のレイアウトとの類似度に加え、左右が揃っているか，不必要に要素同士が重なっていないかなどの観点からもLayoutDMが良い生成をしていると考えられます。

図3: ユーザ入力が与えられた時の生成結果の比較。Realは実際のレイアウト。左はRico [4]というMobile UIデータセットでの、右は PubLayNet [5] という論文のデータセットでの結果。C→S+P はカテゴリが与えられた時に位置とサイズを当てる設定。C+S→P はカテゴリとサイズが与えられた時に位置を当てる設定。Completionは幾つかの要素がわかっている時に残りを埋める設定。

LayoutDMは拡散モデルベースなので、生成にかけるステップ数は調整が可能で、生成の質と速度のトレードオフ関係を調整することができます。図4では、カテゴリとサイズ情報が入力として与えられた時にレイアウトを生成するタスクにおいて、様々な手法の生成の質と速度を比較したグラフです。提案手法であるLayoutDMが概ねベストであることがわかります。

図4: 推論ステップ数を変化させた時の精度とのトレードオフ（Category + Size → Position）。FIDは低い方が良い生成結果であり，点・線が左下に行くほど良いモデルであることを表す。

おわりに

本研究では拡散モデルをベースにした、制御性の高いレイアウト生成モデルを提案しました。副次的な入力 (例: バナーの背景画像) も考慮に入れたレイアウト生成、画像やテキスト、詳細なスタイリング情報 (例: フォント) も含めた生成など、様々な拡張が考えられます。弊社では博士課程の学生を対象にリサーチインターンシップを募集しています。このような研究に興味を持たれた方はぜひ私たちに声をかけてみてください、一緒に研究しましょう。

参考文献

[1] Ho et al., “Denoising diffusion probabilistic models”, In NeurIPS, 2020.

[2] Austin et al., “structured denoising diffusion models in discrete state-spaces”, In NeurIPS, 2021

[3] Devlin et al., “Bert: Pre-training of deep bidirectional transformers for language understanding”, In NAACL, 2019.

[4] Deka et al., “Rico: A mobile app dataset for building data-driven design applications.”, In UIST, 2017.

[5] Zhong et al., “PubLayNet: largest dataset ever for document layout analysis.”, In ICDAR, 2019.

Towards Flexible Multi-modal Document Models
Naoto Inoue, Kotaro Kikuchi, Edgar Simo-Serra, Mayu Otani, Kota Yamaguchi

はじめに

バナーやスライド、ポスターなどといったグラフィックデザインは、多くの場合オーサリングツール (例: Photoshop) 上で制作され、画像・テキストとそれに対する多種多様な装飾のメタデータ集合としてデータが保持されています。皆さんがデザインを編集する時、完成形にいきなり辿り着く事はおそらく非常に稀であり、大半の時間は作業中のデザインに対し、編集を加えて良ければ採用し、しっくりこなければ遡ってやり直す、というプロセスを繰り返すことになると思います。本研究ではこのプロセスをサポートするために、編集案を提示する機械学習モデルを提案しました。図1に示すように、提案モデルは作業中のデザインのマルチモーダルな情報を入力とし、レイヤーの配置、画像の当てはめ、細かなテキストスタイリングなど様々なタスクを行うことを目標としています。

図1: 提案手法で解くことが出来る、ベクターグラフィックドキュメント生成タスクの例。

提案手法: flexible document model (FlexDM)

このようなモデルを作るにあたって難しい点は2点あります。(i) デザインに含まれる変数の多様性: フォントサイズのような1次元で表現できる属性から画像やテキストのような高次元データまで、連続変数もあれば離散変数もあり、各要素あたりの属性数もそれなりに多いです。(ii) タスクの多様性: デザインの編集工程をステップ毎に見ていくと，実に多様な入出力対を扱っています。それぞれの状況に特化したモデルを作るのは非現実的です。

問題を解くための鍵となるデータ構造を図2の左側に示します。それぞれの要素の各属性を固定長の特徴量で表現すれば、グラフィックデザインは要素数 × 属性数個の特徴量ベクトルの配列とみなすことが出来ます。一番のポイントは、我々が扱いたいタスクの多くが実はこのデータ構造上では特徴量学習の文脈で頻出の「穴埋め学習」（例: 画像 [1] / テキスト [2] ）とみなせることです。図2の右側のように、出力してほしい部分に [MASK] トークンを置き，ネットワークは周辺文脈情報からこの部分を予測します。様々な入出力パターンがこのマスキングパターンの切り替えで表現できます。

図2 左: 本研究で取り扱うデータ構造 (上) と その見た目及びレイアウトを描画したもの (下)。各要素が取り得ない属性 (例: 画像要素のフォント属性) は [NULL] を用いて埋める。簡単のために幾つかの属性をまとめて表記している (例: Position は実際には位置とサイズの4変数。) 右: 生成タスクとそれをどう穴埋め問題の枠組みで表現するかの例。

実験結果

提案手法で様々なタスクを解いた結果の例を図3に示します。グラフィックデザインには画像やテキストが最大十個程度存在しており、同時生成は技術的に挑戦的すぎるため、画像やテキストは事前に CLIP [3] で符号化して比較的低次な特徴量として扱っています。 提案モデルによって様々なデザイン過程がモデリングできることがわかります。我々はさらに既存研究で扱われていた幾つかのタスクにおいて、提案モデルがタスク特化モデルに近いパフォーマンスを示すことを定量的に確認しました。詳細についてはぜひ論文をご覧ください。

図3: FlexDMのCrelloデータセット [4] における予測結果の例。[MASK] トークンは入力側では グレーの塗り (画像)、ダミー文字列 (テキスト)、デフォルト値（その他特徴、例えばテキストの色やフォント）などで表されている。POS predictionは位置情報以外の全ての要素がわかっていて位置を当てるタスク。画像・テキストは予測された特徴量から素材データベース内で最近傍検索することで得た素材を表示して最終的な予測結果を可視化している。

おわりに

本研究では、デザイナのグラフィクス編集工程を模した機械学習モデルを提案・検証して一定の成果を得ました。提案手法は性能に関してはまだまだ発展途上で、画像・テキストの埋め込みに頼らない完全なend-to-end生成、より良いモデルやより大きなデータセットの構築、要素の有無よりも複雑な指示による編集 (例: 曖昧なヒントや言語指示)、など、様々な拡張が考えられます。弊社では博士課程の学生を対象にリサーチインターンシップを募集しています。このような研究に興味を持たれた方はぜひ私たちに声をかけてみてください、一緒に研究しましょう。

参考文献

[1] Devlin et al., “Bert: Pre-training of deep bidirectional transformers for language understanding”, In NAACL, 2019.

[2] He et al., “Masked Autoencoders Are Scalable Vision Learners”, In CVPR, 2022.

[3] Radford et al., “Learning transferable visual models from natural language supervision”, In ICML, 2021.

[4] Kota Yamaguchi, “CanvasVAE: Learning to Generate Vector Graphic Documents”, In ICCV, 2021.