Slide 1

Slide 1 text

Automatic Video Creation From a Web Page 21/01/18 PaperFriday, Yuki Iwazaki@AI Lab

Slide 2

Slide 2 text

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内要素の議論などが参考になりそう

Slide 3

Slide 3 text

Introduction 3

Slide 4

Slide 4 text

広告主は自社サイトを持っている 4

Slide 5

Slide 5 text

広告主は自社サイトを持っている ◂ logo, text, brand colorなど一貫したデザインテーマが含まれている ◂ LPが魅力的でもページの素材が動画広告などに再利用される例は少ない ??? 5

Slide 6

Slide 6 text

広告動画制作は大変 ◂ 素材の適切な配置、ブランドイメージ、クロスプラットフォーム対応 ◂ 配信先毎にアスペクト比や動画長に独自の基準がある https://www.kwm.co.jp/blog/video-ads/ 6

Slide 7

Slide 7 text

URL2Videoを提案 7

Slide 8

Slide 8 text

Related Works 8

Slide 9

Slide 9 text

Design Understanding ◂ 初期 ◂ WebPageから広告キーワード抽出 [Yih, 06] ◂ リタゲのためのWebデザイン [Kumar, 11] ◂ 最近 ◂ コンテンツ階層と意味理解によるMobileUI改善 [Deka, 17] ◂ ユーザの感情反応やSaliencyによる広告デザイン [Yuan, 20] URL2Videoは既存のWebPageから動画生成するデザイナー支援が目的 9

Slide 10

Slide 10 text

Computational Video Editing ◂ 動画制作プロセスは段階的でコストが高い ◂ 動画編集は対話動画, Interview, Sportsなど各ドメインに特化 ◂ ユーザー嗜好に基づいた動画要約 [Ogata, 04] ◂ 絵コンテ生成 [Goldman, 06] ◂ 最も近い研究はWikipediaやBlogを動画で要約 [Kalender, 18] ◂ 動画テンプレートにコンテンツマッチングで配置 URL2Videoは動画長やアス比制約を満たした上で WebContentsの集合が与えられた動画構成に注目 10

Slide 11

Slide 11 text

Learning From Designers 11

Slide 12

Slide 12 text

Formative Study プロのWebデザイナー6名を募集右表のWeb Page6つを1人1p割振 Google Slidesで編集可能な形で素材とスクショを提供 10秒, 16:9の動画の絵コンテを制限時間60 分でGoogle Slidesで完結させるように制作してもらう絵コンテはshotを順序付けし、秒単位の timestampを付与素材の並び替えやtrim, text編集はOK 14

Slide 13

Slide 13 text

Formative Study 右表、シーン数とデザイナーが動画内で使った素材の詳細各動画では平均5つのscene(各2秒)と 7shotが使用 Web Pageと同じカラーパターンを維持しつつテキストや画像を入れ替えるため 1sceneに1~複数shotが含まれる 15

Slide 14

Slide 14 text

Formative Study 素材の密集を避け, 90%以上のsceneが主要な画像と見出し1つずつで構成長いテキストは可読性のため2shotに分割も WebPageの視覚的な流れと素材構成を維持 - aは上からlogo, メイン画像の流れ - bは素材blockを3つの連続シーンにブランディングのためページから色やフォントを Pickupし、背景色や見出しにトリミングやリサイズは動画サイズに合わせて調整 16

Slide 15

Slide 15 text

Design Guidelines 1. シンプルな情報提供 2. コンテンツの階層抽出 3. デザイン選択の変換 4. 時間配分の推論 5. ユーザレビュー 1)動画広告は短い時間でブランド・組織・サービスを宣伝するので、情報過多にならないように重要なメッセージだけを含める 17

Slide 16

Slide 16 text

Design Guidelines 1. シンプルな情報提供 2. コンテンツの階層抽出 3. デザイン選択の変換 4. 時間配分の推論 5. ユーザレビュー 2)階層は情報の優先順位を示すので , Pageの素材の順序を考慮したツールが望ましい 18

Slide 17

Slide 17 text

Design Guidelines 1. シンプルな情報提供 2. コンテンツの階層抽出 3. デザイン選択の変換 4. 時間配分の推論 5. ユーザレビュー 3)ブランドイメージを保つためにページデザインの色・画像・フォントなどを抽出、動画に適用したい 19

Slide 18

Slide 18 text

Design Guidelines 1. シンプルな情報提供 2. コンテンツの階層抽出 3. デザイン選択の変換 4. 時間配分の提案 5. ユーザレビュー 4)短い動画長を考慮するとシーンを人で決めるのは困難なので素材を考慮しタイムラインを提案してほしい 20

Slide 19

Slide 19 text

Design Guidelines 1. シンプルな情報提供 2. コンテンツの階層抽出 3. デザイン選択の変換 4. 時間配分の提案 5. ユーザレビュー 5)デザイナーが UIを通じてツールの出力を見ながら反復的に再生成できる仕組み 21

Slide 20

Slide 20 text

Proposed Method 22

Slide 21

Slide 21 text

URL2Video Web Pageから重要な素材とスタイルを抽出し, そのデザインを動画に変換するパイプラインを提案本ツールを使った制作の流れを紹介 23

Slide 22

Slide 22 text

Web Asset Analysis a. 動画のソースとなる Web PageのURLを指定ブラウザ内蔵型で , rendering size(view port)を指定 24

Slide 23

Slide 23 text

Web Asset Analysis b. レンダリング開始 , Web Pageの構造とスクショを取得素材グループの候補が灰色枠で表示各グループはテキスト・画像・ CSSなどが抽出され , 属性に基づいて優先スコアを算出 25

