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では博士課程の学生を対象にリサーチインターンシップを募集しています。また、フルタイムのポジションも各種募集中です。

この記事では私がAI Labのリサーチインターンで取り組んだ顔交換(Face-Swapping)の研究やAI Labでのインターン生活について紹介します。

インターンで取り組んだ研究について

初めに

今回のインターンでは、顔交換(Face-Swapping)という画像生成の問題に取り組みました。顔交換は与えられたターゲット人物画像に対して、その表情や背景、髪型など(これらを属性という)を維持しながら、顔のアイデンティティだけをソース人物画像の顔のアイデンティティで置き換えるタスクです。顔交換の技術は映像制作やバーチャルアバターなどの娯楽用途のほか、顔の非匿名化などのプライバシー保護のための技術としても近年需要が高まっています。

顔交換は既に多くの既存研究がありますが、既存法ではソース画像の属性情報が生成画像に漏れ出てしまうことがあるということが経験的にわかっていました(図1)。本研究では、この問題が顔交換で広く使われている顔認識モデル(ArcFace)にあることを突き止め、顔認識モデルを顔交換用に再設計した新しいエンコーダ(BlendFace)を用いて顔交換モデルを訓練することで、この問題を解決しました。

この研究成果はコンピュータビジョン分野の難関国際会議の一つであるICCV2023に採択されています。

BlendFace: Re-designing Identity Encoders for Face-Swapping
Kaede Shiohara, Xingchao Yang, Takafumi Taketomi
IEEE/CVF International Conference on Computer Vision (ICCV) 2023

既存研究の課題と提案法

なぜ既存手法で属性情報の漏れが起きているのかを解明するため、顔認識モデルを分析してみます。顔認識モデルは同一人物のさまざまなシーンの画像が同じ埋め込みになるように訓練されており、その特徴を使って人物識別を行います。人はさまざまなシーンにおいて似たような髪型や肌の色をしているため、それらの情報も個人の特徴として埋め込まれます。ここで、図2の左側に示すように、ある人物の画像(アンカー画像)と、同一人物の別シーンの画像(赤)、異なる人物の画像(青)、異なる人物の顔を簡単な画像処理によって同一人物に置き換えた画像(黄)の4つを用意して、アンカー画像とのアイデンティティ類似度を測定しました(横軸は類似度、縦軸は件数)。

この図からわかるように、既存の顔認識モデルは置き換えた画像(黄)の類似度が本人の別シーンの画像(赤)との類似度よりも低くなっています。つまり、顔認識モデルは髪型や肌の色の情報が類似度に影響しているということが統計的にわかりました。

顔交換モデルに戻ると、これはソース画像と生成画像の顔認識モデルの特徴量によるアイデンティティ類似度を近づけようとした時に、髪型や肌の色までもを過剰に近づけさせるということを意味しています。これにより冒頭で示したような属性の漏れが発生します。

本研究ではこの問題を解決するために、属性情報が交換された画像(黄)も本人であると認識されるように属性情報を交換した画像を訓練データに用いて顔認識モデルを訓練し直しました。その結果が図2の右側で、属性情報を交換した画像(黄)の類似度が属性情報を交換していない画像(赤)の類似度に極めて近く分布していることが確認できます。このような顔認識モデルを使って顔交換モデルを訓練することで、属性の漏れがない顔交換モデルを実現できることが予想されます。顔を交換した画像(ブレンド画像)を用いて顔認識モデルを訓練することから本手法をBlendFaceと名付けています。

実際にBlendFaceを用いた顔交換モデルと既存法を比べた結果が図3です。ソース画像とターゲット画像の属性が大きく離れている場合に、属性情報の漏れによって顔の内外で不連続な領域が生じてしまっているのに対し、提案法では一貫性のある顔交換が行えていることが確認できました。詳細はぜひ原論文を確認してみてください。

サイバーエージェントでのインターンについて

インターンの参加経緯

応募当時は博士課程が始まった直後だったため就職活動は意識していませんでした。サイバーエージェントAI Labの博士インターンがアツいらしいという割とぼんやりとしたイメージと、インターンで大きな成果を生み出したいという圧倒的モチベーションがあり応募しました。他社の研究開発のインターンとも迷いましたが、自分の所属研究室のOBOGの方が複数人AI Labに勤めているということもあってサイバーエージェントを選びました。

研究テーマについて

修士課程の時にディープフェイクの検出の研究をやっていたので、広告のためのアバター生成を研究しているGraphicsチームにて、顔の生成に関する研究を提案しました。このように募集テーマから選ぶだけではなく、自分でテーマを提案できるのもAI Labのインターンの利点です。

インターン生活

サイバーエージェントAI Labの博士インターンでは2ヶ月間、正社員の方と同様にフルタイムで研究開発に取り組みます。自分の場合は週に1度のメンター・チームリーダーとの進捗報告ミーティング以外は黙々と実装や調査・実験を繰り返していました。そのため、社員の方やインターン生と昼食を食べるのが良い息抜きになりました。また、Graphicsチームでは週に1度カジュアルミーティングという、研究だけではなく生活等の話題を持ち寄って話す会があり、社員の方の多様な私生活やワークライフバランスについて聞くことができたのは面白かったです。

私の研究については、持ち込みテーマではありますが顔の生成については今まで研究として取り組んだことがなかったので、既存法のコードを見て理解するところから始めました。結果として2ヶ月では国際会議に投稿するほどの成果を出すことができませんでしたが、この期間に色々な実験を行ってじっくりと基礎を固めることができたのが後の国際会議採択に繋がったと感じています。

