論文読み会 / Automatic Video Creation From a Web Page

社内論文読み会、PaperFridayでの発表資料です

Transcript

1. Automatic Video Creation From a Web Page 21/01/18 PaperFriday, Yuki Iwazaki@AI Lab
2. 2 Point: Web PageのURLを入力にend-to-endで動画を生成する URL2Videoを提案 UIST 2020: acceptance rate 20.3% Authors: Peggy Chi, Zheng Sun, Katrina Panovich, Irfan Essa - Google Research 選定理由: - 最近Landing Pageの研究開発をしている - デザイナー向け広告作成支援ツールとしてのUIや 広告のためのPage内要素の議論などが参考になりそう
3. Introduction 3
4. 広告主は自社サイトを持っている 4
5. 広告主は自社サイトを持っている ◂ logo, text, brand colorなど 一貫したデザインテーマが含ま れている ◂ LPが魅力的でもページの 素材が動画広告などに 再利用される例は少ない ??? 5
6. 広告動画制作は大変 ◂ 素材の適切な配置、 ブランドイメージ、 クロスプラットフォーム対応 ◂ 配信先毎にアスペクト比や 動画長に独自の基準がある https://www.kwm.co.jp/blog/video-ads/ 6
7. URL2Videoを提案 7
8. Related Works 8
9. Design Understanding ◂ 初期 ◂ WebPageから広告キーワード抽出 [Yih, 06] ◂ リタゲのためのWebデザイン [Kumar, 11] ◂ 最近 ◂ コンテンツ階層と意味理解によるMobileUI改善 [Deka, 17] ◂ ユーザの感情反応やSaliencyによる広告デザイン [Yuan, 20] URL2Videoは既存のWebPageから動画生成する デザイナー支援が目的 9
10. Computational Video Editing ◂ 動画制作プロセスは段階的でコストが高い ◂ 動画編集は対話動画, Interview, Sportsなど各ドメインに特化 ◂ ユーザー嗜好に基づいた動画要約 [Ogata, 04] ◂ 絵コンテ生成 [Goldman, 06] ◂ 最も近い研究はWikipediaやBlogを動画で要約 [Kalender, 18] ◂ 動画テンプレートにコンテンツマッチングで配置 URL2Videoは動画長やアス比制約を満たした上で WebContentsの集合が与えられた動画構成に注目 10
11. Learning From Designers 11
12. Formative Study プロのWebデザイナー6名を募集 右表のWeb Page6つを1人1p割振 Google Slidesで編集可能な形で 素材とスクショを提供 10秒, 16:9の動画の絵コンテを制限時間60 分でGoogle Slidesで完結させるように制 作してもらう 絵コンテはshotを順序付けし、秒単位の timestampを付与 素材の並び替えやtrim, text編集はOK 14
13. Formative Study 右表、シーン数とデザイナーが動画内で 使った素材の詳細 各動画では平均5つのscene(各2秒)と 7shotが使用 Web Pageと同じカラーパターンを維持し つつテキストや画像を入れ替えるため 1sceneに1~複数shotが含まれる 15
14. Formative Study 素材の密集を避け, 90%以上のsceneが主要な 画像と見出し1つずつで構成 長いテキストは可読性のため2shotに分割も WebPageの視覚的な流れと素材構成を維持 - aは上からlogo, メイン画像の流れ - bは素材blockを3つの連続シーンに ブランディングのためページから色やフォントを Pickupし、背景色や見出しに トリミングやリサイズは動画サイズに合わせて調 整 16
15. Design Guidelines 1. シンプルな情報提供 2. コンテンツの階層抽出 3. デザイン選択の変換 4. 時間配分の推論 5. ユーザレビュー 1)動画広告は短い時間でブランド・組織・サービスを宣伝するので、 情報過多にならないように重要なメッセージだけを含める 17
16. Design Guidelines 1. シンプルな情報提供 2. コンテンツの階層抽出 3. デザイン選択の変換 4. 時間配分の推論 5. ユーザレビュー 2)階層は情報の優先順位を示すので , Pageの素材の順序を考慮し たツールが望ましい 18
17. Design Guidelines 1. シンプルな情報提供 2. コンテンツの階層抽出 3. デザイン選択の変換 4. 時間配分の推論 5. ユーザレビュー 3)ブランドイメージを保つためにページデザインの色・画像・フォン トなどを抽出、動画に適用したい 19
18. Design Guidelines 1. シンプルな情報提供 2. コンテンツの階層抽出 3. デザイン選択の変換 4. 時間配分の提案 5. ユーザレビュー 4)短い動画長を考慮するとシーンを人で決めるのは困難なので素 材を考慮しタイムラインを提案してほしい 20
19. Design Guidelines 1. シンプルな情報提供 2. コンテンツの階層抽出 3. デザイン選択の変換 4. 時間配分の提案 5. ユーザレビュー 5)デザイナーが UIを通じてツールの出力を見ながら反復的に再生 成できる仕組み 21
20. Proposed Method 22
21. URL2Video Web Pageから重要な素材とスタイルを 抽出し, そのデザインを動画に変換するパ イプラインを提案 本ツールを使った制作の流れを紹介 23
22. Web Asset Analysis a. 動画のソースとなる Web PageのURLを指定 ブラウザ内蔵型で , rendering size(view port)を指定 24
23. Web Asset Analysis b. レンダリング開始 , Web Pageの構造とスクショを取得 素材グループの候補が灰色枠で表示 各グループはテキスト・画像・ CSSなどが抽出され , 属性に基づいて優先スコアを算出 25
24. Video Editing and Rendering a. UIで動画長, アス比等の制約を指定 26
25. Video Editing and Rendering c.入力を元に自動的に素材グループを選択 , 並び替え,絵コンテを 出力 タイムライン上の素材順、 各shotの素材の表示時間の両方を決定後 , mp4出力 27
26. User Authoring d.できた動画が再生できる cに戻り絵コンテの編集ができる . sceneの入替(c1)や 背景色などの素材グループ内の編集 (c2) アス比を1:1に変えてもすぐそのVersionの動画が生成できる 28
27. Automatic Video Editing 29
28. Asset Extraction and Scoring 1.素材重要度の高いHTMLタグを定義 - 見出し...<H1>-<H6> - 映像...<IMG>or <VIDEO> - 背景...CSSを1つ以上含むDOM 2.上記を1つ以上含むDOM N_majorを探索 3.各N_major_iに対しスクショとのoverlapが閾値以上なら 素材グループg_iを作成 4.含まれるNodeが重複, グラフ上で隣接している素材グ ループはマージし, 素材グループ候補Gを作成 5.各g_iに対し, html tagの種類・ページ上部からの順番 ・Box領域の3点で評価し, 優先スコアa_iを付与 - ページの先頭に近く存在感の大きい素材グループの スコアが高くなる Z個のNodeを含むDOMツリー 素材優先度の高い DOM Node 30
29. Constraint-Based Temporal Planning 時間制約とスコアの付いた素 材のリストから、視覚的な重要 度の総合スコアを 数理計画法として定式化 タイムラインの割当を決定する 制約充足ソルバを実装 31
30. Constraint-Based Temporal Planning 変数: d: 各素材グループg_iをタイムライン上で何秒表示させるかの時間 　　　　　　　　　Dの領域は [0, L], Lはユーザ指定の動画長 制約条件: d_i=0の場合はg_iは動画から除外 目的変数: 上記時間的制約を満たしながらG_iの以下のscoreを最大化 Gの表示時間の合計はLに等しい コンテンツ視認: 任意の素材グループG_sはd_min以上で再生 動的コンテンツ促進 ユーザが指定した素材グループは必ず含める 32
31. Constraint-Based Temporal Planning 変数: d: 各素材グループg_iをタイムライン上で何秒表示させるかの時間 　　　　　　　　　Dの領域は [0, L], Lはユーザ指定の動画長 制約条件: d_i=0の場合はg_iは動画から除外 目的変数: 上記時間的制約を満たしながらG_iの以下のscoreを最大化 Gの表示時間の合計はLに等しい コンテンツ視認: 任意の素材グループG_sはd_min以上で再生 動的コンテンツ促進 ユーザが指定した素材グループは必ず含める これにより優先度が加味された素材グループの Sequenceが完成 選ばれた各素材グループ G_sは動画長Lにマッピングされた時間 dを持つ この時間配分は次の Visual Planningフェーズで調整可能 33
32. Visual Planning 表示時間dが割り振られた素材グループG_sに対し、 テキストや画像にかかるデザインを提案 以下2つの目的がある 1. 各shotがシンプルな情報にまとまっている 2. 動画のデザインがソースページと一貫している 一連の動画を生成するための動的計画法として扱う 34
33. Visual Planning a. Content Selection ◂ (1)のため各shotには1つのメイン映像素材,1 つの非動画素材, 背景色レイヤーの最大3つ の要素が含まれるように制限 ◂ 時間d_sの各sceneについてg_sから上記を 満たすsubset g’_sを選ぶ 35
34. Visual Planning b. Graphical Layout ◂ (1)のため各shotには1つのメイン映像素材,1 つの非動画素材, 背景色レイヤーの最大3つ の要素が含まれるように制限 ◂ a.で選ばれたg’_sのレイアウトをテンプレート から決定 ◂ 36
35. Visual Planning b. Graphical Layout ◂ ソースページのオリジナルデザインも考慮 ◂ フル画像に見出し(下2つ), trim画像脇にtext(上) 37
36. Visual Planning c. Stylization ◂ フォント, サイズ, 配置などページから得られたテキスト素材のスタイルを適用 ◂ 読みやすさを加味し, 画像上でないテキストは色のコントラストを合わせる ◂ 視覚的なバランスのため最小・最大フォントサイズも定義 38
37. Visual Planning d. Timeline Adjustment ◂ 下記2番目のような情報の少ない素材を置き換える ◂ 動画長Lのため優先スコア最低の素材を短縮か削除 39
38. Visual Planning e. Animation ◂ 映像・テキストペアに対してタイムライン2番目の素材 を0.5秒遅らせる ◂ 短いテキストは単語単位でアニメーションを適用。長い タイトルはフレーズ単位 40
39. Implementation 41
40. Implementation - Pipeline - C++ - Page Analysis - 社内ツール - 数理最適化 - OR-Tools - 動画レンダラ - MediaPipe, OpenCV, FFMpeg - テキストレンダラ - HarfBuzz, Skia 42
41. Experiment 43
42. Dataset 50 Web Pages, 9 Categories ブランドや組織を表現している ユーザ入力や複雑なAnimeなし テキストや動画像で構成された視 覚的な構造を持つ 44
43. Methods 50 Pagesに対しURL2Videoで動画を生成 3/50のPageはアクセス制限でテキスト素材のみ 32/50はSVG or 他画像を1つ以上抽出するのにデザイナーの人 手を要した 選択されていないノードの追加や素材のマージなど, 各ページ平 均して5つの素材グループを修正(UI上で3-5min/page) Scoring -> Renderingまで平均1min 10/50はPageに応答がなくDOM検索ができず除外 45
44. Results - アス比16:9, 9:16, 1:1, 動画長10秒, 15秒を 制約条件とし1 Pageから6動画を生成 - 右表は, 本DatasetからRL2Videoが抽出した 素材と、10秒 16:9で出力した動画で使った素材レ イヤー数の統計 - 50 Web Pageから合計で823画像, 7動画, 4874Text素材を抽出 - 10秒動画の場合, 平均5scene, 17shotで構成 46
45. Results 47
46. Results 48
47. Results 49
48. User Evaluation 52
49. Study1: Designer Inspection 各ページ(p1-6)について精通者とそうでないデザイナー 2人でレビュー - 基礎調査で協力してくれたデザイナー 5/6人を参加費$15で30min招待, 以 前担当した絵コンテ(p1-6)の生成動画をレビュー - 更にソースページを知らないデザイナー 3人を60min招待, $25で1人2本ず つ動画(p1-6)をレビュー baseline - ロゴと最初の4つの主要なPage Contentのスクショからスコア関係なく2秒 ずつ表示させた動画(計10秒) URL2Video - 16:9, 9:16, 1:1で10秒, 16:9で15秒の4パターンの動画 Baselineは6p x 2で12本, URL2Videoは6p x 4で24本 53
50. Study1: Designer Inspection 各動画に対し以下の5段階評価 (Q1) この動画はわかりやすい (Q2) この動画は重要な情報を伝えている (Q3) この動画のメッセージが理解できる (Q4) 専門的にデザインされているように見える (Q5) 見ていて気持ちがいい (Q6) 動画のペースがちょうどいい 54
51. Study1: Designer Inspection 各動画に対し以下の5段階評価 (Q1) この動画はわかりやすい (Q2) この動画は重要な情報を伝えている (Q3) この動画のメッセージが理解できる (Q4) 専門的にデザインされているように見える (Q5) 見ていて気持ちがいい (Q6) 動画のペースがちょうどいい Baseline Proposed M=2 M=4 M=3 M=4 M=2 M=4 N=3 M=3 M=2 M=3 M=5 M=3 Q1, 2, 3, 6はbaselineを上回り高評価 55
52. Study1: Designer Inspection 各動画に対し以下の5段階評価 (Q1) この動画はわかりやすい (Q2) この動画は重要な情報を伝えている (Q3) この動画のメッセージが理解できる (Q4) 専門的にデザインされているように見える (Q5) 見ていて気持ちがいい (Q6) 動画のペースがちょうどいい Baseline Proposed M=2 M=4 M=3 M=4 M=2 M=4 N=3 M=3 M=2 M=3 M=5 M=3 Q4, Q5が課題. デザインループが回しづらい UIだった. テキストのスタイルやアニ メーションが不足していた 56
53. Study2: Audience Survey 本手法による動画とデザイナーの作品を一般人で比較 ◂ p1-p6に対応するbaselineB1-B6を基礎調査のGoogle Slidesを 元に作成(10秒, 16:9) ◂ 本手法によって作られた同制約の動画をC1-C6 ◂ 動画素材を使ったC7, C8を追加 ◂ 動画素材の効果を見るため ◂ 社内のメーリスを使いオンライン調査 ◂ B1-B6から3本, C1-C6から3本, C7-8から1本の計7本で1task ◂ シャッフルして各1回ずつ再生, 質問はStudy1の5段階, $はナシ 57
54. Study2: Audience Survey ◂ 58
55. Conclusion 59
56. Conclusion ◂ WebPageから素材を抽出し、短い動画に変換する手法を提案 ◂ アスペクト比と動画長のuser conditionと素材の優先スコアから 数理最適化により素材のシーケンスを算出、mp4化 ◂ モデルの出力を確認し、ユーザはパラメータを修正することでデザイン の洗練が可能 ◂ インタビューとオンライン評価を通じてデザイナーの動画広告制作をサ ポートできることを示した 60
57. Comment ◂ 動画の品質がソースページに大きく依存しそう ◂ 動画生成のような超次元をそのままモデリングせず、 デザインを説明変数に落とし込んで、数理最適化で解くところ が面白い ◂ デザイナーとのインタラクションによるHCI的なシステム改善 が興味深い ◂ デザインのモデリングは難しいのでデザイナーへの基礎 調査が有用 ◂ 日本の広告は複雑なので適用には工夫が必要 ◂ 社内メーリスでオンライン評価のボランティア集めよう 61
58. 62 Thanks! Any questions? You can find me at: ◂ @chck ◂ #times_chck ◂ iwazaki_yuki@cyberagent.co.jp