Slide 24

Slide 24 text

Video Editing and Rendering a. UIで動画長, アス比等の制約を指定 26

Slide 25

Slide 25 text

Video Editing and Rendering c.入力を元に自動的に素材グループを選択 , 並び替え,絵コンテを出力タイムライン上の素材順、各shotの素材の表示時間の両方を決定後 , mp4出力 27

Slide 26

Slide 26 text

User Authoring d.できた動画が再生できる cに戻り絵コンテの編集ができる . sceneの入替(c1)や背景色などの素材グループ内の編集 (c2) アス比を1:1に変えてもすぐそのVersionの動画が生成できる 28

Slide 27

Slide 27 text

Automatic Video Editing 29

Slide 28

Slide 28 text

Asset Extraction and Scoring 1.素材重要度の高いHTMLタグを定義 - 見出し...

-

- 映像...or - 背景...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

Slide 29

Slide 29 text

Constraint-Based Temporal Planning 時間制約とスコアの付いた素材のリストから、視覚的な重要度の総合スコアを数理計画法として定式化タイムラインの割当を決定する制約充足ソルバを実装 31

Slide 30

Slide 30 text

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Visual Planning 表示時間dが割り振られた素材グループG_sに対し、テキストや画像にかかるデザインを提案以下2つの目的がある 1. 各shotがシンプルな情報にまとまっている 2. 動画のデザインがソースページと一貫している一連の動画を生成するための動的計画法として扱う 34

Slide 33

Slide 33 text

Visual Planning a. Content Selection ◂ (1)のため各shotには1つのメイン映像素材,1 つの非動画素材, 背景色レイヤーの最大3つの要素が含まれるように制限 ◂ 時間d_sの各sceneについてg_sから上記を満たすsubset g’_sを選ぶ 35

Slide 34

Slide 34 text

Visual Planning b. Graphical Layout ◂ (1)のため各shotには1つのメイン映像素材,1 つの非動画素材, 背景色レイヤーの最大3つの要素が含まれるように制限 ◂ a.で選ばれたg’_sのレイアウトをテンプレートから決定 ◂ 36

Slide 35

Slide 35 text

Visual Planning b. Graphical Layout ◂ ソースページのオリジナルデザインも考慮 ◂ フル画像に見出し(下2つ), trim画像脇にtext(上) 37

Slide 36

Slide 36 text

Visual Planning c. Stylization ◂ フォント, サイズ, 配置などページから得られたテキスト素材のスタイルを適用 ◂ 読みやすさを加味し, 画像上でないテキストは色のコントラストを合わせる ◂ 視覚的なバランスのため最小・最大フォントサイズも定義 38

Slide 37

Slide 37 text

Visual Planning d. Timeline Adjustment ◂ 下記2番目のような情報の少ない素材を置き換える ◂ 動画長Lのため優先スコア最低の素材を短縮か削除 39

Slide 38

Slide 38 text

Visual Planning e. Animation ◂ 映像・テキストペアに対してタイムライン2番目の素材を0.5秒遅らせる ◂ 短いテキストは単語単位でアニメーションを適用。長いタイトルはフレーズ単位 40

Slide 39

Slide 39 text

Implementation 41

Slide 40

Slide 40 text

Implementation - Pipeline - C++ - Page Analysis - 社内ツール - 数理最適化 - OR-Tools - 動画レンダラ - MediaPipe, OpenCV, FFMpeg - テキストレンダラ - HarfBuzz, Skia 42

Slide 41

Slide 41 text

Experiment 43

Slide 42

Slide 42 text

Dataset 50 Web Pages, 9 Categories ブランドや組織を表現しているユーザ入力や複雑なAnimeなしテキストや動画像で構成された視覚的な構造を持つ 44

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Results 47

Slide 46

Slide 46 text

Results 48

Slide 47

Slide 47 text

Results 49

Slide 48

Slide 48 text

User Evaluation 52

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Study1: Designer Inspection 各動画に対し以下の5段階評価 (Q1) この動画はわかりやすい (Q2) この動画は重要な情報を伝えている (Q3) この動画のメッセージが理解できる (Q4) 専門的にデザインされているように見える (Q5) 見ていて気持ちがいい (Q6) 動画のペースがちょうどいい 54

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Study2: Audience Survey ◂ 58

Slide 55

Slide 55 text

Conclusion 59

Slide 56

Slide 56 text

Conclusion ◂ WebPageから素材を抽出し、短い動画に変換する手法を提案 ◂ アスペクト比と動画長のuser conditionと素材の優先スコアから数理最適化により素材のシーケンスを算出、mp4化 ◂ モデルの出力を確認し、ユーザはパラメータを修正することでデザインの洗練が可能 ◂ インタビューとオンライン評価を通じてデザイナーの動画広告制作をサポートできることを示した 60

Slide 57

Slide 57 text

Comment ◂ 動画の品質がソースページに大きく依存しそう ◂ 動画生成のような超次元をそのままモデリングせず、デザインを説明変数に落とし込んで、数理最適化で解くところが面白い ◂ デザイナーとのインタラクションによるHCI的なシステム改善が興味深い ◂ デザインのモデリングは難しいのでデザイナーへの基礎調査が有用 ◂ 日本の広告は複雑なので適用には工夫が必要 ◂ 社内メーリスでオンライン評価のボランティア集めよう 61

Slide 58

Slide 58 text

62 Thanks! Any questions? You can ﬁnd me at: ◂ @chck ◂ #times_chck ◂ [email protected]