インターンを通して特に印象に残っているのはAI Labの非常に整備された環境です。社内GPUサーバなどのインフラ管理の部門がAI Labとは別に存在していたり、PCの社内ソフトのセットアップでわからないことがあった時にすぐに対応していただけるサポートデスクがあったりと、会社としての強みというのを存分に感じました。また、渋谷駅直結のスクランブルスクエアにオフィスがあるので、通いやすい、オフィスが綺麗という精神衛生上の利点や、飲み物飲み放題、割安の弁当がオフィス内で販売されているなどの間接的な経済的支援もあり、国内有数の働きやすい研究組織であること間違い無いでしょう。

インターン後の生活

インターンが終了してからは、論文投稿に向けて具体的に目標を立てて研究を進めていきました。当初は11月に投稿締切のCVPR2023に向けて動いていましたが、実験が間に合わず、納得のいかないものを投稿せざるを得なくなってしまい、その結果リジェクトされてしまいました。その後、大幅な修正を加えてICCV2023(3月投稿締切)に投稿し無事採択されました。

リサーチインターンに参加してみて

サイバーエージェントAI Labでのインターンは、国内トップレベルの研究者に囲まれながら研究に取り組める非常に刺激的な体験でした。社員の方はもちろんのこと、周りのインターン生も優秀な方ばかりで、モチベーティブな環境で研究に集中することができました。

特に私の場合は、自身の専門(コンピュータビジョン)とは少しだけ異なるコンピュータグラフィックスのチームを希望して所属させていただいたため、初めて知ることが多く非常に学びが多かったです。

優れた環境とメンターやチームリーダーの手厚いサポートのもとで難関国際会議への論文投稿、採択に繋げることができ、非常に良い経験になりました。
もし参加を迷われている方は一度応募してみてはいかがでしょうか。

Multimodal Color Recommendation in Vector Graphic Documents
Qianru Qiu, Xueting Wang, Mayu Otani

はじめに

色は人々の印象に影響を与える重要なデザイン要素です。多くのデザイナーは、色の選択の際にカラーパレットを参考として利用します。広告クリエイティブには、 写真、イラスト、テキストなど多様なデザイン素材が使用され、それらへの適切な配色は難しいことがあります。色の選択には、デザイン中の既存の色情報だけではなく、テキスト情報も重要な要素となります。いくつかのデザイン例を図１に示しています。今回の研究は主にクリエイティブデザインに向けたマルチパレットの色推薦モデルを提案しました。

図１：テキスト内容と指定色に基づいて推薦された配色のデザイン例

配色推薦タスク

配色は色の組み合わせであり、カラーパレットやカラーシームとも呼ばれます。配色推薦タスクは、カラーパレット補完（Color palette completion）とフルパレット生成（Full palette generation）の二つのタスクに分けられます。カラーパレット補完は、広告クリエイティブのような様々なデザイン素材に対して、指定された色とテキストに基づいて他の色を推薦するものです。その例は図２に示しています。最近の研究は、色の調和性のみを考慮して色を推薦しており、テキスト情報の考慮はまだ十分ではありません（詳細は我々のWACV2023での採択論文[1]を参照）。フルパレット生成は、テキストに応じた完全なカラーパレットを生成するタスクです。その例は図３に示しています。従来の手法では、テキスト情報に基づいて画像用の単一パレットを生成していますが、学習データの量が小さいため、複雑なテキスト情報を表現する能力が制限されています。

図２：カラーパレット補完の例

図３：フルパレット生成の例

提案手法

本研究は、色とテキスト情報を組み込むためのMultimodal masked color modelを提案しました。この手法は図４と図５に示しています。このアプローチでは、まず既存のデザインから各要素のカラーパレットとテキスト情報を抽出します。ここでは、明度を用いて色を並び替えます。テキストに関しては言語と画像の基盤モデルCLIPに基づいて特徴量を抽出します。次に、色とテキストの埋め込みベクトルを抽出し、Attentionネットワークの入力としています。最後は、マスクされた色を予測するモデルをトレーニングします。

図４：色とテキストの特徴の抽出

図５：Multimodal masked color modelの概要

実験結果

カラーパレット補完の評価実験では、Crello-v2のデータセットを使いました。予測された色と参照色の一致度と正しく予測された色の分布に対して定量的な評価を実施しました。その結果、我々の方法は従来技術より高い精度を示すことがわかりました。また、テキスト情報を予測に取り入れたモデルは色のみを参照するモデルよりも優れており、明度に基づいて色を順序付けることで従来の面積を用いた順序付けよりも良い結果を示しました。図６では、元デザインと我々の提案手法、従来手法、ランダムに推薦された配色を使用したデザイン例を比較しています。デザイナーと一般被験者を含むユーザースタディにおいては、我々の方法による配色を用いたデザインがプロのデザイナーによるデザインと同程度に評価されました。

図６：カラーパレット補完の結果の比較。（a）は元デザイン。（b）は元デザインから抽出されたカラーパレット（マークは変換したい色）。（c）は提案手法による配色を用いたデザイン。（d）は従来技術[1]による配色を用いたデザイン。（e）はランダムに配色されたデザイン。

キーワードからパレット全体を生成する実験では、Palette-And-Textデータセットを使いました。図６には、元のパレットと、我々の提案手法および従来手法TPN[2]で生成されたパレットが示されています。結果として、我々の手法で生成されたパレットは、色の多様性や元パレットとの類似性の点で優れていることが確認されました。

図７：テキスト内容に基づくパレット生成の結果の比較。上段は元パレット、中段は従来技術[2]で生成されたパレット、下段は我々の手法で生成されたパレット。

おわりに

本研究では、クリエイティブ制作のため、テキストと色を条件とした配色推薦モデルを提案しました。この提案手法は、カラーパレット補完とキーワードからのパレット生成という二つの色推薦タスクに適用可能です。このような研究に興味をお持ちの方は、ぜひ採用ページをご参照ください。

参考文献
[1] Qiu et al., “Color recommendation for vector graphic documents based on multi-palette representation”, In WACV, 2023.
[2] Bahng et al., “Coloring with words: Guiding image colorization through text-based palette generation”, In ECCV, 2018.

画像生成の良さはどうやって評価する？

最近は高品質な画像生成AIが発表されて、世間でも非常に注目されています。研究でもここ数年、大量の論文が出版されています。ですが新しい画像生成モデルが次々と開発されている一方で、そのモデルを評価する方法はまだまだ発展途上です。

生成された画像の性能を測る方法として、研究では自動評価指標が主に使われています。例えば一般的な画像生成でよく使われるFID（Fréchet inception distance）は、生成された画像の集合と本物の画像の集合をある特徴空間に埋め込み、その空間でそれぞれの分布がどれだけ近いかを測定しています。FIDは多くの研究で採用されていますが、欠点も多く報告されています。例えば、人の知覚としては軽微な変化に過剰に反応したりするなど、FIDにおいて良いモデルが人にとって必ずしも良いとは言えないことが知られています。

また画像とテキストの内容がどの程度正確に対応しているかを判定することも、まだ難しい点があります。最近は大規模な画像とテキストのペアデータから、画像とテキストの対応づけを可能とする強力なモデルが発表されていますが、十分に細かい内容まで正確に扱うのはまだ難しいところがあります。特にここ最近は画像生成モデルの性能がどんどん上がってきているので、生成された内容の正確性を評価しようと思うと、細かい対応まで考慮した評価が必要になってくると考えられます。

そこで今回の研究では、あらためて人による画像生成の評価に取り組みました。人は画像とテキストを高いレベルで理解することができるので、自動評価では見落とされていたことがわかるかもしれません。また人による評価ラベルを収集すれば、自動評価指標と人の判断のズレを分析することで自動評価指標自体の評価にも使えるなど、自動評価の改良にとっても有益です。

人によるText-to-Image生成評価実験の現状

これまでの研究でも人を使った評価実験は実施されてきました。ですが、この分野として共有された評価方法は確立されていません。そのため、論文がそれぞれみんな違う方法で画像の品質を評価しており、いったいどうやって評価したらいいのかわかりにくい状態になっています。

この研究ではまず主要なコンピュータビジョンの会議で出版されたText-to-Imageに関する論文など37本を調査しました。結果見えてきた現状の人手評価における主な課題は以下の２点です。

1. 実験の詳細報告が不十分
2. 収集されたデータの品質をチェックしていない

まず実験詳細の不透明性についてですが、例えば、一つのサンプルに対して評価したアノテータの数などはデータの信頼性を判断する上で重要な項目なのですが、ほとんどの論文でこの人数は明記されていません。また実際のアノテーションタスクで使われたインターフェースなども公開されていないことが多いです。

また、データ収集方法を正しく設計しないと、同じサンプルに対するアノテータの回答がバラバラになったり、間違った回答を誘発してしまいます。そのような問題を検知するために、アノテータの間の一致率をチェックするなど、収集したデータの品質をチェックすることは実験の信頼性を確かめる上で重要な手順です。しかし、調査した論文の中でそのような分析、特にアノテータ間の一致率を報告している論文はありませんでした。

人による評価実験方法の共有

このような現状をふまえて、今回の研究ではクラウドソーシングを使って評価実験をする標準的な方法を実装し、今後の研究でも使えるように整備することを目指しました。また分野として結果報告のやり方にも問題があることがわかったので、報告文のサンプルなど、今後の評価がやりやすくなるようなリソースを作ることにしました。

この研究では特に新しい評価方法の提案などはしていませんが、実験的に適切な評価方法の設計を探索しました。その過程については論文を参照ください。

自動評価と人による評価

実験ではいくつかの画像生成モデルを使って画像を生成し、（１）画像が本物に見えるか、また（２）入力キャプションの内容を正確に反映しているか、の２点について人手評価したデータを収集しました。そして自動評価指標の評価結果と比較しました。

まず主要な自動評価指標であるFIDの良さと、人が画像を本物らしいと判断するかどうかはあまり一致していないことが確認されました。このような傾向は従来の研究でも多く指摘されています。

もう一つの指標としてCLIPScoreと比較しました。CLIPScoreは、画像のキャプション生成のための指標として提案されましたが、最近では画像生成でも、キャプションと画像の意味的な類似度を計測するために使われるようになっています。この指標についても、やはり人の感覚とは異なる結果になることがわかりました。さらに本物の画像とキャプションのペアよりも、生成された画像との類似度の方が高く評価されていることも確認されました。少なくとも、より良いモデルができたとしても、その改善幅をCLIPScoreで適切に評価することはできなさそうです。やはり自動評価指標のみに頼ることはまだ難しいと言えるでしょう。

キャプションに対応する本物の画像よりも、生成された画像の方が高いCLIPScoreを達成している例。テキストとの対応がより正確というわけではなさそうです。

人による評価のこれから

今回はクラウドソーシングを利用してText-to-Image生成を評価をする標準的な方法を整備しましたが、まだまだ改善の余地が残されています。たとえば、信頼性のある結果を得るにはそれなりの量のデータを収集する必要があるのですが、その結果、一回の評価実験にかかる費用は高額になりがちです。アノテーションインターフェースの改善や評価をするデータの選出方法を工夫することで、この費用を抑えることはできると思います。今回の実験方法はオープンソースにする予定なので、今後画像生成コミュニティで改善していくことができれば理想的です。

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.

Generative Colorization of Structured Mobile Web Pages [code & dataset]
Kotaro Kikuchi, Naoto Inoue, Mayu Otani, Edgar Simo-Serra, Kota Yamaguchi

はじめに

色彩は、Webページの視覚コミュニケーションにおいて重要な役割を担っており、閲覧者の感情やアクセシビリティに影響を与えることが知られています [1]。WebページはHTML文書とCSSで主に構成され、その色付けはデザインに関する知識や経験を要する専門性の高いタスクです。テキストのコントラストや全体的なカラーバランス、色の意味的な使い分けといった暗黙的なデザイン要件を満たしつつ、Webページが与える印象などのクライアントの要望を満たす視覚表現を探索することは難しいです。本研究では、機械学習によって既存のWebページから色付けパターンを学習し、Webページに自動的に色を付与する方法について提案しています。自動的な色付けによって、デザイン案の効率的な探索やWebデザインの自動化といった応用が期待されます。

図1: Webページ色付けのコンセプト図

色付けタスクといえば画像着色？

それでは、Webページの色付けを機械学習の問題に落とし込むにはどうすれば良いでしょうか？コンピュータビジョンやコンピュータグラフィックスの分野では、白黒画像を入力として色付き画像を出力する画像着色というタスクがあり、これまでに多くの手法が検討されてきました [2]。Webページの色付けを画像着色の問題として考えることもできますが、入力の白黒画像を必要とすること、出力画像の輝度が入力によって制限されること、CSSで利用するために出力から色を抽出する必要があること、という点から、Webページの色付けには不向きであると考えます。本研究では、Webページ上の要素の内容と階層的な構造が与えられ、各要素のカラースタイル（CSSにおける”color”と”background-color”）を生成する問題としてWebページの色付けを定式化しています。これにより、生成時に白黒画像を必要とすることなく、生成結果をCSSで直接利用することが可能になります。

図2: Webページのデータ構造と色付けタスクの入出力

Webページ色付けの新たなデータセット

上述の定式化は新しい試みであり、手法の検討や評価に利用できるデータセットはありませんでした。そこで我々は、表現学習のために収集されたモバイルWebページのデータセット [3]をベースとして、新たなデータセットを構築しました。実際のWebページは非常に複雑で、冗長な要素を多く含むため、そのまま利用することは学習効率の観点から現実的ではありません。我々は図3のような単純化処理によって、機械学習で現実的に扱える複雑さのデータにWebページを変換しています。

図3: 単純化処理前後のDOM要素の可視化とスクリーンショット。ファーストビューに貢献しない要素を取り除くことで、要素数は平均して1656から61に削減される。

画像着色との比較

このタスクを解くために、Conditional VAEに基づく手法を提案しています。提案手法の詳細については割愛しますが、要素間の階層関係を捉えるためにメッセージパッシングを適用している点が主な特徴です。最近の画像着色手法 [4]と提案手法の比較を図4に示します。画像着色手法は、対応するピクセル数の少ない要素から色を抽出することに失敗しています。また、どちらの着色結果も背景が緑がかった薄い灰色をしており、入力画像に制限されて一定の輝度の色しか生成できていないことがわかります。一方、提案手法は出力の色空間が制限されないため、より多様なカラースタイルを生成することに成功しています。

図4: カラースタイル生成の定性的結果。一番左は白黒のスクリーンショットを着色した画像であり、その他は生成したカラースタイルが適用されたWebページのスクリーンショットである。

おわりに

本研究では、Webページの自動スタイリングに向けた第一歩として色付けタスクに取り組みました。問題の定式化やデータセットの構築、最近の技術動向を踏まえた手法の提案など、初期的な検討は済ませましたが、冒頭で挙げた難しさの解決には至っておらず、まだまだ多くの仕事を必要としています。生成結果の品質にも改善の余地があります。例えば、同じスタイルが適用される要素グループを推定し、そのグループに対してスタイルを生成するなど、CSSセレクターの仕組みに沿ったモデリングを施すことで、より一貫性のある生成が可能になるかもしれません。弊社では博士課程の学生を対象にリサーチインターンシップを募集しております。こうした研究にご興味のある方はぜひ一緒に研究しましょう。

参考文献

[1] Dianne Cyr, Milena Head, and Hector Larios. “Colour appeal in website design within and across cultures: A multi-method evaluation.” International journal of human-computer studies 68.1-2 (2010): 1-21.
[2] Saeed Anwar, et al. “Image colorization: A survey and dataset.” arXiv preprint arXiv:2008.10774 (2020).
[3] Alexandra Hotti, et al. “The Klarna Product Page Dataset: A Realistic Benchmark for Web Representation Learning.” arXiv preprint arXiv:2111.02168 (2021).
[4] Manoj Kumar, Dirk Weissenborn, and Nal Kalchbrenner. “Colorization transformer.” International Conference on Learning Representations (2021).

これまで様々な深層生成モデル(図1)が提案されてきましたが, その中でも特に, GANとVAEによるアプローチは広く注目を集めてきました. 高解像度な画像生成手法としてはGANが黎明期から注目を集めていましたが, 近年の高解像度な画像生成についての論文ではVAEに基づいたモデルもよく目にします. 今回は, 近年の生成モデルの動向について, VQVAEを中心に調べたので情報共有できればと思います. 

図１　著名な深層生成モデル(link).

VAE

VAEはLatent code(図1におけるz)をサンプリングし, 復号モデルにより復号することで, 学習データの分布に近い画像を生成可能です. GANとは異なり尤度を明示的にモデリングしており, 多様なデータを生成する上で利点があることが知られています. 一方で, 画像の生成結果がぼやけやすい傾向にあります. (図2, VAEとGANの比較[2])  

図2 VAEとGAN, 並びにVAE/GAN(VAEとGANの組み合わせ)の結果例[2].

VQVAE

VQVAE[1]はVAEベースのアプローチにおいて, 高解像度な画像を生成する上で近年頻繁に活用されている手法です. Patchを離散的に符号化し, 自己回帰モデルの生成と組み合わせることで, 多様で高解像度な画像生成を可能にしています. 

Latent codeの離散化とPatchについての符号化

VQVAEはLatent codeに一様分布の離散表現を仮定し, Patchについての符号化, 復号を行うモデルです(図3). VQVAEにおける符号化結果はPatchごとに分かれており, 従来のVAEのように単一のLatent codeをサンプリングし, そのまま復号することはできません. そこで, VQVAEでは自己回帰モデルを用いてPatch集合をサンプリングします. 

図3 VQVAEの概要.

自己回帰モデルによるPatch集合のサンプリング

自己回帰モデルによる生成手法はNLP分野をはじめとした幅広い分野で使われている生成手法です. 自己回帰モデルによる生成においては, 既知の時系列情報を入力として未知の時系列情報の尤度を推定し, この尤度から時系列情報のサンプリングをします. サンプリングと尤度の更新を繰り返し, 徐々に全体の時系列情報を生成します. 画像分野における自己回帰モデルとしてはPixelCNN[3]が著名です. 連結しているピクセルを時系列情報とみなし, 左上のピクセルから一列ごとに図4のような順(raster scan order)でサンプリングを行い画像を生成します. 

VQVAEでは, PixelCNNを活用し符号化された画像のPatchの集合を生成します. Patchをバラバラにサンプリングすれば学習データに存在しない組み合わせが生じやすくなりますが, 自己回帰モデルによりこのような不整合が生じる問題を緩和しています. 

また, VQVAEのLatent codeは離散表現になっていますが, このLatent codeの表現がPixelCNNの学習の安定化に役立っています. 連続表現では, 入力の条件を無視しデータの最頻値を出力するように学習してしまう問題(posterior collapse)が発生することが知られていましたが, VQVAEでは離散表現を活用することにより, このような問題を回避し, 自己回帰モデルを高次元な空間で適用可能にしています. また, Top-kサンプリングやTop-pサンプリングをはじめとしたカテゴリカルなデータのサンプリングが可能になっています. 

図4 PixelCNN概要.

VQVAE-2

VQVAEにおける離散的なLatent codeに画像の情報を圧縮する方法は, ImageNetのような高解像度かつ大規模な画像データにおいてもスケールすることが報告され(VQVAE-2[4]), 大きく注目を集めました. VQVAE-2[4]はVQVAEについて階層的なLatent codeの活用を加え, 当時のGANベースのアプローチ[5]に匹敵するクオリティの画像を生成しています. また, GANベースのアプローチと比較して, 特定のカテゴリにおいても多様性のある画像が生成可能であることが示されています(図5). 

図5 VQVAE-2[4]とBigGAN[5]の比較例.

Patch集合のサンプリング方法

VQVAEの登場により, 高解像度な画像をPatch単位で符号化, 復号できるようになりましたが, Patchの集合のサンプリングは自己回帰モデルに依存しています. 自己回帰モデルは時系列情報を順繰りに生成するので, 推論とサンプリングを繰り返す必要があり, 誤差が蓄積する問題と生成時の計算コストが大きくなる問題があります. VQVAEにおいてもこのような自己回帰モデル由来のデメリットがあります. 近年はPatch集合の生成方法についての研究が注目を集めているように感じられるので, こちらについても紹介します. 

VQGAN

VQVAEではPixel CNNを活用していましたが, 近年の時系列データの生成においてはTransformerが標準的な手法になりました. VQGAN[6]ではPixelCNNの代わりにTransformerを活用することを提案しています. 精度, 速度ともに画像生成のために設計されたPixel CNNを上回っていることを示しました. また, VQGANではGANも併用しています. GANを併用することにより, 一定の範囲内であればPatchの解像度を圧縮しても高解像度な画像が復元可能であることを示しました. 

また, VQGANではサンプリングの順序に着目した実験も行っています. 著者らは背景から画像を生成することになるであろう”Spiral in”(外側から中心にサンプリング)が最もよくなると予測していましたが, 結果としては”Row major”(raster scan order)が優れていたと報告しています(図6).  原因は不明ですが学習時にランダムな位置のPatchをマスキングしているのでその影響がでているのではないかと考えられます.

図6 VQGANによるサンプリングパターンと生成画像の変化

サンプリング方法の派生として, サンプリング回数を減らし高速化を狙うために, 複数のパッチを同時にサンプリングするアプローチがあります. Image-GPT[7]では列ごとにサンプリングする方法（図7a）, Cogview2[8]においては, Inpaint+斜めにサンプリングしていく方法(図7b)を提案しています.

図7 その他のサンプリングパターン例.

VQDiffusion

VQDiffusion[9]においては, Diffusionモデルを活用してPatch集合のサンプリングを行う方法を提案しています(図8). Diffusionモデルは, VAE同様尤度を最大化する生成モデルですが, VAEとは異なり符号化に学習が不要です. そのため, 符号化に失敗する恐れを考慮せずに, 自己回帰モデルによるサンプリングをDiffusionモデルによるサンプリングに置き換えることが可能です.

VQDiffusionにおいては, 従来のDiffusionモデルをMasked Language Model(MLM)に見立て, Patch集合のサンプリングに適用しています(図8). 自己回帰モデル同様, 繰り返し推論する必要がありますが, 生成順が存在せずサンプリングによる誤差の蓄積の心配がありません. また, 自己回帰モデルと比較して, 速度と生成クオリティについて良いトレードオフを達成しています.

図8 VQDiffusionによるPatch集合のサンプリング

まとめと今後の展望

今回のブログではVQVAEを中心とした生成モデルの動向というタイトルでVQVAEを中心とした近年の生成モデルの動向について紹介しました. VQVAEの登場により, VAEベースのアプローチでも高解像度な画像が生成可能になりましたが, 依然として計算速度の問題などが残っています. クリエイティブ領域ではインタラクティブな画像生成によるアプリケーションなども考えられるので, 生成速度についての研究には今後も注目したいです. 現状のVQVAEベースの手法では, Diffusionモデルと組み合わせた方法が良い性能と速度のトレードオフを達成していますが, Diffusionモデルは実装が複雑であるといった問題もあります. Cogview2のようなサンプリング方法を工夫するようなアプローチの進展にも注目していきたいです. できれば, 従来のVAEのようにワンショットでLatent codeを復号可能で有望なモデルが出てきて欲しいところですが, まだしばらくは難しそうな状況かと思います. 近年は自己教師あり学習などにおいて, 符号化の研究も広く注目を集めているので, こちらの進展にも注目しておきたいです.

[1]Neural Discrete Representation Learning, Van et al, NIPS, 2017

[2]Autoencoding beyond pixels using a learned similarity metric, Boesen et al., ICML 2016

[3]Conditional Image Generation with PixelCNN Decoders, Van et al, NIPS 2016

[4]Generating Diverse High-Fidelity Images with VQ-VAE-2, Razavi et al, Advances in neural information processing systems, 2019

[5]Large Scale GAN Training for High Fidelity Natural Image Synthesis, Brock et al., ICLR 2019

[6]Taming Transformers for High-Resolution Image Synthesis, Esser et al, CVPR 2021

[7]Generative Pretraining from Pixels, ICML 2020

[8]CogView2: Faster and Better Text-to-Image Generation via Hierarchical Transformers, Ding et al., arXiv preprint arXiv:2106.06866

[9]Vector Quantized Diffusion Model for Text-to-Image Synthesis, Gu et al, CVPR 2022

はじめに

AI Labの井上です．AI Labでは広告表現，特にバナー画像の自動生成技術の開発に取り組んでいます．バナー画像は一枚のラスタ画像として最終的には表現されますが，生成過程ではベクタ形式のデータを取り扱い，画像・テキスト・装飾など多種多様なレイヤーを適切に配置することを考えなければなりません．今回はその基礎をなすレイアウト生成について，ニューラルネットワークを用いた最新の研究を紹介していきたいと思います．

レイアウト生成の問題設定とその代表的な手法

ここから紹介する研究の大半で生成するレイアウトのデータ形式を記しておきます．表記は LayoutGAN [1] に準拠します．レイアウトとは \(N\) 個の要素から構成された集合 \( \{(p_{1}, \theta_{1}), \ldots, (p_{N}, \theta_{N})\}\) と表現されます．各要素は位置情報を表す \( \theta \) とカテゴリ情報を表す \( p \) からなります． \( p \) はデータのドメインに依存します．例えばPubLayNet [2] という論文データセットのレイアウトであれば「文章」「表」「図」などがカテゴリとして挙げられます．

生成の手法は大きく分けて conditional / unconditional generation の２つに分けられます．前者では要素数・メタデータ・要素間の関係性などの条件を入力に，その条件を満たしたレイアウトを生成します．後者ではそのような制約はありません．

Unconditional generation

レイアウトは本質的には集合 (set) ですが，適当に順序をつけて列 (sequence) とみなすことで，自然言語処理分野で目まぐるしく発展している文章生成技術を (ほぼ) そのまま用いることが出来ます．特に，Transformerベースの生成が非常に良く用いられています．

LayoutTransformer [3] では，Transformerを用いた自己回帰型モデルを用いてレイアウトの各要素を一つづつ順番に生成します．元々のテキスト生成モデルではカテゴリ変数のシーケンス生成を対象にしているので，位置情報を離散化することでレイアウト生成に応用しています．生成順は固定（例: raster scan order）ですが，良いクオリティの生成が実現されています．論文では，デザイン系のデータだけでなく，自然画像中のオブジェクト配置や3D物体生成等でも全く同じ原理で生成できる事を示しています．

LayoutTransformerのアーキテクチャ（図は元論文から引用）

Variational Transformer [4] では，生成モデルの一つである Variational AutoEncoder を，Transformerを使うことでレイアウト生成に応用しています．Jiang et al., [5] では，レイアウトが多くの場合は木構造で元々表現されていた（例：webページのDOM tree）ことに注目して，下図に示すようにまず大まかな領域レイアウトを生成したあとで各領域の要素配置パターンを生成する，二段階の手法が用いられています．

Jiang et al., [5] のアーキテクチャ（図は元論文から引用）

Conditional generation

Unconditional generation は大まかなデータ分布を理解するのには役立ちますが，ユーザが所望するようなレイアウトの実現にはそのまま使えません．conditional generation では様々な制約を入力としてレイアウトの生成を行います．

最初に行われたのは，カテゴリ情報をネットワークの入力に与える生成です．

LayoutGAN [1]では，推定されたレイアウトの良さをGenerative Adversarial Network (GAN) によって判別することで，ニューラルネットワークを用いたレイアウトのconditional generationを初めて実現しました．

LayoutGANのアーキテクチャ（図は元論文からの引用）

カテゴリ情報以上の情報を入力に追加することでよりユーザの意図により忠実な生成を行う研究も出てきています．

NDN [6] では，要素やキャンバス全体の位置やサイズの関係を明示的に入力として取り込んだ上での生成に取り組んでいます．Graph Neural Networkによって要素間で情報をやり取り，refinement moduleで人間の目に違和感を生じさせがちなoverlapやalignmentといった特徴を補正，などといった工夫が多く取り込まれています．

NDNのコンセプト（図は元論文からの引用）

Attribute-conditioned Layout GAN [7] では読み順・要素の大きさの比・要素の縦横比といった比較的直感的・もしくは定義から自動的に定めることのできる細かな要素を追加入力とすることに取り組み，自然な見た目のバナーレイアウトを生成することに成功しました．

CLG-LO [8] では [7] と対照的に，学習済みの条件付き生成モデルがある時に，post-optimizationとして前述の関係性を満たすような生成モデルのlatent codeを探す探索問題とする新しい方向性の研究が行われています．

課題

ここまで議論してきたように色々な技術が開発されていますが，まだまだ多くの課題が存在します

解の多様性

生成されたサンプルは，実物と見間違うクオリティのものもありますが，[9] によるとconditional generationでは同じ条件を入力にレイアウトを複数生成すると，本来色々な種類が出るべきところなのに似すぎてしまう，等の問題が報告されています．多様な生成を実現する手法やそれを可視化するための評価指標の開発等が求められています．

レイアウトの定義

本稿ではレイアウト情報は位置とカテゴリ情報のみを扱っていますが，例えばバナー画像の自動生成を目標とするなら，そこに実際に挿入される画像・テキストといった情報やフォント等の細かなスタイリング情報も同時に考慮できることが望ましいです．CanvasVAE [10] はその方向で先駆的な研究をしていますが，マルチモーダル情報のモデリングは難しいことが同時に示唆されています．また，[5] のように構造化されたデータ形式を扱うことも，webページのようなより複雑なレイアウトを考えていく上では必須になってくるものと考えられます．

おわりに

レイアウト生成というと画像や文章の生成に比べると非常に簡単だというイメージを持たれるかもしれませんが，実際には本記事で議論してきたように様々な難しさや研究の方向性が存在します．Autoregressive Flow や Diffusion Model など最新の生成モデルと組み合わせたり，GPTに代表されるような万能型のマルチタスクモデルを構築するのも面白いかもしれません．このようなトピックに興味のある方は，ぜひ私たちに声をかけてみてください．

参考文献

[1] LayoutGAN: Generating graphic layouts with wireframe discriminators, Li et al., ICLR 2019.

[2] PubLayNet: largest dataset ever for document layout analysis, Xu et al., ICDAR 2019.

[3] Layout Generation and Completion With Self-Attention, Gupta et al., ICCV 2021.

[4] Variational transformer networks for layout generation, Arroyo et al., CVPR 2021.

[5] Coarse-to-Fine Generative Modeling for Graphic Layouts, Jiang et al., AAAI 2022.

[6] Neural Design Network: Graphic Layout Generation with Constraints, Lee et al., ECCV 2020.

[7] Attribute-conditioned Layout GAN for Automatic Graphic Design, Li et al., TVCG 2020.

[8] Constrained Graphic Layout Generation via Latent Optimization, Kikuchi et al., ACMMM 2021.

[9] Diverse Multimedia Layout Generation with Multi Choice Learning, Nguyen et al., ACMMM 2021.

[10] CanvasVAE: Learning to Generate Vector Graphic Documents, Yamaguchi et al., ICCV 2021.

27th Annual Conference on Intelligent User Interfaces (IUI2022)は、2022年3月21日（月）〜3月25日（金）に開催されました。今年はZoomやDiscordを活用したオンライン形式で開催されました。

本記事は、その参加報告となります。

開催概要

IUIはユーザインタフェースに関する国際会議で、主にヒューマンコンピュータインタラクション（HCI）と人工知能（AI）の融合点に位置する研究コミュニティのための会議です。2022年は全体で44の国から253件の投稿があり、62件のPapersが採択されました（採択率25%）。地域別の著者の割合は下図のようになっており、North Americaが半分以上を占めていました。また、26件のPoster and demosが採択されました。参加登録者は386名（America: 44%, Europe: 36%, Asia: 14%, Middle East: 5%, Other: 2%）でした。

(図は会議のOpening Ceremonyより引用)

会議のTechnical Programとして11セッションがあり、非常に幅広い研究トピックを扱っていました。さらに、Intelligent Healthy UI / Adaptive and Personalised Explainable UI / Human-AI Co-Creation with Generative Models / Humanize / Transparency and Explanations in Smart Systems / SocializeというWorkshopが設けられていました。また、Poster and demosセッションがあり、AI Labからは邱がこのセッションで研究発表をしました。

(図は会議のOpening Ceremonyより引用)

AI Labからの発表

AI Labからはクリエイティブ制作に向けた配色推薦に関する研究を発表しました。

本研究は「An Intelligent Color Recommendation Tool for Landing Page Design」というタイトルで、広告ランディングページ（LP）における広告効果を考慮した配色推薦と色変換に関する研究です。広告LPとは、検索結果や広告などを経由して訪問者が最初にアクセスし、商品の注文や問い合わせなどのアクション(Conversion) へと誘導するページです。本研究では、BERTのようなモデルを適用して、広告効果予測を伴う色推薦モデルを学習します。広告LPの色変換システムを通じて、元のカラーパレットに応じた推薦色を広告効果に基づいて取得し、推薦された色から新たなカラーパレットを生成してLPの配色を変換します。

オンラインマーケティングにおいて、フォームへの誘導や商品のカートへの追加などの行動を喚起するCall-to-Action (CTA)は、Conversionを最大化させる上で重要です。本研究では、ケーススタディとして、CTAエリアの色を調整するシステムを実装し、システムの使いやすさと色推薦及び色変換の有効性についてプロのデザイナーに評価してもらいました。結果として、ほとんどのデザイナーが推薦された配色案に使える色があると評価しました。

また発表の際には、Zoomを通して多くの方からご質問やコメントをいただきました。貴重なご意見を頂きありがとうございました！

関連研究・興味深かった研究

私が発表を聴講した／論文を読んだ研究の中で、特に興味深かった研究発表を紹介します。

Colorbo: Envisioned Mandala Coloring through Human-AI Collaboration

– Eunseo Kim, Jeongmin Hong, Hyuna Lee, Minsam Ko

(図は元論文より引用)

この論文は、Colorboというマンダラ塗り絵を着色するため、人間とAIのコラボレーションに基づくインタラクティブシステムを提案しました。ユーザーは進行中の色付きのマンダラを表示し、Colorboはユーザーの画像のパターンと色の組み合わせを分析して残りの領域を塗りつぶします。次に、Colorboは、ユーザーが着色している​​紙に完全なマンダラ画像を投影し、ユーザーはColorboからの画像に基づいて結果を想像することによって着色を続けます。

この研究では、上図のColor Selectionについて、自然言語処理のfastTextと同様の方法で色埋め込みモデルをトレーニングします。ここで、私たちの研究同様に、色の表現学習の問題では、色を単語として、 カラーパレットは文として扱います。この研究は、一つのカラーパレットでマンダラ画像全体の配色を表現しますが、私たちの研究では、複数のデザイン要素から抽出された複数のカラーパレットにおける色を分散表現に変換する点で異なります。

Interpretable Aesthetic Analysis Model for Intelligent Photography Guidance Systems

– Xiaoran Wu

(図は元論文より引用)

この論文は、ハイパーネットワークを使用して、各美的属性スコアの組み合わせとして全体的な美的評価を学習しています。さらに、属性スコア推定器に注意機構（attention mechanism）を導入しています。ユーザーが入力された写真のどの部分/要素が推定スコアにつながるかを正確に把握し、配色調和性や対称性などの詳細な評価、説明、提案を備えた写真ガイダンスシステムを次のように設計しています。

(図は元論文より引用)

Sponsor Session: Intelligent User Interfaces @ Meta Reality Labs

今回のプラチナスポンサー企業として、Meta Reality Labsから研究紹介がありました。ここでは、簡単に研究トピックをまとめます。主に、Intelligent InputとIntelligent Interfacesという二つのテーマがありました。

• Intelligent input

Wearable sensing

表面での2Dタップ検出できる手首に装着した音響センシングデバイス

Acustico: Surface Tap Detection and Localization using Wrist-based Acoustic TDOA Sensing. Gong et al. UIST 2020 (Paper, Video)

ElectroRing

指のピンチや指先と皮膚のタッチとリリースを検出できるリングベースの入力デバイス

ElectroRing: Subtle Pinch and Touch Detection with a Ring. Wolf et al. CHI 2021 (Paper, Video)

• Intelligent Interfaces

Intent to interact using gaze dynamics

VRでユーザーの視線データからユーザーの意図（アイテム選択）を予測するインタフェース

Towards gaze-based prediction of the intent to interact in virtual reality. John et al. ETRA 2021 (Paper)

Predicting Focus of Visual Attention

視線のダイナミックスに基づく将来の視線ターゲットを予測するモデル

Predicting visual attention using the hidden structure in eye-gaze dynamics. Lengyal et al. CHI 2021 workshop (Paper)

所感：

Metaverseは最近話題になっています。AR/VR分野におけるウェアラブルセンサーとユーザーインターフェースは非常に重要です。Meta Reality Labsは次世代のコンピューティング・プラットフォームを構築していくにあたり、ハードウェアとソフトウェアの研究開発をうまく進めています。VR/ARゴーグル市場を活性化させているといった報道も見られますが、手や体の動きを認識して機器の操作に利用するジェスチャー認識技術では、現時点で指でポイントとピンチしかサポートしているジェスチャーがまだ少ないと感じています。入力系システムの進化が期待されますが、メタバース事業を支えるVRやARの取り組みが軌道に乗る日はまだ遠そうです。

おわりに

IUIには今回初めて参加しましたが、人間とAIの協調に関する課題及びそのアプリケーションやツールの発表が多い印象でした。さらに、AIモデルの予測を人間に理解させるというモチベーションから、Explainable AIという説明可能なAIに関わる研究も多かったと感じました。また、企業からの研究発表ではその企業の技術的ビジョンが伺えるようなものもあり参考になりました。

AI Labでも基礎的な内容から実応用を強く意識したものまで幅広い研究プロジェクトに取り組んでいます。ご興味ある方はぜひ採用ページもご覧ください。